ES6中的解构赋值入门

数组的解构赋值：

• let [a,b,c]=[1,2,3]; ==>let a=1;let b=2;let c=3;

• let [head,...tail]=[1,2,3,4]; ==> head = 1 , tail = [2,3,4]

• let [x,y,...z]=['a']; ==> x = "a" y=undefined z=[]

• 分析：因为解构赋值是依次对应的，x对应"a"，y没有对应值，为undefined，...z表示剩余内容，剩余为空，因此为空数组[]

• let [a,[b],d]=[1,[2,3],4]; a==>1,b==>2,d==>4

• 分析：a和d不必哆嗦，[b]=[2,3],解构赋值,b=2；3没有对应值，忽略

• ...运算符两种用法：

• 展开运算符(用在array和object上)：let a = [1,2,3]; let b = [0,...a,4]; ==>[0,1,2,3,4]

• 剩余操作符(结构的一种，一般只针对array)，举例就是上面的。解构不成功，变量的值就是undefined。如果等号右边不是数组或不可遍历，会报错。比如：

• let [foo]=1; let [foo]=false; let [foo]=NaN; let [foo]=undefined; let [foo]=null; let [foo]={};这些等号右边的值都不可遍历，因此都会报错

• 解构允许赋默认值： let [x,y = 'b']=['a',undefined]; x==>'a',y==>'b'

• 如果数组成员不严格为undefined，默认值不会生效：let [x,y = 'b']=['a',null]; x==>'a',y==>null

对象的解构赋值：

• 对象的解构赋值是按名称对应来的，名称不对应值就为undefined。而数组是按次序排列的

• let [bar,foo]={foo:"aaa",bar:"bbb"}; ==>foo:aaa,bar:bbb

• 对象的解构赋值是下面形式的简写：let {foo:foo,bar:bar}={foo:'aaa',bar:'bbb'}

• var {foo:baz}={foo:'aaa',bar:'bbb'}; ==>baz:aaa

• foo称为模式，baz称为变量

• let {foo:baz}={foo:'aaa',bar:'bbb'}; ==>baz:aaa,foo:foo is not defined

• 对象的解构也可以赋默认值:var {x:y=3}={x:5}; ==> y:5

• 默认值生效的条件也是对象的属性值严格等于undefined

• 已经声明的变量不能用于解构赋值:let x; {x}={x:1}; ==>报错。因为这里JavaScript引擎会将{x}解析为代码块，通过({x}={x:1}); 则能正确解析

• 解构赋值左边可以不放任何东西

• 字符串也可以解构赋值，类似数组的对象都有length属性，也可以对其解构赋值：let {length:len}='hello'; ==> len:5

• 解构赋值时，如果等号右边是数值和布尔值，则会先转为对象

• let {prop:x}=undefined; ==>TypeError undefined和Null不能转化为对象

• let {prop:x}=null; ==>TypeError

• 注意：模式不能使用圆括号

解构赋值的用途

• 交换变量的值:let x=1; let y=2; [x,y]=[y,x];

• 从函数返回多个值:

    function example(){

      return [1,2,3];

    }

    let [a,b,c]=example(); //返回数组

    function example(){

      return {foo:1,bar:2};

    }

    let {foo,bar}=example();  //返回对象

• 函数参数的定义：

functoin f([x,y,z]){

...

}

f([1,2,3]); //有次序的参数

function f({x,y,z}){

...

}

f({z:3,y:2,x:1});  //无次序的参数

• 提取json数据：

  let jsonData={

id:42,

  status:"ok",

  data:[132,456]

  };

  let {id,status,data}=jsonData;

• 函数参数的默认值：

jQuery.ajax=function(url,{

async=true,

beforeSend=function(){},

cache=true}){...}

- 遍历Map结构：

var map=new Map();

map.set('first','hello');

map.set('second','world');

for (let [key,value] of map){

console.log(key,value)

}

for (let [key] of map){

console.log(key)

}

for (let [,value] of map){

console.log(key)

}

• 输入模块的指定方法：

const { SourceMapConsumer, SourceNode } = require("source-map");

最后注意一点:解构赋值的参数必须在最右边

例如:

const [a,...b]=[1,2,3,4]能正确解构，而const [...a,b]=[1,2,3,4]会报错，如果是三个参数,const [a,...b,...c]=[1,2,3,4]也是错误的