ES6：解构赋值

莫凡是莫烦
1,248 阅读5分钟

之前做项目遇到数组对象的解构，今天重学下数组解构。

1. 简化编码

let x = 5
let y = 10

解构的方法：

let [x, y] = [5, 10]

2. 这里需要注意的是，一定要对应的值和变量模式相同才可以

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

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

(1) 如果对应的值和变量模式不同，就会导致解构失败undefined

let [x, y] = [1]
y //undefined

(2) 不完整解构，就是部分匹配


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

(3) 右边的值无法遍历（或无Iterator接口）

 let [foo] = 1;
 // TypeError: 1 is not iterable

因此Set可用于进行解构操作

let [x, y, z] = new Set(['a', 'b', 'c']);

扩展

这里的可以通过...把所有没有使用或剩余的值装进一个变量中

… 扩展操作符

1.用于展开数组的元素:

let a = [1, 2, 3]
let b = [0, ...a, 4]  //b == [0, 1, 2, 3, 4]
  1. 复制已有的数组：
let numberCopy = Array.of(...numbers)  //复制numbers数组到numberCopy
  1. 把字符串转换为单个字符数组：
let nums = [..."12abc"]
nums  //=> ["1", "2", "a", "b", "c"]
  1. 数组去重：把数组转换为集合，再用扩展操作符把集合转换为数组：
let letters = [..."hello world"]  
//[  'h', 'e', 'l', 'l',  'o', ' ', 'w', 'o',  'r', 'l', 'd']

[...new Set(letters)]  //=> ["h", "e", "l", "o", " ", "w", "r", "d"]

也能用在函数调用中：（将一个数组转为用逗号分隔的参数序列）

let numbers = [5, 2, 10, -1, 9]
Math.min(...numbers)  //=> -1



function f(v, w, x, y, z) { }
const args = [0, 1];
f(-1, ...args, 2, ...[3]);

默认值

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

ES6 内部使用严格相等运算符（===），判断一个位置是否有值。 这里只有内部严格为undefined的判定才能让他默认值生效，因此如果是null就不行

let [x, y = 'b'] = ['a', null]; // x='a', y= null

而且，它有个非常懒惰的特性，就是有直接可以取到的值就不会再调用函数去获取

function f() {
  console.log('aaa');
}

let [x = f()] = [1];   //x为1

这里只要声明后，就可以去引用解构赋值的其他变量

let [x = 1, y = x] = [];     // x=1; y=1
let [x = y, y = 1] = [];     // ReferenceError: y is not defined

**上面提到可遍历操作的数据结构都可以进行解构，这里对象也可以进行解构 **

对象解构

  1. 与数组不同对象的解构并不是按照顺序，它可以乱序，但是变量要与对象的属性名一致才能成功解构

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

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

上面的第二段代码，由于变量名没有对应的属性名可以进行赋值，导致解构失败（undefined）

  1. 对象的解构常用于拆分变量进行赋值

// 例一
let { log, sin, cos } = Math;

// 例二
const { log } = console;
log('hello') // hello

上面代码的例一将Math对象的对数、正弦、余弦三个方法，赋值到对应的变量上，使用起来就会方便很多。

例二将console.log赋值到log变量。可以使用较短的log方法实现同样的效果，更快的编码

  1. 简化写法

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


let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };

第一段代码，证明实际赋值是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

第二段代码，属性和变量一致可使用解构简写成

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };

默认值

对象的默认值生效条件与数组类似,内部机制要求对象的属性值严格等于undefined。

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

var {x: y = 3} = {x:1};
y // 3
x // x is not defined

var {x = 3} = {x: null};
x // null
由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

上面代码对数组进行对象解构。数组arr的0键对应的值是1，[arr.length - 1]就是2键，对应的值是3。方括号这种写法，属于“属性名表达式”

  1. 字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c] = 'hel';
a // "h"
b // "e"
c // "l"

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

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

  1. 数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

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

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

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

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

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

函数参数的解构赋值

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

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。

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

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}); // [3, undefined]
move({}); // [undefined, undefined]

上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。

avatar
文章
阅读
粉丝