ES 6新语法

程序员文章站 2022-03-03 22:15:13

一、块级作用域绑定回顾：使用var关键字定义变量定义 = 声明 + 赋值； 1. 可以一次定义多个变量 2. 定义时可以只声明不赋值 3. 定义之后可以随时修改变量的值 4. 变量声明会被提升 5. 可重复定义变量 6. 全局定义的变量会被作为全局对象（global/window）的属性 7. ......

一、块级作用域绑定

回顾：使用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' 123
13 
14         // 3. 使用 let 关键字定义的变量，变量声明不会被提升，因此我们需要先定义，后使用
15         // console.log(foo);  // foo is not undefined
16         // let foo = 123;
17 
18 
19         // 4. 在同一作用域下，不能重复定义同名变量
20         // let foo = 123;
21         // let foo = 'abc';  // identifier 'foo' has already been declared
22         // console.log(foo)
23 
24         // 5. 全局定义的变量会被作为全局对象（global/window）的属性
25 
26         // 6. 在代码块中使用 let 关键字声明的变量会被束缚在代码块中

1.2 使用const关键字定义常量

1. 在使用 const 关键字声明常量时，必须要进行赋值（初始化）。

2. 常量一旦初始化后，就不能被修改。

3. 在同一作用域下，不能重复定义同名的常量。

4. 常量的声明不会被提升

5. 所有常量只在当前代码块内有效，一旦执行流到了代码块外，这些常量就会被立即销毁。

 1 <script>
 2         
 3         // 1. 在使用 const 关键字声明常量时，必须要进行赋值（初始化）。
 4         // const foo = 123, bar = 'abc';
 5         // const bar;  // 抛出错误：missing initializer in const declaration
 6 
 7         // 2. 常量一旦初始化后，就不能被修改。
 8         // const foo = 123;
 9         // foo = 'abc';  // 抛出错误：assignment to constant variable.
10 
11         // 3. 在同一作用域下，不能重复定义同名的常量
12         // const foo = 123;
13         // const foo = 'abc';  // 抛出错误：identifier 'foo' has already been declared
14 
15         // 4. 常量的声明不会被提升
16         // console.log(foo)  // 抛出错误：foo is not defined
17         // const foo = 123;
18 
19         // 5. 所有常量只在当前代码块内有效，一旦执行流到了代码块外，这些常量就会被立即销毁。
20         // if (true) {
21         //     const foo = 123;
22         //     console.log(foo)
23         // }
24         // console.log(foo)  // 抛出错误：foo is not defined
25 
26     </script>

1.3 模块字面量

 1  <script>
 2         
 3         let str1 = '你好，世界！';
 4         let str2 = `hello
 5                     world!`;  // 可以直接换行
 6         let str3 = `hello ${str1} world!`;  // 向模板中插入数据
 7         console.log(str3)
 8         // 使用场景：
 9 
10         let students = [
11             {
12                 name: '黄聪聪',
13                 age: 20,
14                 gender: '男'
15             },
16             {
17                 name: '赵志刚',
18                 age: 20,
19                 gender: '男'
20             },
21             {
22                 name: '江芦贵',
23                 age: 20,
24                 gender: '男'
25             }
26         ];
27 
28         let htmls = '';
29 
30         students.foreach(function(student) {
31             htmls += `<tr>
32                         <td>${student.name  }</td>
33                         <td>${student.age   }</td>
34                         <td>${student.gender}</td>
35                      </tr>`;
36         });
37 
38         console.log(htmls)
39         
40 
41     </script>

1.4 展开操作符（...）

 1 <script>
 2 
 3         let colors1 = ['red', 'green', 'blue'];
 4 
 5         // 使用展开操作符输出数组中的元素，类似于：console.log('red', 'green', 'blue')
 6         console.log(...colors1)
 7         console.log(colors1)  //对象
 8 
 9         // 使用场景一：合并数组，将 colors1 中的元素合并到 colors2 中
10         let colors2 = ['black', 'white', 'purple', ...colors1];
11         console.log(...colors2)
12         // 使用场景二：复制数组
13         let colors3 = [...colors2]
14         console.log(...colors3)
15     </script>

ES 6新语法

1.5 剩余操作符

函数中剩余操作符只能是函数中最后的一个形参，格式：...bar；
第一个实参会被赋值给第一个形参，剩余所有的实参都会被交给形参 bar，bar会自动变成一个数组；

 1    <script>
 2         // 实参 12 会被赋值给形参 a，剩余的所有实参都会被交给形参 bar，bar 会自动变成一个数组。
 3         function foo (a, ...bar) {
 4            console.log(a, bar)
 5         }
 6 
 7         foo(12, 34, 45, 67, 89)
 8         // 注意，剩余操作符只能应用到最后一个形参上，否则会抛出错误：rest parameter must be last formal parameter
 9         // 下面的写法是错误的：
10         // function foo (a, ...bar, b) {
11         //    console.log(a, bar, b)
12         // }
13 
14         // foo(12, 34, 45, 67, 89)
15     </script>

