ES6---变量解构赋值

1.数组的解构赋值

  1.1 基本用法

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

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

如果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 // 1

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 // 5

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])  // 3

6.用途

 6.1 交换变量的值

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

let x=1;
let y=2;
[x,y] = [y,x]
x // 2
y // 1

 6.2 从函数中返回多个值

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

// 返回数组
function example(){
    return [1,2,3]
}

let [a,b,c]=example()
a // 1
b // 2
c // 3

// 返回对象
function example(){
    return {
    foo:1,
    bar:2
    }
}

let [foo,bar]=example()
foo // 1
bar // 2

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)