ES6

概述

ECMAScript：简称ES，是一个语言标准（循环、判断、变量、数组等数据类型）

JavaScript：运行在浏览器端的语言，该语言使用ES标准。 ES + web api = JavaScript

NodeJs：运行在服务器端的语言，该语言使用ES标准。 ES + node api =Node Script

ES3.0： 1999

ES5.0: 2009

ES6.0: 2015, 从该版本开始，不再使用数字作为编号，而使用年份

ES7.0: 2016

块级绑定

声明变量的问题

使用var声明变量

1. 允许重复的变量声明：导致数据被覆盖

2. 变量提升：怪异的数据访问、闭包问题

3. 全局变量挂载到全局对象：全局对象成员污染问题（容易到windows下）

使用let声明变量

ES6不仅引入let关键字用于解决变量声明的问题，同时引入了块级作用域的概念

块级作用域：代码执行时遇到花括号，会创建一个块级作用域，花括号结束，销毁块级作用域

声明变量的问题

1. 全局变量挂载到全局对象：全局对象成员污染问题

​ let声明的变量不会挂载到全局对象

2. 允许重复的变量声明：导致数据被覆盖

​ let声明的变量，不允许当前作用域范围内重复声明

​ 在块级作用域中用let定义的变量，在作用域外不能访问

3. 变量提升：怪异的数据访问、闭包问题

使用let不会有变量提升，因此，不能在定义let变量之前使用它

底层实现上，let声明的变量实际上也会有提升，但是，提升后会将其放入到“暂时性死区”，如果访问的变量位于暂时性死区，则会报错：“Cannot access ‘a’ before initialization”。当代码运行到该变量的声明语句时，会将其从暂时性死区中移除。

在循环中，用let声明的循环变量，会特殊处理，每次进入循环体，都会开启一个新的作用域，并且将循环变量绑定到该作用域（每次循环，使用的是一个全新的循环变量）

在循环中使用let声明的循环变量，在循环结束后会销毁

使用const声明常量

const和let完全相同，仅在于用const声明的变量，必须在声明时赋值，而且不可以重新赋值。

实际上，在开发中，应该尽量使用const来声明变量，以保证变量的值不会随意篡改，原因如下：

1. 根据经验，开发中的很多变量，都是不会更改，也不应该更改的。
2. 后续的很多框架或者是第三方JS库，都要求数据不可变，使用常量可以一定程度上保证这一点。

注意的细节：

1. 常量不可变，是指声明的常量的内存空间不可变，并不保证内存空间中的地址指向的其他空间不可变。
2. 在for循环中，循环变量不可以使用常量

字符串和正则表达式

更好的Unicode支持

文字占32位还是十六位？然后字符串真实长度

Unicode使用16位二进制来存储文字。我们将一个16位的二进制编码叫做一个码元（Code Unit）。后来，由于技术的发展，Unicode将某些文字扩展到了32位（占用两个码元），并且，将某个文字对应的二进制数字叫做码点（Code Point）。

ES6为了解决，为字符串提供了方法：codePointAt，根据字符串码元的位置得到其码点。

同时，ES6为正则表达式添加了一个flag: u，如果添加了该配置，则匹配时，使用码点匹配

更多的字符串API

以下均为字符串的实例（原型）方法

• includes

判断字符串中是否包含指定的子字符串

• startsWith

判断字符串中是否以指定的字符串开始

• endsWith

判断字符串中是否以指定的字符串结尾

• repeat

将字符串重复指定的次数，然后返回一个新字符串。

模板字符串

ES6之前处理字符串繁琐的两个方面：

1. 多行字符串
2. 字符串拼接

在ES6中，提供了模板字符串的书写，可以非常方便的换行和拼接，要做的，仅仅是将字符串的开始或结尾改为 ` 符号

如果要在字符串中拼接js表达式，只需要在模板字符串中使用${JS表达式}

模板字符串标记

在模板字符串书写之前，可以加上标记:

标记名`模板字符串`

标记是一个函数，函数参数如下：

1. 参数1：被插值分割的字符串数组
2. 后续参数：所有的插值

函数

参数默认值

使用

在书写形参时，直接给形参赋值，附的值即为默认值

这样一来，当调用函数时，如果没有给对应的参数赋值（给它的值是undefined），则会自动使用默认值。

对arguments的影响

只要给函数加上参数默认值，该函数会自动变量严格模式下的规则：arguments和形参脱离

暂时性死区

形参和ES6中的let或const声明一样，具有作用域，并且根据参数的声明顺序，存在暂时性死区。

剩余参数

arguments的缺陷：

1. 如果和形参配合使用，容易导致混乱
2. 从语义上，使用arguments获取参数，由于形参缺失，无法从函数定义上理解函数的真实意图

ES6的剩余参数专门用于手机末尾的所有参数，将其放置到一个形参数组中。

语法:

function (...形参名){

}

1. 一个函数，仅能出现一个剩余参数
2. 一个函数，如果有剩余参数，剩余参数必须是最后一个参数

展开运算符（练习）

使用方式： ...要展开的东西

对数组展开 ES6

数组赋值

const arr2 = [ ... arr1 ]

对对象展开 ES7

明确函数的双重用途

ES6提供了一个特殊的API，可以使用该API在函数内部，判断该函数是否使用了new来调用

new.target 
//该表达式，得到的是：如果没有使用new来调用函数，则返回undefined
//如果使用new调用函数，则得到的是new关键字后面的函数本身

箭头函数

回顾：this指向

1. 通过对象调用函数，this指向对象
2. 直接调用函数，this指向全局对象
3. 如果通过new调用函数，this指向新创建的对象
4. 如果通过apply、call、bind调用函数，this指向指定的数据
5. 如果是DOM事件函数，this指向事件源

使用语法

箭头函数是一个函数表达式，理论上，任何使用函数表达式的场景都可以使用箭头函数

完整语法：

(参数1, 参数2, ...)=>{
    //函数体
}

如果参数只有一个，可以省略小括号

参数 => {

}

如果箭头函数只有一条返回语句，可以省略大括号，和return关键字

参数 => 返回值

注意细节

• 箭头函数中，不存在this、arguments、new.target，如果使用了，则使用的是函数外层的对应的this、arguments、new.target
• 箭头函数没有原型
• 箭头函数不能作用构造函数使用

应用场景

1. 临时性使用的函数，并不会可以调用它，比如：
   1. 事件处理函数
   2. 异步处理函数
   3. 其他临时性的函数
2. 为了绑定外层this的函数
3. 在不影响其他代码的情况下，保持代码的简洁，最常见的，数组方法中的回调函数

对象

解构

符号

异步处理

FetchApi

迭代器和生成器

集合类型

代理与反射

增强的数组功能