ES6新语法

⼀、块级作⽤域绑定

回顾：使⽤var关键字定义变量

定义 = 声明 + 赋值；

1. 可以⼀次定义多个变量 2. 定义时可以只声明不赋值 3. 定义之后可以随时修改变量的值 4. 变量声明会被提升 5. 可重复定义变量

6. 全局定义的变量会被作为全局对象（global/window）的属性 7. 在代码块中使⽤ var 关键字声明的变量不会被束缚在代码块中

1 if (true) {2

3 var foo, bar = 'abc';4 }5

6 console.log(foo, bar)

1.1 使⽤let关键字定义变量

1. 可以⼀次定义多个变量2. 定义时可以只声明不赋值

3. 定义之后可以随时修改变量的值

4. 使⽤ let 关键字定义的变量，变量声明不会被提升，因此我们需要先定义，后使⽤5. 在同⼀作⽤域下，不能重复定义同名变量

6. 全局定义的变量会被作为全局对象（global/window）的属性7. 在代码块中使⽤ let 关键字声明的变量会被束缚在代码块中　　

1 // 0. 可以⼀次定义多个变量

2 // let foo = 123, bar = 'abc'; 3

4 // 1. 定义时可以只声明不赋值 5 // let foo, bar; 6 7

8 // 2. 定义之后可以随时修改变量的值 9 // let foo = 123, bar = 'abc';10 // foo = 'abc';11 // bar = 123;

12 // console.log(foo, bar); // 'abc' 12313

14 // 3. 使⽤ let 关键字定义的变量，变量声明不会被提升，因此我们需要先定义，后使⽤15 // console.log(foo); // Cannot access 'foo' before initialization 报错16 // let foo = 123;17 18

19 // 4. 在同⼀作⽤域下，不能重复定义同名变量20 // let foo = 123;

21 // let foo = 'abc'; // Identifier 'foo' has already been declared22 // console.log(foo)23

24 // 5. 全局定义的变量会被作为全局对象（global/window）的属性25

26 // 6. 在代码块中使⽤ let 关键字声明的变量会被束缚在代码块中

1.2 使⽤const关键字定义常量

1. 在使⽤ const 关键字声明常量时，必须要进⾏赋值（初始化）。2. 常量⼀旦初始化后，就不能被修改。

3. 在同⼀作⽤域下，不能重复定义同名的常量。4. 常量的声明不会被提升

5. 所有常量只在当前代码块内有效，⼀旦执⾏流到了代码块外，这些常量就会被⽴即销毁。6.不在Windows下

1

1.3 模块字⾯量

插⼊数据

1

1.4 展开操作符 （...）

给变量前⾯加三个点（...）,就不再打印出数组格式了，（如控制台打印的⼀⼆⾏，第⼀⾏是使⽤展开操作符，第⼆⾏是没有使⽤展开操作符的）

使⽤场景：a.合并数组 b.复制数组

1

1.5 剩余操作符（⼜名不定参数）

不定参数：顾名思义，不知道还有多少个参数，剩余的统统接收，⽤来代替arguments;

函数中剩余操作符只能是函数中最后的⼀个形参，格式：...bar；

第⼀个实参会被赋值给第⼀个形参，剩余所有的实参都会被交给形参 bar，bar会⾃动变成⼀个数组；

1

⼆、解构

2.1解构的实⽤性

在 ECMAScript 5 或更早的版本中，从对象或数组中获取特定的数据并赋值给本地变量需要书写很多并且相似的代码。例如：

1 let options = {2 repeat: true,3 save: false4 };5

6 // 从对象中提取数据7

8 let repeat = options.repeat,9 save = options.save;

这段代码反复地提取在 options 上存储地属性值并将它们传递给同名的本地变量。虽然这些看起来不是那么复杂，不过想象⼀下如果你的⼀⼤批变量有着相同的需求，你就只能⼀个⼀个地赋值。⽽且，如果你需要从对象内部嵌套的结构来查找想要的数据，你极有可能为了⼀⼩块数据⽽访问了整个数据结构。

这也是 ECMAScript 6 给对象和数组添加解构的原因。当你想要把数据结构分解为更⼩的部分时，从这些部分中提取数据会更容易些。很多语⾔都能使⽤精简的语法来实现解构操作

2.2 对象解构 -解构赋值 （ { } 花括号）

