JavaScript高级（十二）--ES6语法总结

 ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。今天就来总结一下在工作中es6常用的属性方法

1.let

ES6新增了let命令，用来生命变量。它的用法类似于var,但是所声明的变量，只在let命令所在的代码块内有效。

for(let i = 0; i < 10; i++) {

 }
 console.log(i) //ReferenceError: i is not defined<br><br>for(var i=0;i<10;i++){<br><br>}<br>console.log(i) //10<br>`

　上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。let具有块级作用域的。var不存在块级作用域问题，具有全局变量提示的问题存在，

2.const

const声明一个只读的常量，一旦声明，常量的值就不能改变。

const a = 10；
    a = 20；
console.log(a)  //TypeError: Assignment to constant variable.
上面代码表明改变常量的值会报错。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const a;
    console.log(a)

报错：只声明不赋值

let与const

1.都不能重复声明

2.都存在块级作用域问题

3.只在声明所在的块级作用域内有效。

3.模板字符串

模板字符串就是一种字符串的新的表现形式

//(1)基本用法：
let s1 = ` hello `
let s2 = ' hello '

//(2)字符串和变量拼接
let s3 =" a " + s1 + " b " + s2;
let s4 = ` a ${s1} b ${s2}`;  

//(3)字符串换行

var box =`<div>
            <p>
              <span>123</span>
            </p>
            <p>${a1}</p>
         </div>`;


//(4)解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
//(4.1)对象结构赋值
var obj ={ name:"abc",age:18 };
    //用解构赋值的方式获取name、age

    let { name } = obj; //创建了一个变量name，值=obj.name
    console.log(name);  //"abc"

    let { age } =obj;
    console.log(age);  //18

//(4.2)函数参数结构赋值
function f1(obj){
        console.log(obj.age);
        console.log(obj.height)
    }
    //等价于
    function f1({ age,height }){
        console.log(age);
        console.log(height)
    }

    f1({age:5,height:180})

4.箭头函数

ES6 允许使用“箭头”（=>）定义函数。

例如：

//有一个参数的箭头函数
var fn=(a)=>{
        console.log("abc");
    }
    //等价于：
    var fn=a=>{
        console.log("abc");
    }


//有2个及更多参数的箭头函数

var p={
        age:18,
        //es6中对象方法的箭头函数表示形式
        run:()=>{
            setTimeout(()=>{
                //this:window
                console.log(this);//this是window
            },100)
        },
        travel:function(){
            //this:p
            setTimeout(()=>{
                console.log(this);//this是p
            },100)
        },
        //推荐使用的方式☆☆☆：es6中对象方法的简写形式
        say(){
            console.log("say方法中的this：",this);
            setTimeout(()=>{
                console.log("say内部的延迟函数：",this);//this是p
            },100)
        },
    }

    p.run();

    p.travel();

    p.say();

箭头函数和普通匿名函数有哪些不同？

　　1.函数体内的this对象，就是定义所在的对象，而不是使用所在的对象

　　2.不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误

　　3.不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

　　4.不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

 　  5.generator函数现在经常用async替代

5.对象的扩展

扩展运算符（spread）是三个点（...）。用于取出参数对象的所有可遍历属性，拷贝到当前对象中\

　　5.1Object.assign：实现拷贝继承

//Object.assign 就是进行对象的浅拷贝
    var source={ age:18,height:170,className:"3年2班" }

    //克隆一个新对象出来
    var newObj=Object.assign({},source);
    console.log(newObj);

    var newObj2={};
    Object.assign(newObj2,source);
    console.log(newObj2);

es6对象扩展实现浅拷贝写法：

var car={ brand:"BMW",price:"368000",length:"3米" }

    //克隆一个跟car完全一样的对象出来：
    var car2={ ...car }  
    console.log(car2); 

    //新车子，跟car的长度不同，其他相同
    var car3={ ...car,length:"4米" }  
    console.log(car3);

    var car4={ ...car,type:"SUV"}
    console.log(car4);

    var car5={...car4,price:"69800",brand:"BYD"};
    console.log(car5);