ES6是什么？var、const、let有什么区别？解构？箭头函数？

ES6简介及部分新增语法

一、ES6简介

1、什么是ES6?

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

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

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

2、为什么使用ES6？

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

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

二、ES6新增语法

1、let关键字

ES6中新增的用于声明变量的关键字。

(1)特性

• let声明的变量只在所处于的块级作用域有效

  // let关键字
          let a = 10;
          console.log(a);  // 10
          if (true) {
              let b = 20;
              console.log(b);  // 20
          }
          console.log(b);  // error: not defined
  

  该特性可以防止循环变量变成全局变量。

• 不存在变量提升

  console.log(a);  // error: not defined
  let a = 200;
  

• 暂时性死区

  // 暂时性死区
          var num = 10;
          if (true) {
              console.log(num);  // error
              let num = 20;
          }
  

  块级作用域中打印num时，并不会向外进行查找，而是使用块级作用域中的变量，但该例子是先打印后声明，所以会报错。

(2)经典面试题

		let arr = [];
        for (let i = 0; i < 2; i++) {
            arr[i] = function () {
                console.log(i);
            }
        }
        arr[0]();  //0
        arr[1]();  //1

此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级(循环产生的块级作用域)作用域下的i值。

2、const关键字

用于声明常量，常量就是值(内存地址)不能变化的量。简单来说，就是值不能更改。

(1)特性

• 具有块级作用域

• 声明常量时必须赋初始值

  const PI; //Missing initializer in const declaration

• 常量赋值后，值不能修改

  const PI = 3.14;
  PI = 100;  // Assignment to constant variable.
  
  		const arr = [100, 200];
          arr[0] = 'a';
          arr[1] = 'b';
          console.log(arr);  // ['a', 'b']
          arr = ['a', 'b'];  // Assignment to constant variable.
  

  简单数据类型：不能修改；

  复杂数据类型：内部数据可以修改，但是不能直接赋值(会修改内存地址)

3、let、const、var的区别

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

如果存储的值/函数等不需要变化，尽量使用const关键字，因为js不需要实时监控该值的变化，效率较高。

4、解构赋值

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

按照一定模式，从数组或对象中提取值，将提取出来的值赋值给另外的变量。

(1)数组解构

		// 1、数组解构：允许我们按照一一对应的关系从数组中提取值，然后将值赋值给变量
        let arr = [1, 2, 3];
        let [a, b, c, d, e] = arr;
        console.log(a); //1
        console.log(b); //2
        console.log(c); //3
        // 如果解构不成功，则变量值为undefined
        console.log(d); //undefined
        console.log(e); //undefined

数组解构：

• 允许我们按照一一对应的关系从数组中提取值，然后将值赋值给变量
• 如果解构不成功，则变量值为undefined

(2)对象解构

// 2、对象解构：允许我们使用变量的名字匹配对象的属性，匹配成功将对象属性的值赋值给变量
        let person = { name: 'zhangsan', age: 30, sex: '男' };
        let { name, age, sex } = person;
        console.log(name);
        console.log(age);
        console.log(sex);

使用别名进行对象解构：

左边的name只是用于变量匹配，而右侧的myName才是用于输出的变量。

使用name属性匹配person中的name属性，然后将属性值赋值给myName变量

		let person = { name: 'zhangsan', age: 30, sex: '男' };
        // 使用别名进行对象解构
        // 使用name属性匹配person中的name属性，然后将属性值赋值给myName变量
        let { name: myName, age: myAge } = person; // myName myAge属于别名
        console.log(myName);
        console.log(myAge);

5、箭头函数

() => {}

(1)语法

箭头函数是用来简化函数定义语法的。

// 箭头函数
        const fn = () => {
            console.log(123);
        }
        fn();

在箭头函数中 如果函数体中只有一句代码并且代码的执行结果就是函数的返回值，函数体大括号可以省略

// 在箭头函数中 如果函数体中只有一句代码并且代码的执行结果就是函数的返回值，函数体大括号可以省	略
        const sum = (a, b) => a + b;
        const res = sum(10, 5);
        console.log(res);

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

// 如果形参只有一个，可以省略小括号
        const fn = v => alert(v);
        fn(5);

(2)this指向

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

// 箭头函数中的this指向
        function fn() {
            console.log(this);
            return () => {
                console.log(this);
            }
        }
        const obj = { name: 'zhangsan' };
        const resFn = fn.call(obj); // {name: 'zhangsan'}
        resFn();  // {name: 'zhangsan'}

6、剩余参数

(1)语法

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

function fn(first, ...args) {}

箭头函数中，不能使用arguments参数，但可以使用剩余参数来实现参数个数不确定的函数。

// 剩余参数
        const sum = (...args) => {
            let total = 0;
            args.forEach(item => total += item)
            return total;
        };
        console.log(sum(10, 20));
        console.log(sum(10, 20, 30));

(2)剩余参数和解构配合使用

// 剩余参数和解构结合
        let arr1 = ['zhangsan', 'lisi', 'wangwu'];
        let [s1, ...s2] = arr1;
        console.log(s1);  // zhangsan
        console.log(s2);  //(2) ['lisi', 'wangwu']

7、Array的扩展方法

(1)语法

扩展运算符(展开语法)：扩展运算符可以将数组或对象转为用逗号分隔的参数序列。