ES 6新语法

二、解构

2.1解构的实用性

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

1 let options = {
2         repeat: true,
3         save: false
4    };
5 
6 // 从对象中提取数据
7 
8 let repeat = options.repeat,
9     save = options.save;

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

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

2.2 对象解构

 1    <script>
 2 
 3         const obj = {
 4             firstname: '张康',
 5             lastname: '尼古拉斯',
 6             myage: 30,
 7             phone: {
 8                 number: 110,
 9                 brand: '魅族',
10                 color: '黑色'
11             }
12         };
13 
14         // 1. 使用对象解构初始化同名变量
15         // 告诉 obj 对象，把 firstname 属性的值赋值给同名变量 firstname，把 lastname 属性的值赋值给同名变量 lastname
16         // let { firstname, lastname } = obj;
17         // console.log(firstname, lastname)  // '张康' '尼古拉斯'
18 
19         // 2. 使用对象解构初始化非同名变量
20         // 告诉 obj 对象，把 firstname 属性的值赋值给变量 first_name，把 lastname 属性的值赋值给变量 last_name
21 
22         // let { firstname: first_name, lastname: last_name } = obj;
23         // console.log(first_name, last_name)  // '张康' '尼古拉斯'
24 
25         // 3. 为变量指定默认值
26         // 当 obj 对象中没有 myage 属性时，变量 myage 默认会被赋值为 20
27         // let { firstname, lastname, myage = 20 } = obj;
28         // console.log(firstname, lastname, myage)  // '张康' '尼古拉斯' 30
29 
30         // 当 obj 对象中没有 myage 属性时，变量 my_age 默认会被赋值为 20
31         // let { firstname: first_name, lastname: last_name, myage: my_age = 20} = obj;
32         // console.log(first_name, last_name, my_age)  // '张康' '尼古拉斯' 30
33 
34         // 4. 使用对象解构为已有变量重新赋值
35         // let first_name = '郭帅', last_name = '莱昂纳多';
36 
37         // js 解析引擎不允许赋值操作符（=）左边出现花括号，但是可以使用小括号将整个赋值语句包裹起来，这样一来，整个赋值语句就变成了一个表达式。
38         // ({ firstname: first_name, lastname: last_name } = obj);
39         // console.log(first_name, last_name)  // '张康' '尼古拉斯'
40 
41         // 5. 嵌套对象解构
42         // 告诉 obj 对象，把 phone 对象中的 number 属性的值赋值给变量 number，把 phone 对象中的 brand 属性的值赋值给变量 brand
43         // let { phone: { number, brand } } = obj;
44         // console.log(number, brand)
45       
46     </script>

2.3 数组解构

 1  <script>
 2 
 3         const colors = ['red', 'green', 'blue', 'orange', [ 'black', 'white' ] ];
 4 
 5         // 1. 使用数组解构初始化变量
 6         // 数组中的元素会按照顺序赋值给这 3 个变量
 7         // let [ firstcolor, secondcolor, thirdcolor ] = colors;
 8         // console.log(firstcolor, secondcolor, thirdcolor)
 9         
10         // 2. 使用数组解构为变量重新赋值
11         // let firstcolor = 'black', secondcolor = 'white';
12         // 数组中的元素会按照顺序赋值给这 2 个变量
13         // [ firstcolor, secondcolor ] = colors;
14         // console.log(firstcolor, secondcolor)
15 
16         // 3. 为变量指定默认值
17         // 当数组中没有第 4 个元素时，变量 fourthcolor 会被赋值成默认值 'pink'
18         // let [ firstcolor, secondcolor, thirdcolor, fourthcolor = 'pink' ] = colors;
19         // console.log(firstcolor, secondcolor, thirdcolor, fourthcolor)
20 
21         // 4. 跳过数组中的指定元素
22         // let [ firstcolor, , ,fourthcolor ] = colors;
23         // console.log(firstcolor, fourthcolor)
24         
25         // 5. 嵌套数组解构
26         let [,,,,[nestedfirstcolor, nestedsecondcolor]] = colors;
27         console.log(nestedfirstcolor, nestedsecondcolor)
28 
29 
30     </script>

2.4 混合解构

 1    <script>
 2 
 3         let node = {
 4             type: 'identifier',
 5             name: 'foo',
 6             loc: {
 7                 start: {
 8                     line: 1,
 9                     column: 1
10                 },
11                 end: {
12                     line: 4,
13                     column: 4
14                 }
15             },
16             range: [0, 3]
17         };
18 
19         // 把 node 对象中 loc 对象的 start 属性的值赋值给变量 start，把 range 数组中第 2 个元素赋值给变量 endindex
20         let { loc: { start }, range: [, endindex] } = node;
21 
22         console.log(start, endindex)
23 
24     </script>

2.5 参数解构

 1 <script>
 2         // 1. 以普通方式传参时，相当于把 obj 对象赋值给形参 student
 3         // student = obj
 4 
 5         // function getfullname (student) {
 6         //     return student.firstname + ' · ' + student.lastname;
 7         // }
 8 
 9         // let obj = {
