es6基础之变量的解构赋值

本文源自阮老师的ES6入门教程，为了之后方便自己随时查看，将常用的es6部分整理了一下
传送门

数组的解构赋值

概念：ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
基本用法：

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

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值,也就是说，只要两边的模式相同，左边的变量就会对应赋为右边的值

例如：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

let [a, [[b], c]] = [1, [[2], 3]]; a // 1 b// 2 c // 3 let [ , , str] = ["foo", "bar", "baz"]; str // "baz" let [x, , y] = [1, 2, 3]; x // 1 y // 3 let [fir, ...sce] = [1, 2, 3, 4]; fir // 1 sce // [2, 3, 4]

如果解构不成功，变量的值就等于undefined。

1 2	let [foo] = []; let [bar, foo] = [1];

以上两种情况都属于解构不成功，foo的值都会等于undefined。

另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功

1 2 3 4 5 6 7 8

let [x, y] = [1, 2, 3]; x // 1 y // 2 let [a, [b], d] = [1, [2, 3], 4]; a // 1 b // 2 d // 4

默认值

解构赋值允许指定默认值。

1 2 3 4 5

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

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值

对象的解构赋值

1 2 3

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

对象解构赋值时变量必须与属性同名，才能取到正确的值
数组的元素是按次序排列的，变量的取值由它的位置决定。而对象不用受位置限制

上面代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。

如果变量名与属性名不一致，必须写成下面这样。

1 2 3 4 5 6 7

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'

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者
例如：

1 2 3

let { foo: baz } = { foo: "aaa", bar: "bbb" }; baz // "aaa" foo // error: foo is not defined

上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

解构赋值的用途

1. 交换变量的值

   1 2 3 4

   let x = 1; let y = 2; [x, y] = [y, x];//x：2 y:1

2. 函数返回多个值
   函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   function example() { return [1, 2, 3]; } let [a, b, c] = example(); // 返回一个对象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example();

3. 函数参数的定义
   解构赋值可以方便地将一组参数与变量名对应起来。

   1 2 3 4 5 6 7

   // 参数是一组有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 参数是一组无次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1});

4. 提取 JSON 数据

   1 2 3 4 5 6 7 8 9 10

   let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309]

上面代码可以快速提取 JSON 数据的值。