ES6之解构赋值

数组解构

什么是解构?
按照一定的模式,从数组或对象中提取值,给变量进行赋值,这被称为解构。
其实我理解的本质是“模式匹配”,只要等号两边的模式相同,左边的变量就会进行赋值。

let [a,b,c,d]=[1,2,3,4]
//本质==》模式匹配
let {0:a,1:b,2:c,3:d}=[1,2,3,4]
//其中模式匹配指的是键的匹配,其中的键匹配就是模式匹配,变量再进行赋值

如果解构不成功,变量值就是undefined(变量没有找到对应的值,也是undefined)

let [a,b,c,d]=[1,2,3]
a//1
b//2
c//3
d//undefined
let [a]=[]
a//undefined

还有一种情况就是不完全结构,就是变量的数量小于值的数量

let [a,b]=[1,2,3,4]
a//1
b//2

如果右边不是数组类型,就报错

let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

默认值
默认值只有数组成员严格等于(===)undefined时,默认值才会生效

let [a,b,c=0]=[1,2]
a//1
b//2
c//0,此时数组中时undefined,默认值生效
let [a,b,c=0]=[1,2,null]
a//1
b//2
c//null,只有全等于undefined时默认值才会生效

对象解构

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

let {fun:foo,adc:bar}={fun:"sum",adc:"num"}
foo//sum
bar//num
其中fun,adc是匹配的模式,foo,bar是变量,是真正被赋值的
和数组赋值一样,匹配的模式不在数组中存在的话,那获得的值就是undefined
let {foo:foo,adc:bar}={fun:"sum",adc:"num"}
foo//undifined
adc//num

默认值

对象的解构也可以指定默认值。

var {x = 3} = {};
//	默认值生效的条件是,对象的属性值严格等于undefined。

具体的细节注意事项,更详细的看

ES6

### ES6 对象解构赋值 #### 基本语法 对象解构赋值允许提取对象中的属性并将其分配给变量。基本形式如下: ```javascript let obj = { prop1: "value1", prop2: 42 }; let { prop1, prop2 } = obj; console.log(prop1); // 输出:"value1" console.log(prop2); // 输出:42 ``` 此操作会创建两个新变量 `prop1` 和 `prop2`, 它们的初始值分别对应于对象 `obj` 中相应键对应的值[^1]。 #### 设置默认值 当尝试从不存在或未定义的对象属性获取值时,可以通过指定默认值来处理这种情况: ```javascript let userSettings = { theme: 'dark', }; // 使用默认参数 let { theme = 'light', fontSize = 16 } = userSettings; console.log(theme); // dark (来自实际数据) console.log(fontSize); // 16 (使用了默认设置) ``` 这里展示了如何为可能缺失的配置项提供合理的回退选项[^2]. #### 属性重命名 有时希望使用的局部变量名称不同于原始对象内的键名,在这种情况下可以采用别名机制完成映射关系建立: ```javascript const person = { firstName: 'John', lastName: 'Doe' }; let { firstName: name, lastName: surname } = person; console.log(name); // John console.log(surname); // Doe ``` 上述代码片段说明了即使原对象字段名为 `firstName` 和 `lastName`, 可以通过冒号后的部分自定义新的绑定目标名字[^3]. #### 处理剩余属性 对于那些不参与直接匹配却仍然存在于源对象里的其他成员,则可通过扩展运算符(`...`)捕获它们形成一个新的独立实体: ```javascript var sourceObj = { id: 7, title: "A Tale of Two Cities", author: "Charles Dickens", yearPublished: 1859 }; let {id, ...bookInfo} = sourceObj; console.log(id); // 7 console.log(bookInfo.title);// A Tale of Two Cities console.log(bookInfo.author); // Charles Dickens console.log(bookInfo.yearPublished); // 1859 ``` 这段例子表明除了显式声明过的 `id` 字段外,其余所有条目都被收集到了 `bookInfo` 这个新对象里去了.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值