第五章：ES6高级(下)

5.1：ES6简介

• 什么是ES6

  ES的全称是ECMAScript，它是由ECMA国际标准化组织，指定的一项脚本语言的标准化规范。

  年份	版本
  2015年6月	ES2015
  2016年6月	ES2016
  2017年6月	ES2017
  2018年6月	ES2018
  …	…

  ES6实际上是一个泛指，泛指ES2015及以后续的版本。

• 为什么使用ES6

  每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。

  1. 变量提升特定增加了程序运行时的不可预测性。
  2. 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码。

5.2：ES6的新增语法

• let：ES6中新增的用于声明变量的关键字

  1. let声明的变量只在所处与的块级有效

     if (true) {
     	let a = 10;
     }
     console.log(a);		// a is not defined
     1
     2
     3
     4

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

  2. 不存在变量提升

     console.log(a);		// a is not defined
     let a = 20;  
     1
     2

  3. 暂时性死区

     var tmp = 123;
     if (true) {
     	tmp = 'abc';
     	let tmp;
     }
     1
     2
     3
     4
     5

• const

  作用：声明常量，常量就是值(内存地址)不能变化的量。

  1. 具有块级作用域

  2. 声明常量是必须赋值

  3. 常量赋值后，值不能更改

     const PI = 3.14;
     PI = 100;				// Assignment to constant variable
     
     const ary = [100, 200];
     ary[0] = 'a';
     ary[1] = 'b';
     ary = ['a', 'b'];		// Assignment to constant variable
     1
     2
     3
     4
     5
     6
     7

• 解构赋值

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

  1. 数组解构

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

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

  2. 对象解构

     let person = { name: 'lisi', age: 30 };
     let { name, age } = person;
     console.log(name);
     console.log(age);
     let { name: myName } = person;
     console.log(myName);
     1
     2
     3
     4
     5
     6

• 箭头函数

  ES6中新增的定义函数的方式。

  const fn = () => {}
  1

  1. 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号。
  2. 如果形参只有一个，可以省略小括号。
  3. 箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。

• 剩余函数

  剩余函数语法允许我们将一个不定数量的参数表示为一个数组。

  let ary1 = ['张三', '李四', '王五'];
  let [s1, ...s2] = ary1;
  console.log(s1);		// 张三
  console.log(s2);		// ['李四', '王五']
  1
  2
  3
  4

5.3：ES6的内置对象扩展

• Array的扩展方法

  1. 扩展运算符

     扩展运算符可以将数组或者对象转为用逗号分隔的参数序列；

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

  2. 构造函数方法：Array.from()

     将伪数组或可遍历对象转换为真正的数组。

      var arrayLike = {
          "0": "张三",
          "1": "李四",
          "length": 2
      };
      var ary = Array.from(arrayLike);
     console.log(ary);		// ['张三', '李四']
     1
     2
     3
     4
     5
     6
     7

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

  3. find()

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

     var ary = [{
         id: 1,
         name: '张三'
     }, {
         id: 2,
         name: '李四'
     }];
     let target = ary.find(item => item.id == 2);
     console.log(target);
     1
     2
     3
     4
     5
     6
     7
     8
     9

  4. findIndex()

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

     let ary = [10, 20, 50];
     let index = ary.findIndex(item => item > 15);
     console.log(index);
     1
     2
     3

  5. includes()

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

     let ary = ["a", "b", "c"];
     let result = ary.includes('a');
     console.log(result);
     1
     2
     3

• String的扩展方法

  1. 模板字符串：ES6新增的创建字符串的方式，使用反引号定义。

     • 模板字符串可以解析变量

       let name = `张三`;
       let sayHello = `Hello, 我的名字叫${name}`;
       console.log(sayHello);
       1
       2
       3

     • 模板字符串可以换行

     • 模板字符串可以调用函数

       const fn = () => {
           return `我是fn函数`;
       };
       let html = `我是模板字符串 ${fn()}`;
       console.log(html);
       1
       2
       3
       4
       5

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

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

  4. repeat()：方法表示将原字符串重复n次，返回一个新字符串。

• Set数据结构

  ES6提供新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

  1. Set本身是一个构造函数，用来生成Set数据结构。

     const s = new Set();
     1

  2. 实例方法

     • add(value)：添加某个值，返回Set结构本身。
     • delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
     • has(value)：返回一个布尔值，表示该值是否为Set的成员。
     • clear()：清除所有成员，没有返回值。

  3. 遍历

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

     const s5 = new Set(['a', 'b', 'c']);
     s5.forEach(value => {
         console.log(value);
     });
     1
     2
     3
     4