ECMAScript5的新特性

转自:http://www.cnblogs.com/dolphinX/p/3354319.html,http://www.cnblogs.com/dolphinX/p/3348467.html,http://www.cnblogs.com/dolphinX/p/3353868.html

总结：1. http://lzw.me/pages/ecmascript/                                   2. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript             es6:http://es6.ruanyifeng.com/#docs/intro

String.prototype.trim()

Function.prototype.bind(thisArg,[,arg1[,arg2,…]])

JSON.parse(text [,reviver])

JSON.stringify(value [, replacer [, space]])

Date.now()

Array.isArray(element)，.indexOf(element) / .lastIndexOf(element)，.forEach(element,index,array)，.every(function(element,index,array)) / .some(function(element,index,array)),.map(function(element)),.filter(function(element)),.reduce(function(v1,v2),value) / .reduceRight(function(v1,v2),value)

Object.create(prototype[,descriptors])

Object.defineProperty(O,Prop,descriptor) / Object.defineProperties(O,descriptors)

Object.getOwnPropertyDescriptor(O,property)

Object.getOwnPropertyNames

Object.preventExtensions(O) / Object.isExtensible

Object.seal(O) / Object.isSealed

Object.freeze(O) / Object.isFrozen

ECMAScript5 Array新增方法

 

数组在各个编程语言中的重要性不言而喻，但是在之前的JavaScript中数组(JavaScript 数组详解)虽然功能已经很强大，但操作方法并不完善，在ECMAScript5中做了适当的补充。

Array.isArray(element)

这是Array对象的一个静态函数，用来判断一个对象是不是数组

var a = new Array(123);
        var b = new Date();
        console.log(Array.isArray(a)); //true
        console.log(Array.isArray(b)); //false

.indexOf(element) / .lastIndexOf(element)

顾名思义，这两个方法用于查找数组内指定元素位置，查找到第一个后返回其索引，没有查找到返回-1，indexOf从头至尾搜索，lastIndexOf反向搜索。

var a=new Array(1,2,3,3,2,1);
           console.log(a.indexOf(2)); //1
        console.log(a.lastIndexOf(2)); //4

.forEach(element,index,array)

遍历数组，参数为一个回调函数，回调函数有三个参数：当前元素，元素索引，整个数组

var a=new Array(1,2,3,4,5,6);
        a.forEach(function(e,i,array){
            array[i]=e+1;
            });
           console.log(a); //[2, 3, 4, 5, 6, 7]

.every(function(element,index,array)) / .some(function(element,index,array))

这两个函数类似于离散数学中的逻辑判定，回调函数返回一个布尔值，every是“所有”函数的每个回调函数都返回true的时候才会返回true，当遇到false的时候终止执行，返回false；some函数是“存在”有一个回调函数返回true的时候终止执行并返回true，否则返回false。在空数组上调用every返回true，some返回false。

var a=new Array(1,2,3,4,5,6);
        /*0 : 1 
        1 : 2
        2 : 3
        3 : 4 
        4 : 5 
        false */
        console.log(a.every(function(e,i,arr){
            console.log(i+' : '+e);
            return e<5;
            }));

var a=new Array(1,2,3,4,5,6);
        /*0 : 1 
        1 : 2
        2 : 3
        3 : 4 
        4 : 5 
        true */
        console.log(a.some(function(e,i,arr){
            console.log(i+' : '+e);
            return e>4;
            }));

.map(function(element))

与forEach类似，遍历数组，回调函数返回值组成一个新数组返回，新数组索引结构和原数组一致，原数组不变

var a=new Array(1,2,3,4,5,6);
        console.log(a.map(function(e){
            return e*e;
            })); // [1, 4, 9, 16, 25, 36] 
        console.log(a); //[1, 2, 3, 4, 5, 6]

.filter(function(element))

