ECMAScript新特性 - 数组、对象解构

数组的解构

const arr = [100, 200, 300]

// 正常写法 
const foo = arr[0]
const bar = arr[1]
const bar2 = arr[2]
console.log(foo, bar, bar2)

// 解构
const [foo, bar, bar2] = arr
console.log(foo, bar, bar2)  // 100 200 300

const [, , bar2] = arr
console.log(bar2) // 300

/*
    结构成员的个数小于被解构的数组长度
    会按照从前到后的顺序去提取 多出来的成员不会被提取
*/
const [ foo ] = arr
console.log(foo) // 100

/*
    结构成员的个数大于被结构的数组的长度
    多出来提取到的则是 undefined
*/
const [ foo, bar, bar1, more ] = arr
console.log(more) // undefined

/*
    给提取的成员设置默认值
    在提取的变量名后面加上 = 
*/
const [foo, bar, bar1, more = 'defalut value'] = arr
console.log(more) // defalut value

数组的剩余法表示

const arr = [100, 200, 300]
/*
    使用...剩余法表示
    表示当前位置开始往后的所有成员
    最终所有的结果会放到一个数组中
    注意...剩余的写法只能写在最后
*/
const [foo, ...rest] = arr
console.log(rest) // [200, 300]

数组解构的小栗子

const path = '/foo/bar/baz'

// 传统的做法
// const temp = path.split('/')
// const rootdir = temp[1]

const [,rootdir]  = path.split('/')
console.log(rootdir)


// 解构赋值
let a, b, rest;
[a, b] = [1, 2]
console.log(a, b) // 1 2

[a, b, ...rest] = [1, 2, 3, 4, 5]
console.log(a, b, rest) // 1 2 [3, 4, 5]

对象的结构

const obj = { name: 'zsl', age: 25 }
const { name } = obj
console.log(name)  // zsl

const name = 'tom'
// 重命名
const { name: objName } = obj
console.log(objName) // tom

// 默认赋值
const { hobby = '学习' } = obj
console.log(hobby) // 学习



/* Object解构   这里的小括号不能掉 */
({a, b} = {a: 1, b: 2})
console.log(a, b) // 1 2

({a, b, ...rest} = {a: 1, b: 2, c: 3, d: 4})

console.log(a, b, rest) // 1 2 { c: 3, d: 4 }

对象的剩余表示法和数组的一样

const person = { name: 'zsl', age: 18, sex: '1', height: 160}
const { name, age, ...rest} = person
console.log(name, age, rest) // zsl 18 { sex: '1', height: 160 }