【es6的初识与扩展】

一、ECMAScript6简介

1.ES6是什么

ES6是JavaScript的最新版本

JavaScript包含：
    ECMAScript   JavaScript的语法部分   ES3-ES5
    BOM
    DOM
    
常见面试题：
ES和js的关系：
ES是JavaScript的标准；JavaScript是ES的实现。

ES6是2015年发布的新一版本的JavaScript，又称为：ES2015

2.ES的版本问题

2015年   ES2015   ES6  划时代的版本
2016     ES2016   ES7
2017     ES2017   ES8
2018     ES2018  ...
...
2021     ES2021

3.ES6与ES5之间的关系

ES6是ES5 的语法糖。ES6的所有功能，使用ES5都可以实现，但是使用ES6更加简单、简洁、标准化.

4.ES6和ES5有哪些差异

新增：

• 类 class

• 继承

• ...运算符

• 解构

改变：

• 变量

• 函数

• 数组

• 字符串

• 对象

5.总结

学了ES6，就忘了ES5

二、变量的扩展：let和const

2.1 let

let 是ES6中新增一个用来定义变量的关键字

let和var的区别：

• var有变量提升 let没有变量提升(先声明，再使用)

• var 允许变量重复定义 let不允许变量重复定义

• var 定义的变量属于函数作用域、let定义的变量属于块作用域

• let定义的变量有暂时性死区，var没有

          //暂时性死区
          function show(){
              console.log(a);//暂时性死区
              //....
              let a=10;
              // console.log(a);
          }
  ​
          show();

• var定义的变量会变成顶级对象(window)的属性，let不会

应用：let和for循环

   let lis = document.querySelectorAll('ul li');
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                alert(i);
            }
        }

解析(了解)

 //上面代码可以拆分为如下：
        //系统每一次都会产生一个新的变量，来保存上一次变量的值，并且赋值给下一次的循环
​
        {
            let i = 0;
            // let temp;
            {
                lis[0].onclick = function () {
                    alert(i)
                }
                // i++;
                temp = ++i;
            }
​
            {
                // let i = 1;
                i = temp;
                lis[1].onclick = function () {
                    alert(i)
                }
                temp = ++i;
            }
​
            {
                // let i = 2;
                i = temp;
                lis[2].onclick = function () {
                    alert(i)
                }
                temp = ++i;
            }
​
            {
                let i = temp;
                lis[3].onclick = function () {
                    alert(i)
                }
                temp = ++i;
            }
        }

2.2 const

const使用来定义常量。

let所拥有的的特点，const都有。

const特点：

• 不允许被重新赋值

• 常量必须在定义的时候，就初始化(赋值)

• 建议：const定义的常量的名称，一般为大写

用途：

用于定义项目中的公共内容、变量

三、字符串的扩展

ES6中新增了通过反引号来定义字符串

特点：

• 支持换行

• 支持使用${}在字符串中插入变量

``

示例：

        let arr = [
            { id: 1, name: "李逵", age: 30 },
            { id: 2, name: "李四", age: 40 },
            { id: 3, name: "李鬼", age: 50 },
            { id: 4, name: "李某", age: 20 },
        ];
        //将数据展示到页面中
        let s = '';
        arr.forEach(function (item) {
            // console.log(item);
            s += ` <li><span>${item.id}</span>---- <span>${item.name}</span> --- <span>${item.age}</span></li>`
        });
​
        document.querySelector('ul').innerHTML = s;

四、变量解构赋值

在 ES6中允许按照一定的模式来解析数组、对象，赋值给变量，这种解析模式称为：解构赋值。

解构的诀窍：

• 保证=两边的模式一致 [],{}

• 将=右边的内容解析赋值左边的变量

4.1 数组的解构

数组特点：有序的哈希结构

        let arr = [1, 2, 3];//模式一致
        let [a, b, c] = arr;//按顺序解构
​
        // console.log(a, b, c);

分析：数组是一种有序的结构，在解析数据的时候，按照顺序来解析和赋值(一一对应的关系)

数组的常见解构：

• 完全解构

• 不完全解构

• 解构失败

• 解构变量默认值

• 解构的缺省

      //1.完全解构(变量的个数与数据个数一致)
        // let [a, b] = [10, 20];
​
        // console.log(a, b);
​
        //2.不完全解构(变量的个数少于数据的个数)
        // let [a] = [10, 20];
        // console.log(a);
​
        //3.解构失败(变量的个数多于数据的个数)
        let [a, b, c] = [10, 20]
        console.log(a, b, c);
​
        //4.解构的默认值
        let [a=0, b=0, c = 0] = [10, 20];//c默认值为0
        // let [a, b, c = 0] = [10, 20,30]
        console.log(a, b, c);
​
        //5.解构的缺省
        let [, , , b] = [10, 20, 30, 40];

4.2 对象解构

4.3 解构和函数

数组示例：

  // function show(a,b){
        //     console.log(a+b);
        // }
​
​
        // function show1(arr){
        // //    let s= arr.reduce(function(a,b){
        // //         return a+=b;
        // //     },0)
        // //     console.log(s);
        // }
​
        // function show1([a = 0, b = 0]) {
        //     // let [a, b] = arr;
        //     console.log(a + b);
        // }
​
        // show1([10])
        // show1([10, 20])
        // show1([])
        // show1();//错误做法  保证=两边的模式一致
​
        // // [a,b]=[10,20]
        // [a,b]=undefined;//error