ECMAScript6语法简要

1. let声明

let用于声明一个变量，一般定义在方法中或块中，与JavaScript中的var声明不同之处在于JavaScript中的var声明有变量提升机制，而let只在所属作用域有效。

var声明使用示例：

function changeState(flag) {
    if (flag) {
        var color = "red";
    } else {
        console.log(color); // 运行代码会打印undefined
    }
}

let声明使用示例：

function changeState(flag) {
    if (flag) {
        let color = "red";
    } else {
        console.log(color); // 语法错误，未定义变量color
    }
}

因为var声明的提升机制在开发时可能会出现一些困扰，如导致bug，在开发中推荐使用let声明变量

2. const声明

const用于声明一个常量，示例如下：

function sayHello() {
    const hello = "Hello World";
    console.log(hello); // 打印Hello World
}

3. 模板字面量

使用反引号`来字符串的单引号或双引号，当使用到多行字符串或字符串占位符的时候可使用此语法。

3.1 多行字符串

模板字面量语法允许在``中包裹的字符串中出现换行符，制表符等，例如：

function sayHello() {
    const hello = `Hello
World`;
    console.log(hello);
}

上面代码打印效果如下

Hello
World

3.2 字符串占位符

在模板字面量中可以使用${变量名或表达式}嵌入占位符，将变量或表达式的值作为字符串的一部分。例如：

let name = "xuzhihan";
let message = `我是${name}`;
console.log(message); // 打印我是xuzhihan

let a = 2;
let b = 3;
let result = `result: ${a * b}`;
console.log(result); // 打印result: 6

let message2 = `你好,`我是${name}``; // 模板字面量也属于表达式
console.log(message2); // 打印你好，我是xuzhihan

4. 默认参数

在方法中可以使用参数名 = 默认值的方式给参数添加默认值，例如：

function hello(showParam = true, param = "World") {
    if (showParam) {
        console.log(`Hello, ${param}`);
    } else {
        console.log("Hello");
    }
}

hello(); // 打印Hello, World
hello(false) // 打印Hello
hello(true, "xuzhihan"); // 打印Hello, xuzhihan
hello(undefined, undefined); // 打印Hello, World
hello(undefined, null); // 打印Hello, null

参数传入undefined相当于没有传入参数，参数传入null相当于传入了参数，这个参数是null

与Java不同，这里方法具有默认值的参数后面可以跟没有默认值的参数

5. rest参数（可变长参数）

类似Java的可变长参数，在参数名前加...，例如：

function show(op, ...params) {
    let message = op;
    for (let i = 0; i < params.length; i++) {
        message += params[i];
    }
}

show("Hello, ", "xuzhihan, ", "hanzhixu, ", "zhihanxu"); // 打印Hello, xuzhihan, hanzhixu, zhihanxu

rest参数在方法中只能有一个并且必须是最后一个

6. 展开运算符

展开运算符...用于将一个数组转换为各个独立的参数，或者取出对象中所有可遍历的属性，例如：

const arr = [1, 2, 3];
const arr2 = [0, ...arr]; // [0, 1, 2, 3]

const obj = {
    name: "xuzhihan",
    age: "35"
}
const obj2 = {
    ...obj,
    sex: "f"
} // {name: "xuzhihan", age: "35", sex: "f"}

7. 对象字面量语法扩展

7.1 属性初始值的简写

属性初始赋值时，如果属性名称和变量名完全一样，则可以省略属性名后面的：和变量名，例如：

function test(name, age) {
    const att = {
        name: name,
        age: age
    }
}

可以简写为

function test(name, age) {
    const att = {
        name,
        age
    }
}

7.2 可计算的属性名

某些情况下，声明对象时，对象的参数名称可能需要动态设置，这种情况下就可以使用此语法书写，例如：

const suffix = "name";
const person = {
    ["first " + name]: "zhihan",
    ["last " + name]: "xu"
} // {"first name": "zhihan", "last name": "xu"}

8. 解构赋值

8.1 对象解构

对象解构的语法形式是在一个赋值操作符的左边放置一个对象字面量，例如：

const book = {
    title: "jjjj",
    isbn: "327982749247"
}

let {title, isbn} = book;

console.log(title); // "jjjj"
console.log(isbn); // "327982749247"

如果之前声明过变量，则需要用括号包裹整个赋值语句

const book = {
    title: "jjjj",
    isbn: "327982749247"
}
let title, isbn;
({title, isbn} = book);

console.log(title); // "jjjj"
console.log(isbn); // "327982749247"

使用解构赋值表达式时，如果指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为undefined，这种情况下可以给变量一个默认值

const book = {
    title: "jjjj",
    isbn: "327982749247"
}
let {title, isbn, price = 20} = book;

console.log(title); // "jjjj"
console.log(isbn); // "327982749247"
console.log(price); // 20

如果希望局部变量名和对象属性名不同，可以使用属性名：局部变量名的语法形式，例如：

const book = {
    title: "jjjj",
    isbn: "327982749247"
}

let {title: bookTitle, isbn: bookIsbn} = book;

console.log(bookTitle); // "jjjj"
console.log(bookIsbn); // "327982749247"

对于对象中嵌套对象的情况，可以使用以下示例形式取值：

const book = {
    title: "jjjj",
    isbn: "327982749247",
    category: {
        id: 1,
        name: "web"
    }
}

let {title, isbn, category: {name: category}} = book;

console.log(bookTitle); // "jjjj"
console.log(bookIsbn); // "327982749247"
console.log(category); // web

8.2 数组解构

数组解构使用中括号的语法，如：

const arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

如果需要某个位置的元素，可以在其他位置使用不写变量名的形式提供占位符，例如：

const arr = [1, 2, 3, 4, 5];
let [, , c] = arr;
console.log(c); // 3

数组解构中也可以使用默认值

const arr = [1, 2, 3];
let [a, b, c, d = 4] = arr;
console.log(d); // 4

数组中嵌套数组的解构和对象解构类似

const arr = ["c", ["java", "python"], "c#"];
const arr2 = [a, [, b], c] = arr; // a = "c", b = "python", c = "c#"

9. 箭头函数

单一参数，函数体只有一条语句的箭头函数定义形式如下：

let welcome = msg => msg;

// 相当于
function welcome(msg) {
    return msg;
}

如果有多个参数，用小括号包裹

let welcome = (firstName, lastName) => `${firstName} ${lastName}`;

// 相当于
function welcome(firstName, lastName) {
    return `${firstName} ${lastName}`;
}

如果没有参数，则使用空的小括号

let welcome = () => "welcome you";

// 相当于
function welcome() {
    return "welcome you";
}

如果函数体有多条语句，则使用大括号包裹函数体

let add = (a, b) => {
    let c = a + b;
    return c;
}

// 相当于
function add(a, b) {
    let c = a + b;
    return c;
}

如果返回对象字面量，则需要用小括号包裹

let createCar = (color, doors) => ({color, doors});

// 相当于
function createCar(color, doors) {
    return {color, doors};
}