ES6知识详解

简介

ECMAScript（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标是使 JavaScript 可以编写复杂的大型应用程序，成为企业级开发语言。

let 关键字

ES6 新增了let命令，用来声明变量。特点如下：

• 不允许重复声明
• 存在块级作用域
• 不存在变量提升
• 不影响作用域链

// 不允许重复声明
let num = 10;
let num = 10; // Identifier 'num' has already been declared

// 存在块级作用域
{
let a = 10;
var b = 20;
}
console.log(a); // ReferenceError: a is not defined
console.log(b); // 20

// 不存在变量提升
// var的情况
console.log(num); // 输出 undefined
var num = 10;

// let的情况
console.log(foo); // 报错 ReferenceError: Cannot access 'foo' before initialization
let foo = 20;

以后声明变量，使用let即可

const 关键字

const关键字用来声明常量。特点如下：

• 声明必须赋初始值
• 标识符一般大写
• 不允许重复声明
• 值不允许修改（对象属性修改和数组元素变化不会触发错误）
• 块级作用域

声明对象类型使用const，非对象类型声明选择let

变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

// 数组的解构赋值
const arr = ['张学友', '刘德华', '黎明', '郭富城'];
let [zhang, liu, li, guo] = arr;
console.log(zhang, liu, li, guo); // 张学友 刘德华 黎明 郭富城

//对象的解构赋值
const lin = {
    name: '林志颖',
    tags: ['车手', '歌手', '小旋风', '演员']
}
let {name, tags} = lin;
console.log(name, tags);

// 复杂结构
let wangfei = {
    name: '王菲',
    age: 18,
    songs: ['红豆', '流年', '暧昧', '传奇'],
    history: [
        {name: '窦唯'},
        {name: '李亚鹏'},
        {name: '谢霆锋'}
    ]
}
let {songs: [one, two, three], history: [first, second, third]} = wangfei;
console.log(one, first); // 红豆 {name: '窦唯'}

频繁使用对象方法、数组元素，就可以使用结构赋值的形式

模板字符串

模版字符串是增强版的字符串，用反引号（`）标识。特点如下：

• 字符串中可以出现换行符
• 可以使用${xxx}形式输出变量

// 普通的字符串
let str1 = `This is '\n' very good`;

// 多行字符串
let str2 = `This is 
    very good`;

// 字符串中嵌入变量
let age = 20;
let str3 = `tom's age is ${age}`;

当遇到字符串与变量拼接的情况使用模板字符串

简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁

let name = 'seabert'
let slogon = '你一定可以的'
let say = function() {
   console.log('hello world');
}

// 属性和方法简写
let sxy = {
    name,
    slogon,
    say,
    change() {
        console.log('改变世界');
    }
}
console.log(sxy.name); // seabert

箭头函数

ES6 允许使用“箭头”（=>）定义函数。

箭头函数的注意点：

1. 如果形参只有一个，则小括号可以省略
2. 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
3. 箭头函数 this 指向声明时所在作用域下 this 的值
4. 箭头函数不能作为构造函数实例化
5. 不能使用 arguments 参数

// 1. 通用写法
let fn = (arg1, arg2, arg3) => {
    return arg1 + arg2 + arg3;
}

// 2. 省略小括号的情况
let fn2 = num => {
    return num * 10;
}

// 3. 省略花括号的情况
let fn3 = score => score * 20;

// 4. this指向声明时所在作用域中 this 的值
let fn4 = () => {
    console.log(this); 
}
fn4() // Window对象

箭头函数不会更改this指向，用来指定回调函数会非常适合

rest 参数

ES6 引入rest参数，用于获取函数的实参，用来代替arguments

