ES6语法新特性

1.新增关键字

• var声明的变量可以跨作用域,let不行
• let不能多次声明一个变量
• var存在变量提升,let不存在变量提升
• const生命的变量不允许修改

        {
            var a = 1;
            let b = 2;
            //let b = 3; let不能多次声明同一个变量,这样会报错
        }
        console.log(a);
        //console.log(b);
        //console.log(x);
        var x = 4;//undefined
        //console.log(y);
        let y = 5;//Uncaught ReferenceError: Cannot access 'y' before initialization
        const z = 6;
        //z = 7;
        console.log(z);//Assignment to constant variable.

2.解构表达式

• 数组解构
• 对象解构(对象解构后加上:后跟别名可以给变量起别名)

        let arr = [1,2,3];
        let [d,e,f] = arr;
        console.log(d,e,f)

        const person = {
            name : "zhangsan",
            age : 20,
            language : ["java","js","css"]
        }
        let {name:abbb,age,language} = person;
        console.log(name,age,language);

3.字符串扩展

• 字符串模板,反引号(``)
• 字符串插入变量和表达式,变量名写在{}可以放入javascript表达式

        let str = "hello es6";
        console.log(str.startsWith("hello"));
        console.log(str.endsWith("es6"));
        console.log(str.includes("e"));
        
        let ss = `<div>
                    <h1>hello world</h1>
                  </div>`;
        console.log(ss);
        
        let info = `我是${abbb},今年${age}`;
        console.log(info);

4.函数扩展

• 函数参数默认值
• 不定参数
• 箭头函数

        function add(g,h=2) {
            return g + h;
        }
        console.log(add(1,3));
        
        function add2(...values) {
            console.log(values.length);
        }
        add2(1,2);
        add2(1,2,3);
        
        var print = function (obj) {
            console.log(obj);
        }
        //上下等价(单参数,单行代码)
        var print1 = obj => console.log(obj);
        
        var sum = function (i,j) {
            return i+j;
        }
        //上下等价(多参数,单行代码)
        var sum2 = (i,j) => i + j;
        
        //(多参数,多行代码)
        var sum3 = (i,j) => {
            k = i + j;
            return i + k;
        }
        
        //解构函数+箭头表达式
        const person1 = {
            name : "zhangsan",
            age : 20,
            language : ["java","js","css"]
        }
        
        function hello(obj) {
            console.log("hello,"+obj.name);
        }
        //箭头前的括号表示形参,括号内的{}表示解构表达式,解构出传入参数的name属性,并在箭头后打印
        var hello2 = ({name}) => console.log("hello,"+name);
        hello2(person1);

5.对象优化

• 新增API
• 声明对象简写
• 对象函数属性简写
• 对象扩展运算符

        const person = {
            name : "zhangsan",
            age : 20,
            language : ["java","js","css"]
        }

        console.log(Object.keys(person));//["name","age","language"]
        console.log(Object.values(person));//["zhangsan",1: 20,["java", "js", "css"]]
        console.log(Object.entries(person));//[["name", "zhangsan"],["age", 20],["language", Array(3)]]

        const a = { a : 1};
        const b = { b : 2};
        const c = { c : 3};

        console.log(Object.assign(a,b,c));//{a: 1, b: 2, c: 3}
        
        const age = 12;
        const name = "zhangsan";
        const person1 = {age,name};
        console.log(person1);//{age: 12, name: "zhangsan"}
        
        let person3 = {
            name : "jack",
            //以前
            eat: function (food) {
                console.log(this.name+"在吃"+food);
            },
            //箭头函数this不能使用,要使用(对象.属性名)的形式调用
            eat2: food => console.log(person3.name+"在吃"+food),
            eat3(food){
                console.log(this.name+"在吃"+food)
            }
        }
        
        let p1 = {name:"xxx",age:24};
        let someone = {...p1};//{name: "xxx", age: 24}
        console.log(someone);
        
        let p2 = {name:"xxx"};
        let p3 = {age:24};
        let p4 = {name:"yyy"};
        p4 = {...p2,...p3};//{name: "xxx", age: 24}
        console.log(p4);

6.数组新增了map和reduce方法

• map 接收一个函数,将原数组中的所有元素用这个函数处理后放入新的数组
• reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素

//map接收一个函数,将原数组中的所有元素用这个函数处理后放入新的数组
        let arr = [1,2,3];
        arr = arr.map((item) => {
            return item*2
        });
        //上下等价
        arr = arr.map(item => item*2);

        //reduce为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素
        //previousValue,上一次调用回调函数返回的值,或者是提供的初始值
        //currentValue,数组中当前被处理的元素
        //index,当前元素在数组中的索引
        //array,调用reduce的数组
        let result = arr.reduce((a,b)=>{
            console.log("上一次处理后:"+a);
            console.log("当前正在处理:"+b);
            return a + b;
        });
        console.log(result);

7.promise 封装异步操作,根据成功或者失败调用不同回调

        let p = new Promise((resolve,reject)=>{
            $.ajax({
                url : "",
                data : "data",
                success : function (data) {
                    resolve(data);
                },
                error : function (error) {
                    reject(error);
                }
            })
        })

8.模块化

主要是三个关键字：import export default