ES 6 系列二:变量的解构赋值

1,019

"Code tailor",为前端开发者提供技术相关资讯以及系列基础文章,微信关注“小和山的菜鸟们”公众号,及时获取最新文章。

前言

在开始学习之前,我们想要告诉您的是,本文章是对阮一峰《ECMAScript6 入门》一书中 "变量的解构赋值" 章节的总结,如果您已掌握下面知识事项,则可跳过此环节直接进入题目练习

  • 什么是解构赋值?
  • 数组、对象、字符串的解构赋值
  • 数值、布尔值、函数参数的解构赋值

如果您对某些部分有些遗忘,👇🏻 已经为您准备好了!

学习链接

变量的解构赋值的学习

汇总总结

解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性(值)从对象(数组)中取出,赋值给其他变量。

数组的解构赋值

  • 基本用法
// ES5,为变量赋值,只能直接指定值
let a = 1
let b = 2
let c = 3

//ES6,允许这样
let [a, b, c] = [1, 2, 3] //表示可以从数组中提取值,按照对应位置,对变量赋值。

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

  • 若解构不成功,变量的值就等于 undefined
let [foo] = []
let [bar, foo] = [1]
  • 不完全解构(等号左边的模式,只匹配一部分的等号右边的数组)
let [x, y] = [1, 2, 3]
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4]
a // 1
b // 2
d // 4
  • 如果等号的右边不是数组(或严格地说,不是可遍历的结构),那么将会报错。
// 报错
let [foo] = 1
let [foo] = false
let [foo] = NaN
let [foo] = undefined
let [foo] = null
let [foo] = {}

事实上,只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值。

对象的解构赋值

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

  • 基本用法
let { bar, foo } = { foo: 'aaa', bar: 'bbb' }
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' }
baz // undefined

等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于 undefined。

  • 如果解构失败,变量的值等于 undefined。
let { foo } = { bar: 'baz' }
foo // undefined
  • 与数组一样,解构也可以用于嵌套解构的对象
let obj = {
  p: ['Hello', { y: 'World' }],
}

let {
  p: [x, { y }],
} = obj
x // "Hello"
y // "World"

字符串的解构赋值

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello'
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

类似数组的对象都有一个 length 属性,因此还可以对这个属性解构赋值。

let { length: len } = 'hello'
len // 5

数值和布尔值的解构赋值

解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。

let { toString: s } = 123
s === Number.prototype.toString // true

let { toString: s } = true
s === Boolean.prototype.toString // true

函数参数的解构赋值

  • 函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量xy
function add([x, y]) {
  return x + y
}

add([1, 2]) // 3
  • 也可以使用默认值
function move({ x = 0, y = 0 } = {}) {
  return [x, y]
}

move({ x: 3, y: 8 }) // [3, 8]
move({ x: 3 }) // [3, 0]
move({}) // [0, 0]
move() // [0, 0]

题目自测

一:以下代码输出结果为()

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

Answer: {e: 5}

对象通过解构赋值展开,这里用到了对象解构赋值的多层嵌套 所以 c 对应的解构是 obj 对象中的 {d: {e: 5}} ,而 c 对象中包含的 d 对应的解构就应该是 obj 中 c 里面的 d,所以是{e: 5}.


二:以下程序解构赋值后各个变量的值为 ( )

const [a, b, c, d, e] = [1, 2, 'a', 'c']
Answer
console.log(a) //1
console.log(b) //2
console.log(c) //'a'
console.log(d) //'c'
console.log(e) //undefined

解析 根据数组的解构原则,左右一一对应,当左边个数大于右侧时,赋值 undefined


三:以下代码的输出结果为()

function drawES2015Chart({ size = 'big', cords = { x: 0, y: 0 }, radius = 25 } = {}) {
  console.log(size, cords, radius)
}

drawES2015Chart()
drawES2015Chart({ size: 'small', cords: { a: 1 }, radius: { b: 1 } })
Answer
'big',{x:0, y:0},25

‘small', {a: 1}, {b:1}

drawES2015Chart() : drawES2015Chart() 中没有传入参数,所以使用的是函数中的默认值 size的默认值是 'big' ,cords的默认值是{x:0, y:0},radius 的默认值是 25 drawES2015Chart({size: 'small', cords: {a: 1}, radius: {b: 1}}): drawES2015Chart({size: 'small', cords: {a: 1}, radius: {b: 1}}) 中传入了值,所以不使用默认值,size 的值被 'small' 替代,cords 的值变成 {a: 1} ,radius 的值变成 {b: 1}

ES 6 系列的变量的解构赋值,我们到这里结束啦,谢谢各位对作者的支持!你们的关注和点赞,将会是我们前进的最强动力!谢谢大家!