返回数组的一个子集，回调函数用于逻辑判断是否返回，返回true则把当前元素加入到返回数组中，false则不加，新数组只包含返回true的值，索引缺失的不包括，原数组保持不变

var a=new Array(1,2,3,4,5,6);
        console.log(a.filter(function(e){
            return e%2==0;
            })); // [2, 4, 6] 
        console.log(a); //[1, 2, 3, 4, 5, 6]

.reduce(function(v1,v2),value) / .reduceRight(function(v1,v2),value)

遍历数组，调用回调函数，将数组元素组合成一个值，reduce从索引最小值开始，reduceRight反向，方法有两个参数

1.回调函数：把两个值合为一个，返回结果

2.value，一个初始值,可选

var a=new Array(1,2,3,4,5,6);
        console.log(a.reduce(function(v1,v2){
            return v1+v2;
            })); // 21

            console.log(a.reduceRight(function(v1,v2){
                return v1-v2;
                },100)); // 79

 

 

虽然说现在并不是所有的浏览器都已经支持ECMAScript5的新特性，但相比于ECMAScript4而言ECMAScript5被广大浏览器厂商广泛接受，目前主流的浏览器中只有低版本的IE不支持，其它都或多或少的支持了ECMAScript5的新特性，其中重中之重自然是一切对象的基类型——Object

Object.create(prototype[,descriptors])

这个方法用于创建一个对象，并把其prototype属性赋值为第一个参数，同时可以设置多个descriptors，关于decriptor下一个方法就会介绍这里先不说。只需要这样就可以创建一个原型链干净对象了

var o = Object.create({
            "say": function () {
                alert(this.name);
            },
            "name":"Byron"
        });

Object.defineProperty(O,Prop,descriptor) / Object.defineProperties(O,descriptors)

想明白这两个函数必须明白descriptor是什么，在之前的JavaScript中对象字段是对象属性，是一个键值对，而在ECMAScript5中引入property，property有几个特征

1. value：值，默认是undefined

2. writable：是否是只读property，默认是false,有点像C#中的const

3. enumerable：是否可以被枚举(for in)，默认false

4. configurable：是否可以被删除，默认false

同样可以像C#、Java一样些get/set，不过这两个不能和value、writable同时使用

5.get:返回property的值得方法，默认是undefined

6.set：为property设置值的方法，默认是undefined

Object.defineProperty(o,'age', {
            value: 24,
            writable: true,
            enumerable: true,
            configurable: true
        });

        Object.defineProperty(o, 'sex', {
            value: 'male',
            writable: false,
            enumerable: false,
            configurable: false
        });

        console.log(o.age); //24
        o.age = 25;

        for (var obj in o) {
            console.log(obj + ' : ' + o[obj]);
            /*
            age : 25  //没有把sex ： male 遍历出来
            say : function () {
                alert(this.name);
            } 
            name : Byron 
            */
        }
        delete o.age;
        console.log(o.age);//undefined 

        console.log(o.sex); //male
        //o.sex = 'female'; //Cannot assign to read only property 'sex' of #<Object> 
        delete o.age; 
        console.log(o.sex); //male ,并没有被删除

也可以使用defineProperties方法同时定义多个property，

Object.defineProperties(o, {
            'age': {
                value: 24,
                writable: true,
                enumerable: true,
                configurable: true
            },
            'sex': {
                value: 'male',
                writable: false,
                enumerable: false,
                configurable: false
            }
        });

Object.getOwnPropertyDescriptor(O,property)

这个方法用于获取defineProperty方法设置的property 特性

var props = Object.getOwnPropertyDescriptor(o, 'age');
        console.log(props); //Object {value: 24, writable: true, enumerable: true, configurable: true}

Object.getOwnPropertyNames

获取所有的属性名，不包括prototy中的属性，返回一个数组

console.log(Object.getOwnPropertyNames(o)); //["age", "sex"]

例子中可以看到prototype中的name属性没有获取到

Object.keys()

