es6 1-4

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

• 继承

• ...运算符

• 解构

•  

改变：

• 变量

• 函数

• 数组

• 字符串

• 对象

• 变量的扩展：let和const

• 2.1 let

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

  let和var的区别：

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

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

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

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

  • 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){
    •  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,"字符")
      •  includes()  判断字符串中是否包含指定的字符   true  false

      • 四、变量解构赋值

      • 保证=两边的模式一致 [],{}
      • 将=右边的内容解析赋值左边的变量

      • 数组的常见解构：

        • 完全解构

        • 不完全解构

        • 解构失败

        • 解构变量默认值

        • 解构的缺省

        • 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];

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

        • 常见的情况：

          • 完全解构

          • 不完全解构

          • 解构失败

          • 解构默认值

          • 4.3 解构的应用

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

            [a, b] = [b, a];

            console.log(a, b);

          • let obj = {
            code: 200,
            msg: "成功",
            data: [
            [
            { id: 1, names: "jack" }
            ],
            [],
            []
            ]
            };
            let { code = '', msg = '', data = '' } = obj;//快速取值，有默认值

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

          • 4.4 解构和函数

          • 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
            });