10         //     firstname: '刘旭凯',
11         //     lastname: '约翰尼'
12         // };
13 
14         // console.log(getfullname(obj))
15 
16         
17         // 2. 以对象解构的方式传参
18         // 把 obj 对象中的 firstname 属性的值传递给形参 firstname，把 lastname 属性的值传递给形参 lastname
19         // { firstname, lastname } = obj;
20 
21         // function getfullname ({ firstname, lastname }) {
22         //     return firstname + ' · ' + lastname;
23         // }
24 
25         // let obj = {
26         //     firstname: '刘旭凯',
27         //     lastname: '约翰尼'
28         // };
29 
30         // console.log(getfullname(obj))
31 
32         // 3. 为形参指定默认值
33         // 当 obj 对象没有 lastname 属性时，形参 lastname 就会使用默认值 '尼古拉斯'
34         function getfullname ({ firstname, lastname = '尼古拉斯' }) {
35             return firstname + ' · ' + lastname;
36         }
37 
38         let obj = {
39             firstname: '刘旭凯',
40             lastname: '克里斯蒂安' 
41         };
42 
43         console.log(getfullname(obj))
44 
45 
46     </script>

三、函数

3.1 默认参数

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

 1 <script>
 2    // 1. 在 es5 语法中，为函数形参指定默认值的写法：
 3         // 写法一：
 4         function foo (bar) {
 5             bar = bar || 'abc';
 6             console.log(bar)
 7         }
 8         foo('xyz')
 9 
10         // 写法二：
11         function foo (bar) {
12             if (typeof bar === 'undefined') {
13                 bar = 'abc';
14             }
15             console.log(bar)
16         }
17 
18         foo('xyz');
19 
20 
21 
22 </script>

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

　　a.除了为形参直接指定默认值以外，形参的默认值还可以是表达式，例如，timeout = 5 * 1000

　　b.在预编译阶段，形参表达式不会执行，只有在调函函数，并且没有为形参传递实参的情况下才执行

 1  <script>
 2      // 2. 使用 es6 的语法为函数形参指定默认值
 3          function post (url, data = {}, timeout = foo * 1000) {
 4              console.log(arguments)
 5             console.log(url, data, timeout)
 6          }
 7  
 8          // post('xyz', {uname: 'zhangsan', upass: '123'}, 3000);
 9         post('xyz', null, 3000);
10 
11          // 注意事项：
12       // 1> 除了为形参直接指定默认值以外，形参的默认值还可以是表达式，例如，timeout = 5 * 1000
13         // 2> 在预编译阶段，形参表达式不会执行，只有在调函函数，并且没有为形参传递实参的情况下才执行。
14   
15  </script>

3.2 不定参数

 1  <script>
 2         
 3         // 不定参数，使用剩余操作符接收剩余的实参，这些实参会被保存到一个不定参数（args）中
 4         function foo (...args) {
 5             return args.reduce(function (previousvalue, currentvalue) {
 6                 console.log(previousvalue, currentvalue)
 7                 return previousvalue += currentvalue;
 8             })
 9         }
10 
11         // 将上面的函数改成箭头函数的形式
12         var foo = (...args) => args.reduce((a, b) =>a += b)
13 
14 
15         console.log(foo(1, 32, 34, 5, 6))
16 
17     </script>

previousvalue：上一个值

currentvalue：当前的值

reduce()方法：

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

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

3.3 箭头函数

省略等号和function

如果形参数量为 0，则必须加上小括号。箭头后面的表达式的结果会被作为函数的返回值。

如果形参的数量为 1，则可以省略小括号。

如果形参数量大于 1，则不能省略小括号。

如果函数的执行体比较简单（直接量或表达式），可以省略大括号，箭头后面的直接量或表达式会被自动作为返回值

如果函数的执行体比较复杂，则不能省略大括号。

 1   <script>
 2         // 1. 形式一：
 3         // var foo = function () {
 4         //     return 'hello world!';
 5         // };
 6 
 7         // 如果形参数量为 0，则必须加上小括号。箭头后面的表达式的结果会被作为函数的返回值。
 8         // var foo = () => { 
 9         //     return 'hello world!';
10         // }
11 
12         // 2. 形式二：
13         // var foo = function (greeting) {
14         //     return greeting;
15         // }
16 
17         // 如果形参的数量为 1，则可以省略小括号。
18         // var foo = greeting => {
19         //     return greeting;
20         // }
21 
22         // 3. 形式三：
23         // var foo = function (firstname, lastname) {
24         //     return firstname + ' · ' + lastname;
25         // }
26 
27         // 如果形参数量大于 1，则不能省略小括号。
28         // var foo = (firstname, lastname) => {
29         //     return firstname + ' · ' + lastname;
30         // }
31 
32         // 4. 形式四：
33         // var foo = function (a, b) {
34         //     return a > b ? a : b;
35         // }
36 
37         // 如果函数的执行体比较简单（直接量或表达式），可以省略大括号，箭头后面的直接量或表达式会被自动作为返回值。
38         // var foo = (a, b) => a > b ? a : b;
39 
40         // 5. 形式五：
41         // var foo = function (a, b) {
42         //     let max = a;
43         //     if (b > a) {
44         //         max = b;
45         //     } 
46         //     return max;
47         // }
48 
49         // 如果函数的执行体比较复杂，则不能省略大括号。
50         // var foo = (a, b) => {
51         //     let max = a;
52         //     if (b > a) {
53         //         max = b;
54         //     } 
55         //     return max;
56         // }
57         // console.log(foo('贾树华', '尼古拉斯'))
58 
59 
60 
61     </script>

