ECMAScript5新JavaScript 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)

以指定的原型创建对象，并且可以（可选）的设置对象的属性

01	function Poker(style, title, value) {

02	this.Style = style;

03	this.Title = title;

04	this.Value = value;

05

}

06

07	var pokerA = Object.create(new Poker("club", "A", 14));

08

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

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

11	//            this.Style = style;

12	//            this.Title = title;

13	//            this.Value = value;

14	//        }

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

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

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

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

19

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

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

22	alert(new Poker("club", "A", 14).Value); //14

23	alert(pokerA.Value); //14

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

查看源码

打印?

01	if (typeof Object.create !== 'function') {

02	Object.create = function(o) {

03	function F() { }

04	F.prototype = o;

05	return new F();

06

};

07

}

08

09	function Poker(style, title, value) {

10	this.Style = style;

11	this.Title = title;

12	this.Value = value;

13

}

14

15	var pokerA = Object.create(new Poker("club", "A", 14));

16

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

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

19	//            this.Style = style;

20	//            this.Title = title;

21	//            this.Value = value;

22	//        }

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

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

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

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

27

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

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

30	alert(new Poker("club", "A", 14).Value); //14

31	alert(pokerA.Value); //14

Object.defineProperty(object, propertyname, descriptor)

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

Object.defineProperties(object, descriptors)

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

 

01	function setPokerState(poker, proValue) {

02	if (arguments[0] instanceof Poker) {

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

04	"State", //属性名称是字符串

05

{//一组修饰对象

06	value: proValue, //值 默认是undefined

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

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

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

10

}

11

)

12

}

13

}

14

15	var PokerA = Object.create(new Poker("club", "A", 14));

16	setPokerState(PokerA, 5);

17	alert(PokerA.State);

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

01	function setPokerState(poker, proValue) {

02	if (arguments[0] instanceof Poker) {

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

04	"State", //属性名称是字符串

05

{//一组修饰对象

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

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

08	set: function(x) {

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

10

},

11	get: function() {

12	return this.state;

13

}

14

}

15

)

16

}

17

}

18

19	var PokerA = Object.create(new Poker("club", "A", 14));

20	PokerA.State=10;

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

 

01	Object.defineProperties(

02

PokerA,

03

{

04	"backgroundImg": {

05	value: "images\\common\\hide.png",

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

07	writable: false//只读

08

},

09	"forgroundImg": {

10	value: "images\\spade\\K.png",

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

12	writable: false//只读

13

},

14

Image: {

15	get: function() {

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

17

},

18	enumerable: true

19

20

}

21

}

22

);

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

Object.getOwnPropertyDescriptor(object, propertyname)
返回属性的定义
Object.getOwnPropertyNames(object)
返回所有属性的名称，哪怕说是不能枚举的属性

下面是一个demo

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

2

3	var names = Object.getOwnPropertyNames(PokerA);

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

5	alert(names[i] + "\n" +

6	Object.getOwnPropertyDescriptor(PokerA, names[i])

7

);

8

}

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

Object.preventExtensions(object)
防止新的属性添加到对象
Object.isExtensible(object)
是否可添加属性到对象

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

2	Object.preventExtensions(PokerA);

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

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

Object.seal(object)
不能添加和删除属性
Object.isSealed(object)

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

2	Object.seal(PokerA);

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

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

Object.freeze(object)
防止现有属性和属性值的修改，并防止新特性的添加。
Object.isFrozen(object)

 

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

Object.getPrototypeOf(object)

 

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

Array.isArray
啥意思不必说了

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

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

 

Array.IndexOf

Array.lastIndexOf

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

1	alert(["Hello", "javaScript", "ECMAScript", "HTML5"].indexOf("javaScript"));//1

2	alert(["Hello", "javaScript", "ECMAScript", "HTML5"].lastIndexOf("javaScript"));//1

Array.every

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

01	var arr1 = "Charles,Mark,Bill,Vincent,William,Joseph".split(",");

02	alert(arr1.every(

03	function(item, index) {

04	return item.length < 5;

05

}

06

)

07	); //false

08	alert(arr1.every(

09	function(item, index) {

10	return item.length < 10;

11

}

12

)

13

)//true

Array.some

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

01	var arr1 = "Charles,Mark,Bill,Vincent,William,Joseph".split(",");

02	alert(arr1.some(

03	function(item, index) {

04	return item.length < 5;

05

}

06

)

07

); //true

08	alert(arr1.some(

09	function(item, index) {

10	return item.length < 10;

11

}

12

)

13

)//true

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

Array.forEach

01	var arr1 = "Charles,Mark,Bill,Vincent,William,Joseph".split(",");

02	arr1.forEach(

03	function(item, index) {

04	if (index % 2 == 0) {

05	arr1[index] = "name:" + item;

06

}

07

}

08

);

09

10	arr1.forEach(

11	function(item, index) {

12	alert(item);

13

}

14

);

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

Array.map

01	var arr1 = "Charles,Mark,Bill,Vincent,William,Joseph".split(",");

02	var arr2 = arr1.map(

03	function(item, index) {

04	if (item.indexOf("ll") > -1) {

05	return item;

06

}

07

}

08

);

09

10	arr2.forEach(

11	function(item, index) {

12	alert(item);

13

}

14

);

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

Array.filter

01	var arr1 = "Charles,Mark,Bill,Vincent,William,Joseph".split(",");

02	var arr2 = arr1.filter(

03	function(item, index) {

04	if (item.indexOf("ll") > -1) {

05	return true;

06

}

07

}

08

);

09

10	arr2.forEach(

11	function(item, index) {

12	alert(item);

13

}

14

);

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

Array.reduce

1	var arr1 = "Charles,Mark,Bill,Vincent,William,Joseph".split(",");

2	var arr2 = arr1.reduce(

3	function(item, next) {

4	return item + "][" + next;

5

}

6

);

7

8	alert("[" + arr2 + "]");//[Charles][Mark][Bill][Vincent][William][Joseph]

还有一个反向处理

Array.reduceRight

1	var arr1 = "Charles,Mark,Bill,Vincent,William,Joseph".split(",");

2	var arr2 = arr1.reduceRight(

3	function(item, next) {

4	return item + "][" + next;

5

}

6

);

7

8	alert("[" + arr2 + "]"); //[Joseph][William][Vincent][Bill][Mark][Charles]

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

 

Date().toJSON()

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

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

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

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

1	alert("[" + "   Hello ".trim() + "]"); //[Hello]

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

转自：http://blog.csdn.net/shyleoking/article/details/7316174