ES6语法三之解构化赋值

携手创作，共同成长！这是我参与「日新计划 8 月更文挑战」的第26天，点击查看活动详情

大家好！我是前端爬楼工程师，一个野生程序员。好奇新技术，仰慕牛大佬。如果喜欢我的文章，可以关注➕点赞，为我注入能量，与我一同成长吧～

ES6引入了一个新的语法特性：解构。

看个例子，手动赋值

function foo(){
    return [1,2,3]
}
var tmp = foo(),
a = tmp[0],b = tmp[1],c=tmp[2]
console.log(a,b,c) // 1 2 3

类似地对象赋值这么做

function bar(){
    return {
        x:4,
        y:5,
        z:6
    }
}
var tmp = bar(), x = tmp.x, y = tmp.y, z = tmp.z
console.log(x,y,z) // 4 5 6

有了用于数组解构和对象解构就很方便了

var [a, b, c] = foo()
var {x:x, y:y, z:z} = bar()
console.log(a,b,c) // 1 2 3
console.log(x,y,z) // 4 5 6

对象属性赋值模式

var {x, y, z} = bar() // 更简短

我们这个省略是省略掉了:x还是x:呢？ 其实是省略掉了x:, 从我们把属性赋值给非同名变量可以看出：

var {x:bam, y:baz, z:bap} = bar()
console.log(bam, baz,bap) // 4 5 6
console.log(x,y,z) // ReferenceError

关于对象解构还有个细节，指定对象字面值的模式：

var X = 10, Y = 20
var o = {a: X, b:Y}
console.log(o.a,o.b) // 10 20

在{a:X, b:Y}中，我们知道a是对象属性，而X是要赋给它的值。这个语法模式是target:source,或者也是property-alias:value。和赋值模式一样都是target = source。

但是在使用对象解构赋值的时候，把看起来对象字面知道语法放在=运算符的左侧（反转了target = source模式）

var {x:bam, y:baz, z:bap} = bar()

这里的语法模式是source:target(value:variable-alias)。x:bam表示x属性是源值，而bam是要赋值的目标变量。

对象字面值是target<---source,而对象解构赋值是source--->target

var aa = 10, bb = 20
var o = {x:aa, y:bb}
var     {x:AA, y:BB} = o

这样看起来会更清晰。
重复赋值

var {a: X, a:Y} = {a:1}
X; // 1
Y; // 1

部分赋值

var [, b] = foo()
var {x, z} = bar()

rest/spread 赋值

var a = [2,3,4]
var [b , ...c] = a
b // 2
c // [3,4]

b得到第一个值，c收集了剩余的值组成一个数组

默认值赋值

var [a = 3] = []
a // 3

嵌套解构

var app = {
    model: {
        User: function(){}
    }
}
var {model: {User}} = app

解构参数

function foo([x, y]) {
    console.log(x, y)
}
foo([1,2]) // 1 2 
foo([1]) //1 undefined
foo([]) // undefined undefined

简洁属性和简洁方法

// 属性
var x = 2, y= 3
o = {
    x:x
    y:y
}
o = {
    x,
    y
}
// 方法
o = {
    x: function (){}
    y: function (){}
}
o = {
    x(){},
    y(){}
    *foo(){}
}