ES6小实验-变量的解构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构( Destructuring )。首先来看看数组的解构赋值:

var a = 1;
var b = 2;
var c = 3;

ES6允许写成:

var [a, b, c] = [1, 2, 3];

似乎很简单,还有些复杂的嵌套数组解构的,一看就能明白。如果右边和左边不是一对一完全匹配,那么右边多的舍去,缺的给左边赋undefined,解构依然成功,例如:

let [x, y, ...z] = ['a']
console.log(x,y,z)//a undefined []

解构赋值允许指定默认值,即如果没有给变量赋值,变量就是它的默认值,如果赋值了变量就是赋的值:

let [foo=true] = []
let [bar = false] = [true]
console.log(foo,bar)//true true

再来看看对象的解构,两者类似:

var { foo, bar } = { foo: "aaa", bar: "bbb" }
console.log(foo,bar)//aaa bbb

重点看看它的用途:书里面介绍了七个用途:

1.交换变量的值,举例:

var x = 3,
      y = 4
function f() {
    [x, y] = [y, x]
    console.log(x,y)
}
f()//4,3

  写法不仅简洁,而且易读,语义非常清晰

2.从函数返回多个值,举例:

function example() {
    return {
        foo: 1,
        bar: 2
    }
}
var { foo, bar } = example();
console.log(foo,bar)// 1,2

函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。

3.函数参数的定义,举例:

function example({x,y,z}) {
    console.log(x,y,z)//1,2,3
}
example({
    y:2,x:1,z:3
})    

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

4.提取JSON数据,举例:

var jsonData = {
    id: 42,
    status: "OK",
    data: [1,2]
}
let{id, status, data} = jsonData
console.log(id, status, data)    //42,"OK",[1,2]

5.函数参数的默认值(待定未完)

6.遍历Map结构,举例:

var map = new Map()
map.set('first','hello')
map.set('second','world')
for(let [key,value] of map) {
    console.log(key + " is " + value)//first is hello second is world
}

7.输入模块的指定方法(未完待定)

 

posted on 2017-04-02 19:27  且歌且行吧  阅读(173)  评论(0编辑  收藏  举报

导航