ES6:变量的解构赋值(转载整理)

2018-11-05 本文已影响66人神经骚栋

前言

本文参考阮一峰大神的变量的解构赋值一篇当中的内容.在开始之前,我们先聊一下,为什么要进行变量的解构赋值?这样做到底会有怎样的好处?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

结语

本篇文章只是作为笔记来记录的,如果需要,可以去变量的解构赋值查看原文,欢迎持续关注骚栋