2.知识剖析

下面是介绍下ES6中的解构赋值

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

let a = 1;
let b = 2;
let c = 3;
ES6允许写成这样：
let [a, b, c] = [1, 2, 3];
            

数组的解构，数组的元素是按次序排列的，变量的取值由它的位置决定 。

    const color = ['red', 'blue']
    const [first, second] = color
    console.log(first) //'red'
    console.log(second) //'blue'
            

    const people = {
        name: 'lux',
        age: 20
    }
    const { name, age } = people

            

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
            

解构不成功的值

var [a,b] = [1];
console.log(a,b); //1 undefined
            

默认值

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

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

默认值也可以引用解构赋值中的其他变量，但是这个变量必须已经声明

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

let [a = b,b = 1] = [];
console.log(a,b); //Uncaught ReferenceError: b is not defined
            

解构的用途

交换变量

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

只取需要的值

let arr = [
  {
    title:1111,
    love:{
      one:'one_1',
      two:'two_1'
    }
  },
  {
    title:2222,
    love:{
      one:'one_2',
      two:'two_2'
    }
  }
];

for(let {title,love:{two}} of arr){
  console.log(title,two);
}
            

提取 JSON 数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]