es6解构赋值

es6解构赋值

我们经常定义许多对象和数组，然后有组织的从中提取相关的信息片段。在es6中添加了可以简化这种任务的新特性：解构。解构是一种打破数据结构，将其拆分为更小部分的过程

let options={
    repeat:true,
    save:false
}
//从对象中提取数据
let repeat =options.repeat,
    save=options.save;

//■ 这段代码从options对象中提取repeat和save的值，并将其存储为同名局部变量，提取的过程极为相似

如果要提取更多变量，则必须依次编写类似的代码来为变量赋值，如果其中还包括嵌套结构，只靠遍历是找不到真实信息的，必须要深挖整个数据结构才能找到所需数据，es6添加了结构赋值，将数据结构打散的过程变得更加简单，可以从打散后更小的部分中获取所需信息

//■ 数组的解构是按照次序排列的，变量取值是由位置决定的，二对象的属性是没有顺序的，变量必须与属性同名才能取到正确的值

数组解构(数组的解构是按照次序排列的，变量取值由位置决定)

let colors=['red','green','blue'] 
let [firstColor,secondColor]=colors //未声明的元素都会被直接忽略
log(firstColor) //red
log(secondColor) //red
let [ , , thirdColor]=colors
log(thirdColor) //blue 前面的逗号是前方元素的占位符

解构赋值
firstColor='black'
secondColor='purple'
[ firstColor , secondColor] =colors
log(firstColor) //red
log(secondColor) //green   变量firstColor secondColor已经被定义

■ 变量交换
es5中须引入第三个临时变量
let a=1,
    b=2,
    tmp;
tmp=a;
a=b;
b=tmp;
log(a)//2
log(b)//1

在es6中
let a=1,
    b=2;
■ [a,b]=[b,a]
log(a) //2
log(b) //1

默认值
let colors=['red']
let [firstColor,secondColor='green']=colors
log(firstColor) //red
log(secondColor) //green  secondColor没有对相应的匹配值，但是他有一个默认值，所以最终secondColor的输出结果不会是undefined

嵌套数组解构赋值
let colors=['red',['green','lightgreen'],'blue']
let [ firstColor,[ secondColor]]=colors
log(firstColor)//red
log(secondColor)//green

■ 不定元素 ...
let colors=['red','green','blue']
let [firstColor,...restColors] =colors
log(firstColor)//red
log(restColors.length) //2
log(restColors[0]) //green

数组复制
es5克隆数组
var colors = ['red','green','blue']
var cloneColors=colors.concat() //concat()设计初衷是连接两个数组，如果调用时不传参就会返回当前函数的副本，不会改变现有的数组

■ es6克隆
let colors = ['red','green','blue']
■ let [...cloneColors]=colors
log(cloneColors)//['red','green','blue']

//嵌套解构
let [a,[b],[d]]=[1,[2,3],4] //数组的解构是按照次序排列的，变量取值由位置决定,所以b为2
log(a,b,c) //1,2,4

对象解构（而对象的属性是没有顺序的，变量必须与属性同名才能取到正确的值）

let node ={
    name:'miao'
    age:35
}
let { name ,age}=node
log(name) //miao
log(age) //35
node.name的值被储存在名为name的变量中；node.age的值被储存在age的变量中

解构赋值
let node ={
    name:'miao'
    age:35
},
name="erwei",
age="20";
({name,age}=node)  这里一定要小括号，转化为表达式
log(name)
log(age)

默认值
let node ={
    name:'miao'
    age:35
}
let { name ,age ,sex} =node
log(sex) //undefined 如果指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为undefined

let { name ,age ,sex = '男'} =node
log(sex) //男 只有当node上没有该属性或者该属性值为undefined时该值才会生效

嵌套对象解构
let node={
    type:'abc',
    name:'foo',
    loc:{
        start:{
            line:1,
            colume:1
        },
        end:{
            line:1,
            column:4
        }
    }
}
let {loc:{start}} =node //对象的属性是没有顺序的，变量必须与属性同名才能取到正确的值
log(start) 

//对象属性解构
let { f1,f2}={f1:'test1',f2:'test2'}
log(f1,f2) //test1,test2

//解构对象重命名
let {f1:rename,f2}={f1:'test1',f2:'test2'}
log(rename,f2)