首页 技术 正文
技术 2022年11月15日
0 收藏 351 点赞 4,097 浏览 2702 个字

变量的解构赋值

es 6 允许按照一定的模式,从数组和对象中提取值,然后对变量进行赋值,这被称之为解构;

一.数组的解构赋值

  最基本写法:

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

  更多的写法:

//---------- 完全解构成功
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3let [ , , third] = ["foo", "bar", "baz"];
third // "baz"let [x, , y] = [1, 2, 3];
x // 1
y // 3let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []//---------- 不完全解构,但成功
let [x, y] = [1, 2, 3];
x // 1
y // 2let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4//---------- 解构失败
let [foo] = [];
let [bar, foo] = [1];
foo // undefined//---------- 报错,等号右边不是数组(或者严格说,不是可遍历的结构)
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

二、对象的解构赋值

  1.标准写法:

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

  简写:

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

  注意: 对象的结构不需要像数组那样注重顺序,只需要注意保证变量(等号左边)名与对象属性(等号右边)名相同即可;

  2.如果变量名和属性名不一致,必须写成下面的格式:(注意变量声明时的顺序以及使用的符号)

let { foo: css } = { foo: 'aaa', bar: 'bbb' };
css// "aaa"let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

  3.对象的嵌套解构

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

  我承认,一开始是看不懂的。

  let 花括号中的 p 是模式,不是变量,同理,标准写法中也是这个原理;如果想要 p 作为变量进行赋值,可以写成:

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

  下面这个例子,看看能不能写出结果:

const node = {
loc: {
start: {
line: 1,
column: 5
}
}
};let { loc, loc: { start }, loc: { start: { line }} } = node;line ?
loc ?
start ?

  答案如下:

line // 1
loc // Object {start: Object}
start // Object {line: 1, column: 5}// 上面的代码有三次解构赋值,分别是对 loc、 start、 line 三个属性的解构赋值;
// 最后一次对 line 属性的解构赋值之中,只有 line 是变量, loc 和 start 都是模式,不是变量;

  

  还有一些符合规则但应用很少的情况就不列举,详情请移步:字符串的解构赋值-阮一峰 ;

三、关于以上两种解构的默认值

  数组解构的默认值:

let [foo = true] = [];
foo // truelet [x, y = 'b'] = ['a'];
// x='a', y='b'let [x, y = 'b'] = ['a', undefined];
// x='a', y='b'

  es 6 的内部使用严格相等运算符(===),判断一个位置是否有值。只有严格等于 undefined,默认值才会生效。

let [x = 1] = [undefined];
x // 1let [x = 1] = [null];
x // null

  对象解构的默认值:

var {x = 3} = {};
x // 3var {x, y = 5} = {x: 1};
x // 1
y // 5var {x: y = 3} = {};
y // 3var {x: y = 3} = {x: 5};
y // 5var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

  同样遵守严格相等的模式:

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

四、字符串的解构赋值

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

  上例中,在解构时,字符串被转换成了一个类似数组的对象。

  这个类似数组的对象都有一个 length 属性,可以直接对这个属性解构赋值:

let {length : len} = 'hello';
len // 5

五、数值和布尔值的解构赋值

  解构赋值时,如果等号右边的数值和布尔值,则会先转成对象:

let {toString: s} = 123;
s === Number.prototype.toString // truelet {toString: s} = true;
s === Boolean.prototype.toString // true

  上例中,数值和布尔值的包装对象都有 toString 属性,因此变量 s 都能取到值。

解构赋值的规则(实质)是:只要等号右边的值不是对象或者数组,就先将其转化成对象。而由于 undefined 和 null 无法转成对象,故对他们的解构赋值都会报错。

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

六、函数参数的解构赋值

  函数的参数也可以使用解构赋值。

// 1.
function add([x, y]){
return x + y;
}add([1, 2]); // 3// 2.
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]//3.
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]
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,949
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,475
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,288
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,104
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,735
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,770