1. 声明的变量是同名变量，写在{}⾥即可，变量之间⽤“，”隔开就⾏；

2. 声明的变量是⾮同名变量，在{}⾥写上\" “：”＋ “变量名” \" ，变量之间⽤“，”隔开 例如：

let { firstName: first_name, lastName: last_name } = obj;

3. 为变量指定默认值，当对象中没有某个属性时，直接写上变量的名字加“=”即可， 例如：

let { firstName, lastName, myAge = 20 } = obj;

let { firstName: first_name, lastName: last_name, myAge: my_age = 20} = obj;

4. 为已有变量重新赋值，（{}=obj），因为JS解析引擎不允许操作赋值符（=）左边出现花括号所以使⽤ \"（）\"将整个赋值语句包起来，使他成为⼀个表达式

5. 嵌套对象解构，（俄罗斯套娃，哈哈~~）例如：obj⾥⾯的phone⾥⾯的number赋值给同名变量number

let { phone: { number, brand } } = obj;

1

2.3 数组解构（[ ]中括号）

1. 数组解构初始化变量：数组中的元素会按照顺序赋值给变量2. 使⽤数组解构为变量重新赋值，[ ]=colors,

[ firstColor, secondColor ] = colors;我们

3. 为变量指定默认值，当数组中没有第四个元素。⽽我们⼜需要第四个元素时，我们可以给变量赋值，但是当元素中有第四个元素，我们再给第四个元素赋值是⽆效的；

4. 跳过数组中的指定元素，当我们不需要第⼆，三个元素，⼜需要第四个元素，中间可以⽤“ ，”隔开，5. 嵌套解构前⾯不需要的数据⽤ “ ，”隔开，嵌套的⽤“ [ ]”l来表⽰

1

2.4 混合解构

1

2.5 参数解构

1

三、函数

3.1 默认参数

ES5 语法中，为函数形参指定的默认值写法

1

　ES6中为函数形参指定默认值

　　a.除了为形参直接指定默认值以外，形参的默认值还可以是表达式，例如，timeout = 5 * 1000　　b.在预编译阶段，形参表达式不会执⾏，只有在调函函数，并且没有为形参传递实参的情况下才执⾏

1

3.2 不定参数

1

previousValue：上⼀个值currentValue：当前的值

reduce()⽅法：

1.接收⼀个函数作为累加器，将数组元素计算为⼀个值（从左到右），

2.需要接收四个参数（ 必需：1.acc 累加器 2.cur 当前值 ；可选：1.idx 当前索引 2 .src 源数组）

3.3 箭头函数

凡是以后遇到匿名函数都可以使⽤箭头函数

省略等号和function

1. 如果形参数量为 0，则必须加上⼩括号。箭头后⾯的表达式的结果会被作为函数的返回值。2. 如果形参的数量为 1，则可以省略⼩括号。3. 如果形参数量⼤于 1，则不能省略⼩括号。

4. 如果函数的执⾏体⽐较简单（直接量或表达式），可以省略⼤括号，箭头后⾯的直接量或表达式会被⾃动作为返回值5. 如果函数的执⾏体⽐较复杂，则不能省略⼤括号。

1

3.4 箭头函数没有this绑定

1. 普通函数作⽤域中的 this 已经被绑定成 window 对象，因此当我们放问 this 时，直接在当前作⽤域下就能访问的到。2. 箭头函数的作⽤域中没有绑定 this，因此，当我们访问 this 时，会去上⼀层作⽤域中查找 this。

1

3.5 箭头函数没有arguments绑定

1

3.6 箭头函数中不能⼿动绑定this

1

3.7 new.target

1

四、对象

4.1 对象-属性初始值的简写

当⼀个对象的属性与本地变量同名时，不需要再写冒号和值，直接写属性名即可

1

4.2 对象⽅法的简写

1

4.3 可计算属性名

1

4.4 对象 新增的两个⽅法

1

4.5 重复的对象字⾯量属性

1

4.6 ⾃有属性枚举顺序

1

4.7 改变对象的属性

1

4.8 使⽤super关键字访问原型对象（构造函数类）

1

五、类

5.1 ES5 中与类相似的结构

1

5.2 ES6 中新增类的概念

1

5.3 类和构造函数的区别

1. 类的声明不会被提升，⽽构造函数的声明会被提升。

