解构(数组,对象,字符串,数值,布尔,函数参数)

简介: 解构(数组,对象,字符串,数值,布尔,函数参数)https://es6.ruanyifeng.com/#docs/destructuring

概念

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

数组的解构和赋值

//es5 这是以前的赋值
let a = 1; 
let b = 2;
let c = 3;
a // 1
b // 2
c // 3
//es6
let [a,b,c] = [1,2,3]
a // 1
b // 2
c // 3

对象解构和赋值

对象的解构与数组不同,对象解构使用的是{ }而数组解构使用的是[ ],另一点不同是数组的原素是按次序排列的,变量的取值由它的位置决定的;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值,不然该位置的取值为undefined

看一下对比
let { A , B } = { A:'a' , B: 'b' } 
A // 'a'
B // 'b'
let { B , A } = { A:'a' , B: 'b' } 
A // 'a'
B // 'b'
let { A , B, C } = { A:'a' , B: 'b' } 
A // 'a'
B // 'b'
C //undefined

想要变量名与属性名不一致,必须写成如下格式

let { A: D} = { A:'a' , B: 'b' } 
D // 'a'  D是接受A属性值得变量
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
有趣之处

解构赋值允许等号左边的模式之中,不放置任何变量名。因此,可以写出非常古怪的赋值表达式。

({} = [true, false]);
({} = 'abc');
({} = []);

上面的表达式虽然毫无意义,但是语法是合法的,可以执行

字符串解构赋值

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

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

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

数值和布尔值得解构赋值

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

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。

下面是另一个例子。

[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]

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

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 1, y: 2}); // [1, 2]
move({x: 1}); // [1, 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: 1, y: 2}); // [1, 2]
move({x: 1}); // [1, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]
上面代码是为函数move的参数指定默认值,而不是为变量x和y指定默认值,所以会得到与前一种写法不同的结果。

undefined就会触发函数参数的默认值。

[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

圆括号问题

解构赋值最主要的就是解析,对于编辑器来说,它本事是不知道你是模式还是表达式,必须要等到解析到等号来进行区分。为了区分ES6定义了规则,只要有可能导致解构的歧义,就不得使用圆括号。

1)不能使用圆括号的情况
  • 变量声明语句
// 全部报错
let [(a)] = [1];

let {x: (c)} = {};
let ({x: c}) = {};
let {(x: c)} = {};
let {(x): c} = {};

let { o: ({ p: p }) } = { o: { p: 2 } };

上面 6 个语句都会报错,因为它们都是变量声明语句,模式不能使用圆括号。

  • 函数参数

函数参数也属于变量声明,因此不能带有圆括号。

// 报错
function f([(z)]) { return z; }
// 报错
function f([z,(x)]) { return x; }
  • 赋值语句的模式
// 全部报错
({ p: a }) = { p: 42 };
([a]) = [5];

上面代码将整个模式放在圆括号之中,导致报错。

// 报错
[({ p: a }), { x: c }] = [{}, {}];

上面代码将一部分模式放在圆括号之中,导致报错。

可以使用圆括号的情况

只有一种:赋值语句的非模式部分,可以使用圆括号。

[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确

上面三行语句都可以正确执行,因为首先它们都是赋值语句,而不是声明语句;其次它们的圆括号都不属于模式的一部分。第一行语句中,模式是取数组的第一个成员,跟圆括号无关;第二行语句中,模式是p,而不是d;第三行语句与第一行语句的性质一致。

用途

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

(1)交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰。

(2)从函数返回多个值

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

// 返回一个数组

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

// 返回一个对象

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

(3)函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

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

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

(4)提取 JSON 数据

解构赋值对提取 JSON 对象中的数据,尤其有用。

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 数据的值。

(5)函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};

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

(6)遍历 Map 结构

任何部署了 Iterator 接口的对象,都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口,配合变量的解构赋值,获取键名和键值就非常方便。

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

如果只想获取键名,或者只想获取键值,可以写成下面这样。

// 获取键名
for (let [key] of map) {
  // ...
}

// 获取键值
for (let [,value] of map) {
  // ...
}
注意取value的时候前边要有逗号,分割

(7)输入模块的指定方法

