订阅汇聚素材网Feed

ECMAScript5 新增API

ECMAScript5 给出了一系列新的API接口,这些接口在新的浏览器中大部分是被支持的,IE9,Chrome,FirFor都支持,也有少量API不是所有浏览器都支 持,以下内容仅介绍大部分被支持的API。利用新的API我们可以设计出非常靠谱的类,而且还能保持原有的javaScript的风格。

ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准最新修正。 与HTML5规范进程本质类似,ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。以下浏览器都可以良 好的支持ECMAScript5的行为了:Opera 11.60+、Internet Explorer 9+、Firefox 4+、Safari 5.1+、Chrome 13。其中目前来看,IE9不支持严谨模式,但IE10是支持的。

要查看下自己的浏览器是不是兼容ECMAScript5,可以查看这个ECMAScript 5 兼容性表表,其中还可以观察到其他浏览器的兼容情况。哎,苦逼的前端程序员,css有兼容性问题,js脚本也有兼容性问题,无语了。

Object.create(prototype, descriptors)

以指定的原型创建对象,并且可以(可选)的设置对象的属性

function Poker(style, title, value) {

this.Style = style;

this.Title = title;

this.Value = value;

}

var pokerA = Object.create(new Poker(“club”, “A”, 14));

alert(Poker.constructor); //function Function() { [native code] }

alert(new Poker().constructor); //function Poker(style, title, value) {

//            this.Style = style;

//            this.Title = title;

//            this.Value = value;

//        }

alert(Poker.constructor.prototype); //function Empty() {}

alert(Poker.prototype == new Poker().constructor.prototype); // true

alert(Poker.constructor.prototype == new Poker().constructor.prototype); // false

alert(new Poker().propertye); //undefined

alert(Poker.prototype == pokerA.constructor.prototype); //true

alert(Poker.constructor.prototype == pokerA.constructor.prototype); // false

alert(new Poker(“club”, “A”, 14).Value); //14

alert(pokerA.Value); //14


上面的代码写了一堆逻辑表达式,就是证明一件事情,用Object.create构造的对象和用构造函数构造的对象在结果上没有什么差异。用 Object.create的好处是原型链干净,网上有有给出了以下没有Object.create的浏览器的解决同样解决方案。以下代码不但说明了 Object.create的技术内幕,同时可以支持低版本的IE同样可以实现干净的原型。

if (typeof Object.create !== ‘function’) {

Object.create = function(o) {

function F() { }

F.prototype = o;

return new F();

};

}

function Poker(style, title, value) {

this.Style = style;

this.Title = title;

this.Value = value;

}

var pokerA = Object.create(new Poker(“club”, “A”, 14));

alert(Poker.constructor); //function Function() { [native code] }

alert(new Poker().constructor); //function Poker(style, title, value) {

//            this.Style = style;

//            this.Title = title;

//            this.Value = value;

//        }

alert(Poker.constructor.prototype); //function Empty() {}

alert(Poker.prototype == new Poker().constructor.prototype); // true

alert(Poker.constructor.prototype == new Poker().constructor.prototype); // false

alert(new Poker().propertye); //undefined

alert(Poker.prototype == pokerA.constructor.prototype); //true

alert(Poker.constructor.prototype == pokerA.constructor.prototype); // false

alert(new Poker(“club”, “A”, 14).Value); //14

alert(pokerA.Value); //14


Object.defineProperty(object, propertyname, descriptor)

对指定的对象的一个属性设置丰富的值控制

Object.defineProperties(object, descriptors)

对指定的对象的一组属性提供丰富的值控制

function setPokerState(poker, proValue) {

if (arguments[0] instanceof Poker) {

Object.defineProperty(arguments[0], //为一个对象设置一个属性

“State”, //属性名称是字符串

{//一组修饰对象

value: proValue, //值 默认是undefined

writable: true, //值是否只读 默认是false

enumerable: false, //值是否可以被枚举 默认false

configurable: true//属性是否可以被改说删除 默认false

}

)

}

}

var PokerA = Object.create(new Poker(“club”, “A”, 14));

setPokerState(PokerA, 5);

alert(PokerA.State);


如果我们需要对赋值或取值有更多出来,可以给定set和get函数,不过set/get不能和value、writable同时使用。

function setPokerState(poker, proValue) {

if (arguments[0] instanceof Poker) {

Object.defineProperty(arguments[0], //为一个对象设置一个属性

“State”, //属性名称是字符串

{//一组修饰对象

enumerable: false, //值是否可以被枚举 默认false

configurable: true, //属性是否可以被改说删除 默认false

set: function(x) {

this.state = x <= 5 ? x : 5;

},

get: function() {

return this.state;

}

}

)

}

}

var PokerA = Object.create(new Poker(“club”, “A”, 14));

PokerA.State=10;


如果我需要设置多个属性的话,请看下面代码演示

Object.defineProperties(

PokerA,

{

“backgroundImg”: {

value: “images\\common\\hide.png”,

enumerable: false, //不可以for 遍历

writable: false//只读

},

“forgroundImg”: {

value: “images\\spade\\K.png”,

enumerable: false, //不可以for 遍历

writable: false//只读

},

Image: {

get: function() {

return this.State == 0 ? this.backgroundImg : this.forgroundImg;

},

enumerable: true

}

}

);


