[JavaScript知识库]【JavaScript】ES5、ES6重要新增特性

序言

1999年ECMAScript 3发布，成为JavaScript通用标准，得到广泛支持。2015年6月ECMAScript 6正式发布，也称ECMAScript 2015，它使JavaScript可以编写复杂的大型应用程序，成为企业级开发语言。

ES5新增特性

属性分类

• ES对象就是属性的集合，属性分为命名属性和内部属性。
• 数据属性就是专门存储对象属性值的属性。
• 其中命名属性可细分为数据属性、访问器属性。
• 内部属性是ES内部定义，用于描述对象特定情况下的行为。

严格模式

语法：“use strict” 书写在任意作用域的顶部，严格模式特性如下。

• 提高程序运行效率。
• 静默失败升级为报错。
• 禁止给未声明的变量赋值。
• 禁止删除不允许删除的属性。
• 增加 eval 作用域，用于保存 eval 中创建的变量。
• 禁用一些可能在未来新版本中使用的语法和关键字。

防篡改对象

ES5中，为了防止关键对象的属性和方法被篡改，每个数据属性都由四大特性(Attribute)来保护。

1. 四大特性

• value 属性值。
• writable 可写性。
• enumerable 可遍历性，能否通过for...in遍历。
• configurable 可删除性，是否可修改其他属性，改为 False 后不能再改回 Ture。

// 修改四大特性
Object.definedProperties(obj, {
    "属性名": { "四大特性": Boolean, ...},
    ...
})

2. 三大级别

三大级别用于简化四大特性的操作。

// 1.防扩展：禁用添加
Object.preventExtensions(obj);

// 2.密封：禁用添加、删除
Object.seal(obj);

// 3.冻结：禁用添加、删除、修改
Object.freeze(obj);

数组新增API

新增数组方法中的三个形参，Value 为当前元素值，index 为元素下标，arr 为当前元素所属的数组对象。

1. 数组判断

// Every，数组元素全都满足判断条件才为 True，否则为 False。 
var bool = arr.every(function (value, i, arr) {
    return 判断条件;
})

// Some，数组元素都不满足判断条件才为 False，其一满足则为 True。 
var bool = arr.some(function (value, i, arr) {
    return 判断条件;
})

2. 数组遍历

// forEach，用于遍历每个元素执行相同操作的数组，直接修原数组。
arr.forEach(function (value, i, arr) {
    函数操作;
})

// map，用于基于原数组创建新数组对象，不修改原数组，返回新数组。
var newArr = arr.map(function (value, i, arr) {
    return 函数操作;
})

3. 数组过滤与汇总

// 过滤，用于筛选数组中符合判断条件的元素，不修改原数组，返回新数组。

var newArr = arr.filter(function (value, i, arr) {
    return 判断条件;
})

// 汇总，迭代数组中每一个元素，并汇总出一个最终结果值返回。
var Total = arr.reduce(function (total, value, i, arr) {
    return total + sum;
}, 基础值)

基于父对象创建子对象

var child = Object.create(father, {
    "属性名": { "四大特性": Boolean, ...},
    ...
})

Call、Apply、Bind的用法

• 语法：函数名.call(借用对象,实参1,实参2,...);
• 语法：函数名.apply(借用对象,[实参1,实参2,...]);
• 语法：var newFunction = 函数名.bind(指定对象, 永久实参, ...);
• bind，永久替换了函数中的 this 的指向，绑定后无法借用。
• call、apply，临时替换了函数中的 this 的指向，属于借用，相当于立刻调用函数。
• bind 创建的新函数和原函数完全相同，将新函数中的 this 永久绑定为了指定对象，将新函数中的部分参数永久固定，且需要自己调用。

// Call、Apply、Bind关键字的应用

// 获取数组元素的最大/小值
Math.max / min.apply(Math, arr);

// 判断对象的具体类型
Object.prototype.toString.call / apply(x);

// 将类数组转为普通数组
var newArr = Array.prototype.slice.call / apply(类数组);

ES6新增特性

声明常量

• const 常量名; 常量不占据内存空间，常量名一般使用纯大写。

箭头函数

• 箭头函数可以简化回调函数的书写。
• 事件中简化箭头函数需要注意 this 指向为 window。
• 操作方法：省略function，在 () 和 {} 间添加 =>，单形参省略 ()，单语句函数体省略 {}，若单语句为 return 语句直接省略 {} 和 return 。

ES6 Class

ES6正式启用 Class 关键字来创建"类”，再通过实例化"类”来创建“对象”。类抽象了对象的公共部分，通过实例化类可以得到一个具体的对象。

• 类名首字母使用大写。
• 实例化类必须使用 New 关键字。
• 类的 Constructor 函数，可以接收实参，并返回实例对象。
• 使用 New 创建实例时会自动调用 Constructor 函数，如果不写此函数，类会自动生成此函数。

// 1.使用Class关键字创建类
class 类名 {
    constructor(形参1, 形参2, ...) {
        this.属性名1 = 形参1;
        this.属性名2 = 形参2;
        ...
    }
}

// 2.利用类结合New关键字实例化对象
var Object = new 类名(实参1, 实参2, ...);

For…of 循环

• 优点，支持Break，Continue 和 Return关键字，for-in循环用于遍历对象属性, for- of循环用于遍历数据、数组、类数组对象。
• 缺点，没有提供下标，不能修改原数组，只能遍历索引数组，不能遍历 Hash 数组（对象）。

for (value of arr) {
    执行操作;
}

模板字符串

模板字符串用于简化字符串拼接，语法如下。

`文本${变量}文本${变量}文本`

块级作用域

• ES6中，除了全局和局部作用域，新增了块级作用域。
• 语法： let 变量名 = 变量值; 优先使用 let 代替 var 。
• 特性：不会导致声明提升，带有{块级作用域}，可以记录触发鼠标事件元素的下标。