ES6学习第二节：解构赋值

数组解构赋值

这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

// 数组的解构赋值
let [a, b, c] = [1, 2, 3]
console.log(a, b, c)

let [d, ...e] = [4, 5, 6]
console.log(d, e)

let [f, g] = new Set([7, 8])
console.log(f, g)

// 指定初始值，只有等式右边“===”ujdefined，指定的默认值才会生效
let [foo = 'ChangLau'] = [undefined]
console.log(foo)

对象解构赋值

数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

// 对象解构赋值
let { name, sex } = { name: 'ChangLau', sex: 'Man' }
// 等价于
// let { name: name, sex: sex } = { name: 'ChangLau', sex: 'Man' }
console.log(name, sex)

let { first: one } = { first: 'one' }
console.log(one)

// 对象嵌套解构赋值
const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
}

let {
  loc: loc,
  loc: {
    start: start,
    start: { line }
  }
} = node

console.log('loc =', loc, ' start =', start, ' line =', line)

// 对象解构赋值默认值,只有等式右边“===”ujdefined，指定的默认值才会生效
var { x: x = 3 } = {}
console.log(x)

字符串解构赋值

// 字符串解构赋值
const [paramA, paramB] = 'hello'
console.log(paramA, paramB)

// 类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
const { length: len } = 'hello'
console.log(len)

函数参数的解构赋值

// 函数参数的解构赋值
function add([x, y]) {
  return x + y
}
console.log(add([1, 2]))
;[[2, 2], [3, 6]].map(([a, b]) => {
  console.log(a + b)
})

// 函数参数默认值
function addDefault([x = 1, y = 2] = []) {
  console.log(x + y)
}
addDefault() // 3
addDefault([3, 4]) // 7

function multiply({ x = 1, y = 2 } = {}) {
  console.log(x * y)
}
multiply() // 2
multiply({ x: 3, y: 4 }) // 21

用途

• 变量交换

let exchangA = 1
let exchangB = 2
;[exchangA, exchangB] = [exchangB, exchangA]
console.log(exchangA, exchangB) // 2 1

• 从函数返回多个值

function fnA() {
  return [1, 2, 3]
}
let [a, b, c] = fnA()
console.log(a, b, c) // 1,2,3

function fnB() {
  return {
    foo: 'foo',
    bar: 'bar'
  }
}
let { foo, bar } = fnB()
console.log(foo, bar) // foo bar

• 函数参数定义

// 函数参数默认值
function addDefault([x = 1, y = 2] = []) {
  console.log(x + y)
}
addDefault() // 3
addDefault([3, 4]) // 7

function multiply({ x = 1, y = 2 } = {}) {
  console.log(x * y)
}
multiply() // 2
// 传入无序参数
multiply({ y: 4, x: 3 }) // 21

• JSON解析

var obj = {
  name: 'ChangLau',
  age: 24,
  sex: 'Man',
  school: 'NWSUAF'
}
let { name, age, sex, school } = obj
console.log(name, age, sex, school) // ChangLau 24 Man NWSUAF

• 函数参数默认值

// 函数参数默认值
function addDefault([x = 1, y = 2] = []) {
  console.log(x + y)
}
addDefault() // 3
addDefault([3, 4]) // 7

function multiply({ x = 1, y = 2 } = {}) {
  console.log(x * y)
}
multiply() // 2
// 传入无序参数
multiply({ y: 4, x: 3 }) // 21

• Map遍历

var map = new Map()
map.set('name', 'ChangLau')
map.set('age', 24)
for (let [key, value] of map) {
  console.log(key, value)
}
// name ChangLau
// age 24