/**
* @func 字符串也可以解构赋值
* @desc 结构后时一个类数组格式,需要用数组解构规则
*/
let str = 'abc'
const [x, y, z] = str
console.log(x, y, z)
/**
* @func 数组的解构赋值,顺序解构
* @desc 数组变量的取值由他的位置、顺序决定
* @desc 模式相同,变量名任意取
*/
let sourceArr = [[12, 30], [49, 91], 7]
const [[a0, b0], [c0, d0], e0] = sourceArr
console.log(a0, c0)
/**
* @func 数组解构的特殊用法
* @desc 由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构
*/
let arr1 = [1, 2, 3, 4, 5, 6];
let {0 : first, [arr.length - 1] : last} = arr1;
first // 1
last // 6
/**
* @func 对象的解构赋值,模式匹配
* @desc 对象属性没有次序,变量必须与属性同名,才能取到正确的值,这个叫模式匹配
* @desc 格式:{模式名:变量名},如果变量名和模式名相同,则可省略变量名。
* @desc 注意:模式名并不会被赋值,只有变量才会被赋值,当省略变量名时,本质上也是有JS引擎给变量赋值而非模式。
* @desc 结构赋值可以指定默认值,在变量后面添加等号即可。{ a = 1 } = obj
*/
let obj1 = { foo: 1, bar: 2 }
const { foo, bar } = obj1
console.log(foo) // 1
let obj2 = { noobivariable: 110, bar2: 21 }
const { noobivariable: noob, bar2 } = obj2
console.log(noob) // 110
// console.log(noobivariable) // 报错
/**
* @func 完整的对象解构赋值
* @desc 也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
*/
let { fob: fob, bap: bap } = { fob: 'aaa', bap: 'bbb' };
console.log(fob, bap)
/**
* @func 对象的深层解构
* @desc 深层解构的模式名必须标注,因为JS引擎需要顺着模式名去原对象查找值,同样,模式名不会被赋值如需赋值,可将某一项当做一个整体,进行单独解构,如out1。
*/
let sourceObj = {
out1: {
a2: 13,
b2: 22
},
out2: {
h2: 20,
g2: 18
},
out3: 73
}
const { out1, out1: {a2, b2}, out2: {h2, g2}, out3 } = sourceObj
console.log(out1, a2)
// 三层的同理
let sourceObj2 = {
outer1: {
cet1: {
innerA1: 130,
innerB1: 210
},
cet2: {
innerA2: 135,
innerB2: 215
}
}
}
const { outer1, outer1: { cet1, cet1: {innerA1}} } = sourceObj2
console.log(outer1, cet1, innerA1)
// 给对象解构赋值增加默认值
let smObj = { s1: 1, s2: 2 }
const { s1, s2, s3 = 10 } = smObj
console.log(s1, s2, s3) // 1 2 10
ES6-解构赋值 全解
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...