es indextemplate 过期时间

一、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定义的常量的名称，一般为大写

用途：

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

三、字符串的扩展

3.1.反引号

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;

3.2 字符串新增的方法

• includes() 判断字符串中是否包含指定的字符 true false
• padStart(length,str) 使用参数str来在字符串的头部添加内容，添加之后字符串的长度为第一个参数
  示例：

var s = 'hello';
    var s1 = s.padStart(7, '你好啊嘿呵');//新字符串长度为7

    console.log(s1);

• trim() 祛除字符串首尾空格

四、变量解构赋值

在 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 对象解构

对象是无序的哈希结构.对象的解构需要借助属性名来做。

语法：

let {属性名1:变量,属性名2:变量}=对象;

常见的情况：

• 完全解构
• 不完全解构
• 解构失败
• 解构默认值

示例：

//1.完全解构(变量个数与对象的属性个数一致)
        // let { code: a, msg: b, data: c } = obj;
        // console.log(a, b, c);

        //2.不完全解构
        // let { data: rst } = obj;
        // console.log(rst);

        //3.解构失败
        // let { code: a, msg: b, data: c, info: d } = obj;
        // console.log(d);

        //4.解构默认值
        let { code: a, msg: b, data: c = [], info: d = '' } = obj;
        console.log(d);//''
        console.log(c);

注意：若对象的属性名和变量保持一致，则可以简化对象的解构写法：

let obj = {
            code: 200,
            msg: "ok",
            data: [10, 20, 3]
        }
        //对象解构的简化写法
        // let { code: code, msg: msg, data: data } = obj;
        //对象的属性名和变量的名称保持一致，可以简化为如下形式：
        let { code, msg, data } = obj;
        console.log(code, msg, data);

4.3 解构的应用

1.交换数据

//a =5  b=3  不使用第三个变量的前提下，交换a,b变量的值
        let a = 5;
        let b = 3;

        // a = a + b;//8
        // b = a - b;//5
        // a = a - b;//3
        [a, b] = [b, a];

        console.log(a, b);

2.解析数据

        let obj = {
            code: 200,
            msg: "成功",
            data: [
                [
                    { id: 1, names: "jack" }
                ],
                [],
                []
            ]
        };
    let { code = '', msg = '', data = '' } = obj;//快速取值，有默认值
        // let { data } = obj;
        // // console.log(data);
        // let [a] = data;
        // let [b] = a;
        // let { names } = b;
        // console.log(names);

        //复杂解构（了解）
        let { data: [[{ names }]] } = obj;
        console.log(names);

 

4.4 解构和函数

数组示例：

// 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

对象的解构和函数的参数：

// function show(a, b, c) {
        //     console.log(a + 1);
        //     console.log(b + 1);
        //     console.log(c + 1);
        // }


        // show(10, 20, 30);//参数有序
        // show(10,, 30);//不能省略


        //传递对象作为参数  参数的顺序问题
        // function show(obj) {
        //     console.log(obj.a + 1);
        //     console.log(obj.b + 1);
        //     console.log(obj.c + 1);
        // }

        function show({ a=0, b = 0, c=0 }) {
            console.log(a + 1);
            console.log(b + 1);
            console.log(c + 1);
        }

        show({
            a: 10,
            // b: 20,
            c: 30
        });

 

拓展知识

数组的迭代方法：

• forEach(callbackfn)

• 参数说明：callbackfn 回调函数；该回调函数最多可以接收三个参数，分别是：value,index,arr

示例：

arr.forEach(function (value) {//推荐
            console.log(value);
            return;
        })

注意：forEach不能被return打断

• some(callbackfn) 遍历数组，判断数组中是否有元素满足条件;有一个满足，返回true，都不满足，返回false

• 参数：回调函数；该回调函数最多可以接收三个参数，分别是：value,index,arr

示例：

var arr = [10, 201, 301, 1000];
        var rst = arr.some(function (v) {//v 数组中的每个元素
            return v > 200;
        });

• every() 遍历数组，判断数组中是否每一个元素都满足条件;满足返回true;有一个不满足则返回false
  示例：

var rst=arr.every(function(value){
            return value>200;
        })

• map() 遍历数组；返回的结果会组成一个新的数组返回

示例：

//4.4  map 遍历数组，为每一个元素都进行操作之后，返回由新元素组成的数组
        // var arr = [10, 20, 30, 900];
        // var arr0=arr.map(function(v){
        //     return v+10;
        // })
        // console.log(arr0);

• filter() 遍历数组;将数组中满足过滤条件的元素返回，组成新数组
  示例：

var arr = [10, 20, 30, 40, 100, 99];
        var arrx = arr.filter(function (v, i) {
            // console.log(v,i);
            return v > 60;//条件
        });

        console.log(arrx);

• arr.reduce(callbackfn,initvalue) 返回累加结果

• 参数说明：callbackfn 回调函数 initvalue 回调函数第一个参数的初始值

• 用法一：initvalue没有赋值，

• 回调函数第一次执行的时候，第一个参数的值为数组的第一个元素，第二个参数的值为数组的第二个元素
• 非第一次遍历，则回调函数的第一个参数为上一次累加的结果，第二个参数为当遍历的元素

// var arr=[11,22,55,200,300];
        // //累加器
        // var sum=arr.reduce(function (a, b) {
        //     // console.log(a, b);
        //     // return a+b;
        //     return a*b;
        // });

• 用法二：initvalue有初始值

• 遍历时，回调函数的第一个参数为默认值，第二个参数为当前遍历的元素；依次类推

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.reduce(function (s, item) {
            return s += ` <li><span>${item.id}</span>---- <span>${item.name}</span> --- <span>${item.age}</span></li>`
        }, '')