第一章：ES6简介

1.1 什么是ES6？

  • ES的全称是ECMAScript，它是由ECMA国际标准化组织，制定的一项脚本语言的标准化规范。 | 年份 | 版本 | | —- | —- | | 2015年6月 | ES2015 | | 2016年6月 | ES2016 | | 2017年6月 | ES2017 | | 2018年6月 | ES2018 | | … | … |
  • ES6实际上是一个泛指，泛指ES2015及后续版本。

1.2 为什么要使用ES6？

  • 每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有很多不令人满意的地方。
    • ①变量的提升特性增加了程序运行的不可预测性。
    • ②语法过于松散，实现相同的功能，不同的人可能会写出不同的代码。
    • ……

第二章：ES6的新增语法

2.1 关键字

2.1.1 let

  • ES6中新增的用于声明变量的关键字。
  • ①let声明的变量具有块级作用域。
  1. if (true) { 
  2.      let a = 10;
  3. }
  4. console.log(a) // a is not defined

注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

  • ②let声明的变量不存在变量提升。
  1. console.log(a); // Cannot access 'a' before initialization
  2. let a = 20;
  • ③let声明的变量具有暂时性死区特性（在块级作用域内使用let声明的变量会被绑定在块级作用域内，不受外面影响）。
  1. var temp = 123;
  2. if (true) {
  3.     console.log(temp);
  4.     let temp = 20; // Cannot access 'temp' before initialization
  5. }

2.1.2 const

  • 作用：声明常量，常量就是值（内存地址）不能变化的量。
  • ①const声明的常量具有块级作用域。
  1. if (true) { 
  2.      const a = 10;
  3.  }
  4. console.log(a) // a is not defined
  • ②const声明的常量必须赋值。
  1. const PI; // Missing initializer in const declaration
  • ③const声明的常量，值不能修改。
  1. const PI = 3.14;
  2. PI = 100; // Assignment to constant variable.
  1. const ary = [100, 200];
  2. ary[0] = 'a'; ary[1] = 'b';
  3. console.log(ary); // ['a', 'b']; 
  4. ary = ['a', 'b']; // Assignment to constant variable.

2.1.3 let、const和var的区别

  • 使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
  • 使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
  • 使用const声明的常量，在后面出现的代码中不能再修改该常量的值。 | var | let | const | | —- | —- | —- | | 函数级作用域 | 块级作用域 | 块级作用域 | | 变量提升 | 不存在变量提升 | 不存在变量提升 | | 值可更改 | 值可更改 | 值不可更改 |
  • 尽量使用let和const。

2.2 解构赋值

2.2.1 概述

  • ES6中允许从数据中提取值，按照对应位置，对变量赋值。
  • 对象也可以实现解构。

2.2.2 数组解构

  1.  let [a, b, c] = [1, 2, 3];
  2.  console.log(a)
  3.  console.log(b)
  4.  console.log(c)

如果解构不成功，变量的值为undefined。

  • 示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport"
  7.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <title>数组解构</title>
  10. </head>
  12. <body>
  13.     <script>
  14.         /* ES6允许我们按照--对应的关系从数组中提取值，然后将值赋值给变量，如果解构不成功，变量的值为undefined。 */
  15.         /* ES6之前 */
  16.         let arr = [1, 2, 3];
  17.         console.log(arr[0]);//1
  18.         console.log(arr[1]);//2
  19.         console.log(arr[2]);//3
  20.         /* ES6之后 */
  21.         let [a, b, c] = arr;
  22.         console.log(a); //1
  23.         console.log(b); //2
  24.         console.log(c); //3
  26.         let [d, e] = [1];
  27.         console.log(d); //1
  28.         console.log(e); //undefined
  29.     </script>
  30. </body>
  32. </html>

2.2.3 对象解构

  1. let person = { name: 'zhangsan', age: 20 }; 
  2. let { name, age } = person;
  3. console.log(name); // 'zhangsan' 
  4. console.log(age); // 20
  1. let {name: myName, age: myAge} = person; // myName myAge 属于别名
  2. console.log(myName); // 'zhangsan' 
  3. console.log(myAge); // 20
  • 示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport"
  7.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <title>对象解构</title>
  10. </head>
  12. <body>
  13.     <script>
  14.         let person = {
  15.             name: '张三',
  16.             age: 20
  17.         }
  18.         let {name, age} = person;
  19.         console.log(name); // 张三
  20.         console.log(age); // 20
  22.     </script>
  23. </body>
  25. </html>
  • 示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport"
  7.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <title>对象解构2</title>
  10. </head>
  12. <body>
  13.     <script>
  14.         let person = {
  15.             name: '张三',
  16.             age: 20
  17.         }
  18.         let {name: myName, age: myAge} = person; //myName和myAge是别名
  19.         console.log(myName); // 张三
  20.         console.log(myAge); // 20
  22.     </script>
  23. </body>
  25. </html>