和getOwnPropertyNames方法类似，但是获取所有的可枚举的属性，返回一个数组

console.log(Object.keys(o)); //["age"]

上面例子可以看出不可枚举的sex都没有获取的到

Object.preventExtensions(O) / Object.isExtensible

方法用于锁住对象属性，使其不能够拓展，也就是不能增加新的属性，但是属性的值仍然可以更改，也可以把属性删除，Object.isExtensible用于判断对象是否可以被拓展

console.log(Object.isExtensible(o)); //true
        o.lastName = 'Sun';
        console.log(o.lastName); //Sun ,此时对象可以拓展

        Object.preventExtensions(o);
        console.log(Object.isExtensible(o)); //false

        o.lastName = "ByronSun";
        console.log(o.lastName); //ByronSun，属性值仍然可以修改

        //delete o.lastName;
        console.log(o.lastName); //undefined仍可删除属性

         o.firstname = 'Byron'; //Can't add property firstname, object is not extensible 不能够添加属性

Object.seal(O) / Object.isSealed

方法用于把对象密封，也就是让对象既不可以拓展也不可以删除属性（把每个属性的configurable设为false）,单数属性值仍然可以修改，Object.isSealed由于判断对象是否被密封

Object.seal(o);
        o.age = 25; //仍然可以修改
        delete o.age; //Cannot delete property 'age' of #<Object>

Object.freeze(O) / Object.isFrozen

终极神器，完全冻结对象，在seal的基础上，属性值也不可以修改（每个属性的wirtable也被设为false）

Object.freeze(o);
        o.age = 25; //Cannot assign to read only property 'age' of #<Object>

最后

上面的代码都是在Chrome 29下一严格模式（’use strict’）运行的，而且提到的方法都是Object的静态函数，也就是在使用的时候应该是Object.xxx(x)，而不能以对象实例来调用。总体来说ES5添加的这些方法为javaScript面向对象设计提供了进一步的可配置性，用起来感觉很不错。

 

ECMAScript5的其它新特性

 

之前两篇博客 ECMAScript5 Object的新属性方法，ECMAScript5 Array新增方法，分别介绍了ECMAScript5对Object和Array的拓展，这两个对象最常用，而且改动比较多，剩下的对象拓展比较少

String.prototype.trim()

这是字符串的一个实例方法，用于去除字符串首尾的空白符（不只是空格，还有tab、垂直制表符啊神马的）和换行符，终于不用自己用正则表达式写了，这个方法返回trim后结果，不改变原字符串值

var s = '    123 
';
        console.log(s.length);//6
        console.log(s.trim());//123
        console.log(s.trim().length);//3
        console.log(s); //    123 
        console.log(s.length); //6

Function.prototype.bind(thisArg,[,arg1[,arg2,…]])

Function.prototype.bind返回一个把内部this设为thisArg的方法，读起来很绕，其实就是，返回一个新方法，这个方法内部的this是参数thisArg

<div id="test">Click Here</div>

var handler = {
            message: 'This is a test',
            click: function () {
                alert(this.message);
            }
        };

document.getElementById('test').onclick = handler.click;

如果这样绑定div的click事件处理程序，大家都会看出来，点击的时候弹出来的对话框内容是undefined，因为执行的时候this是window，我们需要一定的技巧才可以处理此事，达到预期效果，但是使用新添的bind我们可以轻松改变this

document.getElementById('test').onclick = handler.click.bind(handler);

这样就可以达到我们预期效果了。

 

ECMAScript提供了一个全局的对象JSON，用来处理json的序列化和反序列化来实现类似于json2.js中的效果，内置的函数总比我们自己写的要效率高一些

JSON.parse(text [,reviver])

JSON.parse用于反序列化json格式字符串为对象，第二个参数是可选的，是一个有key和value两个参数的函数，用于过滤或者处理返回值

