ES5与ES6的研究

今天开始ES5与ES6的研究。

1、什么是ES5与ES6？

　　就是ECMAScript的第五个版本与第六个版本，那么问题来了，什么是ECMAScript？首先它是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言，又被称为JavaScript，但其实JavaScript是ECMA-262标准的实现与扩展(说了那么多其实它就是JavaScript的核心语言标准)，具体的名字由来及历史可以参照ECMAScript百度百科。学习ECMAScript可以对JavaScript语言中的复杂特性有比较深入的了解。

2、ECMAScript 语言中的实际类型共有六种。

　　分别为Undefined、Null、Boolean、Number、String 和 Object。

　　Undefined：它只有一个值Undefined,如果一个变量没有通过赋值操作指定一个值，那么该变量的值是 undefined。

　　Null ：也只有一个值 null。

　　Boolean：有两个值 true 和 false。

　　Number：始终使用 64 位双精度浮点数来表示数值，Number 类型的值的个数是 2⁶⁴-2⁵³+3。个数后面的“+3”表示的是 Number 类型的 3 个特殊值，分别是NAN、+Infinity 和 -Infinity。NaN 的含义是“不是一个数字（Not-A-Number）”。在代码中可以直接通过“NaN”的方式来引用这个值。代码中与数值相关的计算的结果也可能是 NaN。一般来说，对于 ECMAScript 语言中的操作符，如果其中一个操作数为 NaN，那么计算结果为NaN。当需要判断一个变量引用 a 是否为 NaN 时，只需要判断 a !== a 是否为 true 即可。+Infinity 和 -Infinity 分别表示正无穷大和负无穷大，可以在代码中直接引用，也可能是某些数值运算的结果。如运算“3 / 0”的结果是 Infinity。除了这 3 个特殊值之外，剩下的数值中一半是正数，一半是负数。数值 0 也有正数和负数两种形式，称为正 0 和负 0，分别用 +0 和 -0 来表示。

　　 String ：它的处理也比较简单。任何有限长度的 16 位无符号整数的有序序列都是 String 类型的值。当 String 类型对象中包含的是文本数据时，序列中的每个元素的值是 UTF-16 格式的代码单元的值，对应于 Unicode 中的代码点。

　　Object：是一个对象，本身是一个函数，因此“typeof Object”表达式的值是function。Object 函数既可以直接调用，也可以作为构造函数来创建新的对象。　　

3、 Object.defineProperty 函数的使用示例

var obj = {};
 Object.defineProperty(obj, 'val', {}); // 创建一个新属性，特性为默认值
 obj.val = 1; 
 
 Object.defineProperty(obj, 'CONSTANT', {value : 32, writable : false}); // 创建一个只读属性
 obj.CONSTANT = 16; // 对属性的修改是无效的，但是不会抛出错误
 
 Object.defineProperty(obj, "newVal", {enumerable: true});
 for (var key in obj) {
    console.log(key); // 可以枚举出 newVal
 }        
 
 var initValue = 0;
 Object.defineProperty(obj, "initValue", {
    get : function() {
        return initValue;
    },
    set : function(val) {
        if (val > 0) {
            initValue = val;
        }
    }
 });

4、通过赋值操作创建新属性

var obj = {val : 1};
 obj.newVal = "Hello"; 
 
 Object.seal(obj);
 Object.defineProperty(obj, 'anotherVal', {}); // 抛出 TypeError 错误

5、函数

　　函数在ES中有着特殊的地位，很多功能都是基于函数实现的，可谓是无所不能，函数可以通过三种方式来创建：第一种是使用构造函数 Function，第二种是使用函数声明，第三种是使用函数表达式。

6、构造函数案例

 function calculate(expr) {
    return new Function("return " + expr).apply();
 } 
 
 calculate("3 * (2 + 4)");

7、构造函数案例　　

function calculate(expr) {
    return new Function("return " + expr).apply();
 } 
 
 calculate("3 * (2 + 4)");

8、bind函数的使用

　　

var obj = {
    name : "alex"
 }; 
 
 function func() {
    console.log(this.name);
 } 
 
 var func1 = func.bind(obj);
 func1(); // 输出 alex 
 
 function add(a, b) {
    return a + b;
 } 
 
 var addBy5 = add.bind(this, 5);
 addBy5(3); // 值为 8，只有一个形式参数

数组

9、Array.prototype 中函数的使用示例

var array = [1, 2, 3, 4, 5];
 array.indexOf(3); // 值为 2
 array.lastIndexOf(4); // 值为 3
 array.every(function(value, index, arr) {
    return value % 2 === 0;
 }); // 值为 false
 array.some(function(value, index, arr) {
    return value % 2 === 0;
 }); // 值为 true
 array.forEach(function(value, index, arr) {
    console.log(value);
 });
 array.map(function(value, index, arr) {
    return value * 2;
 }); // 值为 [2, 4, 6, 8, 10]
 array.filter(function(value, index, arr) {
    return value % 2 === 0;
 }); // 值为 [2, 4]
 array.reduce(function(preValue, value, index, arr) {
    return preValue + value;
 }); // 值为 15
 array.reduceRight(function(preValue, value, index, arr) {
    return preValue * value;
 }); // 值为 120

JSON

10、JSON 对象的 parse 函数的使用示例

var jsonStr = '{"a":1, "b":2, "c":3}';
 JSON.parse(jsonStr); 
 
 JSON.parse(jsonStr, function(key, value) {
    return typeof value === 'number' ? value * 2 : value;
 }); // 结果为 {a:2, b:4, c:6} 
 
 JSON.parse(jsonStr, function(key, value) {
    return typeof value === 'number' && value % 2 === 0 ? undefined : value;
 }); // 结果为 {a:1, b:3}

11、JSON 对象中 stringify 函数的使用示例

var user = {
    name : 'Alex',
    password : 'password',
    email : 'alex@example.org'
 }; 
 
 JSON.stringify(user);
 JSON.stringify(user, ['name']); // 输出结果为“{"name":"Alex"}”
 JSON.stringify(user, function(key, value) {
    if (key === 'email') {
        return '******';
    }
    if (key === 'password') {
        return undefined;
    }
    return value;
 });  // 输出结果为“{"name":"Alex","email":"******"}”
 JSON.stringify(user, null, 4);

严格模式

ECMAScript 规范第五版的一个重要新特性是引入了代码执行时的严格模式。在严格模式下，对于 ECMAScript 代码执行时的限制更多。某些使用方式在严格模式下是不允许的。这有利于避免一些潜在的问题，提高代码的鲁棒性。一般来说，框架需要可以在严格模式下能正确运行，而一般的应用程序则可以选择是否使用严格模式。通过在 ECMAScript 代码的最开始使用 "use strict" 或 'use strict' 就可以声明这段代码需要运行在严格模式下

12、严格模式下 this 的值

"use strict";
 function func() {
    console.debug(typeof this); // 输出为 number
 } 
 
 func.apply(10);

ES6

　ES6是一次重大的版本升级，与此同时，由于ES6秉承着最大化兼容已有代码的设计理念，你过去编写的JS代码将继续正常运行。事实上，许多浏览器已经支持部分ES6特性，并将继续努力实现其余特性。这意味着，在一些已经实现部分特性的浏览器中，你的JS代码已经可以正常运行。如果到目前为止你尚未遇到任何兼容性问题，那么你很有可能将不会遇到这些问题，浏览器正飞速实现各种新特性。但是对于初学者来说，应该先学ES5标准，在这个基础上学习ES6，作为提升。

ES6增加了一些新特性，具体可以参照http://www.cnblogs.com/Wayou/p/es6_new_features.html