3.4 箭头函数没有this绑定

普通函数作用域中的 this 已经被绑定成 window 对象，因此当我们放问 this 时，直接在当前作用域下就能访问的到。

箭头函数的作用域中没有绑定 this，因此，当我们访问 this 时，会去上一层作用域中查找 this。

 1 <script>
 2 
 3         // 普通函数作用域中的 this 已经被绑定成 window 对象，因此当我们放问 this 时，直接在当前作用域下就能访问的到。
 4         // var foo = function () {
 5         //     console.log(this)
 6         //     return 'hello world!';
 7         // };
 8         
 9         // 箭头函数的作用域中没有绑定 this，因此，当我们访问 this 时，会去上一层作用域中查找 this。
10         // var bar = () => { 
11         //     console.log(this)
12         //     return 'hello world!';
13         // };
14 
15 
16         // 示例，由于 sayname 箭头函数中没有绑定 this，因此我们访问 this 时，会去全局作用域中查找。
17         // 查找的结果是 this 指向 window，因此输出的 name 的值是 '常军辉'
18 
19         // var name = '常军辉';
20         // var obj = {
21         //     name: '吕鑫洋',
22         //     sayname: function () {
23         //         // this = obj
24         //         return this.name;
25         //     }
26         // };
27 
28         // console.log(obj.sayname())
29 
30 
31 
32     </script>

3.5 箭头函数没有arguments绑定

 1  <script>
 2 
 3         // 普通函数
 4         var foo = function (greeting) {
 5             console.log(arguments)
 6             return greeting;
 7         };
 8         
 9         // 箭头函数中没有绑定 arguments 对象，因此下面的输入语句会报错：arguments is not defined
10         var bar = (greeting) => { 
11             console.log(arguments)
12             return greeting;0
13         };
14 
15         console.log(foo('hello world!'))
16         console.log(bar('你好世界！'))
17 
18     </script>

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

 1   <script>
 2 
 3         // this 指向的对象
 4         var obj = {
 5             fullname: '谭文华'
 6         };
 7 
 8         // 1. 普通函数，可以使用 call() 方法改变函数中 this 的绑定
 9         // var foo = function (greeting) {
10         //     return this.fullname + '说：' + greeting;
11         // };
12         // console.log(foo.call(obj, 'hello world!'))
13 
14 
15         // 2. 箭头函数，不能使用 call() 方法改变函数中 this 的绑定，箭头函数中不能绑定 this。
16         var bar = (greeting) => { 
17             return this.fullname + '说：' + greeting;
18         };
19 
20         // 下面的代码不会报错，但是也不起作用
21         console.log(bar.call(obj, '你好世界！'))
22 
23     </script>

3.7 new.target

 1     <script>
 2         // 1. ecmascript 5 中判断构造函数是否通过 new 关键字调用的写法
 3         // function person (fullname) {
 4         //     if (this instanceof person) {
 5         //         this.fullname = fullname;
 6         //     } else {
 7         //         return new person(fullname);
 8         //     }
 9         // }
10 
11         // let student = person('孟天乐')
12 
13         // 2. ecmasript 6 引入一个 new.target 属性，当我们使用 new 操作符调用构造函数时，new.target 属性的值为构造函数，否则为 undefined
14         // function person (fullname) {
15         //     if (typeof new.target !== 'undefined') {
16         //         this.fullname = fullname;
17         //     } else {
18         //         throw new error('必须通过 new 关键字来调用 person。');
19         //     }
20         // }
21         // let student = new person('孟天乐');
22         // console.log(student)
23 
24         // 3. 除此之外，还可以检查 new.target 是否被某个特定构造函数所有调用。
25         // 例如，person 构造函数中的 new.target 属性的值被限定为 person 
26         // function person (fullname, age) {
27         //     if (typeof new.target === person) {
28         //         this.fullname = fullname;
29         //         this.age = age;
30         //     } else {
31         //         throw new error('必须通过 new 关键字来调用 person。');
32         //     }
33         // }
34 
35         // function dog (fullname, age) {
36         //     person.call(this, fullname, age)
37         // }
38 
39         // let dog = new dog('hehe', 3)
40 
41         // console.log(dog)
42         
43         // 4. 不能在函数外部使用 new.target，否则会报错
44         function person () {
45             console.log(new.target)
46         }
47         
48         // 下面代码会抛出错误：new.target expression is not allowed here
49         // console.log(new.target) 
50 
51         let student = new person('崔景龙')
52 
53     </script>

