1.解构的基本用法
我们经常需要从已经存在的对象或数组中摘取部分数据，没有ES6解构之前，需要大量遍历，写许多重复的代码。如下代码
复制代码
var user={name:"test",age:18,gender:"female",company:"mico"}
var name=user.name;
var company=user.company;
var age=user.age
console.log("name:",name); //输出 name: test
console.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: test
console.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=2
console.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-test2
console.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: 20m
console.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]=people
console.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
作者：绿茶叶
出处：http://www.cnblogs.com/greenteaone/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
谢谢各位打赏https://www.cnblogs.com/greenteaone/p/9647930.html
