ES6之解构【转】

文章转自深入理解ES6之解构
仅供自己学习比较使用；

一：为什么用解构：

在之前提取数据对象需要逐个赋值，可能会为了一个小数据挖掘整个机构，ES6给数组和对象添加了解构可以方便提取数据。

二：对象解构：

1:

let node = {
    type:"node",
    name:"haha",
 }
 let {
  
  type,name} = node;
 console.log(type)//"node"
 console.log(name)//"haha"
 
 

注意：当解构赋值表达式的右侧(等号右边)的计算结果为null或者undefined时,会报出异常。因为任何读取nul或者undefined的斗湖导致运行时错误。
2:默认值

let {
  
  type,name,value} = node;
 console.log(type)     //"node"
 console.log(name)   //"haha"
console.log(value)    //undefined
let {
  
  type,name,value="vvvv"} = node;
console.log(value)    //"vvvv"
 
 

3:赋值给不同的本地变量名

let node = {
    type:"node",
    name:"haha",
 }
let {
  
  type:localtype,name:localname="wuyunqiang"} = node;
console.log(localtype);       //"node"
console.log(localname);     //"haha"
 
 

4:嵌套的推向解构

let node = {
     type:"id",
     name:"haha",
       loc:{
         start:{
            line:1,
            column:1
         },
         end:{
           line:1,
           column:4
         },
      }
}
let {loc:{start}} = node;
console.log(start.line)
console.log(start.column)
 
 

三：数组解构：

数组解构和对象解构比较相似，对象是根据key来检索取值，数组是根据位置来检索取值。
1:根据位置索引赋值

let colors = ["red","green","blue"];
let [ , second] = colors;
console.log(second)//"green"
 
 

2:用于值交换

ES6 之前
let a = 1 ;
let b = 2;
let 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

3:默认值嵌套索引类似于对象
4:剩余项

let colors = ["red","green","blue"];
let [first ,...rest] = colors;
console.log(first);             // "red"
console.log(rest.length)   // 2
console.log(rest[0])          //"green"
 
 

四：混合解构：

对象与数组解构能被用到一起。

let node = {
     type:"id",
     name:"haha",
       loc:{
         start:{
            line:1,
            column:1
         },
         end:{
           line:1,
           column:4
         },
      }
   range:[0,3]
}
let {loc :{start},range:[startindex]}=node;
console.log(start.line); // 1
console.log(startindex) // 0
 
 

混合使用对象与数组解构，node的任何部分都能提取出来。对于从JSON配置结构中抽取数据来说,这种方法尤为有用，因为他不需要探索整个结构。

五：参数解构：

参数结构提供了更清晰地标明函数期望输入的替代方案。它使用对象或数组的模式替代了具名参数。

function setCookie(name,value,{secure,path,domain,expires}){
   
   //设置cookie的代码}
setCookie("type","xxx",{secure:true,expires:20000})
 
 

注意：
1：结构的参数是必须的，否则会报错
2：参数结构也可以设置默认值

function setCookie(name,value,{
    secure=true,
    path="xxxx",
    domain="xxxx",
    expires=20000
}={}){
   
   //设置cookie的代码}
setCookie("type","xxx",{secure:true,expires:20000})