四、对象

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

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

 1 <script>
 2         
 3         let fullname = '杨柯', age = 19;
 4 
 5         let obj = {
 6             fullname: fullname,
 7             age: age
 8         };
 9 
10         // 1. 当一个对象的属性与本地变量同名时，不需要再写冒号和值，直接写属性名即可。
11         let obj = {
12             fullname,
13             age
14         };
15 
16 
17     </script>

4.2 对象方法的简写

 1   <script>
 2         
 3    
 4         // 在 es 5 中，如果为对象添加方法，必须要通过指定名称并完整定义函数来实现。
 5         let obj = {
 6             fullname: '杨柯',
 7             sayname: function () {
 8                 return this.fullname;
 9             }
10         };
11 
12         // 在 es 6 中，语法更简洁，取消了冒号和 function 关键字。如下所示：
13         let obj = {
14             fullname: '杨柯',
15             sayname () {
16                 return this.fullname;
17             }
18         };
19 
20 
21     </script>

4.3 可计算属性名

 1 <script>
 2         
 3         // 在对象字面量中使用方括号表示该属性名是可计算的，方括号中的内容会被计算求值，最终转化成一个字符串，该字符串就是最终的属性名。
 4         let suffix = 'name';
 5 
 6         let person = {
 7             ['first' + suffix]: '杨帅',
 8             ['last' + suffix]: '泰坦尼'
 9         };
10 
11         console.log(person)
12 
13     </script>

4.4 对象新增的两个方法

 1   <script>
 2         
 3 
 4         // 1. 在有些情况下，既是全等运算符比较出来的结果也是不正确的。例如，在下面两种情况下：
 5 
 6         // +0 和 -0 在 js 解析引擎中被表示为两个完全不同的实体，而如果使用全等运算符（===）对两者进行比较，得到的结果是两者相等。
 7         console.log(+0 == -0);           // true
 8         console.log(+0 === -0);          // true
 9         console.log(object.is(+0, -0));  // false
10 
11         // nan 和 nan 在 js 解析引擎中被表示为两个完全相同的实体，但是无论使用等于（==）还是全等（===），得到的结果都是 false。
12         console.log(nan == nan);           // false
13         console.log(nan === nan);          // false
14         console.log(object.is(nan, nan));  // true
15 
16         // 在大多数情况下，object.is() 方法的比较结果与全等运算符完全相同，唯一的区别在于 +0 和 -0 会被识别为不相等，nan 和 nan 会被识别为相等。
17 
18         // 2. object.assign() 方法可以接收任意数量的源对象（obj2,obj3），并按照指定的顺序将属性复制到接收对象（obj1）。
19         //    如果多个源对象具有同名属性，则排位靠后的源对象会覆盖排外靠前的对象。
20 
21         let obj1 = {
22             fullname: '陈世壮',
23             sayname () {
24                 return this.fullname;
25             }
26         };
27 
28         let obj2 = {
29             fullname: '任俊玖',
30             age: 20
31         };
32 
33         let obj3 = {
34             fullname: '朱亚鹏',
35             gender: '男'
36         };
37 
38         // 通过自定义方法实现了一个可以合并多个对象的方法，
39         // function mixin(receiver, ...suppliers) {
40         //     suppliers.foreach(supplier => {
41         //         object.keys(supplier).foreach(key => {
42         //             receiver[key] = supplier[key]
43         //         })
44         //     })
45         //     return receiver;
46         // }
47         // console.log(mixin(obj1, obj2, obj3))
48         
49         // 使用 es6 新增 object.assgin() 方法将多个对象的属性合并到第一个对象中。
50         // object.assign(obj1, obj2, obj3);
51 
52         // console.log(obj1)
53         // console.log(obj2)
54         // console.log(obj3)
55 
56 
57 
58     </script>

4.5 重复的对象字面量属性

 1 <script>
 2         
 3         // 对于每一组重复属性，都会选取最后一个取值。
 4         let obj = {
 5             fullname: '陈世壮',
 6             fullname: '李忠易',
 7             age: 18,
 8             age: 20
 9         };
10 
11         console.log(obj.fullname);   // '李忠易'
12         console.log(obj.age);        // 20
13 
14     </script>

4.6 自有属性枚举顺序

 1    <script>
 2         
 3         // es 5 中并没有定义对象属性的枚举顺序，有 javascript 引擎厂商自行决定。
 4         // es 6 中明确规定了对象的自有属性被枚举时的返回顺序。
 5         // 自有属性枚举顺序的基本规则：
 6         // 1. 所有数字按升序
 7         // 2. 所有字符串按照它们被加入对象时的顺序排序
 8 
 9         let obj = {
10             a: 1,
11             0: 2,
12             c: 3,
13             2: 4,
14             b: 5,
15             1: 6
16         };
17 
18         console.log(object.getownpropertynames(obj));  // ["0", "1", "2", "a", "c", "b"]
19 
20     </script>