2. 使⽤除 new 以外的⽅式调⽤类的构造函数（constructor）会导致程序抛出错误。 3. 在类中声明的⽅法都是不可枚举的。

5.4 类-构造函数的属性

1

5.5 类-类的静态⽅法

1

5.6 类-构造函数的继承

1

5.7 类-类的继承

1

5.8 类-类的构造函数

1

5.9 覆盖⽗类的⽅法

1

5.10 调⽤⽗类的⽅法

1

5.11 继承类的静态⽅法

1

5.12 ES5中⾃⼰实现的模块

1

5-13 ES6模块化规范

1 2

3

4 5 6 7 8

module1.js

1 // 崔景龙 2

3 // 1. 模块私有的内容

4 // function multiply (x, y) { 5 // return x * y; 6 // } 7 8

9 // 2. 模块导出的内容

10 // export function sum (x, y) {11 // return x + y;12 // }13

14 // export function substract (x, y) {15 // return x - y;16 // }17

18 // 3. ⼀次导出多个模块成员19 function divide (x, y) {20 return x / y;21 }22

23 function remainder (x, y) {24 return x % y;25 }26

27 export { divide, remainder };28

29 // 4. 为导出成员重命名

30 // export { divide as div, remainder as rem };31 32

33 // 5. 默认导出，模块默认导出成员，其他模块导⼊该成员时，名称不能写到⼤括号中，并且⽆需与导出时的名称⼀致。34 // export default function max (x, y) {35 // return x > y ? x : y;36 // }37 38

39 // 6. 每个模块只能有⼀个默认导出，因此下⾯的代码会抛出错误。40 // export default function min (x, y) {41 // return x < y ? x : y;42 // }

module2.js

1 // 刘旭凯 2

3 // 1. 从 module1.js 中导⼊ sum() 和 substract() ⽅法 4 // import { sum, substract } from './13-module1.js'; 5

6 // 使⽤从 module1.js 中导⼊的⽅法 7 // console.log(sum(12, 48))

8 // console.log(substract(12, 48)) 9

10 // 2. 导⼊重命名之后的模块成员

11 // 注意，必须要写成重命名之后的名称（div，rem），不能写成重命名之前的名称（divide，remainder）12 // import { div, rem } from './13-module1.js';13 // console.log(div(48, 12))14 // console.log(rem(48, 12))15

16 // 3. 导⼊其他模块默认导出成员

17 // 注意，名称不能写到⼤括号中，并且⽆需与导出时的名称⼀致。18 // import abc from './13-module1.js';19 // console.log(abc(12, 48))20

21 // 4. 同时导⼊其他模块的默认导出的成员和普通导出的成员22 // import abc, {sum, div} from './13-module1.js'23 // console.log(abc(12, 48))24 // console.log(sum(12, 48))25 // console.log(div(12, 48))26

27 // 5. 为导⼊的成员重命名

28 // 注意，重命名之后不能再使⽤之前的名称了，否则会抛出错误。29 // import { substract as sub} from './13-module1.js';30 // console.log(sub(12, 48))

31 // console.log(substract(12, 48)); // 抛出错误32

33 // 6. 导⼊其他模块导出的所有成员

34 // import * as module1 from './13-module1.js'35 // console.log(module1.sum(12, 34))36 // console.log(module1.default(12, 34))37

38 // 7. 导⼊没有导出任何成员的模块，⽬的是想让模块中的代码执⾏39 // 注意，模块中的代码只在第⼀次被导⼊时执⾏。40 // import './13-module1.js';41

42 // 下⾯是⼀个简单的使⽤场景：43

44 // module1.js ⽂件中有如下代码：45 // let age = 20;46

47 // export function getAge () {48 // return age;49 // }50

51 // export function setAge () {52 // age++;53 // }

55 // module2.js ⽂件中的代码如下：

56 // import { setAge } from './13-module1.js';57 // setAge();58

59 // module3.js ⽂件中的代码如下：60 // import './module2.js';

61 // import { getAge } from './module1.js';62 // console.log(getAge()); // 2163

// 8. 将导⼊的成员重命名之后再次导出

65 export { divide as div, remainder as rem } from './13-module1.js';

module3.js

1 // 导⼊ module2.js 模块中导出的成员（对应 module2.js ⽂件中第8个⽰例）2 import { div, rem } from './14-module2.js';3 console.log(div(48, 12))4 console.log(rem(48, 12))