E6新特性：解构

原文链接地址：https://www.jianshu.com/p/ab4e4338047b

ES6解构：
需要获取对象中的值时使用，以前一般用.的方式获得，这种方式的缺陷是如果代码中有很多个对象，我们不得不把同一行代码写很多遍，eg：

let o = {a:23,b:34};
let a = o.a;
let b = o.b;

解构可以完成赋值的操作
解构：
百度解释：ES6中允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，称为解构。
作用：简化信息的提取过程
对象解构
对象解构语法是在赋值对象左侧使用了对象字面量，如：
同名变量解构赋值

Let node ={
	Type：‘People’，
	Name：’网友小张’
};
Let{ Type , Name }=node;
Console.log(Type);//‘People’
Console.log（Name）；//’网友小张’

用于不同的变量解构赋值：

Let node ={
	Type：‘People’，
	Name：’网友小张’
};
Let{Type：localType，Name：localName}=node；
Console.log（localType）；// ‘People’
Console.log（localName）；’//’网友小张’

注意点:

1. 使用var、let、const对对象进行解构，必须提供初始化器（等号右边不能没有值）

2. 不使用var、let、const赋值时，需要将解构语句使用（）包裹
   eg：
   （{type，name}=node）；//{}在js中作为代码块，单独使用加等号会报错
   默认值
   当你使用解构赋值语句时，如果指定的本地变量没有同名属性，那么该变量会被赋值为undefined，可以对其进行指定默认值

   Let node ={
   Type：‘People’
   Name：‘网友小张’
   }；
   Let{type，name，val}=node;
   Console.log(val);//undefined
   ({type,name,val = ‘234’}=node)
   Console.log(val)//’234’

嵌套的对象解构
使用类似对象字面量的语法，可以深入到嵌套的对象结构中去提取你想要的数据

Let node ={
Type：“People”，
Name：“网友小张”
Loc：{
Start：{
Line：1，
Column：1
}
End：{
Line：1，
Column：4
}
}
}；
Let{loc：{start}}=node；
Console.log（start.line）;//1
Console.log	(start.colunm);//1

这种方法使得本地变量start被赋值node中的loc的start对象，值得注意的是这种操作与直接node.loc.start的赋值是一致的，所以要注意值类型与引用类型的区别
注意点：此语句中并没有任何变量被绑定
// 没有变量被声明！

  let { loc: {} } = node;

数组解构
形式：
数组解构的语法看起来与对象解构非常相似，只是将对象字面量替换成了数组字面量。
数组解构时，解构作用在数组内部的位置上，而不是作用在对象的具名属性上。

Let colors = [“red”,”green”,”blue”]
Let[firstcolor,secondcolor]= colors;
Console.log(firstcolor);//“red”
Console.log(secondcolor)//“green”

对于数组解构最主要在于位置的固定，当然，如果不想赋值，可以直接跳过。

Eg：
Let colors=[1,2,3,4,5]
Let[,,T]=colors
Console.log(T)//3

使用var、let、const对对象进行解构时，必须提供初始化器（等号右边必须有值）
不使用var、let、const赋值时，需将解构语句使用（）进行包裹，因为数组的[]，与{}是不同的
可以适用于互换两个变量的值
默认值
数组解构赋值同样允许在数组任意位置指定默认值。当指定位置的项不存在，或者其值为undefined，那么该默认值就会被使用

Let colors=[“red”]
Let [firstColor,secondColor=”green”]=colors
Console.log(firstColor)//”red”
Console.log(secondColor)//”green”

嵌套的数组解构
与对象类似，只是仍使用的是数组字面量

Let colors = [“red”,[“green”,”lightgreen”],”blue”];
[firstColor,[secondColor,thirdColor],fourdColor]= colors
Console.log(secondColor);//green

剩余项：
数组解构有个与函数的剩余参数类似的，名为剩余项（rest items）的概念，它使用“…”的语法来将剩余的项目赋值给一个指定的变量

Let colors = [“red”,”green”,”blue”];
Let [firstColor,…restColors] = colors;
Console.log(firstColor); //”red”
Console.log(restColors.length);//2
Console.log(restColors[0]);//”green”
Console.log(restColors[1]);//”blue”

混合解构
既有函数的解构，也有数组的解构，只需要对象的创建出字面量来赋值即可

    Let node={
    	Type:”Identifier”,
    	Loc:{
    Start:{
    Line:1,
    column:1
    }
    },
	Range:[0,3]
}
Let{
	Loc:{start},
	Range:[startIndex]
} = node;
Console.log(start.line);//1
Console.log(start.column);//1
Console.log(startIndex);//1

参数解构的实际使用：

function setCookie(name, value, options){
options = options || {}；
let secure = options.secure,
path = options.path,
domain = options.domain,
expires = options.expires;
	//设置cookie的代码
}

//可以改写为：对options进行解构并赋予默认值
function setCookie(name, value, { secure, path, domain, expires } = {}) {
// ...
}

ES6的解构一定要注意的内容是左右的数据结构要对应,以上是关于ES6数组解构的部分知识，有不足或者错误的地方欢迎指正。