4.7 改变对象的属性

 1     <script>
 2         
 3         let person = {
 4             getgreeting () {
 5                 return 'hello';
 6             }
 7         };
 8 
 9         let dog = {
10             getgreeting () {
11                 return 'woof';
12             }
13         };
14 
15         // 使用 create() 方法将 person 对象作为原型对象
16         let friend = object.create(person);  // {}
17         console.log(friend.getgreeting());  // 'hello'
18         console.log(object.getprototypeof(friend) === person);  // true
19 
20         // 使用 setprototypeof() 方法将 friend 对象的原型对象修改成 dog
21         object.setprototypeof(friend, dog);
22         console.log(friend.getgreeting());  // 'hello'
23         console.log(object.getprototypeof(friend) === dog);  // true
24 
25     </script>

4.8 使用super关键字访问原型对象

 1     <script>
 2         
 3         let person = {
 4             getgreeting () {
 5                 return 'hello';
 6             }
 7         };
 8 
 9         let dog = {
10             getgreeting () {
11                 return 'woof';
12             }
13         };
14 
15         // let friend = {
16         //     getgreeting () {
17         //         return object.getprototypeof(this).getgreeting.call(this) + ', hi';
18         //     }
19         // };
20         
21         // es 6 引入了 super 关键字，super 指向当前对象的原型对象，实际上也就是 object.getprototypeof(this) 的值，于是，上面的代码可以简化成如下形式：
22         let friend = {
23             getgreeting () {
24                 return super.getgreeting() + ', hi';
25             }
26         };
27 
28         // 使用 setprototypeof() 方法将 friend 对象的原型对象修改成 person
29         object.setprototypeof(friend, person);
30         console.log(friend.getgreeting());  // 'hello'
31         console.log(object.getprototypeof(friend) === person);  // true
32 
33         // 使用 setprototypeof() 方法将 friend 对象的原型对象修改成 dog
34         object.setprototypeof(friend, dog);
35         console.log(friend.getgreeting());  // 'hello'
36         console.log(object.getprototypeof(friend) === dog);  // true
37 
38 
39 
40     </script>

五、类

5.1 es5 中与类相似的结构

 1    <script>
 2 
 3         // 构造函数类似于面向对象编程语言中类（class）
 4         function persontype(fullname) {
 5             this.fullname = fullname;
 6         }
 7 
 8         object.defineproperty(persontype.prototype, 'sayname', {
 9             configurable: true,
10             enumerable: false,
11             writable: true,
12             value: function () {
13                 return this.fullname;
14             }
15         })
16 
17         let student1 = new persontype('苑文浩');
18 
19         console.log(student1)
20 
21 
22     </script>

5.2 es6 中新增类的概念

 1  <script>
 2 
 3         // 使用 class 关键字定义 personclass 类
 4         class personclass {
 5             // personclass 类的构造函数，等价于构造函数 persontype
 6             // 当我们创建 personclass 的实例时，该方法会自动被调用。
 7             constructor(fullname) {
 8                 this.fullname = fullname;
 9             }
10 
11             // 为原型对象添加的方法，等于下面的代码：
12             // object.defineproperty(persontype.prototype, 'sayname', {
13             //         configurable: true,
14             //         enumerable: false,
15             //         writable: true,
16             //         value: function () {
17             //             return this.fullname;
18             //         }
19             // })
20 
21             sayname() {
22                 return this.fullname;
23             }
24         }
25 
26         let student1 = new personclass('刘旭凯');
27 
28         console.log(student1)
29 
30         // 通过与之前的构造函数对比，类和构造函数的作用是一样的。
31         // 其实类的语法只是一种语法糖，实质上等价于一个自定义类型的构造函数。
32 
33     </script>

5.3 类和构造函数的区别

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

2. 使用除 new 以外的方式调用类的构造函数（constructor）会导致程序抛出错误。

3. 在类中声明的方法都是不可枚举的。

5.4 类-构造函数的属性

 1    <script>
 2 
 3         function persontype(fullname) {
 4             this.fullname = fullname;
 5             // 实例对象的方法
 6             this.greeting = function () {
 7                 return 'hello world!';
 8             };
 9         }
10 
11         // 构造函数的方法
12         persontype.create = function (fullname) {
13             return new persontype(fullname)
14         };
15 
16         // 原型对象的方法
17         object.defineproperty(persontype.prototype, 'sayname', {
18             configurable: true,
19             enumerable: false,
20             writable: true,
21             value: function () {
22                 return this.fullname;
23             }
24         });
25 
26         // 构造函数的方法，可以在不创建实例的情况下直接使用。
27         // persontype.create('朱帅旗')
28     
29         // 在使用实例对象的属性时，必须要先创建实例对象。
30         // let student1 = new persontype('苑文浩');
31         // console.log(student1.fullname)
32         // console.log(student1.sayname())
33 
34     </script>