2.3 箭头函数

  • ES6中新增的定义函数的方式：
  1. () => {}
  1. const fn = () => {}
  • 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号。
  1. function sum(num1, num2) { 
  2.     return num1 + num2; 
  3. }
  1. const sum = (num1,num2) => num1 + num2;
  • 如果形参只有一个，可以省略小括号。
  1. function fn (v) {
  2.     return v;
  3. }
  1. const fn = v => v;
  • 箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。
  1. const obj = { name: '张三'} 
  2. function fn () { 
  3.     console.log(this);
  4.     return () => { 
  5.         console.log(this)
  6.     } 
  7. } 
  8. const resFn = fn.call(obj); 
  9. resFn();
  • 示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport"
  7.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <title>箭头函数</title>
  10. </head>
  12. <body>
  13.     <script>
  14.         // 箭头函数是ES6用来简化函数定义语法，箭头函数也称为Lambda表达式。
  15.         const fn = () => {
  16.             console.log('我是箭头函数啊');
  17.         }
  18.         fn();
  19.         /* 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号。 */
  20.         const sum = (num1, num2) => num1 + num2;
  21.         console.log(sum(1, 2));
  22.         /* 如果形参只有一个，可以省略小括号。 */
  23.         const fn2 = v => v;
  24.         console.log(fn2(2));
  25.         /* 箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。 */
  26.         const obj = {name: '张三'}
  28.         function fn3() {
  29.             console.log(this);
  30.             // return function () {
  31.             //     console.log(this); //window
  32.             // }
  33.             return () => {
  34.                 console.log(this) //this指向的是函数定义位置的上下文this。
  35.             }
  36.         }
  38.         const resFn = fn3.call(obj);
  39.         resFn();
  41.     </script>
  42. </body>
  44. </html>

2.4 剩余参数（可变参数）

  • 可变参数语法运行我们将一个不定数量的参数表示未一个数组。
function sum (first, ...args) {
     console.log(first); // 10
     console.log(args); // [20, 30] 
}

sum(10, 20, 30)
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>可变参数</title>
</head>

<body>
    <script>
        function sum(a, ...b) {
            console.log(a); // 1
            console.log(b); // [2,3,4,5,6]
        }

        sum(1, 2, 3, 4, 5, 6);
    </script>
</body>

</html>
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>可变参数和解构配合使用</title>
</head>

<body>
    <script>
        let stu = ['a','b','c'];
        let [s1,...s2] = stu;
        console.log(s1); //a
        console.log(s2); //['b'、'c']
    </script>
</body>

</html>

第三章：ES6的内置对象扩展

3.1 Array的扩展

3.1.1 扩展运算符（展开语法）

  • 扩展运算符可以将数组或对象转为用逗号隔开的参数序列。

  • 示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>扩展运算符</title>
</head>

<body>
    <script>
        /* 扩展运算符可以将数组拆分为以逗号分隔的参数序列 */
        let arr = [1, 2, 3];
        // ...arr //1,2,3
        console.log(...arr); //1 2 3
        console.log(1, 2, 3); //1 2 3

    </script>
</body>

</html>
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>扩展运算符用于合并数组</title>
</head>

<body>
    <script>
        let arr1 = [1, 2, 3];
        let arr2 = [3, 4, 5];
        let arr3 = [...arr1, ...arr2];
        console.log(arr3); // [1, 2, 3, 3, 4, 5]
    </script>
</body>

</html>
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>扩展运算符用于合并数组2</title>
</head>

<body>
    <script>
        let arr1 = [1, 2, 3];
        let arr2 = [3, 4, 5];
        arr1.push(...arr2);
        console.log(arr1); // [1, 2, 3, 3, 4, 5]
    </script>
</body>

</html>
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>将伪数组转换为真正的数组</title>
</head>

<body>
    <div></div>
    <div></div>

    <script>
        let divs = document.getElementsByTagName('div');
        let divsArray = [...divs];
        console.log(divsArray);
    </script>
</body>

</html>

3.1.2 Array.from()方法

  • 将类数组或可变量对象转换为真正的数组。

  • 方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

  • 示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Array.from()方法</title>
</head>

<body>
    <script>
        let arrayLike = {
            '0': 'a',
            '1': 'b',
            '2': 'c',
            length: 3
        };
        let arr2 = Array.from(arrayLike);
        console.log(arr2); //["a", "b", "c"]
    </script>
</body>

</html>
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Array.from()方法2</title>
</head>