// 扩展运算符：可以将数组拆分成以逗号分隔的参数序列
        let arr = ["a", "b", "c"];
        console.log(...arr); // a b c
        // 相当于console.log("a", "b", "c");
        console.log(arr); // (3) ['a', 'b', 'c']

(2)扩展运算符用于合并数组

方法一：先利用扩展运算符将数组拆分，然后再合并。

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

方法二：将数组使用扩展运算符拆分，然后push到目标数组中。

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

注意，push可以同时接收多个参数。

(3)扩展运算符可以将类数组或可遍历对象转换为真正的数组

[...oDivs]可以将伪数组转变为真正的数组，从而调用数组的一些方法。

// (2)利用扩展运算符将伪数组转换为真正的数组
        var oDivs = document.getElementsByTagName('div');
        console.log(oDivs);  // 伪数组：HTMLCollection(3) [div, div, div]
        var arr = [...oDivs];
        console.log(arr);  // 真数组：(3) [div, div, div]

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

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

• 接收参数是一个伪数组，且伪数组中必须要有length属性
• 返回值是产生的真正的数组

//  Array.from()方法
        let arrayLike = {
            '0': 'a',
            '1': 'b',
            '2': 'c',
            'length': 3  // length属性必须要有，否则不能称之为伪数组
        };
        var arr = Array.from(arrayLike);
        console.log(arr);  // (3) ['a', 'b', 'c']

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

// Array.from()方法的第二个参数是一个函数
        var arrayLike1 = {
            "0": "1",
            "1": "2",
            length: 2
        }
        var arr1 = Array.from(arrayLike1, (item) => item * 2);
        console.log(arr1);  // (2) [2, 4]

(5)Array实例方法：find()

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

接收一个函数作为参数，该函数中，又有两个参数，分别是item和index，代表当前元素的值以及当前元素索引，如果不使用，则可以省略。

// Array实例方法：find()
        var arr = [{
            id: 1,
            name: '张三'
        }, {
            id: 2,
            name: '李四'
        }];
        let target = arr.find((item, index) => {
            return item.id == 2;
        });
        let target1 = arr.find(item => item.id == 3);
        console.log(target);  // {id: 2, name: '李四'}
        console.log(target1);  // undefined

(6)findIndex()方法

返回第一个符合条件的元素的索引，如果没有找到则返回-1。同样，接收一个函数作为参数。

// findIndex()方法
        let arr = [10, 20, 30];
        let index = arr.findIndex(item => item > 15);
        console.log(index);  // 1

返回值是20这个元素对应的索引，也就是1。

(7)includes()方法

arr.includes(element)

用于查找数组中是否包含给定的值，返回值为一个布尔值。

// includes()方法
        let arr = ["a", "b", "c"];
        let res1 = arr.includes('a');
        console.log(res1);  // true
        let res2 = arr.includes('d');
        console.log(res2);  // false

8、String的扩展方法

(1)模板字符串

ES6新增的创建字符串的方式，使用反引号(``)定义。

// String扩展方法
        // (1)模板字符串
        let name = `这是一个模板字符串`;
        console.log(name);

可以用于解析变量：

// 可以用于解析变量
        let uname = '张三';
        let sayHi = `hi, my name is ${uname}`;
        console.log(sayHi);  // hi, my name is 张三

可以换行：

// 可以换行
        let result = {
            name: "zhangsan",
            age: 20
        };
        let html = `
            <div>
                <span>${result.name}</span>
                <span>${result.age}</span>
            </div>
        `
        console.log(html);
        /** output:
         * <div>
                <span>zhangsan</span>
                <span>20</span>
            </div>
         * /

可以调用函数：

// 可以调用函数
        const sayHi = function () {
            return 'Hi, I am';
        };
        let uname = 'zhangsan';
        let greet = `${sayHi()} ${uname}`;
        console.log(greet);

(2)实例方法：startsWith()和endsWith()

• startsWith()方法：判断参数字符串是否在原字符串的头部，返回值为布尔值
• endsWith()方法：判断参数字符串是否在原字符串的尾部，返回值为布尔值

// (2)startsWith()和endsWith()
        let str = 'Hello world!';
        console.log(str.startsWith('Hello'));  // true
        console.log(str.endsWith('?'));  // false

(3)repeat()方法

repeat方法用于将字符串重复n次，返回一个新字符串。

// (3) repeat()方法
        console.log("y".repeat(5));  // yyyyy

9、Set数据结构

(1)语法

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

Set本身是一个构造函数，用于生成Set数据结构；Set函数可以接受一个数组作为参数，用于初始化。

// Set数据结构
        const s1 = new Set();
        console.log(s1.size);  // 0

可以利用Set进行数组去重：

// 利用Set进行数组去重
        const s2 = new Set([1, 2, 3, 3, 4]);
        console.log(s2);  // Set(4) {1, 2, 3, 4}
        console.log([...s2]);  //(4) [1, 2, 3, 4]

(2)实例方法

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

// Set实例方法
        const s = new Set();
        s.add(2);
        s.add(5).add(6);  // 可以进行链式调用，但参数个数为1
        console.log(s);  // Set(3) {2, 5, 6}
        console.log(s.delete(4));  // false
        console.log(s.delete(5));  // true
        console.log(s);  // Set(2) {2, 6}
        console.log(s.has(2));  // true
        s.clear();
        console.log(s.size);  // 0

(3)遍历

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

// Set遍历
        const set = new Set([1, 2, 3, 4]);
        set.forEach(value => console.log(value));