ES6(2015)解构赋值Desctructuring

Posted 2021-09-23 优小U

文章目录

• 1. 数组解构赋值
• 2. 对象解构赋值
• 3. 字符串解构赋值

在 ES6 中新增了变量赋值的方式：解构赋值。允许按照一定模式，从数组和对象中提取值，对变量进行赋值。如果对这个概念不了解，我们可以快速展示一个小示例一睹风采：

let arr = [1, 2, 3]
let a = arr[0]
let b = arr[1]
let c = arr[2]

ES6 中就可以用解构赋值这样写：

let [a, b, c] = [1, 2, 3]

1. 数组解构赋值

• 赋值元素可以是任意可遍历的对象
  赋值的元素不仅是数组，它可以是任意可遍历的对象

let [a, b, c] = "abc" // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3])

• 左边的变量
  被赋值的变量还可以是对象的属性，不局限于单纯的变量。

let user = {}
[user.firstName, user.secondName] = 'Kobe Bryant'.split(' ')

console.log(user.firstName, user.secondName) // Kobe Bryant

• 循环体
  解构赋值在循环体中的应用，可以配合 entries 使用。

let user = {
  name: 'John',
  age: 30
}

// loop over keys-and-values
for (let [key, value] of Object.entries(user)) {
  console.log(`${key}:${value}`) // name:John, then age:30
}

let user = new Map()
user.set('name', 'John')
user.set('age', '30')

for (let [key, value] of user.entries()) {
  console.log(`${key}:${value}`) // name:John, then age:30
}

• 可以跳过赋值元素
  如果想忽略数组的某个元素对变量进行赋值，可以使用逗号来处理。

// second element is not needed
let [name, , title] = ['John', 'Jim', 'Sun', 'Moon']

console.log( title ) // Sun

• rest 参数

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]

console.log(name1) // Julius
console.log(name2) // Caesar

// Note that type of `rest` is Array.
console.log(rest[0]) // Consul
console.log(rest[1]) // of the Roman Republic
console.log(rest.length) // 2

• 默认值
  如果数组的内容少于变量的个数，并不会报错，没有分配到内容的变量会是 undefined。

let [firstName, surname] = []

console.log(firstName) // undefined
console.log(surname) // undefined

当然你也可以给变量赋予默认值，防止 undefined 的情况出现：

// default values
let [name = "Guest", surname = "Anonymous"] = ["Julius"]

console.log(name)    // Julius (from array)
console.log(surname) // Anonymous (default used)

2. 对象解构赋值

• 基本用法

let options = {
  title: "Menu",
  width: 100,
  height: 200
}

let {title, width, height} = options
// let {title: title, width: width, height: height} = options  上面是简写

console.log(title)  // Menu
console.log(width)  // 100
console.log(height) // 200

在这个结构赋值的过程中，左侧的“模板”结构要与右侧的 Object 一致，但是属性的顺序无需一致。

• 默认值

let options = {
  title: "Menu"
}

let {width = 100, height = 200, title} = options

console.log(title)  // Menu
console.log(width)  // 100
console.log(height) // 200

• rest 运算符

let options = {
  title: "Menu",
  height: 200,
  width: 100
}

let {title, ...rest} = options

// now title="Menu", rest={height: 200, width: 100}
console.log(rest.height)  // 200
console.log(rest.width)   // 100

3. 字符串解构赋值

字符串可以当做是数组的解构:

let str = 'hello'
let [a, b, c, d, e] = str
console.log(a, b, c, d, e)