<body>
    <script>
        let arrayLike = {
            '0': 1,
            '1': 2,
            '2': 3,
            length: 3
        };
        let arr2 = Array.from(arrayLike, item => item * 2);
        console.log(arr2); //[2, 4, 6]
    </script>
</body>

</html>

3.1.3 实例方法find()

  • 用于找出第一个符合条件的数组成员，如果没有找到返回undefined。

  • 示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>实例方法find()</title>
</head>

<body>
    <script>
        // 用于找出第一个符合条件的数组成员，如果没有找到返回undefined。
        let arr = [{
            id: 1,
            name: '张三'
        }, {
            id: 2,
            name: '李四'
        }];
        let target = arr.find((value, index) => value.id === 2);
        console.log(target); // {id: 2, name: "李四"}
    </script>
</body>

</html>

3.1.4 实例方法findIndex()

  • 用于找出第一个符合条件的数组成员的位置，如果没有找到则返回-1。

  • 示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>实例方法findIndex()</title>
</head>

<body>
    <script>
        /* 用于找出第一个符合条件的数组成员的位置，如果没有找到则返回-1。 */
        let arr = [1, 2, 3, 4, 5, 6];
        let index = arr.findIndex((value, index) => value === 2);
        console.log(index); //1
    </script>
</body>

</html>

3.1.5 实例方法includes()

  • 表示某个数组是否包含给定的值，返回布尔值。

  • 示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>实例方法includes()</title>
</head>

<body>
    <script>
        // 表示某个数组是否包含给定的值，返回布尔值。
        console.log([1, 2, 3].includes(2)); //true
        console.log([1, 2, 3].includes(5)); //false

    </script>
</body>

</html>

3.2 String的扩展

3.2.1 模板字符串

  • ES6新增的创建字符串的方式，使用反引号定义。
let str = `许大仙`;
  • 模板字符串中可以解析变量。
let name = '许大仙';
let sayHello = `大家好，我是${name}`;
  • 模板字符串中可以换行。
let result = { 
    name: 'zhangsan', 
    age: 20, 
    sex: '男' 
} 
let html = ` <div>
               <span>${result.name}</span>
               <span>${result.age}</span>
               <span>${result.sex}</span>
            </div> `;
  • 模板字符串中可以调用函数。
const sayHello = function () { 
    return '哈哈哈哈 追不到我吧 我就是这么强大';
}; 
let greet = `${sayHello()} 哈哈哈哈`; 
console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈

3.2.2 startsWith()方法和endsWith()方法

  • startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值。

  • endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值。

  • 示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>startsWith()和endsWith()方法</title>
</head>

<body>
    <script>
        let str = 'Hello World!';
        console.log(str.startsWith('Hello'));//true
        console.log(str.endsWith('!'));//true
    </script>
</body>

</html>

3.2.3 repat()方法

  • repat()方法表示将元字符串重复n次，返回一个新字符串。

  • 示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>repat()方法</title>
</head>

<body>
    <script>
        console.log("x".repeat(3));//xxx
        console.log("hello".repeat(2));//hellohello
    </script>
</body>

</html>

3.3 Set数据结构

3.3.1 概述

  • ES6提供了新的数据结构Set，它类似于数组，但是成员的值是唯一的，没有重复的值。
  • Set本身是一个构造函数，用来生成Set数据结构。
const set = new Set();
  • Set函数可以接受一个数组作为参数，用来初始化。
const set = new Set([1,2,3,4,5]);
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Set数据结构</title>
</head>

<body>
    <script>
        const set = new Set();
        console.log(set);

        let set1 = new Set([1, 2, 3, 4, 4]);
        console.log(set1); // {1, 2, 3, 4}
    </script>
</body>

</html>

3.3.2 实例方法

  • 添加方法：
set.add(value); //返回Set结构本身
  • 删除方法：
set.delete(value); //返回一个布尔值，表示删除是否成功
  • 判断是否包含方法：
set.has(value);//返回一个布尔值，表示该值是否为 Set 的成员
  • 清空方法：
set.clear()：清除所有成员，没有返回值
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Set实例方法</title>
</head>

<body>
    <script>
        let set = new Set();
        //添加方法
        set.add(1);
        set.add(1);
        set.add(2);
        set.add(3);
        set.add(4);

        console.log(set); // {1, 2, 3, 4}

        //删除方法
        set.delete(1);
        console.log(set); // {2, 3, 4}

        //判断是否包含值的方法
        console.log(set.has(1)); // false

        //清空Set集合
        set.clear();
        console.log(set); // {}

    </script>
</body>

</html>

3.3.3 遍历

  • Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

  • 示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Set结构遍历</title>
</head>

<body>
    <script>
        /* Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。 */
        let set = new Set([2, 4, 6, 8, 10]);
        set.forEach(value => {
            console.log(value);
        })
    </script>
</body>

</html>