// 作用与 arguments 类似
function add(...args) {
    console.log(args);
}
add(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

// rest 参数必须是最后一个形参
function minus(a, b, ...args) {
    console.log(a, b, args);
}
minus(100, 2, 5, 1, 29) // 100 2 [5, 1, 29]

rest 参数非常适合不定个数参数函数的场景

spread 扩展运算符

扩展运算符（spread）也是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

// 展开数组
let tfboys = ['德玛西亚之力','德玛西亚之翼','德玛西亚皇子'];
function fn(...args) {
    // console.log(arguments); // ['德玛西亚之力', '德玛西亚之翼', '德玛西亚皇子']
    console.log(args); // ['德玛西亚之力', '德玛西亚之翼', '德玛西亚皇子']
}
fn(...tfboys)

// 展开对象
let skillOne = {
    q: '致命打击',
};
let skillTwo = {
    w: '勇气'
};
let skillThree = {
    e: '审判'
};
let skillFour = {
    r: '德玛西亚正义'
};
let gailun = {...skillOne, ...skillTwo, ...skillThree, ...skillFour}
console.log(gailun); // {q: '致命打击', w: '勇气', e: '审判', r: '德玛西亚正义'}

Symbol

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。

Symbol的特点如下：

1. Symbol的值是唯一的，用来解决命名冲突的问题
2. Symbol值不能与其他数据进行运算
3. Symbol定义的对象属性不能使用 for...in 循环遍历，但是可以使用Relect.ownKeys来获取对象的所有键名

// 创建 Symbol
let s1 = Symbol()
console.log(s1, typeof s1); // Symbol() 'symbol'

// 添加标识的 Symbol
let s2 = Symbol('宋小羽');
let s2_2 = Symbol('宋小羽');
console.log(s2 === s2_2); // false

// 使用 Symbol for 定义
let s3 = Symbol.for('宋小羽');
let s3_2 = Symbol.for('宋小羽');
console.log(s3 === s3_2); // true

遇到唯一性的场景要想到Symbol

Symbol 内置值

除了定义自己使用的 Symbol 值以外，ES6 还提供了11个内置的 Symbol 值，指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行。

迭代器

遍历器（interator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署interator接口，就可以完成遍历操作。

ES6 创造了一种新的遍历命令for...of循环，interator接口主要供for...of使用。

原生具备interator接口的数据（可用for...of遍历）

• Array
• Arguments
• Set
• Map
• String
• TypedArray
• NodeList

工作原理

1. 创建一个指针对象，指向当前数据结构的起始位置
2. 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
3. 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
4. 每调用next方法返回一个包含value和done属性的对象

需要自定义遍历数据的时候，要想到迭代器

生成器

ES6 提供的一种异步编程解决方案，语法行为与传统函数不同。

function * gen() {
    yield '一直没有耳朵';
    yield '一直没有尾巴';
    yield '真奇怪';
}

let interator = gen();
console.log(interator.next()); // {value: '一直没有耳朵', done: false}
console.log(interator.next()); // {value: '一直没有尾巴', done: false}
console.log(interator.next()); // {value: '真奇怪', done: false}

代码说明：

1. *的位置没有限制
2. 生成器函数返回的结果是迭代器对象，调用迭代器对象的next方法可以得到yield语句后的值
3. yield相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次next方法，执行一段代码
4. next方法可以传递实参，作为yield语句的返回值

Promise

Promise 是 ES6 引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

• Promise构造函数：Promise (excutor) {}
• Promise.prototype.then 方法
• Promise.protyotype.catch 方法

特点：

1. 对象的状态不受外界影响。
2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。

用法：

// 基本用法
const promise = new Promise(function(resolve, reject) {
  if(异步操作成功) {
    resolve(value)
  } else {
    reject(error)
  }
})
// then方法 （resolve和reject两个回调函数作为参数）
promise.then(function(value) {
  // success
}, function(error) {
  // failure
})

Set

ES6 提供了新的数据结构Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了interator接口，所以可以使用「扩展运算符」和「for...of」进行遍历，集合的属性和方法：

• size：返回集合的元素个数
• add：增加一个新元素，返回当前集合
• delete：删除元素，返回boolean值
• has：检测集合中是否包含某个元素，返回boolean值
• clear：清空集合，返回undefined

// 创建一个空集合
let s = new Set();
// 创建一个非空集合
let s1 = new Set([1, 2, 3, 4, 5]);

// 集合属性和方法
// 返回集合的元素个数
console.log(s1.size); // 5
// 添加新元素
console.log(s1.add(6)); // Set(6) {1, 2, 3, 4, 5, 6}
// 删除元素
console.log(s1.delete(2)); // true
// 检测是否存在某个值
console.log(s1.has(3)); // true
// 清空集合
console.log(s1.clear()); // undefined

Map

ES6 提供了Map数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map也实现了interator接口，所以可以使用「扩展运算符」和「for...of」进行遍历，Map的属性和方法：

• size：返回Map的元素个数
• set：增加一个新元素，返回当前Map
• get：返回键名对象的键值
• has：检测Map中是否包含某个元素，返回boolean值
• clear：清空Map，返回undefined

// 创建一个空 Map
let m = new Map();
// 创建一个非空 Map
let m2 = new Map([
    ['name', '宋小羽'],
    ['slogon', '改变世界']
]);

// 属性和方法
// 返回 Map 的元素个数
console.log(m2.size); // 2
// 添加映射值
console.log(m2.set('age', 18)); // Map(3) {'name' => '宋小羽', 'slogon' => '改变世界', 'age' => 18}
// 获取映射值
console.log(m2.get('age')); // 18
// 检测是否有该映射
console.log(m2.has('age')); // true
// 清空
console.log(m2.clear()); // undefined

class 类

ES6 提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

class类的知识点：

1. class：关键字声明类
2. constructor：定义构造函数初始化
3. extends：继承父类
4. super：调用父级构造方法
5. static：定义静态方法和属性
6. 父类方法可以重写

// 父类
class Phone {
    // 构造方法
    constructor(brand, color, price) {
        this.brand = brand;
        this.color = color;
        this.price = price;
    }

    // 对象方法
    call() {
        console.log('我可以打电话');
    }
}

// 子类
class SmartPhone extends Phone {
    constructor(brand, color, price, screen, pixel) {
        super(brand, color, price)
        this.screen = screen;
        this.pixel = pixel;
    }

    // 子类方法
    photo() {
        console.log('我可以拍照!!');
    }
    playGame() {
        console.log('我可以玩游戏!!');
    }
    // 方法重写
    call() {
        console.log('我可以进行视频通话');
    }
    // 静态方法
    static run() {
        console.log('我可以运行程序');
    }
    static connect() {
        console.log('我可以建立连接');
    } 
}

 // 实例化对象
 const Nokia = new Phone('诺基亚', '灰色', 230);
 Nokia.call(); // 我可以打电话

 const iPhone6s = new SmartPhone('苹果', '白色', 6088, '4.7inch', '500w');
 // 调用子类方法
 iPhone6s.playGame(); // 我可以玩游戏!!
 // 调用重写方法
 iPhone6s.call(); // 我可以进行视频通话
 // 调用静态方法
 SmartPhone.run(); // 我可以运行程序

数值扩展

二进制和八进制

ES6 提供了二进制和八进制数值的新写法，分别用前缀0b和0o表示。

Number.isFinite() 与 Number.isNaN()

• Number.isFinite()：用来检查一个数值是否为有限的
• Number.isNaN()：用来检查一个数值是否为NaN

Number.parseInt() 与 Number.parseFloat()

ES6 将全局方法parseInt和parseFloat，移植到Number对象上面，使用不变。

Math.trunc

用于去除一个数的小数部分，返回整数部分。

Number.isInteger

用来判断一个数是否是整数

对象扩展

ES6 新增了一些对象的方法：

1. Object.is：比较两个值是否相等，与“===”行为基本一致
2. Object.assign：对象的合并，将源对象的所有可枚举属性，复制到目标对象
3. __proto__、setPrototypeOf：setPrototypeOf可以直接设置对象的原型

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

模块化的好处

1. 防止命名冲突
2. 代码复用
3. 高维护

模块化规范产品

ES6 之前的模块化规范由：

1. CommJS：NodeJS、Browserify
2. AMD：requireJS
3. CMD：seaJS

ES6 模块化语法

模块功能主要由两个命令构成：export和import。

• export命令用于规定模块的对外接口
• import命令用于输入其他模块提供的功能