解构赋值

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。

数组的解构

变量声明并赋值的解构：

const [a, b, [c], d] = [1, 2, [3, 4]]
console.log(a, b, c, d) // 1, 2, 3, undefined

默认值：只有当变量严格等于undefined时，默认值才会生效。如果默认值是一个表达式，则默认值是惰性求值的，即只有用到的时候才会求值。默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

const [x, y = 2, z = 3] = [10, undefined, null]
console.log(x, y, z) // 10, 2, null 
const [e, f = e] = [1]
console.log(e, f) // 1, 1
const [m = n, n] = [, 2]
console.log(m, n) //ReferenceError
// const [m = n, n] = [2] //> m: 2

先声明后赋值

let name, age;
[name, age] = ['nina', 18]
console.log(name, age) // 'nina', 18
let h, l, k;
[h=1, l=k, k=h] = [2]
console.log(h, l, k)

对象的解构

对象的解构，变量必须与属性同名才能取到正确的值。

基本赋值

const {
    foo,
    bar: city,
    baz,
    weather = 'sunny',
    product: localProduct = 'the oriental pearl tower'
} = {
    foo: '123',
    bar: 'shanghai'
}
console.log(foo, city, baz, weather, localProduct) // 123, 'shanghai', undefined
// console.log(bar) // > ReferenceError

无声明赋值此时，解构赋值的语句需要用()括起来。否则{}会被Js引擎视为代码块，对其赋值时会发生语法错误。

let start, end;
// {start, end} = {start: 1, end: 10}
({
    start,
    end
} = {
    start: 1,
    end: 10
})

复合解构

let obj = {
    p: [
        'Hello',
        {
            y: 'World'
        }
    ]
};

let {
    p,
    p: [hello, {
        y: world
    }]
} = obj;
console.log(p, hello, world)

其他解构

若等号右边即不是数组也不是对象，则先将其转化为对象。

字符串转化为类数组对象

let stringObj = new String('hello')
const {
    toString: s
} = 'hello';
const [s1, s2, s3, s4] = 'hello';
// const [s1, s2, s3, s4] = stringObj;
console.log(stringObj.__proto__.toString === s, stringObj.length, stringObj[0]) // true, 5, 'h'

数值和布尔转化为对象

let numberObj = new Number(123)
const {valueOf: v} = 123
console.log(numberObj.__proto__.valueOf === v) // true
// const [n1] = 123 //typeError: 123 is not iterable

let booleanObj = new Boolean(true)
const {valueOf: bv, toString: bs} = 123
console.log(booleanObj.__proto__.valueOf === bv) //true

关注我的公众号，查看更多关于JS的基础知识

ES6+基础知识(一)--解构赋值

解构赋值

数组的解构

对象的解构

其他解构