今天开始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
类型的值的个数是 264-253+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