ES6常用语法

ECMAScript 6简介

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ES6 let和var声明变量的区别

let有作用域，var没有

	{
        let a = 12;
        var b = 15;
    }
    console.log(b);
    console.log(a);

控制台的结果是 var声明的变量b正常输出 15，第二行出现let.html:56 Uncaught ReferenceError: a is not defined 2. var可以声明重名的变量但是let不行

 	var num = 10;
    var num = 11;
    let temp = 12;
    let temp = 12; // Identifier 'temp' has already been declared
    console.log(num);

3. var可以对变量做类型提升，但是let不能

 // var 可以对变量做类型提升，但是let不行
    console.log(x); // undefined
    var x = 222;
    console.log(y);
    let y = 333; //Uncaught ReferenceError: Cannot access 'y' before initialization

4. const修饰的变量一旦初始化完成就无法修改。

    //const修饰的变量一旦初始化，不能被修改
    const datao = 'coder';
    datao = 'loser' // Uncaught TypeError: Assignment to constant variable.
    console.log(datao);

ES6解构表达式

// 数组解构表达式
    const arr = ["a","b","c"];
    const [a,b,c] = arr;
    console.log(a,b,c); 

    // 对象解构表达式
    let person = {
        name:"xiaowang",
        age:19,
        hobby:"喝酒"
    }
    const {name:username,age,hobby} = person;
    console.log(username,age,hobby);
    // 字符串函数
    let str = "Hello Vue.js"
    console.log(str.startsWith("Hello"));//true
    console.log(str.endsWith("."));//false
    console.log(str.includes("js"))//true
    // 字符串模板
    let s = ` <div>
        <span>Hello World</span>
    </div>` 
    console.log(s);
    // 字符串表达式
    function fun(){
        return "这是一个函数";
    }
    let said = `我是${username},今年${age}岁,我想说：${fun}`;

关于函数的优化

1、可变参数

	//可变参数,Java,Python 中都有
    function changeparam(...values){
        console.log(values.length);// 输出参数个数
    }

    changeparam(1,2,3,4,5);// 控制台输出 5
    changeparam(1,2,3,4,5,6,7,8,9);// 控制台输出9

2、函数默认值

 function add(a,b){
       b = b|| 1; //如果b没有值就默认是1
       return a+b;
   }

   // 现在可以写成
   function add2(a,b=1){
       return a+b;
   }

3、箭头函数

		// 箭头函数，类似于java 的函数式编程
       var print  = obj=>{console.log(obj)}
       print("你好世界！") //你好世界！

4、箭头函数+解构

   let person = {
       name:"xiaowang",
       age:19,
       habbit:"喝酒"
    }

   // 箭头函数+解构
   var hello = ({name})=>console.log("hello，"+name);
   // 调用函数
   hello(person); // hello,xiaowang

对象的一些方法

ES6给Object拓展了许多新的方法。

key(obj) :获取对象的所有key形成的数组
value(obj): 获取对象的所有value形成的数组 - entries(obj):获取对象的所有key,value组成的二维数组，格式：[[k1,v1],[k2,v2]...]
assign(dest,...src):将多个src对象的值拷贝到dest中，第一层是深拷贝，第二层是浅拷贝来吧，看代码

 const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'python', 'css']
        }
        console.log(Object.keys(person));//[name,age,language]
        console.log(Object.values(person));//['jack',21,Array(3)]
        console.log(Object.entries(person));

对象的拷贝

		const target = { a: 1 };
        const source1 = { b: 2 };
        const source2 = { c: 3 };
        // 对象的拷贝，将source1和2拷贝到target
        Object.assign(target, source1, source2);

        console.log(target);
        //{a: 1, b: 2, c: 3}

对象赋值的简写

		const age = 23;
        const name = "战三";
        const person1 = { age: age, name: name };
        //当对象属性名和另一个属性名一样时可以简写为
        const person2 = { age, name };
        console.log(person1)
        console.log(person2)//输出结果一样

对象中函数的简写

 		//对象的函数简写
        let student = {
            age: 19,
            name: "李四",
            //箭头函数不能使用this，需要使用当前对象名获取属性值
            eat1: food => console.log(this.name + '吃' + food),
            eat2(food) {
                console.log(this.name + '吃' + food); //这个可以正常运行
            }

        }
        student.eat1('桃子');// 吃桃子，name属性没有获取到，将this替换成当前对象student可以获取name属性值
        student.eat2('苹果');// 李四吃苹果

在对象中的箭头函数this不生效需要通过当前**对象名.属性**获取对象的属性值

对象的拓展运算符

		//对象拓展运算符
        //1，拷贝对象（深拷贝）
        let p1 = { age:18, name:"ppp" };
        let p2 = { ...p1 };
        console.log(p2);//{age: 18, name: "ppp"}
        //2.合并对象
        let age1 = { age: 15 };
        let name1 = { name: "xiaowang" };
        let = someone = { ...age1, ...name1 }
        console.log(someone);//{age: 15, name: "xiaowang"}

这里需要注意的是：写对象属性的格式是json格式；属性名：属性值，千万不要写成=，否则会出Invalid shorthand property initializer

数组map，reduce

问题1：给定一个数组arr将数组中的所有元素都扩大为原来的2倍并返回。 map():接受一个函数，将原数组中的所有元素用这个函数处理后放到新数组中返回。

 		arr =[1,4,6,12,3,-9]
        arr = arr.map((item)=>2*item)
        console.log(arr);

reduce(callback,[initValue]):reduce为数组中的每个元素（除未初始化，删除的元素）执行一次回调函数callback(),initvalue是初始化的值。callback()函数中第一个参数是previousValue代表上次调用回调函数后的结果；第二个参数是currentValue，代表当前元素；第三个参数是index，也就是数组的索引；第四个参数是arr，代表数组。例如：使用reduce函数计算数组中元素的和。

arr =[1,4,6,12,3,-9]
// reduce
        let result = arr.reduce((prev,current,index,arr)=>{
            console.log("上次得出的结果是："+prev);
            console.log("当前值是："+current);
            console.log("索引："+index);

          return prev+current;
        })
        console.log(result)

Promise对象封装异步操作

		//封装 ajax请求，用Promise对象更容易理清逻辑关系，他的主要作用是封装异步操作
        function get(url, data) {

            return new Promise((resolve, reject) => {
                $.ajax({

                    url: url,
                    data: data,
                    success: function (data) {
                        resolve(data);//请求成功没将响应后的结果作为参数向后传
                    },
                    error: function (errmsg) {
                        reject(errmsg);//请求失败，将错误信息往后面的方法传
                    }
                })
            });
        }

            //查询用户信息，根据用户id获取课程信息
        get("mock/user.json")
            .then((data) => {
                console.log("用户信息查询成功！", data);
                return get(`mock/user_course_${data.id}.json`);
            })//根据客户课程id查询用户成绩
            .then((data) => {
                console.log("课程信息查询成功！", data);
                return get(`mock/user_score_${data.id}.json`);
            })
            .then((data) => {//查出用户成绩
                console.log("用户成绩=", data.score);
            })
            .catch((error) => {// 请求失败，打印出错信息
                console.log("出错了", error);
            });

以上有不足的地方欢迎各位指出，本人菜鸟一个！