js 对象的解构赋值

2023.1.29今天我学习了对象的解构赋值。

解构不仅可以用于数组，还可以用于对象。

let {foo,bar} = {foo : "aaa",bar : "bbb"};
foo // "aaa"
bar // "bbb"

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

如：

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

（1）等号左边的两个变量的次序与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。

（2）如果变量没有对应的同名属性，导致取不到值，最后等于undefined。

如果变量名与属性名不一致，必须写成下面这样：

var {foo : baz} = {foo : 'aaa',bar : 'bbb'};
baz // "aaa"let obj = {first : 'hello',last : 'world'};
let {first : f,last : l} = obj;
f // 'hello'
l // 'world'let {foo : foo,bar : bar} = {foo : "aaa",bar : "bbb"};
baz // "aaa"
foo // error: foo is no defined

对象的解构赋值的内部机制是先找到同名属性，然后再赋值给对应的变量。真正被赋值的是后者，而不是前者。

foo是匹配的模式，baz才是变量，真正被赋值的是变量baz，而不是模式foo。

嵌套结构：

let obj = {p:{'Hello',{y : 'World'}}
};let {p:{x,{y}}} = obj;x // 'Hello'
y // 'World'

注意：这时候的p是模式，不会被赋值，如果p也要作为变量赋值，可以写成下面这样。

let obj = {p:{'Hello',{y : 'World'}}
};let {p,p:{x,{y}}} = obj;x // 'Hello'
y // 'World'
p // {"Hello",{y:"World"}}

js 对象的解构赋值相关推荐

Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
【ES6学习】对象的解构赋值
解构不仅可以用于数组,还可以用于对象. let { foo , bar } = { foo :"aaa ", bar :"bbb " } ; too // &q ...
ES6 对象的解构赋值
对象的解构赋值解构不仅可以用于数组,还可以用于对象. var { foo, bar } = { foo: "aaa", bar: "bbb" }; foo / ...
java对象赋值给数组_带你深入的理解数组和对象的解构赋值。
es6提供了一个非常好的特性,即变量的解构赋值.从而我们可以方便的从数组和对象中提取数据并将它们赋值给变量.这是非常必要的.先来看在这个新特性发布之前我们是如何从数组中提取数据的.如下: let nu ...
JS:ES6-3 解构赋值与模板字符串
什么是解构赋值: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值: 代码演示及相关说明: <!DOCTYPE html> <html> < ...
变量的解构赋值（对象）
阮一峰ES6入门对象的解构赋值 let { foo, bar } = { foo: "aaa", bar: "bbb" }; foo // "aaa ...
【前端17_JS】ES 6：Let 、Const、对象冻结、解构赋值、暂时性死区 TDZ、惰性求值、模板字符串
ES 6 简介 let 声明变量变量不提升暂时性死区 TDZ const 静态变量 (常量*) 实质引申对象冻结解构赋值起步 ...arr 展开运算符 ...[] 数组拓展运算符传参找 ...
js进阶--JSON，克隆，解构赋值,class类与箭头函数 06
文章目录 Array.from(类数组) sort中的a,b代表的每一项 JSON 浅克隆深克隆 es6 let const 对于对象中属性名与属性值一样的只写一个就可以解构赋值数组的解构赋值 ...
ES6变量的解构赋值--对象篇
目录使用方式普通形式嵌套结构使用默认值注意事项上一篇我们讲解了数组的解构赋值,解构还可以用于对象.字符串等等,这里我们来讲解对象的解构赋值. ES6变量的解构赋值--数组_zxn20012 ...

js 对象的解构赋值

js 对象的解构赋值相关推荐

最新文章

热门文章