ES6新语法

一、let、const关键字

1、let

作用：用来声明变量

特点：

（1）具有块级作用域
（2）用let声明变量，不能再次声明，但是可以改变它的值
（3）没有变量提升
（4）用let声明的变量时独立的。不会压入到window对象中，和window对象没有关系

2、const

作用：用来声明常量

特点：

（1）具有块级作用域
（2）不会进行变量的提升
（3）初始化必须要赋值
（4）不能去更改const所定义的值
（5）简单数据类型，不能去修改值
（6）复杂数据类型，不能修改地址值

二、解构

1、数组的解构

	// 1、常规的解析
    // let [a1,a2,a3,a4,a5] = arr;
    // console.log(a1,a2)

    // 2、变量少于值
    // let[a1,a2] = arr;
    // console.log(a1,a2);

    // 3、剩余值
    // let [a1,a2, ...a3] = arr;
    // console.log(a3);

    // 4、按需获取值
    // let [,,a,,b] = arr;
    // console.log(a,b)

    // 5、变量多于值
    // let arr1 = [1,2,3];
    // let [a,b,c,d] = arr1;
    // console.log(a,b,c,d)

    // 6、复杂的情况，模式写对即可
    let arr2 = [        ['1','2','3'],
        ['1','2','3'],
        ['1','2','3'],
    ];
    let [,,[a,,c]] = arr2;
    console.log(a,c)
    

2、对象的解构

	let obj = {
        id:'1',
        name:'梦泽',
        age:22,
        height:148
    };

    // 1、常规的解析
    // 和数组解析不同，变量名必须和对象的属性名一样
    // 而且解析的时候，变量没有顺序的要求，也不用占空位
    // let {id,name} = obj;
    // console.log(id,name)

    // 2、如果变量有冲突，则可以使用 冒号语法 为变量加别名
    // let name = 'lisi';
    // let{id,name:n,age} = obj;
    // console.log(id,n,age);

    // 3、对象的解析也支持剩余值
    let{id,...abc} = obj;
    console.log(abc);

    // 4、复杂的情况：模式正确即可
    let response = {
        data:['aaa','bbb','ccc'],
        info:{
            status:200,
            msg:'成功'

        }
    }

    let {info:{status,msg}} = response;
    console.log(status,msg)
    

三、箭头函数

1、定义函数

	// 1、之前的函数时如何定义的
    // 1.1 声明函数
    // function abc(){
        // 函数体;
        // return xx;
    // }

    // 1.2 把函数当做变量
    // var fn = function(){
        // 函数体;
        // return xx;
    // }

    // 2、ES6中的箭头函数
    // let 函数名 = (参数。。) => {

    // }
    let fn = (x,y) => {
        return x+y;
    };
    console.log(fn(3,7));

2、箭头函数特点

    // 1.如果箭头函数只有一个形参，则可以省略小括号
    // let fn = x => {
    //     return x * x;
    // }
    // console.log(fn(3));


    // 2。如果函数体只有一行代码，则可以省略大括号，并且这一行代码返回
    // let fn = x => x * x;
    // console.log(fn(2));


    //3.箭头函数内部没有arguments对象
    // let fn = () => {
    //     console.log(arguments)   //报错
    // }
    // fn(3,4,5)
    // function fn() {
    //     console.log(arguments) 
    // }
    // fn(1,2,3)


    // 4.箭头函数不能当做构造函数
    // function Person(params) {   
    // };
    // var Person = () => {
    // }
    // var p = new Person();  //报错： Person is not a constructor


    // 5.箭头函数内部没有this，或者说箭头函数内部的this指向外部作用域的this
    // let obj = {
    //     id:1,
    //     nickname:'你好',
    //     age:13,
    //     introduce:function(){
    //         console.log(this.nickname);
    //     },
    //     abcd:() => {
    //         console.log(this);  //箭头函数内部的this表示外部作用域的this
    //         console.log(this.nickname);
    //     }
    // }
    
    // obj.introduce();
    // obj.abcd();

四、Array拓展

    // 1.使用...展开数组
    // let arr1 = [1,2,3];
    // let arr2 = [5,6,7];
    // let arr3 = [...arr1,...arr2];
    // console.log(arr3);

    // // 应用：计算数组中的最大值
    // let arr4 = [3,6,7,1,0,-4];

    // console.log(Math.max.apply(null,arr4));
    // console.log(Math.max(...arr4))

    // 2.Array.from()  --- 将伪数组转换成数组
    // let obj = {
    //     0:'1',
    //     1:'2'
    // };

    // console.log(obj);
    // console.log(Array.from(obj));

    // 3.[].find()和findIndex()用于查找数组中符合条件的值或索引
    // [1,2,5,-3,6].forEach((item,index,arr) => {
    //     console.log(item);
    //     console.log(index);
    //     console.log(arr);
    // })
    // var a1 = [1,2,5,-3,6].find((item,index,arr) => {
    // //     console.log(item);
    // //     console.log(index);
    // //     console.log(arr);
    // //      find会根据指定条件进行查询，需要将指定的条件return。find函数将返回满足条件的第一个值
    //         return item<0;
    // });

    // console.log(a1)
    // var a1 = [1,2,5,-3,6].findIndex((item,index,arr) => {
    //     console.log(item);
    //     console.log(index);
    //     console.log(arr);
    //      find会根据指定条件进行查询，需要将指定的条件return。find函数将返回满足条件的第一个值
            // return item<0;
    // });

    // console.log(a1)


    // 4、includes -- 检测数组中是否含有某个值
    //console.log([1,2,3,4].includes(3))     

五、String拓展

    // 1.includes - 检测字符串中是否含有某个字符串

    // 2.startsWith   和  endsWith 判断字符串是否以指定的字符开始或结尾
	str.startsWith('ab');//判断是否以ab开头 ，如果是就返回true
	str.endsWith('cd'); //判断是否以cd结尾，如果是返回true
    
    // 3、repeat  重复一个字符串
    'a'.repeat(5);//copy a字符串 5次

六、参数默认值

    // 函数参数的默认值 ES6之前
    // function fn(x,y) {
    //     if(y === undefined){
    //         y = 8;
    //     }
    //     console.log(x+y);
    // };
    // fn(2);
    // fn(1,3);
    

    // ES6中的函数参数默认值
    // 如果为参数设置默认值，参数应该放到参数列表的末尾
    function fn(x,y=8) {
        console.log(x+y);
    };
    fn(2);

七、模板字符串

定义：ES6中提供了用反引号｀来创建字符串，里面可包含${…}等

八、Set集合

定义：也是一种数据类型，专门用来存储数据的；里面存储的元素都是唯一的，里面没有重复的值

    //实例化set对象
    var set = new Set([2,4,5]);
    //操作set
    set.add(6); //添加一个元素  2，4，5，6
    set.delete(6);//删除一个元素  2,4,5
    set.has(3); //判断是否有这个元素  如果有返回true，如果没有返回false
    set.clear(); //清空

    //遍历 forEach
    set.forEach(value=>{
        //value 遍历的时候每一个元素的值
    });

九、Promise