1. ES6

1.1 let和const命令

1.1.1 let特性

变量不能重复声明

let name = '海绵宝宝';
let name = '派大星';//error

let有块级作用域,只在代码块（不仅是{}里面，包含循环的代码块）中有效，在代码块外面无效

     {
          let age = 19;
          var name = '海绵宝宝';
      }
      console.log(name);
      console.log(age);//age is not defined

不存在变量提前，不能在变量声明前使用

    console.log(address);
    let address = '海底';//Cannot access 'address' before initialization

不影响作用域链

        var school = 'school';
        function fn (){
          console.log(school);
        }
        fn();//可正常输出school

经典案例

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <script>
        // var boxs = document.getElementsByClassName("box");
        // for(var i=0; i<boxs.length; i++){
        //     boxs[i].onclick = function(){
        //         boxs[i].style.backgroundColor = '#fba';//boxs[i]=3，error
        //         this.style.backgroundColor = '#fba';
        //     }
        // }
        let boxs = document.getElementsByClassName("box");
        for(let i=0; i<boxs.length; i++){
            boxs[i].onclick = function(){
                boxs[i].style.backgroundColor = '#fba';
            }
        }
    </script>

1.1.2 const特性

声明常量 const A = 'abc';

一定要赋初始值
一般常量要使用大写
常量的值不能修改
同样具有块级作用域
对于数组和对象的元素的修改，不会报错

        const arr = [12, 23, 34, 25];
        arr.push(0);
        console.log(arr);
        arr = 12;
        console.log(arr);//Assignment to constant variable.

1.1.3 let、const、var的区别

let	const	var
块级作用域	块级作用域	函数级作用域
不存在变量提升	不存在变量提升	变量提升
值可更改	值不可更改	值可更改

1.2 解构赋值

解构赋值： es6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值
数组解构：

        const arr = ["孙悟空","白龙马","白骨精","沙和尚"];
        let [name1, name2 ,name3, name4] = arr;
        console.log(name1);

对象解构：

        const haidi = {
            name:"海绵宝宝",
            age:19,
            skill:function(){
                alert("抓章鱼");
            }
        };
        let {name,age, skill} = haidi;
        console.log(name);
        skill();

1.3 模板字符串

模板字符串与普通字符串的区别

1.内容中可直接出现换行符

        let str = `<ul>
                    <li>海绵宝宝</li>
                    <li>海绵宝宝</li>
                    <li>海绵宝宝</li>
                    </ul>`;

2.变量的拼接${}必须使用这种形式

        let Hdname = "海绵宝宝";
        let out = `${Hdname}是我最喜欢的动画片`;
        console.log(out);

1.4 对象简化写法

es6中允许在大括号里面，直接写入变量和函数，作为对象的属性和方法

        const collection = {
            Hdname,
            // skill:function() function可以省略不写
            skill(){
                console.log("也可以这样简写");
            }
        };

1.5 箭头函数

        // let fun = function(){

        // }
        let fun = (a,b) =>{
            return a+b;
        }
        let result = fun(1,3);
        console.log(result);

1).this是静态的，this始终指向函数声明时所在作用域下的this的值

        function fun(){
            console.log(this.name)
        }
        let fun2 = (name) =>{
            console.log(this.name)
        }
        window.name = '海绵宝宝';
        const name2 = {
            name:'派大星'
        }
        // 直接调用
        fun();//海绵宝宝
        fun2();//海绵宝宝

        // 使用call调用
        fun.call(name2);//派大星
        fun2.call(name2);//海绵宝宝

2).不能作为构造函数实例化对象

箭头函数的简写方式
<1>省略小括号，当形参有且只有一个的时候 <2>省略花括号，当代码体只有一条语句的时候，此时return也必须省略

let fun = n => n * n ;

1.6 函数参数的默认值

ES6允许给函数形参赋初始值,一般都是靠后位置赋初始值

        function compute(a,b,c=12){
            let result = a+b+c;
            console.log(result);
        }
        compute(1,2);//若实参c没有赋值，则默认使用12
        compute(2,5,6);//实参赋值，则优先使用实参中的值

解构赋值：

        function fun3({host='127.0.0.1',username,passward,port}){
            console.log(host+username+passward+port);
        }
        fun3({
            username:'super-root',
            passward:'root',
            port:3306
        })

1.7 rest剩余参数

rest参数，用于获取函数的实参，用来代替arguments

        // function fun4(name,age){
        //     console.log(arguments);
        // }
        // fun4('bob',18);
        function fun4(...args){
            console.log(args);
        }
        fun4('bob',18);

rest和arguments都可以获取多余参数

arguments是获取传的所有的参数
rest参数(...rest) 是获取声明的参数之外的参数
arguments 是类数组，只有length和索引元素，...rest获取的是数组，并且可调用数组的一些方法（pop、push等）

1.8 扩展运算符

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

        var arr = [1, 2, 3];
        console.log(...arr);//1 2 3
        //参数序列中的逗号被console.log当做参数分隔符
        //相当于是console.log(1,2,3);

1.8.1 数组合并

        const arr = [1, 2, 3];
        const arr2 = [4, 5, 6];
        const newarr = [...arr,...arr2];
        console.log(newarr);//[1, 2, 3, 4, 5, 6]

1.8.2 数组克隆

        const arr3 = ['bob','kitty','mery'];
        const newarr3 = [...arr3];
        console.log(newarr3);// ['bob', 'kitty', 'mery']

1.8.3 将伪数组转化成真正的数组

        const aDiv = document.getElementsByClassName("box");
        const newaDiv =[...aDiv];
        console.log(newaDiv);

1.9 Symbol

Symbol原始数据类型，表示独一无二的值，属于JavaScript语言数据类型之一

1.10 promise

1.11 Set和Map

Set：ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用扩展运算符和for…of…进行遍历。set本身是一个构造函数，用来生成set数据结构

       const arr = [12, 3, 4, 7, 3, 4];
        // let result = new Set(arr);result不是数组类型，需要进行转化

        // 将result转换成数组
        let result = [...new Set(arr)];
        // console.log(result instanceof Array);
        let s = new Set(["海绵宝宝","章鱼哥","派大星","蟹老板"]);
        
        console.log(s.size);//元素个数

        // s.add("痞老板");新增
        
        // s.delete("派大星");删除

        // s.clear();清空

        // let a = s.has("章鱼哥");检测是否含有某个元素

        // for...of遍历
        for(let v of s){
            console.log(v);
        }
        
        // console.log(s);

使用Set数组去重

        const arr = [3, 4, 6, 7, 4, 3, 9];
        // 数组去重
        var newArr = [...new Set(arr)];
        console.log(newArr);

Map:ES6 提供了 Map 数据结构。它类似于对象（比对象高级一些），也是键值对的集合。但是“键” 的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了 iterator 接口，也可以使用扩展运算符和for…of…进行遍历

   // map（）相当于对象的升级版，之前的对象的键只能是字符串，但map中的可以是其他类型
        const m = new Map();
        // 添加元素
        m.set("name","海绵宝宝");
        m.set("change",function(){
            console.log("海底世界")
        })
         console.log(m);

ES6篇