ES6语法(一) - 展开运算符

1. rest参数

...符号
可以替代ES6以前的arguments对象

• 定义:
  rest参数是一个数组，包含自它之后传入的所有参数
  通过该数组，我们可以逐一访问里面的所有参数

代码示例:

function calculate(op, ...data) {
    if (op === "+") {
        let result = 0;
        for (let i = 0; i < data.length; i++) {
            result += data[i];
        }
    }
    ...

    return result;   
}

 

2. 展开运算符

...符号
可以将一个数组转换为各个独立的参数(将数组展开为参数)
也可用于取出对象的所有可遍历属性

代码示例:

function sum(a, b, c) {
    return a + b + c;
}

let arr = [1, 2, 3];
sum(...arr);

展开运算符可用来复制数组

代码示例2(数组复制):

let arr1 = [1, 2, 3];

// arr2与arr1指向同一个数组
let arr2 = arr1;

// arr3是另一个数组,是arr1的克隆
let arr3 = [...arr1];

arr1[0] = 4;
// 4
console.log(arr2[0]);
// 1
console.log(arr3[0]);

代码示例3(数组合并):

let arr1 = [1];
let arr2 = [2, 3];
let arr3 = [4, 5];

let arr4 = [...arr1, ...arr2, ...arr3];
// [1, 2, 3, 4, 5]
console.log(arr4);

代码示例4(遍历对象属性,复制到一个新对象):

let person = {
    name: "Peter",
    age: 35
}

let manager = {...person, title: "senior manager"}
// { name: "Peter", age: 35, title: "senior manager"}
console.log(manager);

 

3. 对象解构赋值

代码示例:

let person = {
    name: "Peter",
    age: 35
}

let {name, age} = person;
// "Peter"
console.log(name);
// 35
console.log(age);

如果变量已经声明，需要加括号

let name, age;
({name, age} = person);

 

4. 数组解构

数组解构使用中括号

代码示例:

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

用逗号作占位符
代码示例2:

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

已经声明的变量不需要使用圆括号

let a, b, c;
[a, b, c] = arr;

与展开运算符相结合
代码示例3:

let arr = [1,2,3];

// arr剩余元素赋值给others
let [a,...others] = arr;

// 数组复制
let [...newArr] = arr;

// 1
console.log(a);
// [2, 3]
console.log(others);
// [1,2,3]
console.log(newArr);