ES6解构赋值详解:数组、对象、嵌套与默认值
作者:拾光时间:2026-10-25 23:02:58浏览:427
本文深入解析ES6中的解构赋值语法,涵盖数组与对象的结构化赋值、嵌套结构处理、默认值设定以及rest参数用法。通过具体代码示例,展示如何高效提取数据、交换变量及处理函数返回值,帮助开发者掌握现代JavaScript的核心特性。
解构赋值
利用解构赋值语法,可以便捷地从数组或对象中提取数据,并赋值给变量。
1.解构赋值
通过指定数组或对象中的特定位置,可以直接将对应值赋给一个或多个变量。
const arr = ['dasha', 'ersha', 'gangdan']
let [a, b, c] = arr //a='dasha' b='ersha' c='gangdan'
//假如需要交换ab的值 只需要
[a, b] = [b, a]
2.解构赋值嵌套
该方法同样适用于处理复杂的嵌套数组或对象结构。
const arr = [1, [2,3,4], 5]
let [a, [b,,d], c] = arr
console.log(a) // 1
console.log(b) // 2
console.log(d) // 4
3.解构赋值的默认值
可以为变量预设默认值;若从数组或对象中未找到匹配项,则使用默认值。
let [a=1] = [100] // a=100
let [b=1] = [] // b=1
4.解构赋值用在对象上时候,需要用键的方式
const obj = {
name:'shabi',
age:12,
}
let{age} = obj
// 为了防止age在上面被let定义过了,可以将age改名为ag
let{age:ag, err="定义err默认值即使对象中没有这个属性,也可以获取到这个默认值字符串"} = obj
console.log(err)// '定义err默认值即使对象中没有这个属性,也可以获取到这个默认值字符串'
5.解析一个从函数返回的数组
对函数返回值进行解构赋值,操作更加简洁高效。
function test(){
return [1,2,3]
}
let [x,y] = test()
console.log(x) //x = 1
console.log(y) //y = 2
6.rest写法:将剩下的所有值赋值给一个变量
此语法仅适用于数组或解构结构的末尾,若置于开头或中间将导致语法错误。
let [a,...rest] = [1, 2, 3];
console.log(a); // 1
console.log(rest); // [2, 3]本文介绍了ES6解构赋值在数组、对象、嵌套及默认值方面的应用。如需了解更多ES6相关内容,建议查阅本站其他文章或继续浏览后续章节,感谢支持。
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
