"Code tailor",为前端开发者提供技术相关资讯以及系列基础文章,微信关注“小和山的菜鸟们”公众号,及时获取最新文章。
在开始学习之前,我们想要告诉您的是,本文章是对阮一峰《ECMAScript6 入门》一书中 "变量的解构赋值" 章节的总结,如果您已掌握下面知识事项,则可跳过此环节直接进入题目练习
如果您对某些部分有些遗忘,???? 已经为您准备好了!
解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性(值)从对象(数组)中取出,赋值给其他变量。
// ES5,为变量赋值,只能直接指定值
let a = 1
let b = 2
let c = 3
//ES6,允许这样
let [a, b, c] = [1, 2, 3] //表示可以从数组中提取值,按照对应位置,对变量赋值。
本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
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。
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
的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x
和y
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: {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}
先来看一下效果,这在CSS3之前,完全是不可想象的,只有图片才能做的到,但在HTM...
问题描述 在工作中想要实现如下效果: 解决思路 在 div 标签中添加一个 relative...
变量当用户在卡片组的卡片之间切换时,我们需要在变量中存储数据。WML 变量对大...
经过我多方查询与观察,我的web serve之所以 出现这样的问题 是因为.net framewo...
方正字库是方正字库业务团队开发的字体,包括民族文字体70多款,有4款包含7万多...
Dreamweaver制作网页的时候,一般有提交数据的表单制作,有时需要在表单中添加跳...
dreamweaver代码很多,想让代码对齐,方便查看,也减少出错率,该怎么对齐代码呢...
1.环境 VS 2019 16.9.0 Preview 1.0 .NET SDK 5.0.100 2.前言 CSS一旦生效,就会...
Dreamweaver CS3设计网页的时候, 我们经常能泳道表格,它以简洁明了和高效快捷...
【内容】: 1.利用background-image 渐变样式 2.可以利用scale缩放 3.给伪元素设...