1.数组的解构赋值

1.1 基本用法

解构赋值：在ES6中，按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构赋值。
本质：这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

let [foo,[bar],baz]=[1,[2],3]

foo //

bar //

baz //

如果j解构不成功，变量的值就为undefined

let [x,y,...z]=['a']

x // 'a'

y // undefined

z // []

1.2 默认值

解构赋值允许指定默认值

let [foo=true]=[];

foo // true

ES6内部使用严格相等于运算符（===）来判断一个位置是否有值，如果数组的成员不严格等于undefined，默认值就不会生效。即，一个位置的值不是undefined，那么即使设置了默认值，也不会有效。

let [x=1]=[undefined]

x //

let [x=1] =[null]

x // null

2.对象的解构赋值

let {foo,bar}={foo:'abc',bar:'xyz'}

foo // 'abc'

bar // 'xyz'

2.1 当变量名和属性名相同时

let {foo,bar}={foo:'abc',bar:'xyz'}

foo // 'abc'

bar // 'xyz'

上述代码的实质应该是：

let {foo:foo,bar:bar}={foo:'abc',bar:'xyz'}

// 当变量名和属性名一样时，可以简写 {foo,bar}来代替{foo:foo,bar:bar}

对象解构赋值的内部机制：是先找到同名属性，然后再赋值给对应的变量。真正赋值的是后者，而不是前者

2.2 当变量名与属性名不同时：

let {foo:hello,bar:world}={foo:'abc',bar:'xyz'}

hello // 'abc'

world // 'xyz'

foo // error: foo is not defined

foo是匹配的模式，hello才是整正的变量

数组解构赋值与对象结构赋值的差异：

数组的元素是按次序排列的，变量的取值由位置决定；而对象没有次序，变量名必须与属性名相同，才能取到正确的值。

3.字符串的解构赋值

字符串结构赋值的时候，字符串被转换成了一个类似数组的对象

const [a,b,c,d,e]='hello'

a // 'h'

b // 'e'

c // 'l'

d // 'l'

e // 'o'



//这种类数组的对象，有length属性，因此也可以对length属性进行解构赋值

let {length:len}='hello'

len //

4.数值和布尔值的解构赋值

数值和布尔值进行解构赋值的时候，会先转换为对象

let {toString:s} = 123

s // Number.prototype.toString

let {toString:s} = true

s // Boolean.prototype.toString

//数值对象和布尔值的包装对象都有toString属性，因为变量s可以取到值

解构赋值的规则：只要等号右边的值不是数组或者对象，就先将其转化为对象，由于null和undefined无法转化为对象，所以对他们解构赋值会报错

let {proxy:x}=undefined;

x // TypeError

let {proxy:y} = null;

y // TypeError

5.函数参数的解构赋值

function add ([x,y]){

    return x+y;

}

add([1,2])  //

6.用途

6.1 交换变量的值

没有解构赋值的情况下，交换两个变量需要一个临时变量

let x=1;

let y=2;

[x,y] = [y,x]

x //

y //

6.2 从函数中返回多个值

从一个函数返回一个数组是十分常见的情况
但是函数只能返回一个值，如果需要返回多个值，只能将他放在数组或者对象里返回，有了结构赋值，取出这些值就非常方便

// 返回数组

function example(){

    return [1,2,3]

}

let [a,b,c]=example()

a //

b //

c //

// 返回对象

function example(){

    return {

    foo:1,

    bar:2

    }

}

let [foo,bar]=example()

foo //

bar //

6.3 函数参数的定义

解构赋值，可以很方便的将一组参数与变量名对应起来

6.4 提取JSON数据

解构赋值在提取JSON数据尤为有用

let jsonData = {

    id:42,

   status:"OK",

   data:[23,45]

}

let {id,status,data}=jsonData

console.log(id,status,data)

// 42,"OK",[23,45]

6.5 定义函数参数的默认值

避免在函数体内部再写 var foo = config.foo || "default foo"这样的语句

   jQuery.ajax= function(url,{

      asyc=true,

      beforeSend=function(){},

      cache=true,

      complete=function(){},

      crossDomain=false,

      global = true,

      //  .... more config

    }){

      // ... do stuff

    }

6.6 遍历Map结构

任何部署了Iterator接口的对象都可以使用for...of循环遍历
Map结构原生支持Iterator接口，配合变量的解构赋值，获取键名和键值都非常方便

    var map = new Map()

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

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

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

      console.log(key + "is" +value)

    }

    // first is hello

    // second is world

    // 只想获取键名

     for (const [key] of map) {

      //

    }

     // 只想获取键值

     for (const [,value] of map) {

      //

    }

6.7 引入模块中的某些方法

cosnt {sourceMapConsumer,SourceNode} = require('source-map')

注：该笔记仅为学习参考地址：阮一峰《ES6标准入门》(http://es6.ruanyifeng.com/#docs/destructuring)

巴特西

ES6---变量解构赋值