ES6 解构赋值学习笔记
来源:互联网 发布:js请求servlet 编辑:程序博客网 时间:2024/06/02 16:39
1.数组的解构
let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3let [ , , third] = ["foo", "bar", "baz"];third // "baz"let [x, , y] = [1, 2, 3];x // 1y // 3let [head, ...tail] = [1, 2, 3, 4];head // 1tail // [2, 3, 4]let [x, y, ...z] = ['a'];x // "a"y // undefinedz // []
如果解构不成功,变量的值就等于undefined
。
2.对象的解构
解构不仅可以用于数组,还可以用于对象。
let { foo, bar } = { foo: "aaa", bar: "bbb" };foo // "aaa"bar // "bbb"
对象的解构与数组有一个重要的不同。
数组的元素是按次序排列的,变量的取值由它的位置决定;
而对象的属性没有次序,只看解构赋值的变量名是否存在,变量必须与属性同名,才能取到正确的值。
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。在上述代码中输出的foo其实是foo:foo中后面的foo。
采用 let {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 foo;({foo} = {foo: 1}); // 成功let baz;({bar: baz} = {bar: 1}); // 成功
上面代码中,let
命令下面一行的圆括号是必须的,否则会报错。因为解析器会将起首的大括号,理解成一个代码块,而不是赋值语句。
对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。
let { log, sin, cos } = Math;
上面代码将Math
对象的对数、正弦、余弦三个方法,赋值到对应的变量上,使用起来就会方便很多。
3.嵌套赋值
下面是嵌套赋值的例子。
let obj = {};let arr = [];({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });obj // {prop:123}arr // [true]
4.默认值
解构赋值允许指定默认值。
let [foo = true] = [];foo // truelet [x, y = 'b'] = ['a']; // x='a', y='b'let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
注意,ES6 内部使用严格相等运算符(===
),判断一个位置是否有值。所以,如果一个数组成员不严格等于undefined
,默认值是不会生效的。
let [x = 1] = [undefined];x // 1let [x = 1] = [null];x // null
上面代码中,如果一个数组成员是null
,默认值就不会生效,因为null
不严格等于undefined
。
默认值可以引用解构赋值的其他变量,但该变量必须已经声明。
let [x = 1, y = x] = []; // x=1; y=1let [x = 1, y = x] = [2]; // x=2; y=2let [x = 1, y = x] = [1, 2]; // x=1; y=2let [x = y, y = 1] = []; // ReferenceError
上面最后一个表达式之所以会报错,是因为x
用到默认值y
时,y
还没有声明。
对象的解构也可以指定默认值。
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
。
let {foo} = {bar: 'baz'};foo // undefined
5.类数组对象的解构赋值
有length属性
eg:
字符串
const [a, b, c, d, e] = 'hello';a // "h"b // "e"c // "l"d // "l"e // "o"
还有set map等结构函数参数的解构也可以使用默认值。
function move({x = 0, y = 0} = {}) { return [x, y];}move({x: 3, y: 8}); // [3, 8]move({x: 3}); // [3, 0]move({}); // [0, 0]move(); // [0, 0]
上面代码中,函数move
的参数是一个对象,通过对这个对象进行解构,得到变量x
和y
的值。如果解构失败,x
和y
等于默认值。
注意,下面的写法会得到不一样的结果。
function move({x, y} = { x: 0, y: 0 }) { return [x, y];}move({x: 3, y: 8}); // [3, 8]move({x: 3}); // [3, undefined]move({}); // [undefined, undefined]move(); // [0, 0]
上面代码是为函数move
的参数指定默认值,而不是为变量x
和y
指定默认值,所以会得到与前一种写法不同的结果。
- ES6 解构赋值学习笔记
- ES6学习笔记(二)--解构赋值
- ES6学习笔记2--解构赋值
- ES6学习笔记-变量解构赋值
- ES6学习笔记:变量的解构赋值
- es6学习笔记4-解构赋值
- 学习笔记:ES6之解构赋值
- ES6学习笔记:解构
- ES6学习笔记(二)变量的解构赋值
- ES6 学习笔记之一《变量的解构赋值》
- ES6学习笔记之《变量的解构赋值》
- 2、变量的解构赋值 —ES6学习笔记
- 【ES6系列】解构赋值
- ES6 destructuring 解构赋值
- es6 chapter3 解构赋值
- ES6 解构赋值用途
- ES6:解构赋值
- ES6 解构赋值
- java总的重载(overload)、重写或覆盖(override)和隐藏分析;
- 关于java的字符串
- 智能指针小结
- C++(2)/C++对C的扩展--函数部分
- leetcode-4. Median of Two Sorted Arrays
- ES6 解构赋值学习笔记
- Lua生成比较理想的随机数的方法
- df和du显示的磁盘空间使用情况不一致的原因及处理
- 集合框架-模拟斗地主洗牌和发牌并对牌进行排序案例
- c++ STL
- 最新极光推送在ios模拟器上无法运行
- javascript中对原型的理解
- angularjs 与 ueditor 使用的时候 setContent 报错
- c++ explicit