如果要了解对象有哪些属性被定义了,可以使用以下

APIObject.getOwnPropertyDescriptor(object, propertyname)

返回属性的定义

Object.getOwnPropertyNames(object)

返回所有属性的名称,哪怕说是不能枚举的属性

下面是一个demo

alert(Object.getOwnPropertyNames(PokerA).length); //4

var names = Object.getOwnPropertyNames(PokerA);

for (var i = 0; i < names.length; i++) {

alert(names[i] + “\n” +

Object.getOwnPropertyDescriptor(PokerA, names[i])

);

}


可以约定对象不能再扩展,但属性的值可以改,也可以删除

Object.preventExtensions(object)

防止新的属性添加到对象

Object.isExtensible(object)

是否可添加属性到对象

alert(Object.isExtensible(PokerA)); //true

Object.preventExtensions(PokerA);

alert(Object.isExtensible(PokerA)); //false


需要再严一点控制,可以使用如下api

Object.seal(object)

不能添加和删除属性

Object.isSealed(object)

alert(Object.isSealed(PokerA)); //true

Object.seal(PokerA);

alert(Object.isSealed(PokerA)); //false


如果要再严一点,完全封死对象,可以

Object.freeze(object)

防止现有属性和属性值的修改,并防止新特性的添加。

Object.isFrozen(object)

最后如果想要得到对象原型,可以用

Object.getPrototypeOf(object)

关于object的就差不多上面这些了。然后看下ECMAScript5再其他对象上的扩展的一些静态成员

Array.isArray

啥意思不必说了

alert(Array.isArray([])); //true

alert(Array.isArray({})); //false


Array.IndexOf

Array.lastIndexOf

一看就是好东西呀,不解释了

alert([“Hello”, “javaScript”, “ECMAScript”, “HTML5″].indexOf(“javaScript”));//1

alert([“Hello”, “javaScript”, “ECMAScript”, “HTML5″].lastIndexOf(“javaScript”));//1


Array.every

对数组的每个元素进行一个callback的条件检查,查看是否存在有不符合条件的元素。类似linq的all

var arr1 = “Charles,Mark,Bill,Vincent,William,Joseph”.split(“,”);

alert(arr1.every(

function(item, index) {

return item.length < 5;

}

)

); //false

alert(arr1.every(

function(item, index) {

return item.length < 10;

}

)

)//true


Array.some

是判断数组有没有符合条件的元素,类似linq的any

var arr1 = “Charles,Mark,Bill,Vincent,William,Joseph”.split(“,”);

alert(arr1.some(

function(item, index) {

return item.length < 5;

}

)

); //true

alert(arr1.some(

function(item, index) {

return item.length < 10;

}

)

)//true


如果需要对每一个元素执行一段处理性的代码可以用

Array.forEach

var arr1 = “Charles,Mark,Bill,Vincent,William,Joseph”.split(“,”);

arr1.forEach(

function(item, index) {

if (index % 2 == 0) {

arr1[index] = “name:” + item;

}

}

);

arr1.forEach(

function(item, index) {

alert(item);

}

);


其实forEach最好是直接处理值,如果要改变数组最好用

Array.map

var arr1 = “Charles,Mark,Bill,Vincent,William,Joseph”.split(“,”);

var arr2 = arr1.map(

function(item, index) {

if (item.indexOf(“ll”) > -1) {

return item;

}

}

);

arr2.forEach(

function(item, index) {

alert(item);

}

);


如果是要过滤数组的话,可以用

Array.filter

var arr1 = “Charles,Mark,Bill,Vincent,William,Joseph”.split(“,”);

var arr2 = arr1.filter(

function(item, index) {

if (item.indexOf(“ll”) > -1) {

return true;

}

}

);

arr2.forEach(

function(item, index) {

alert(item);

}

);


如果要做叠加器处理可以用

Array.reduce

var arr1 = “Charles,Mark,Bill,Vincent,William,Joseph”.split(“,”);

var arr2 = arr1.reduce(

function(item, next) {

return item + “][” + next;

}

);

alert(“[” + arr2 + “]”);//[Charles][Mark][Bill][Vincent][William][Joseph]


还有一个反向处理

Array.reduceRight

var arr1 = “Charles,Mark,Bill,Vincent,William,Joseph”.split(“,”);

var arr2 = arr1.reduceRight(

function(item, next) {

return item + “][” + next;

}

);

alert(“[” + arr2 + “]”); //[Joseph][William][Vincent][Bill][Mark][Charles]


现在Array的处理都接近linq了!!!

Date().toJSON()

含义一眼看出,内置就是爽

alert(new Date().toJSON());

alert(new Date(2012, 11, 12).toJSON()); //2012-12-11T16:00:00.000Z


字符串给了一个trim,啥都没有好说了,你来晚了

alert(“[” + ”   Hello “.trim() + “]”); //[Hello]


总体来说,新的API还是很给力的啊

1 人Likes
  

文章转载请注明:ECMAScript5 新增API-汇聚素材网

本文固定链接:http://www.webhj.com/hj-2401.html  +复制链接

ECMAScript5 新增API:等您坐沙发呢!

发表评论

*

*

0 + 9

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