ECMAScript6 -- 解构赋值

解构赋值

数组的解构赋值

let arr = [1, 2, 3]
console.log(...arr) // 1 2 3

let arr = [ 1, 2, 3, 4 ]

let x = arr[ 0 ]
let y = arr[ 1 ]
let m = arr[ 2 ]
let n = arr[ 3 ]

console.log( x, y, m, n ) // 1 2 3 4

let [ x, y, m, n ] = [ 1, 2, 3, 4 ]
console.log( x, y, m, n ) // 1 2 3 4

let [ x, y, m, n ] = [ 1, 2, 3 ]
console.log( x, y, m, n ) // 1 2 3 undefined

let [ x, y, m, n ] = [ 1, 2, 3, 4, 5 ]
console.log( x, y, m, n ) // 1 2 3 4

let [ x1, x2 = 20 ] = [ 1, 2 ]
console.log( x1, x2 ) // 1 2

let [ x1, x2 = 20 ] = [ 1, null ]
console.log( x1, x2 ) // 1 null

let [ x1, x2 = ( function () {
  console.log( '哈哈' );
  return 10
}() ) ] = [ 1, 2 ]
console.log( x1, x2 ) // 1 2

/**
 * 什么时候会设置默认值？
 * 仅当解构的值为 undefined 时
 */
let [ x1, x2 = 20 ] = [ 1 ]
console.log( x1, x2 ) // 1 20

// 省略赋值
let [ , , m2 ] = [ 1, 2, 3 ]
console.log( m2 ) // 3

// 不定参数赋值
let [ y1, y2, ...y3 ] = [ 1, 2, 3, 4, 5, 6 ]
console.log( y1, y2, y3 ) // 1 2 [ 3, 4, 5, 6 ]

对象的解构赋值

let { name, age } = { name: 'Alice', age: 17 }
console.log( name, age ) // 'Alice' 17

let { age } = { name: 'Tom', age: 22 }
console.log( age ) // 22

let { name, age = 100 } = { name: 'Belly', age: 23 }
console.log( name, age ) // 'Belly' 23

let { name, age = 100 } = { name: 'Garry' }
console.log( name, age ) // 'Garry' 100

let { name, age = 100 } = { name: 'Garry', age: undefined }
console.log( name, age ) // 'Garry' 100

let { name, age = 100, list:[ a1, a2, a3, a4 ] } = {
  name: 'Belly',
  age: undefined,
  list: [ 'JS', 'Node', 'Vue', 'React' ]
}
console.log( name, age, a1, a2, a3, a4 )
// 'Belly' 100 'JS' 'Node' 'Vue' 'React'

// 不定参数赋值
let { a, ...x } = { a: 1, b: 2, c: 3 }
console.log( a, x ) // 1 {b: 2, c: 3}

特殊：

let x1, x2
[ x1, x2 ] = [ 1, 2 ]
console.log( x1, x2 ) // 1 2

let x1, x2
/**
 * SyntaxError: Unexpected token =
 * 花括号在行首块级作用域
 */
{ x1, x2 } = { x1: 1, x2: 2 }
console.log( x1, x2 )

let x1, x2
( { x1, x2 } = { x1: 1, x2: 2 } )
console.log( x1, x2 ) // 1 2

数组的解构赋值

如果右边不是数组，默认转换为类数组

let [ x, y ] = '123'
console.log( x, y ) // '1' '2'

let [ x, y ] = 1
/**
 * TypeError: 1 is not iterable
 * 1 不可被枚举
 */
console.log( x, y )

对象的解构赋值

如果右边不是对象，默认转换为对象

let { a } = 1 // 1 --> Object(1)
/**
 * Number {1}
 * __proto__: Number
 * [[PrimitiveValue]]: 1
 *
 * 没有名为 a 的属性，因此值为
 * undefined
 */
console.log( a )

let { __proto__: a } = 1
/**
 * Number {0, constructor: ƒ, …}
 * constructor:ƒ Number()
 * ...
 * valueOf:ƒ valueOf()
 * __proto__:Object
 * [[PrimitiveValue]]:0
 */
 console.log( a ) // Number {0, constructor: ƒ, …}

let { b } = '1234'
/**
 * String {"1234"}
 * 没有名为 a 的属性，因此值为
 * undefined
 */
console.log( b ) // undefined

let { length: b } = 'abcde'
/**
 * String {"abcde"}
 * 0: "a"
 * ...
 * length: 5
 * __proto__: String
 * [[PrimitiveValue]]: "abcde"
 */
console.log( b ) // 5

let { '1': b } = 'abcde'
/**
 * String {"abcde"}
 * 1: "b"
 * ...
 * [[PrimitiveValue]]: "abcde"
 */
console.log( b ) // b

函数参数的解构赋值

数组

function fn( [ a, b, c, ...d ] ) {
  console.log( a, b, c, d ) // 1 2 3 [ 4, 5 ]
}

const arr = [ 1, 2, 3, 4, 5 ]

fn( arr )

对象

function fn( { name, age } ) {
  console.log( name, age ) // 'Tommy' 21
}

const Tommy = { name: 'Tommy', age: 21 }

fn( Tommy )

function fn( { name = 'Bill', age = 23 } ) {
  console.log( name, age ) // 'Jane' 23
}

const Jane = {
  name: 'Jane'
}

fn( Jane )

function fn( { name = 'Bill', age = 23 } ) {
  console.log( name, age ) // 报错
}

/**
 * TypeError: Cannot destructure property
 * `name` of 'undefined' or 'null'.
 */
fn()

function fnA( { name = 'Rose', age = 19 } = {} ) {
  console.log( name, age ) // 'Rose' 19
}

fnA()

function fnB( { name, age } = { name: 'Billy', age: 28 } ) {
  console.log( name, age ) // 'Billy' 28
}

fnB()

function fnA( { name = 'Rose', age = 19 } = {} ) {
  console.log( name, age ) // 'Rose' 19
}

fnA( {} )

function fnB( { name, age } = { name: 'Billy', age: 28 } ) {
  // { name, age } = {}
  console.log( name, age ) // undefined undefined
}

fnB( {} )

扩展运算符

对象

let obj = {a: 1, b: 2, c: 3}
console.log({...obj, d: 4, e: 5}) // {a: 1, b: 2, c: 3, d: 4, e: 5}

const state = { filter: 'completed', todos: ['Learn React'] }
const newState = { ...state, todos: [...state.todos, 'Learn Redux'] }
newState // {filter: "completed", todos: Array(2)}

参考资料：
http://www.zhufengpeixun.cn/