【深入理解ES6】解构

为何使用解构功能

使数据访问更便捷

// ES5 及以前
let options = {
  repeat: true,
  save: false
}

let repeat = options.repeat,
  save = options.save;

// -------------------------------------
// ES6 解构
let { repeat, save } = options

---

对象解构

let node = {
  type: 'Identifier',
  name: 'foo'
}

let { type, name } = node
console.log(type)
console.log(name)

解构赋值

JS引擎对于花括号会视为一个代码块

代码块不允许放在赋值语句的左侧

需要添加小括号，将块级语句转化为表达式

let node = {
  type: 'Identifier',
  age: 'foo',
},
  type = 'LIteral',
  age = 5;

({ type, age } = node) // 重点

console.log(type)
console.log(age)

JS表达式的值是右侧的值

因此传入函数内部的是右侧对象（即  obj  对象）

且  type  和  name  变量被重新赋值

let onj= {
  type: 'Identifier',
  name: 'foo'
},
  type = "Literal",
  name = 5;

function outputInfo(value) {
  console.log(value) // { type: 'Identifier', name: 'foo' }
  console.log(value === node) // true
}

outputInfo({ type, name, test = 123 } = obj);

console.log(type)
console.log(name)

嵌套对象解构

let node = {
  type: 'Identifier',
  name: 'foo',
  loc: {
    start: {
      line: 1,
      colum: 1,
    },
    end: {
      line: 2,
      colum: 4
    }
  }
}

let { loc: { start } } = node             // start 为再次解构
let { loc: { start: localStart } } = node // localStart 为重命名

console.log(start)

---

数组解构

let colors = ['red', 'yellow', 'green']
let [firstcolor, secondColor] = colors

console.log(firstcolor)
console.log(secondColor)

// 可以忽略元素
let [, , third] = colors
console.log(third)

可以直接用于赋值语句

let colors = ['red', 'yellow', 'green'],
  firstcolor = 'black',
  secondColor = 'white';

[firstcolor, secondColor] = colors

console.log(firstcolor)
console.log(secondColor)

值交换

// ES5 及以前（中间量）
let a = 1,
  b = 2,
  tmp;

tmp = a;
a = b;
b = tmp;

console.log(a, b)

// ES6
[b, a] = [a, b]

默认值设置

let [firstColor = "white"] = colors

嵌套数组

let color_2 = ["red", ["green", "white"]]

let [firstC, [InColor]] = color_2

不定元素

let colors = ['red', 'yellow', 'green']

let [firstColor, ...restColor] = colors

console.log(restColor) // ['yellow', 'green']

数组复制

ES 设计之初其实遗漏了【数组复制】功能

ES5 新增的  concat()  可以实现，但是其目的是连接两个数组并返回新数组

// ES5
let colors = ['red', 'yellow', 'green']

let newColors = colors.concat()

// ES6

let [...newColorArr] = colors

---

混合解构

let node = {
  type: 'Identifier',
  name: 'foo',
  loc: {
    start: {
      line: 1,
      column: 1
    },
    end: {
      line: 1,
      column: 4
    }
  },
  range: [1, 0, 3]
}

let {
  loc: { start },
  range: [startIndex]
} = node

console.log(start)
console.log(startIndex)

---

参数解构

// 解构参数
function setCookie(name, value, options) {
  options = options || {}

  let secure = options.secure,
    path = options.path,
    domain = options.domain,
    expires = options.expires

  // 设置 cookies
}

setCookie("type", 'js', {
  secure: true,
  expires: 6000
})

function setCookie(name, value, { secure, path, domain, expires }) {
  options = options || {}

  // 设置 cookies
}

• 将 默认值 单独提取为对象
• 通过【解构】赋给函数的参数

const setCookieDefault = {
  secure: false,
  path: '/',
  domain: "example.com",
  expires: new Date(Date.now() + 3600_000_000)
}

function setCookie(name, value, {
  secure = setCookieDefault.secure,
  path = setCookieDefault.path,
  domain = setCookieDefault.domain,
  expires = setCookieDefault.expires,
} = setCookieDefault) {
  console.log(secure, path, domain, expires0)
}