JavaScript----ES6的新特性

前言

ES6是JavaScript在2015年发布的一套标准，它拥有许多新特性，不仅简化我们的开发，而且使代码格式更加规范。今天我们介绍几个常用的新特性。

1. let 声明变量

在ES6之前，我们都是以var定义变量的，可是它声明的变量有一定的缺陷。那就是它没有作用域的限制，这使它的安全性大大降低；ES6推出了let关键字, 它定义的变量具有作用域的范围。

<script>
    {
        // var 声明的变量没有局部作用域
        // let 声明的变量  有局部作用域
        var a = 10;
        let b = 20;
    }
    console.log(a);    // 10
    console.log(b);    // ReferenceError: b is not defined（出了作用域，它会报错）
</script>

除此之外，var可以声明变量多次，let只能声明变量一次。

<script>
    var a = 1;
    var a = 2;

    let m = 10;
    let m = 20;

    console.log(a);   //2
    console.log(m);  //Uncaught SyntaxError: Identifier 'm' has already been declared(声明多次变量会报错)
</script>

2. const声明常量(只读变量)

特点：const声明的常量一旦被定义不能被修改；声明常量时必须初始化。

<script>
    //定义常量
    const PI = "3.1415";
    //常量值一旦定义,不能修改
    //Uncaught TypeError: Assignment to constant variable.
    PI = 3;

    //定义常量必须初始化
    //Uncaught SyntaxError: Missing initializer in const declaration
    const AA;

</script>

3. 解构赋值

解构赋值是对赋值运算符的扩展，它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
[1] 数组结构

<script>
    //传统写法
    let a = 1, b = 2, c = 3
    console.log(a, b, c);   //1 2 3

    //es6的写法
    let [x, y, z] = [10, 20, 30];
    console.log(x, y, z);  //10 20 30
</script>

[2] 对象结构

<script>
    //定义对象
    let user = {"name":"Lucy","age":18};

    //传统方法获取对象里面的值
    let name1 = user.name;
    let age1 = user.age;
    console.log(name1 + ":" +age1); // Lucy:18

    //ES6获取对象的值
    let{name,age} = user;
    console.log(name+"*"+age);  // Lucy*18

</script>

4. 模板字符串

模板字符串相当于加强版的字符串，用瓢 ` ，除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

// 1、多行字符串
let string1 =  `Hey,
can you stop angry now?`
console.log(string1)
// Hey,
// can you stop angry now?

// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.

// 3、字符串中调用函数
function f(){
    return "have fun!"
}
let string2 = `Game start,${f()}`
console.log(string2);  // Game start,have fun!

5. 声明对象简写

<script>
    const age = 12;
    const name = "gs";

    //传统定义对象
    const p1 = {name:name,age:age};
    console.log(p1);  // {name: "gs",age: 12 }

    //es6定义对象
    const p2 = {name,age};
    console.log(p2);  // {name: "gs", age: 12}

</script>

6. 定义方法简写

<script>
    //传统的定义方法
    const person1 = {
        sayHi: function(){
            console.log("Hi");
        }
    }
    //调用
    person1.sayHi();  //"Hi"
    
    //es6的调用
    const person2 = {
        sayHi(){
            console.log("Hi...");
        }
    }
    //调用
    person2.sayHi(); //"Hi..."

</script>

7. 对象拓展运算符

拓展运算符(…)用于取出参数对象所有可遍历属性然后拷贝到当前对象

<script>
    //1.对象拷贝
    let person1 = {"name":"lucy","age":20};
    let person2 = {...person1};
    console.log(person2);  //{"name":"lucy","age":20};

    //2.对象合并
    let name = {name:'mary'};
    let age ={age:20};
    let p2 = {...name, ...age};
    console.log(p2);  //{"name":"mary","age":20};
</script>

8. 箭头函数

箭头函数提供了一种更加简洁函数书写方式，基本语法是：参数 => 函数体

// 传统
var f1 = function(a){
    return a
}
console.log(f1(1))

// ES6
var f2 = a => a
console.log(f2(1))

// 当箭头函数没有参数或者有多个参数，要用 () 括起来。
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {
    let result = a+b
    return result
}
console.log(f3(6,2))  // 8

// 前面代码相当于：
var f4 = (a,b) => a+b

箭头函数多用于匿名函数的定义