5.5 类-类的静态方法

 1  <script>
 2 
 3         // 类的语法
 4         class personclass {
 5 
 6             constructor(fullname) {
 7                 this.fullname = fullname;
 8                 // 实例对象的方法
 9                 this.greeting = function () {
10                     return '你好世界！';
11                 };
12             }
13 
14             // personclass 类的静态方法，等价于构造函数的方法
15             static create (fullname) {
16                 return new personclass(fullname);
17             }
18 
19             // 原型对象的方法
20             sayname () {
21                 return this.fullname;
22             }
23             
24         }
25 
26         // 类的静态方法，不用创建实例即可调用
27         personclass.create('张尊娟')
28 
29         // 在使用实例对象的属性时，必须要先创建实例对象。
30         let student1 = new personclass('张康');
31         console.log(student1.fullname)
32         console.log(student1.sayname())
33 
34     </script>

5.6 类-构造函数的继承

 1   <script>
 2 
 3         // 声明 rectangle 构造函数
 4         function rectangle (width, height) {
 5             this.width = width;
 6             this.height = height;
 7         }
 8 
 9         object.defineproperty(rectangle.prototype, 'getarea', {
10             enumerable: false,
11             configurable: true,
12             writable: true,
13             value: function () {
14                 return '矩形面积为：' + this.width * this.height;
15             }
16         });
17 
18         // 声明 square 构造函数
19         function square (size) {
20             rectangle.call(this, size, size);
21         }
22 
23         // 让 square 构造函数继承 rectangle 构造函数
24         square.prototype = object.create(rectangle.prototype, {
25             constructor: {
26                 configurable: true,
27                 enumerable: false,
28                 writable: true,
29                 value: square
30             }
31         });
32 
33         let square = new square(20);
34 
35         console.log(square)
36     </script>

5.7 类-类的继承

 1    <script>
 2 
 3         class rectangle {
 4 
 5             constructor(width, height) {
 6                 this.width = width;
 7                 this.height = height;
 8             }
 9 
10             getarea () {
11                 return '矩形面积为：' + this.width * this.height;
12             }
13         }
14 
15         // 让 square 类继承 rectangle 构类
16         class square extends rectangle {
17 
18             constructor (size) {
19                 // 等价于 rectangle.call(this, size, size)
20                 super(size, size)
21             }
22         }
23 
24         let square1 = new square(20)
25 
26         // square1.__proto__  --> obj.__proto__ --> rectange.prototype.__proto__  --> object.prototype
27 
28         console.log(square1)
29 
30     </script>

5.8 类-类的构造函数

 1  <script>
 2 
 3         // 1. 当我们创建某个类的实例时，类的构造函数（constructor）会自动被调用。
 4         class rectangle {
 5 
 6             constructor(width, height) {
 7                 this.width = width;
 8                 this.height = height;
 9             }
10 
11             getarea() {
12                 return '矩形面积为：' + this.width * this.height;
13             }
14         }
15 
16         // 2. 如果子类中具有构造函数，则必须在构造函数中使用 super 方法调用父类的构造函数，并传入所需的参数。
17         class square extends rectangle {
18             constructor (size) {
19                 super(size, size)
20             }
21         }
22 
23 
24         // 3. 构造函数不是必需的，当我们不需要为实例对象初始化属性时，可以省略构造函数。
25         // 当创建类的实例时，会自动地为类添加一个默认的 constructor 构造函数，并在构造函数中使用 super() 方法调用父类的构造函数，并传入所有参数。
26         // class square extends rectangle {
27 
28         // }
29 
30         // js 引擎在后台为我们做了哪些事情呢？下面的代码等价于上面的代码：
31         // class square extends rectangle {
32         //     constructor (...args) {
33         //         super(...args)
34         //     }
35         // }
36 
37         let square1 = new square(20)
38 
39         console.dir(square)
40         console.log(square1)
41 
42     </script>

5.9 覆盖父类的方法

 1   <script>
 2 
 3         // 
 4         class rectangle {
 5 
 6             constructor(width, height) {
 7                 this.width = width;
 8                 this.height = height;
 9             }
10 
11             getarea () {
12                 return '矩形面积为：' + this.width * this.height;
13             }
14         }
15 
16         // 
17         class square extends rectangle {
18             constructor (size) {
19                 super(size, size)
20             }
21 
22             // 创建一个与父类同名的方法就可以覆盖父类的方法。
23             // 在顺着原型对象链查找方法时，该方法会被优先找到。
24             getarea () {
25                 return '正方形的面积为：' + this.width * this.height;
26             }
27         }
28 
29         let square1 = new square(20)
30 
31         console.log(square1)
32         console.log(square1.getarea())
33 
34     </script>

