JavaScript的解构赋值应用

数组的解构赋值

数组的赋值 

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

var [a="随便设置的默认值",b = 888,c] = [,2,3];
console.log(a); // "随便设置的默认值"
console.log(b); // 2
console.log(c); // 3

数组的拼接

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

数组的克隆

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

 仅复制部分元素，涉及关键字 rest（剩余参数）的用法 

const array = [1,2,3,4]
const [a, ...rest] = array
console.log(a) // 1
console.log(rest) // [2, 3, 4]

对象的解构赋值

对象的赋值

var {name1, age} = {name: "dada", age: 20};
console.log(name1); // undefined
console.log(age);  // 20

当变量已经被声明, 需要使用() 将解构赋值的对象包裹起来

var name,age;
({name,age} = {name: "dada", age: 22});
console.log(name);	// "dada"
console.log(age);	// 22

对象的解构赋值也可以设定默认值

var {name = "dada", age} = {age: 22};
console.log(name);	// "dada"
console.log(age);	// 22 

对象的克隆 

const target = { ...src }; // 复制所有字段

let model = {...this.model1,...this.model2 }

 仅复制部分属性，涉及关键字 rest（剩余参数）的用法 

const obj = {name:"小火车",age: 18,height: 185}
const {name,...rest} = obj 
console.log(name) // 小火车
console.log(rest) // {age: 18, height: 185}