ES6最常用语法

2,178 阅读2分钟

ES6常用特性

let,const

ES5只有全局作用域和函数作用域,没有块级作用域,let则为JavaScript新增了块级作用域,用它所声明的变量,只在let命令所在的代码块内有效。

    {
{
    let a = 1;
    let b = 1;
    console.log(a);// 1
    console.log(b);// 1
}
console.log(a);// a is not defined
console.log(b);// 1
for (let i = 0; i < 10; i++) {
    //...
}
console.log(i); // i is not defined
for (var j = 0; j < 10; j++) {
    //...
}
console.log(j);//10
}

const也用来声明常量, 一旦声明,常量的值就不能改变。

    const PI = 3.1415926
    PI = 3.14;// Assignment to constant variable

默认参数

ES6之前处理默认参数,基本使用以下方法

function toDecimal(number, precision) {
    var precision = precision||2;
    var temp = 1;
    for (let i = 0; i < precision; i++) {
        temp = temp * 10;
    }
    return Math.round(number * temp)/temp;
}

ES6则可以采用如下写法

    function toDecimal(number, precision = 2) {
        var temp = 1;
        for (let i = 0; i < precision; i++) {
            temp = temp * 10;
        }
        return Math.round(number * temp)/temp;
    }

模板对象

ES6之前拼接字符串对象,一般使用如下方式

    var firstName = 'Fei';
    var lastName = 'Zhang';
    console.log('your name is ' + firstName + ' ' + lastName + '.');

ES6中可以使用${}的方式来做

    var firstName = 'Fei';
    var lastName = 'Zhang';
    console.log('your name is ${firstName} %{lastName}.');

多行字符串

ES6之前字符串换行,一般使用\n

    var strTemp = 'abcdefg\n'+
        'hijklmn\n';
    console.log(strTemp);

ES6只需要反引号即可

    var strTemp = ·abcdefg
        hijklmn·;
    console.log(strTemp);

箭头函数=>

=>可以是function写法简洁清晰很多

    function(i){ return i + 1; } // ES5
        (i) => i + 1; // ES6

        function(x, y) {
            x++;
            y--;
            return x + y;
        }
        (x, y) => {x++; y--; return x+y}

当使用匿名函数时,不需要额外定义变量指向this

    // ES5
    var obj = this;
    foo(function(){
        obj.foo1();
    });
    // ES6
    foo(()=>{this.foo1();});

解构(Destructuring)

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值。

    let cat = 'cat'
    let dog = 'dot'
    let zoo = {cat: cat, dog: dog} // es5
    let zoo1 = {cat, dog} // es6
    // 也可以反过来写
    let {cat1, dog1} = zoo;

rest参数(…变量名)

rest参数搭配的变量是一个数组,可以使用数组的一切操作

    function sum(...values){
        let temp = 0;
        for (var value of values){
            temp = temp+ value;
        }
        return temp;
    }