JS Destructuring

Destructuring Assignment

解构分配;

array分配array

//Destructuring Assignment

let a,b;
[a,b] = [100,200];
//Rest pattern
[a,b,c,...rest] = [100,200,300,400,500]; //后面的都放入rest

({})分配{}

({a,b}= { a:100, b:200, c:300, d:400, e:500});    //()将内容作为表达式
({a,b,...rest}= { a:100, b:200, c:300, d:400, e:500});

从function中返回array分配

//Parse Array returned from function
function getPeople(){
  return ['John','Beth','Mike'];
}

let person1,person2,person3;
[person1,person2,person3] = getPeople();

console.log(person1,person2,person3);

Object Destructuring

//Object Destructuring
const person={
  name:'John',
  age:34,
  city:'Miami',
  gender:'Male',
  sayHello:function(){
    console.log(`Hello`);
  }
}

Old ES5

//Old ES5
const name = person.name,
      age = person.age,
      city = person.city;

New ES6

//New ES6 Destructuring
const {name,age,city,gender,sayHello}=person;

console.log(name,age,city,gender);
sayHello();