var jsonString = '{"name":"Byron", "age":24}';
        var jsonObj = JSON.parse(jsonString);
        console.log(typeof jsonObj); //Object
        console.log(jsonObj.name); //Byron

对一些复杂的嵌套结构也能够胜任

var jsonString = '[{"name":"Byron", "age":24,"Books":{"B1":"Love","B2":"Good"}},{"name":"Byron", "age":24,"Books":{"B1":"Love","B2":"Good"}}]';
        var jsonObj = JSON.parse(jsonString);

var jsonString = '{"name":"Byron", "age":24}';

        var jsonObj = JSON.parse(jsonString, function (key, value) {
            if (typeof value == 'string') {
                return value.toUpperCase();
            } else {
                return value;
            }
        });
        console.log(jsonObj.name); //BYRON

JSON.stringify(value [, replacer [, space]])

JSON.stringify方法用于序列化json对象为字符串，最简单的就是传入一个json对象

var jsonObj = {
            "name": "Byron",
            "BirthDate": new Date('06/15/1989')
        };
        var jsonStr=JSON.stringify(jsonObj);
        console.log(jsonStr); // {"name":"Byron","BirthDate":"1989-06-14T16:00:00.000Z"}

可以看到在序列化Date对象的时候调用了其toJson方法，replacer是一个可选参数，有两种情况，可以使方法或数组

方法：这个貌似很好理解，方法也有key和value两个参数，在序列化过程中对数据进行处理，顺便说说第三个参数space，这是一个分隔符，表示用什么区分开对象的每项内容，省略的话就没有，向上面那样是一句；数字表示所及几个字符，大于10的按10处理；普通字符串就是把字符串附加，最大长度也是10；号可以使用 等转移字符

var jsonObj = {
            "name": "Byron",
            "BirthDate": new Date('06/15/1989')
        };
        var jsonStr = JSON.stringify(jsonObj, function (key, value) {
            if (typeof value == 'string') {
                return value.toUpperCase();
            } else {
                return value;
            }
         },'	');
        console.log(jsonStr);
        /*{
            "name": "BYRON",
            "BirthDate": "1989-06-14T16:00:00.000Z"
        } */

数组：主要起一个过滤作用，只会序列化对象中属性名存在于数组元素的键值对

var jsonObj = {
            "name": "Byron",
            "BirthDate": new Date('06/15/1989'),
            "age":24,
            "sex":"male"
        };
        var arr = ['name', 'age'];
        var jsonStr = JSON.stringify(jsonObj,arr,3);
        console.log(jsonStr);
        /*{
            "name": "BYRON",
            "age": 24
        } */

BirthDate和sex属性不在数组arr中，没有被序列化

支持ISO类型的Date

在之前的JavaScript中可以使用以下几种方式创建Date实例

new Date() //Date {Fri Aug 02 2013 16:50:33 GMT+0800 (China Standard Time)}
        new Date(milliseconds)  //Date {Fri Aug 02 2013 16:53:26 GMT+0800 (China Standard Time)}
        new Date("2013/08/02") //Date {Fri Aug 02 2013 00:00:00 GMT+0800 (China Standard Time)}
        new Date("08/02/2013") //Date {Fri Aug 02 2013 00:00:00 GMT+0800 (China Standard Time)}
        new Date(year, month, day, hours, minutes, seconds, ms)

ECMAScript5为其添加了ISO-8601格式的支持，可以为构造函数传一个ISO格式时间字符串

console.log(new Date("1970-01-01T00:00:00.000Z")); //Thu Jan 01 1970 08:00:00 GMT+0800 (China Standard Time)

同时添加了一个toISOString方法

console.log(new Date().toISOString()); // 2013-10-07T05:54:38.743Z

Date.prototype.toJSON()

从Date类型转成json的方法，序列化的时候用

console.log((new Date).toJSON()); // 2013-10-07T06:06:29.288Z

Date.now()

获取当前的时间戳

console.log(Date.now()); // 1381125894410