ES6 展开运算符(延展运算符)

1.数组构造

  数组合并

var arr = ['aa','cc'];
var str = ['bb',...arr,'dd'];
console.log(str)   //  ['bb,'aa','cc','dd']

数组复制

// 例子1
var arr = [1,3,4];
var str = [...arr];  // 此时str等于[1,3,4]
str.push(8);
console.log(str);   // 结果为1,3,4,8

// 例子2
// 剩余元素变量只是把数组元素copy到另一个数组，所以它们包含的元素相等，但是这2个数组是没有关系的，是不相等的
let color = ['red', 'green', 'blue'];
let [...copiedColor] = color;
console.log(copiedColor);// ["red", "green", "blue"]
console.log(color.toString() === copiedColor.toString()); // true
console.log(color == copiedColor); // false
console.log(color === copiedColor); // fasle

2.数组解构赋值

   特别注意的是不定元素变量（剩余元素变量）必须是解构的最后一个变量，其后面不能再有别的变量，否则会抛出语法错误

错误写法：

// 不定元素变量（剩余元素变量）必须是解构的最后一个变量否则报错,例如下面1,2：
// 例子1
var arr = ['Abby', 'Andy', 'Jane', 'Tom'];
var arr_1,arr_2;
[...arr_1,arr_2] = arr;

console.log(arr_1)     //  Uncaught SyntaxError: Rest element must be last element
console.log(arr_2)

// 例子2
let color = ['red', 'green', 'blue'];
let [firstColor, ...secondColor, error] = color; // Uncaught SyntaxError: Rest element must be last element

正确写法：

let color = ['red', 'green', 'blue'];
let [, , thirdColor] = color;
console.log(thirdColor); // blue


let [arr1,...arr2] = ['Abby', 'Andy', 'Jane', 'Tom'];
console.log(arr1)   //  Abby
console.log(arr2)   // ['Andy','Jane','Tom']

3.对象解构赋值

let {a} = {a: 3}; // {a} 相当 {a: a}
console.log(a); // a = 3

let {a: {b}} = {a: {b: 3}};
console.log(b); // b = 3

// 快速的声明并赋予相应的属性值
let obj = {
    id: 2, 
    name: '弢弢', 
    ago: 29
}

let { id, name, ago } = obj;
console.log(id);   // 2
console.log(name); // 弢弢
console.log(ago);  // 29

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x);   // 1
console.log(y);   // 2
console.log(z);   // { a: 3, b: 4 }

4.对象合并

// 将obj1属性添加到obj2中
let obj1 = {
    name: 'taotao',
    age: 26,
    phone: 15800008888
};

let obj2 = {
    address: '江西景德镇'
};

obj2 = {
    address: '江西景德镇',
    ...obj1   
}

4.对象和数组的混合解构

let obj = {
    personal: {
        userBasicInfo: {
            name: {
                firstName: 'mike',
                lastName: 'deep'
            },
        }
    },
    checkRange: [1, 3]
};
let {
    personal: {userBasicInfo: {name}},
    checkRange: [checkLevel]
} = obj;

console.log(name.firstName); // mike
console.log(checkLevel); // 1

 

标签：ES6,arr,console,log,...,color,运算符,let,延展
来源： https://blog.csdn.net/qq_30376375/article/details/100063444