ES6语法之解构赋值

Hancock_Xu 发布于2019-08-21 18:32 / 2720人阅读

摘要：类似数组的对象都有一个属性，因此还可以对这个属性解构赋值。默认值解构赋值允许指定默认值当结构不成功时使用默认值。用途变量的解构赋值用途很多。有了解构赋值，取出这些值就非常方便。

原始操作

我们先看看下面的两个代码段，它们使用 ES6 之前的技巧提取数据：

const point = [10, 25, -34];

const x = point[0];
const y = point[1];
const z = point[2];

console.log(x, y, z);   //10 25 -34

上述示例显示了从数组中提取值的过程。

const gemstone = {
  type: "quartz",
  color: "rose",
  karat: 21.29
};

const type = gemstone.type;
const color = gemstone.color;
const karat = gemstone.karat;

console.log(type, color, karat);  //quartz rose 21.29

该示例显示了从对象中提取值的过程。

二者都很简单，但是这两个示例都没用到解构。

那么解构到底是什么？

解构

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

解构数组中的值

const point = [10, 25, -34];

const [x, y, z] = point;

console.log(x, y, z); //10 25 -34

在此示例中，方括号 [ ] 表示被解构的数组，x、y 和 z 表示要将数组中的值存储在其中的变量。注意，你不需要指定要从中提取值的索引，因为索引可以暗示出来。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

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

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

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

let [bar, foo] = [1]; // foo: undefined

解构对象中的值

const gemstone = {
  type: "quartz",
  color: "rose",
  karat: 21.29
};

const {type, color, karat} = gemstone;

console.log(type, color, karat);

在此示例中，花括号 { } 表示被解构的对象，type、color 和 karat 表示要将对象中的属性存储到其中的变量。注意不用指定要从其中提取值的属性。因为 gemstone 具有 type 属性，值自动存储在 type 变量中。类似地，gemstone 具有 color 属性，因此 color 的值自动存储在 color 变量中。

你还可以指定在解构对象时要选择的值。例如，let {color} = gemstone; 将仅选择 gemstone 对象中的 color 属性。

注意：对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

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

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

//foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

这实际上说明，对象的解构赋值是下面形式的简写:

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

字符串的解构赋值

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

const [a, b, c, d, e] = "hello";
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

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

let {length} = "hello";
length // 5

默认值

解构赋值允许指定默认值, 当结构不成功时, 使用默认值。

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

let [x, y = "b"] = ["a"]; // x="a", y="b"

在函数参数中指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || "default foo";这样的语句。

用途

变量的解构赋值用途很多。

交换变量的值

let x = 1;
let y = 2;

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

从函数返回多个值

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

// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

函数参数的定义

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

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

提取 JSON 数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);

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

输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

云服务器 GPU云服务器解构赋值对象解构解构函数 ES6

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90559.html

es6之解构赋值

摘要：的语法已经出了很长的时间了，在使用上也可以通过这类的编译工具转译为浏览器可以识别的的语法，但是依旧有很多开发在写代码的时候，依旧没有用的语法，而是习惯使用老的语法，这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比语法的优势，让大家 es6的语法已经出了很长的时间了，在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法，但是依旧有很多开发在写代码的时候，...

yeooo 2019-08-23 13:57 评论0 收藏0
ES6学习手稿之基本类型扩展

摘要：它是一个通用标准，奠定了的基本语法。年月发布了的第一个版本，正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。前言 ES6标准以及颁布两年了，但是，好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手，逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的，该公司1996年11月将JavaSc...

tommego 2019-08-21 18:25 评论0 收藏0
JavaScript基础之ES6对象解构赋值

摘要：具体的分析暂时不讨论解决的方式很简单，把上面的代码块变成一段表达式就小明总结解构赋值是提供一个十分方便的表达式。的解构赋值小明的对象赋值这里可以被赋予初始值小明对象的属性不存在能够赋值给多个变量对象解构赋值 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)。 --- 阮一峰《ECMAScript...

sutaking 2019-08-22 15:31 评论0 收藏0
深入理解ES6之《解构》

摘要：对象解构如果使用解析声明变量，则必须提供初始化程序也就是等号右侧的值以下语句有语法错误解构赋值表达式也就是右侧的表达式如果为或会导致程序抛出错误，因为任何尝试读取或的属性的行为都会触发运行时错误上面代码是声明变量同时赋值相应的属性值那如果已对象解构如果使用var、let、const解析声明变量，则必须提供初始化程序（也就是等号右侧的值）以下语句有语法错误 var { type, n...

DTeam 2019-08-21 12:02 评论0 收藏0