ES6 对象的解构赋值
来源:互联网 发布:海淘用哪个软件 编辑:程序博客网 时间:2024/03/29 01:59
解构不仅可以用于数组,还可以用于对象。
var { foo, bar } = { foo: "aaa", bar: "bbb" };foo // "aaa"bar // "bbb"
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
var { bar, foo } = { foo: "aaa", bar: "bbb" };foo // "aaa"bar // "bbb"var { 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 // 'hello'l // 'world'
这实际上说明,对象的解构赋值是下面形式的简写(参见《对象的扩展》一章)。
var { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
var { foo: baz } = { foo: "aaa", bar: "bbb" };baz // "aaa"foo // error: foo is not defined
上面代码中,foo
是匹配的模式,baz
才是变量。真正被赋值的是变量baz
,而不是模式foo
。
注意,采用这种写法时,变量的声明和赋值是一体的。对于let
和const
来说,变量不能重新声明,所以一旦赋值的变量以前声明过,就会报错。
let foo;let {foo} = {foo: 1}; // SyntaxError: Duplicate declaration "foo"let baz;let {bar: baz} = {bar: 1}; // SyntaxError: Duplicate declaration "baz"
上面代码中,解构赋值的变量都会重新声明,所以报错了。不过,因为var
命令允许重新声明,所以这个错误只会在使用let
和const
命令时出现。如果没有第二个let
命令,上面的代码就不会报错。
let foo;({foo} = {foo: 1}); // 成功let baz;({bar: baz} = {bar: 1}); // 成功
上面代码中,let
命令下面一行的圆括号是必须的,否则会报错。因为解析器会将起首的大括号,理解成一个代码块,而不是赋值语句。
和数组一样,解构也可以用于嵌套结构的对象。
var obj = { p: [ 'Hello', { y: 'World' } ]};var { p: [x, { y }] } = obj;x // "Hello"y // "World"
注意,这时p
是模式,不是变量,因此不会被赋值。
var node = { loc: { start: { line: 1, column: 5 } }};var { loc: { start: { line }} } = node;line // 1loc // error: loc is undefinedstart // error: start is undefined
上面代码中,只有line
是变量,loc
和start
都是模式,不会被赋值。
下面是嵌套赋值的例子。
let obj = {};let arr = [];({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });obj // {prop:123}arr // [true]
对象的解构也可以指定默认值。
var {x = 3} = {};x // 3var {x, y = 5} = {x: 1};x // 1y // 5var {x:y = 3} = {};y // 3var {x:y = 3} = {x: 5};y // 5var { message: msg = 'Something went wrong' } = {};msg // "Something went wrong"
默认值生效的条件是,对象的属性值严格等于undefined
。
var {x = 3} = {x: undefined};x // 3var {x = 3} = {x: null};x // null
上面代码中,如果x
属性等于null
,就不严格相等于undefined
,导致默认值不会生效。
如果解构失败,变量的值等于undefined
。
var {foo} = {bar: 'baz'};foo // undefined
如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。
// 报错var {foo: {bar}} = {baz: 'baz'};
上面代码中,等号左边对象的foo
属性,对应一个子对象。该子对象的bar
属性,解构时会报错。原因很简单,因为foo
这时等于undefined
,再取子属性就会报错,请看下面的代码。
var _tmp = {baz: 'baz'};_tmp.foo.bar // 报错
如果要将一个已经声明的变量用于解构赋值,必须非常小心。
// 错误的写法var x;{x} = {x: 1};// SyntaxError: syntax error
上面代码的写法会报错,因为JavaScript引擎会将{x}
理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免JavaScript将其解释为代码块,才能解决这个问题。
// 正确的写法({x} = {x: 1});
上面代码将整个解构赋值语句,放在一个圆括号里面,就可以正确执行。关于圆括号与解构赋值的关系,参见下文。
解构赋值允许,等号左边的模式之中,不放置任何变量名。因此,可以写出非常古怪的赋值表达式。
({} = [true, false]);({} = 'abc');({} = []);
上面的表达式虽然毫无意义,但是语法是合法的,可以执行。
对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。
let { log, sin, cos } = Math;
上面代码将Math
对象的对数、正弦、余弦三个方法,赋值到对应的变量上,使用起来就会方便很多。
由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。
var arr = [1, 2, 3];var {0 : first, [arr.length - 1] : last} = arr;first // 1last // 3
上面代码对数组进行对象解构。数组arr
的0
键对应的值是1
,[arr.length - 1]
就是2
键,对应的值是3
。方括号这种写法,属于“属性名表达式”,参见《对象的扩展》一章。
- ES6 对象的解构赋值
- 9、ES6 对象的解构赋值
- 【ES6】变量的解构赋值
- ES6 变量的解构赋值
- es6 变量的解构赋值
- ES6解构赋值的默认值
- ES6数组的解构赋值
- ES6:变量的解构赋值
- ES6变量的解构赋值
- es6 变量的解构赋值
- ES6变量的解构赋值
- ES6--变量的解构赋值
- ES6--变量的解构赋值
- JavaScript解构赋值(代码说明ES6数组, 对象, 函数的解构赋值)
- ES6新特性 let、const、变量对象的解构赋值
- [Wondgirl]ECMAScript6(ES6)(五)对象的解构赋值
- ES6——Day3(对象的解构赋值)
- 对象的解构赋值
- LinkedList 单向链表
- caffe源码:base_conv_layer
- nose1.3.7文档翻译--2.Basic usage
- mysql学习(6):使用jdbc模拟用户登录LogIn
- 项目优化之——总览
- ES6 对象的解构赋值
- WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的 ScriptRe
- Unified Model Language 之 用例图
- 表单重复提交与后台防重策略
- define与typedef的区别
- matlab图像调整
- Android-->打造流行的无数据空布局页面
- overflow
- 360手机权限开启方法