加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");
相关文章
|
机器学习/深度学习 编解码 算法
【动手学计算机视觉】第九讲:传统目标检测之DPM模型
DPM模型在我心里的印象一直都非常深刻,不仅是因为它非常经典,此外,它是我进入CV领域看的第一篇文章。还记得当初开始做项目时,老师就发给我一篇文章,并反复声明,要认真研究,好好学习。我反复把这篇文章看了很多遍,也把源码看了几遍,真是深深的被这个神作惊叹到了。真不愧为传统目标识别领域的经典之作,虽然时间过去很多年,特征提取加机器学习这一套在效率上远不如深度学习,但是DPM的影响力和思想依然非常有生命力,从后面深度学习模型中经常可以看到DPM的身影,DPM的原文从2009年至今引用已经超过8000次,它的价值可见一斑,下面就来介绍一下这个经典的目标检测模型。
【动手学计算机视觉】第九讲:传统目标检测之DPM模型
|
7月前
|
Java API
Java MethodHandle:超越反射的轻量化方法调用底层引擎
Java 7引入的MethodHandle是JVM级动态调用机制,相比反射:仅一次权限校验、强类型绑定、零装箱开销、支持方法适配与invokedynamic。性能达反射3–10倍,是Lambda、动态代理及现代框架的底层引擎。(239字)
370 6
|
7月前
|
机器学习/深度学习 算法 物联网
基于YOLOv8的植物健康状态(健康/患病)检测系统(中英文双版) | 附完整源码与效果演示
本项目基于YOLOv8构建中英文双语植物病害检测系统,支持健康/患病二分类,具备高精度、实时性与易部署特性。含完整源码、预训练模型、标准数据集及效果演示视频,助力智慧农业落地。
|
运维 Kubernetes 负载均衡
教你读懂 高可用/SRE
高可用(HA)与网站可靠性工程(SRE)是保障现代分布式系统稳定运行的核心理念。HA关注系统持续可用的能力,常用“9”的数量衡量可靠性,如99.99%可用性意味着全年仅允许约52分钟宕机。实现手段包括冗余设计、故障转移、负载均衡、限流熔断与数据多活。SRE则通过工程化方法提升系统可靠性,核心在于SLI(服务指标)、SLO(目标值)、SLA(服务协议)的指标体系,结合错误预算、自动化运维、容量规划与事后分析,实现稳定与效率的平衡。二者相辅相成,HA是目标,SRE是路径,共同构建“可测、可控、可优化”的系统稳定性体系。
1259 0
|
10月前
|
机器学习/深度学习 传感器 监控
基于 YOLOv8 的智能火灾识别系统设计与实现— 从数据集训练到 PyQt5 可视化部署的完整工程实践
本项目设计并实现了一款基于YOLOv8的智能火灾识别系统,融合深度学习与计算机视觉技术,支持图片、视频、摄像头等多源输入。采用PyQt5开发图形界面,具备高精度、实时性强、易部署等优点,适用于智慧消防、工业巡检等场景,提供完整代码与模型权重,真正实现开箱即用。
807 5
基于 YOLOv8 的智能火灾识别系统设计与实现— 从数据集训练到 PyQt5 可视化部署的完整工程实践
|
9月前
|
人工智能 安全 数据安全/隐私保护
阿里云无影云电脑官网链接、收费价格、企业版、个人版及商业版功能对比及问题解答FAQ
阿里云无影云电脑2026年全新升级,推出个人、企业、商业三版,覆盖办公、设计、AI等全场景。按需付费、数据不落地,手机秒变高性能云端PC。提供免费试用、详细价格及选型指南,助力高效安全办公。
2214 1
|
10月前
|
人工智能 搜索推荐 机器人
辅导学习机器人的技术深度解析与主流产品选型指南
随着AI技术发展,辅导机器人正从“工具”迈向“智能伙伴”。依托端侧大模型、神经符号推理、知识图谱RAG、麦克风阵列、情感计算与联邦学习六大技术,实现精准教学、多模态交互与隐私保护。猎户星空、优必选、科大讯飞等企业布局不同场景,推动教育智能化升级。(238字)
905 2
|
安全 C++ SoC
蓄电池能量管理系统的MATLAB/Simulink仿真
蓄电池能量管理系统的MATLAB/Simulink仿真
|
供应链 监控 搜索推荐
物联网技术在物流领域的应用会带来哪些影响?
物联网技术在物流领域的应用会带来哪些影响?
1798 58
|
分布式计算 大数据 Serverless
云栖实录 | 开源大数据全面升级:Native 核心引擎、Serverless 化、湖仓架构引领云上大数据发展
在2024云栖大会开源大数据专场上,阿里云宣布推出实时计算Flink产品的新一代向量化流计算引擎Flash,该引擎100%兼容Apache Flink标准,性能提升5-10倍,助力企业降本增效。此外,EMR Serverless Spark产品启动商业化,提供全托管Serverless服务,性能提升300%,并支持弹性伸缩与按量付费。七猫免费小说也分享了其在云上数据仓库治理的成功实践。其次 Flink Forward Asia 2024 将于11月在上海举行,欢迎报名参加。
1268 6
云栖实录 | 开源大数据全面升级:Native 核心引擎、Serverless 化、湖仓架构引领云上大数据发展