5.10 调用父类的方法

 1   <script>
 2 
 3         // 
 4         class rectangle {
 5 
 6             constructor(width, height) {
 7                 this.width = width;
 8                 this.height = height;
 9             }
10 
11             getarea () {
12                 return '矩形面积为：' + this.width * this.height;
13             }
14         }
15 
16         // 
17         class square extends rectangle {
18             constructor (size) {
19                 super(size, size)
20             }
21 
22             // 在子类中使用 super 关键字就可以调用父类的方法
23             // rectangle.prototype.getarea.call(this).replace('矩形', '正方形');
24             getarea () {
25                 return super.getarea().replace('矩形', '正方形');
26             }
27             
28         }
29 
30         let square1 = new square(20)
31 
32         console.log(square1)
33         console.log(square1.getarea())
34 
35     </script>

5.11 继承类的静态方法

 1     <script>
 2 
 3         class animal {
 4             constructor(name) {
 5                 this.name = name;
 6             }
 7 
 8             static greeting () {
 9                 return 'hello';
10             };
11         }
12 
13         class dog extends animal {
14             constructor (name) {
15                 super(name)
16             }
17         }
18 
19         console.log(animal.greeting());
20 
21         // 父类的静态方法也会被子类继承，因此我们可以通过 dog 调用父类的 greeting() 方法。
22         console.log(dog.greeting());
23 
24     </script>

5.12 es5中自己实现的模块

 1   <script>
 2 
 3         // 1、张三和李四在项目开发中遇到的问题如下：
 4 
 5         // 张三创建了一个 index.js 文件，内容如下：
 6         let foo = 123;
 7 
 8         // 李四创建了一个 home.js 文件，内容如下：
 9         let foo = 'abc';
10 
11         // 当 index.js 和 home.js 文件同时引入到一个 index.html 文件中时，就会抛出错误。
12 
13         // 2、es 5 没有模块的概念，但是我们又需要类似于模块的功能，于是我们想了一系列的方式去自己实现模块的功能。
14         // 最常用的一种方式就是利用立即执行的函数表达式及其作用域实现模块的功能。例如：
15 
16         // 在 index.js 中创建模块 module1
17         let module1 = (function() {
18 
19             let foo = 123;
20 
21             function greeting () {
22                 return 'hello';
23             }
24 
25             return {
26                 foo,
27                 greeting
28             };
29 
30         }())
31 
32         // 在 home.js 中创建模块 module2
33         let module2 = (function() {
34 
35             let foo = 'abc';
36 
37             function greeting () {
38                 return 'hello';
39             }
40 
41             return {
42                 foo,
43                 greeting
44             };
45 
46         }())
47 
48         // 我们只需要保证两个模块的名称不同即可，在使用模块中的函数或变量时，只需要在前面加上模块名即可，如下所示：
49         console.log(module1.foo)
50         console.log(module2.foo)
51 
52 
53 
54     </script>

5-13 es6模块化规范

1 <body>
2    
3     <!-- 要想让浏览器把 module1.js 和 module2.js 当成两个模块去解析，你要为 script 标签添加 type="module" 属性 -->
4     <!-- 要想然下面的代码正确执行，不能使用文件协议（file://），也就是说不能直接使用浏览器打开该页面，需要将其放入服务器中，然后再打开。 -->
5     <script src="./13-module1.js" type="module"></script>
6     <script src="./14-module2.js" type="module"></script>
7     <script src="./15-module3.js" type="module"></script>
8 </body>

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 // }
54 
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());  // 21
63 
64 // 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))

上一篇： Python基础系列讲解-自动控制windows桌面

下一篇： vue中监听路由参数的变化

ES 6新语法

一、块级作用域绑定

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

1.1 使用let关键字定义变量

1.2 使用const关键字定义常量

1.3 模块字面量

1.4 展开操作符 （...）

1.5 剩余操作符

二、解构

2.1解构的实用性

2.2 对象解构

2.3 数组解构

2.4 混合解构

2.5 参数解构

三、函数

3.1 默认参数

3.2 不定参数

3.3 箭头函数

3.4 箭头函数没有this绑定

3.5 箭头函数没有arguments绑定

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

3.7 new.target

四、对象

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

4.2 对象方法的简写

4.3 可计算属性名

4.4 对象 新增的两个方法

4.5 重复的对象字面量属性

4.6 自有属性枚举顺序

4.7 改变对象的属性

4.8 使用super关键字访问原型对象

五、类

5.1 es5 中与类相似的结构

5.2 es6 中新增类的概念

5.3 类和构造函数的区别

5.4 类-构造函数的属性

5.5 类-类的静态方法

5.6 类-构造函数的继承

5.7 类-类的继承

5.8 类-类的构造函数

5.9 覆盖父类的方法

5.10 调用父类的方法

5.11 继承类的静态方法

5.12 es5中自己实现的模块

5-13 es6模块化规范

详解ES6中的Map与Set集合

详解ES6中的Map与Set集合

PHP6新特性分析

JS ES6中setTimeout函数的执行上下文示例

ES5 ES6中Array对象去除重复项的方法总结

JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】

ES6入门教程之Array.from()方法

ES6使用export和import实现模块化的方法

JavaScript 扩展运算符用法实例小结【基于ES6】

深入理解es6块级作用域的使用

1.4 展开操作符（...）

4.4 对象新增的两个方法