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)