JavaScript的解构赋值

ES6中新增的结构赋值特别的方便，可以用于多种场合，例如值的转换、浅拷贝等。

解构赋值遵循 模式匹配 的原则，只要是左右格式一样，就能正常赋值。

解构时也可以起别名，使用冒号 :

数组解构赋值

let [x, y] = [1, 2];
console.log(x, y); //相当于 x=1,y=2

对象解构赋值

对象解构赋值的时候和顺序无关，只看对应的属性名和变量名。

//方式一
let obj = {
    name: "flying",
    age: "24"
}
let {name,age} = obj;

//方式二
let {name,age} = {name:"flying", age: "24"};

//方式三
let {age,name} = {name:"flying", age: "24"}
console.log(name); //flying
console.log(age);  //24

字符串解构赋值

也可以当作对象解构。

let [a,b,c,d,e,f] = 'flying';
console.log(a); //f

//知识点一：当作对象解构
//知识点二：起别名
let {length:len} = 'flying';
console.log(len); //6

函数参数的解构

let foo = ([x, y])=>{
    return x * y;
}

console.log( foo([6, 7]) ); //42

//也可以是二维数组
let arr = [
    [2,3],
    [4,5],
    [6,7]
];

let new_arr = arr.map(([x,y])=>{
    return x * y;
});

console.log(new_arr);  //[6, 20, 42]

解构赋值的应用

值的互换。

let x = 1;
let y = 2;
[y,x] = [x,y];
console.log(x, y); //结果是 y=1,x=2

数组合并。

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

arr1.push(...arr2)
console.log(arr1);	// 结果是 [1,2,3,4,5,6]