1.解构的基本用法

我们经常需要从已经存在的对象或数组中摘取部分数据，没有ES6解构之前，需要大量遍历，写许多重复的代码。如下代码

var user={name:"test",age:18,gender:"female",company:"mico"}var name=user.name;var company=user.company; var age=user.ageconsole.log("name:",name);     //输出 name: testconsole.log("company:",company); //输出 company: mico console.log("age:",age); //输出 age:18

　es6解构处理是这样的：

var user={name:"test",age:18,gender:"female",company:"mico"}var {name,company,age}=user;  //解构console.log("name:",name);     //输出 name: testconsole.log("company:",company); //输出 company: mico console.log("age:",age); //输出 age:18

console.log({name,company}); //输出 { name: 'test', company: 'mico' }

 es6解构，让代码简洁，省去重复的赋值代码，

2.利用ES6解构实现交换变量

平时我们交换变量的时候都要定义一个中间的临时变量来完成交换，现在用数组的解构轻松可以交换变量，而且还省掉了临时变量，代码如下：

let a=1;let b=2;[a,b]=[b,a];console.log(`a=${a}`)  //输出a=2console.log(`b=${b}`) //输出b=1

3.利用ES6解构取任意层级的数据赋值

var house = {    width: "20m",    height: "30m",    people: [{        name: "test1",        age: 18,        gender: "female",        company: "mico-test1"    }, {        name: "test2",        age: 18,        gender: "male",        company: "mico-test2"    }]}let {people:[,{company}]} = house;let {people:[,{company:com}]} = house;console.log(company); //输出 mico-test2console.log(com); //输出 mico-test2

 4.利用ES6解构数据赋值，并且添加其他的属性

var house = {    width: "20m",    height: "30m",    people: [{        name: "test1",        age: 18,        gender: "female",        company: "mico-test1"    }, {        name: "test2",        age: 18,        gender: "male",        company: "mico-test2"    }]}let {people,address=""} = house; //address 是添加的属性console.log( {people,address}); //输出{people:...,address:""}

可以用等号给添加的属性赋一个默认值，也可以不给他赋值，这样打印出来address就是undefined（ address: undefined ）

5.ES6解构为非同名变量赋值

var house = {    width: "20m",    height: "30m",}let {width:newWidth,height:newHeight} = house; console.log("newWidth:",newWidth); //输出newWidth: 20mconsole.log("newHeight:",newHeight); //输出newHeight: 30m

取出house里的width和height并且赋给newWidth和newHeight两个局部变量，就可以在旧的属性后面用冒号：紧跟新的变量，表示把取出的值放在新变量里。

6.ES6解构数组复制 

ar people= [{    name: "test1",    age: 18,    gender: "female",    company: "mico-test1"}, {    name: "test2",    age: 18,    gender: "male",    company: "mico-test2"}]let [...clonePeople]=peopleconsole.log("clonePeople:",clonePeople); //输出clonePeople: [ { name: 'test1',age: 18,gender: 'female',company: 'mico-test1' },{ name: 'test2', age: 18, gender: 'male', company: 'mico-test2' } ]clonePeople[0].name="ll";console.log(people[0].name) //输出ll

let numbers=[1,2,3];

let [...cloneNumbers]=numbers;

cloneNumbers[2]=77;

console.log("cloneNumbers=",cloneNumbers); //输出cloneNumbers= [ 1, 2, 77 ]

console.log("numbers=",numbers);          //输出numbers= [ 1, 2, 3 ]

用解构数组复制以后，

1.如果数组成员是引用类型，那么旧的数组和新的数组都是指向一个地址，无论哪个变量改变，数组都会跟着改变

2.如果数组是基本类型，那么旧的数组和新的数组，无论哪个变量改变都不会相互影响。

 

注意：解构里为对象赋值的，都是指向的同一个地址，所以旧的对象值，与赋值后的变量是相互影响的

例如：

var house = {    width: "20m",    height: "30m",    people: [{        name: "test1",        age: 18,        gender: "female",        company: "mico-test1"    }, {        name: "test2",        age: 18,        gender: "male",        company: "mico-test2"    }]}let {people} = house; //address 是添加的属性console.log(people); //输出[ { name: 'test1',age: 18,gender: 'female',company: 'mico-test1' },{ name: 'test2', age: 18, gender: 'male', company: 'mico-test2' } ]people[0].name="arry";console.log(house.people[0].name);//输出arry

赋值后的变量people里第一个值的name改成arry，结果house里面对应的people值也改成了arry