彻底搞清扩展运算符...和解构赋值

1、对象的扩展

对象的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象中。
基本应用

var json = { a:1, b:2, c:3 };
var json2 = { ...json, d:999 };
console.log(json2);    //{ a:1, b:2, c:3, d:999 };

合并对象

var name = { "name": "lisa" };
var age = { "age": 15 };
var person = { ...name, ...age  };
console.log(person);     //{ "name": "lisa", "age": 15 }

2、数组的扩展

数组的扩展运算符就是我们知道的三个点(…)，它就好像是剩余参数的逆运算，讲一个数组转为用逗号分隔的参数系列。
解构赋值

console.log(...[1,2,3]);   //1 2 3
console.log([1,...[2,3,4],5]);   //[1,2,3,4,5];

合并数组

console.log([...[1, 2],...[3, 4]]); // [1, 2, 3, 4]

3、函数的扩展

基本用法

function add(x,y,z){
    return x+y+z
}
var numbers = [1,2,3,4];
add(...numbers);    //6

---

解构赋值

解构赋值语法是一种js表达式，通过解构赋值，可以将属性值从对象或者数组中取出，赋给对应的其它变量。
解构的源在等号的右边，解构的目标在等号的左边。

数组解构

基本用法

let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

剩余运算符

let [a, ...b] = [1,2,3];
//a=1    b=[2,3];

对象解构

基本用法

let node = {type: "succ", name: "foo"};
let { type,name } = node;
console.log(type);       //"succ"
console.log(name);    //"foo"

剩余运算符

let { a,b,...rest } = { a:10, b:20, c:30, d:40 };
//a = 10;     b = 20;   rest = { c:30, d；40 };