【ES6学习】对象的解构赋值

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

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

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

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

上面代码的第一个例子中，等号左边的两个变量的次序与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于
undefined

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

var { foo : baz } = { foo : 'aaa ', bar :'bbb ' } ;
baz // ” aaa ”
let obj = { first : ' hello ’', last :'world ' };
let { first: f , last: l } =obj;
f // ’ h ello ’
l // ’ world ’

实际上说明，对象的解构赋值是下面形式的简写

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

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

let { foo : baz } = {  foo :"aaa ", bar :"bbb"} ;
baz // ” aaa ”
foo // error: foo is not 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”}]

下面是一个例子。

var node = {loc: {start:{line: 1, column: 5}}
}
var { loc, loc: { start}  , loc: { start:  {line }} } = node;
line // 1
loc //Object {start: Object}
start //Object {line: 1, column: 5)

上面的代码有三次解构赋值，分别是对 loc start line 三个属性的解构赋值。需要注意的是，最后一次对 line 属性的解构赋值之中，只有 line 是变量， loc和 start 都是模式，不是变量。

下面是嵌套赋值的例子。

let bj = {};
let arr = [];
{ { foo：obj.prop, bar: arr[O] } = { foo: 123, bar: true });
obj // {prop:l23}
arr // [true]

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

var {x = 3) = {};
x // 3
var { x, y = 5} = { x: 1 } ;
x // 1
y // 5
var { x: y = 3} = {};
y // 3
var { x: y = 3} = { x: 5} ;
y // 5var { message: msg ＝'mething went wrong '} ={};
msg // ” Something went wrong ”

默认值生效的条件是，对象的属性值严格等于 undefined

var {x = 3) = {x: undefined};
x // 3
var {x = 3) = {x: null};
x // null

上面的代码中，如果属性等于 null ，就不严格相等于 undefi ed ，导致默认值不会生效。

如果解构失败变量的值等于 undefined

let {foo) = {bar :'baz '} ;
foo // undefined

如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错

// 报错
let {foo: {bar}} = {baz :'baz ' } ;

上面的代码中，等号左边对象的 foo 属性对应一个子对象。该子对象的 bar 属性在解构时会报错。原因很简单，因为 foo 此时等于 undefined ，再取子属性就会报错，请看下面的代码

let _tmp = {baz : ' baz ' ) ;
tmp.foo.bar // 报错

如果要将一个已经声明的变量用于解构赋值，必须非常小心

//错误的写法
let x;
{x) = {x : l};
// SyntaxError: syntax error

上面代码的写法会报错因为 avaScript 引擎会将｛ }理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 Javascript 将其解释为代码块 ,才能解决这个问题

//正确的写法
let x;
( {x) = {x : 1});

上面的代码将整个解构赋值语句放在一个圆括号里面，这样就可以正确执行。关于圆括号与解构赋值的关系，参见下文。

解构赋值允许等号左边的模式之中不放置任何变量名，因此，可以写出非常古怪的赋值表达式

( {} = [true, false]);
({}= 'abc ') ;
( {} =[]);

上面的表达式虽然毫无意义，但是语法是合法的，可以执行。
对象的解构赋值可以很方便地将现有对象的方法赋值到某个变量。

let { log , sin , cos } = Math ;

上面的代码将 Math 对象的对数、正弦、余弦三个方法赋值到对应的变量上，使用起来就会方便很多。
由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

let arr = [l, 2 , 3] ;
let { 0 : first , [arr.length-l]:last} = arr;
first // 1
last // 3

上面的代码对数组进行对象解构。数组 arr 的0键对应的值是 1, [arr. length - 1] 就是 2键，对应的值是3 。方括号这种写法属于“属性名表达式”。

【ES6学习】对象的解构赋值相关推荐

ES6学习（变量解构赋值）
解构赋值含义:允许按照一定模式,从数组和对象中提取值,对变量进行赋值,只要等号两边的模式相同,左边的变量就会被赋予对应的值 1.数组解构赋值右侧必须是一个数组 let [a, b, c] = [1, ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
Vue2.x—理解vuex核心概念action（使用到ES6的变量的解构赋值）
Action Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态. Action 可以包含任意异步操作. 让我们来注册一个简单的 acti ...
ES6 对象的解构赋值
对象的解构赋值解构不仅可以用于数组,还可以用于对象. var { foo, bar } = { foo: "aaa", bar: "bbb" }; foo / ...
第五节：一个令人兴奋的ES6新特性：解构赋值
端午节刚刚过,大家是回家陪家人吃粽子,还是约好朋友一起出去浪了?昨天上了一天班,不知道大家有没有把出去玩耍的心思收回来,准备接下来的学习. 继续学习吧骚年们...... 学完了前4节,今天我给大家带来 ...
【ES6】变量的解构赋值
[ES6]变量的解构赋值一.什么叫解构赋值? 二.解构赋值有哪些分类?写法? 1)对数组的解构赋值 2)对对象的解构赋值 3)对字符串的解构赋值 4)对数值和布尔值的解构赋值 5)对函数参数的解构赋 ...
[ES6] 细化ES6之 -- 变量的解构赋值
变量的解构赋值解构赋值是什么 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值 var/let [变量名称1,变量名称2,...] = 数组或对象本质上,这种写法属于"模式 ...
ES6中变量的解构赋值
1.数组的解构赋值基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 输出: 上面代码表示,可以从数组中提取值,按照对应位置,对变 ...
js 对象的解构赋值
2023.1.29今天我学习了对象的解构赋值. 解构不仅可以用于数组,还可以用于对象. let {foo,bar} = {foo : "aaa",bar : "bbb&q ...

【ES6学习】对象的解构赋值

【ES6学习】对象的解构赋值相关推荐

最新文章

热门文章