前言
本文参考阮一峰大神的变量的解构赋值一篇当中的内容.在开始之前,我们先聊一下,为什么要进行变量的解构赋值?这样做到底会有怎样的好处?ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构.也就是当我们想要对对象或者数组中的某个值进行取值时,又怕误操作使数组该元素发生改变,那么我们在这个时候就可以使用解构操作了.
本篇文章大部分为转载内容,只做个人记录用.请尽量去阮一峰大神的官网去查看原始文章.
数组的解构
我们看一下在ES5中一个数组是如何进行定义.
var array = ["111","222","333"];
那么接下来我们直接进入正题,看下ES6中数组的解构定义.我们直接拿到数组中某个元素的值,假如我们对变量a进行赋值操作,并不会影响到数组中的值.这里就是最简单的数组解构形式了.
let [a, b, c] = ["111","222","333"];
// a 111
// b 222
// c 333
然后我们看一下数组解构的几种变形形式.
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
然后了,如果解构不成功,那么变量的值就是undefined.示例如下所示.
let [foo] = [];
let [bar, foo] = [1];
另一种情况是不完全解构，也就是说等号左边的模式，只匹配一部分的等号右边的数组。但是在这种情况下，解构依然是可以成功。
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
同时,解构是允许有默认值的,但是条件是只有当一个数组成员严格等于undefined，默认值才会生效。示例如下所示.
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null
默认值可以引用解构赋值的其他变量，但该变量必须已经声明。下面最后一个表达式之所以会报错，是因为x用y做默认值时，y还没有声明。
let [x = 1, y = x] = []; // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = []; // ReferenceError: y is not defined
对象的解构
对象的解构与数组不同的是数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。示例如下所示.
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
如果变量名与属性名不一致，必须写成下面这样。
let { 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 arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3
字符串的解构
字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
数值和布尔值的解构
解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
函数的解构
函数的参数也可以使用解构赋值。
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
结语
本篇文章只是作为笔记来记录的,如果需要,可以去变量的解构赋值查看原文,欢迎持续关注骚栋
网友评论