ES6的解构

何为解构

ES6简化了从对象和数组中拿数据的方法，解构可以把一个数据结构分成任意小的部分，开发的时候经常使用对象或者数组的解构来简化代码，更方便。

数组的解构

交换值

ES5中，交换数组的两个值，需要设置一个中间变量才行，而ES6完全不需要，而且so easy好吧，简直好用极了。 ES5

var a = 1;
var b = 2;
var tmp;
tmp = a;
a = b;
b = tmp;
console.log(a);//2
console.log(b);//1

ES6

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

克隆数组，从前都是用concat()方法 ES5

var fruits = ["apple","banana","orange"];
var cloneFruits = fruits.concat();
console.log(cloneFruits);//["apple","banana","orange"]

ES6

let fruits = ["apple","banana","orange"];
let [...cloneFruits] = fruits;//只需要...，就可以
console.log(cloneFruits);//["apple","banana","orange"]

取值更加方便了，有没有 ES5

var nums = [1,2,3,4,5];
console.log(nums[0]);//1

ES6

let nums = [1,2,3,4,5,6]
let [x,y,z,m,n,q] = nums;
console.log(x,y); //[1,2]

还可以直接用数组的length()方法吆

let nums= [4,5,6];
let {length} = nums;
console.log(length);//3

直接赋值当然也能了

let nums = [1,2,3,4,5,name:{a}]
let [x,y,z,m,n,q] = nums;
console.log(name); //a

对象的解构

对象和数组的结构不同，对象的属性不分先后，所以必须得有标识性啊，对象名要和属性的名字相同才可以。

 var { foo: baz } = { foo: "aaa", bar: "bbb" };
    baz // "aaa"
    foo // error: foo is not defined

解构对象

let person = {
	age: 18;
    height: 1.88;
}
let {age,height} = person;
console.log(age); //18

forEach()与解构

普通写法

let sum = 0;
[1,2,3,4].forEach((item,index,array) => {
	sum += item;
})
console.log(sum);//10

与解构搭配

let items = [["foo",3],["bar",4]];
items.forEach(([word,count])) => console.log(word + ' ' + count);

解构在函数参数中的妙用

function userId({id}) {
  return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

var user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"