JavaScript ES6 解构举例引导

JavaScript 解构是一种赋值语法表达,简洁且可读地“解构”数组的值或者对象的属性,解析为不同的变量。

JavaScript 解构表达式(例子)

[a, b] = [50, 100];

console.log(a);
// expected output: 50

console.log(b);
// expected output: 100

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: [30, 40, 50]

我们有很多种不同的方式使用 JavaScript 解构。

TLDR;

数组解构

数组解构是极为简单整洁的,在复制表达式的左侧使用数组字面量。数组字面量中的每个变量名称映射为解构数组的相同索引项。

基础变量赋值

let foo = ['one', 'two', 'three'];

let [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

声明分别赋值

你可以通过变量声明分别解构赋值。举例:首先,声明变量,然后分别赋值。

// 声明变量
let a, b;
// 然后分别赋值
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

解构默认值

如果解构取出的值是 undefined,可以设置默认值:

let a, b;
// 设置默认值
[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

在上面的例子中,我们给 ab 设置了默认值。这种情况下,如果 ab 的值是 undefined,它将赋值默认值 5a 7b

交换变量值

解构可以在一个解构表达式中交换两个变量值,是不是很酷?

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

如果你想不使用解构交换变量值,将必须提供一个缓存变量或者同解构一起使用 XOR swap algorithm

我使用 JavaScript 解构

也可以阅读:JavaScript 中需要知道的所有关于交换两个变量值

解析函数返回的数组

是的,可以解构函数返回的数组。

function c() {
  return [10, 20];
}

let a, b;
[a, b] = c();
console.log(a); // 10
console.log(b); // 20

在上面的例子中,c() 的返回值 [10, 20] 可以在单独的一行代码中使用解构解析。

忽略返回值/跳过某项

你也可以跳过一些没有用的返回值。举例:

function c() {
  return [1, 2, 3];
}

let [a, , b] = c();
console.log(a); // 1
console.log(b); // 3

在罕见的情况下,你想忽略所有的值。

[, ,] = c();

当然,我知晓这是不会发生的,但是作为一个教程我不得不告知你每一件事。

赋值数组剩余值给一个变量

当你使用数组解构,你可以赋值数组剩余部分给一个单独的变量。

let [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

小心结尾的逗号语法错误,它将爆发如果在剩余元素的左侧使用结尾逗号:

let [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

嵌套数组解构

像对象一样,你也可以使用数组嵌套解构。这里有一个例子:

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];

// Use nested destructuring to assign red, green and blue
// 使用嵌套解构赋值 red, green, blue
const [hex, [red, green, blue]] = color;

console.log(hex, red, green, blue); // #FF00FF 255 0 255

对象解构

基础对象解构

let x = { y: 22, z: true };
let { y, z } = x;

console.log(y); // 22
console.log(z); // true

无声明解构

你可以使用解构分别从它的声明赋值变量。这意味着在上面的例子中不需要创建变量 x

let y, z;

({ y, z } = { y: 1, z: 2 });

注意:圆括号 (...) 包裹赋值声明是必须的当使用对象字面量解构赋值无声明变量。

{a, b} = {a: 1, b: 2} 不是有效的独立语法,左侧的 {a, b} 被考虑为代码块而不是一个对象字面量。

因此,({a, b} = {a: 1, b: 2}) 是有效的, 等价于 var {a, b} = {a: 1, b: 2}

(...) 表达式需要前置分号或者它可能用于在前一行执行函数。

引用自 MDN

赋值给新变量名

当使用对象解构时你也可以改变变量的名称,如下例子:

let o = { p: 22, q: true };
let { p: foo, q: bar } = o;

console.log(foo); // 22
console.log(bar); // true

例子中,var {p: foo} = o 获取对象 o 的属性名 p,然后赋值给一个名称为 foo 的变量。

解构默认值

如果解构取出的对象值是 undefined 你也可以设置默认值。

let { a = 10, b = 5 } = { a: 3 };

console.log(a); // 3
console.log(b); // 5

赋值给新变量名的同时提供默认值

let { a: aa = 10, b: bb = 5 } = { a: 3 };

console.log(aa); // 3
console.log(bb); // 5

嵌套对象和数组解构

const metadata = {
  title: 'Scratchpad',
  translations: [
    {
      locale: 'de',
      localization_tags: [],
      last_edit: '2014-04-14T08:43:37',
      url: '/de/docs/Tools/Scratchpad',
      title: 'JavaScript-Umgebung',
    },
  ],
  url: '/en-US/docs/Tools/Scratchpad',
};

let {
  title: englishTitle, // 重命名
  translations: [
    {
      title: localeTitle, // 重命名
    },
  ],
} = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"

可计算对象属性名与解构

当使用解构改变对象属性的名称时,可以使用对象计算属性名。

let key = 'z';
let { [key]: foo } = { z: 'bar' };

console.log(foo); // "bar"

在上面的例子中,我们计算变量键值并改变它的名称为 foo

同时使用数组和对象解构

在解构中数组和对象可以联合使用:

const props = [
  { id: 1, name: 'Fizz' },
  { id: 2, name: 'Buzz' },
  { id: 3, name: 'FizzBuzz' },
];

const [, , { name }] = props;

console.log(name); // "FizzBuzz"

所有的解构赋值语法是相同的,是在赋值符号左侧声明从源变量取出的值。举例来说:

let x = [1, 2, 3, 4, 5];
let [y, z] = x;
console.log(y); // 1
console.log(z); // 2

英文原文:https://buginit.com/javascript/javascript-destructuring-es6-the-complete-guide/

上次更新: 10/14/2019, 8:39:59 AM
Copyright © 2019 by Wu WenJun