【编程向导】JavaScript-基础语法-解构赋值

梦里繁花落尽,此情未央,此意难忘,弦虽断,曲犹扬。!

与技术共同呼吸,与程序员共命运。世树科技 承“技驱动,理致胜”理念、国风编程。

解构赋值

解构赋值(Destructing)语法是一个 JavaScript 表达式,这使得可以将 值从数组属性从对象 提取到不同的变量中。

数组的解构赋值

var foo = [];// 不使用解构
var one = foo[0];
var two = foo[1];
var three = foo[2];// 使用解构
var [one, two, three] = foo;

上面代码表示,可以从数组中提取值,按照对应位置对应变量赋值。

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

基本用法

下面是一些使用嵌套数组进行结构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo; // 1
bar; // 2
baz; // 3let [, , third] = ['foo', 'bar', 'baz'];
third; // "baz"let [x, y] = [1, 2, 3];
x; // 1
y; // 3let [head, ...tail] = [1, 2, 3, 4];
head; // 1
tail; // [2, 3, 4]let [x, y, ...z] = ['a'];
x; // "a"
y; // undefined
z; // []
解构不成功

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

let [foo] = [];
let [bar, foo] = [1];
不完全解构

即等号左边的模式只匹配一部分的等号右边的数组。

let [x, y] = [1, 2, 3];
x; // 1
y; // 2let [a, [b], d] = [1, [2, 3], 4];
a; // 1
b; // 2
d; // 4
  • 如果等号右边不是数组(或者严格来说不是可遍历的结构),那么将会报错

默认值

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

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

ES6 內部使用严格相等运算符(===)判断一个位置是否有值。所以,如果一个数组成员不严格等于 undefined ,默认值是不会生效的。

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

上面的代码中,如果一个数组成员是 null ,默认值就不会生效,因为 null 不严格等于 undefined

如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到时才会求值。

function f() {console.log('aaa');
}
let [x = f()] = [1];

上面的代码中,因为 x 能取到值,所以函数 f 根本不会执行。上面的代码其实等价于下面的代码

let x;
if ([1][0] === undefined) {x = f();
} else {x = [1][0];
}

默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

let [x = 1, y = x] = []; // x = 1, y = 1
let [x = 1, y = x] = [2]; // x = 2, y = 2
let [x = 1, y = x] = [1, 2]; // x = 1, y = 2
let [x = y, y = 1] = []; // ReferenceError

上面最后一个表达式之所以会报错,是因为 x 用到默认值 y 时,y 还没有声明。

对象的解构赋值

解构不仅可以用于数组,还可以用于对象。

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

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

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

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

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

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz; // 'aaa'let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f; // 'hello'
l; // 'world'

实际上说明,对象的解构赋值时下面形式的简写。

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

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

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

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

与数组一样,解构也可以用于嵌套解构的对象。

let obj = {p: ['Hello', { y: 'World' }],
};let {p: [x, { y }],
} = obj;
x; // 'Hello'
y; // 'World'

注意,这时 p 是模式,不是变量,因此不会被赋值。如果 p 也要作为变量赋值,可以写成下面这样。

let obj = {p: ['Hello', { y: 'World' }],
};let {p,p: [x, { y }],
} = obj;
x; // 'Hello'
y; // 'World'
p; // ['Hello', { y: 'World'}]

下面是另一个例子

var node = {loc: {start: {line: 1,column: 5,},},
};var {loc,loc: { start },loc: {start: { line },},
} = node;
line; // 1loc; // Object { start: Object }
start; // Object { line: 1, column: 5}

上面的代码有三次解构赋值,分别是对 locstartline 三个属性的解构赋值。需要注意的是,最后一个对 line 属性的解构赋值之中,只有 line 是变量,locstart 都是模式,不是变量。

下面是嵌套赋值的例子。

let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });obj; // { prop: 123 }
arr; // [true]

对象的解构也可以指定默认值。

var { x = 3 } = {};
x; // 3var { x, y = 5 } = { x: 1 };
x; // 1
y; // 5var { x: y = 3 } = {};
y; // 3var { x: y = 3 } = { x: 5 };
y; // 5var { message: msg = 'Something went wrong' } = {};
msg; // 'Something went wrong'

默认值生效的条件是,对象的属性值严格等于 undefined

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

上面的代码中,如果 x 属性等于 null,就不严格等于 undefined,导致默认值不会生效。

如果解构失败,变量的值等于 undefined

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

如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。

// 报错
let {foo: { bar },
} = { baz: 'baz' };

上面的代码中,等号左边对象的 foo 属性对应一个子对象。该子对象的 bar 属性再解构时会报错。原因很简单,因为foo 此时等于 undefined,再取子属性就会报错,请看下面的代码。

let _tmp = { baz: 'baz' };
_tmp.foo.bar; // 报错

如果要將一个已经声明的变量用于解构赋值,必须非常小心。

// 错误的写法
let x;
{x} = {x: 1}// SyntaxError: syntax error

上面代码的写法会报错,因为 JavaScript 引擎会将 {x} 理解成一个代码块,从而发生语错误,只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题。

// 正确的写法
let x;
({ x } = { X: 1 });

上面的代码将整个解构赋值语句放在一个圆括号里面,这样就可以正确执行。关于圆括号与解构赋值的关系。

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

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

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

对象的解构赋值可以很方便地将现有现象的方法赋值到某个变量。

let { log, sin, cos } = Math;

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

由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。

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。方括号这种写法属于“属性名表达式”。

字符串的解构赋值

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

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; // truelet { toString: s } = true;
s === Boolean.prototype.toString; // true

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

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

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

函数参数的解构赋值

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

function add([x, y]) {return x + y;
}add([1, 2]); // 3

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

下面是另一个例子。

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

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

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 的值。如果解构失败,xy 等于默认值。

注意,下面写法会得到不一样的结果。

function move({ x, y } = { x: 0, y: 0 }) {return [x, y];
}move({ x: 3, y: 8 }); // [3, 8]
move({ x: 3 }); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

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

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

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

圆括号问题

解构赋值虽然很方便,但是解析起来并不容易。对于编译器来说,一个式子到底是模式还是表达式,没有办法从一开始就知道,必须解析到(或解析不到)等号才能知道。

由此带来的问题是,如果模式中出现圆括号该怎么处理?ES6 的规则是,只要有可能导致解构的歧义,就不得使用圆括号。

但是,这条规则实际上不那么容易辨别,处理起来相当麻烦。因此建议,只要有可能,就不要在模式中放置圆括号。

不能使用圆括号的情况

变量声明语句
// 全部报错
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]; // 正确

用途

交换变量的值

let x = 1;
let y = 2;[x, y] = [x, y];

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

从函数返回多个值

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

// 返回一个数组
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 数据

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

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

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

函数参数的默认值

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

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

遍历 Map 结构

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

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world!');for (let [key, value] of map) {console.log(ket + ' is ' + value);
}
// first is hello
// second is world

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

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

加入模块的指定方法

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/748530.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java学习之路-程序逻辑控制

目录 1.分支结构 1.1 if语句 栗子 判断奇数还是偶数 判断一个年份是否为闰年 1.2switch语句 栗子 2. 循环结构 2.1while 循环 栗子 2.2break和continue break continue 2.3for循环 基本语法 栗子 2.4 do while 循环 3.输入输出 3.1输出 3.2从键盘输入 栗子…

【Gzip】详细介绍

Gzip讲解 1. 前言2. Gzip压缩算法3. Gzip文件格式4. Gzip使用5. 压缩率与CPU使用 1. 前言 Gzip是一种流行的文件压缩和解压工具,也是一种文件格式。它最早由Jean-loup Gailly和Mark Adler开发,用于UNIX系统。由于高效的压缩算法,它被广泛运用…

南大通用数据库-Gbase-8a-学习-43-SQL长时间处于Writing to net状态排查

目录 一、问题截图 二、排查思路 1、Gbase8a SQL有几种状态 2、问题导致原因猜想 3、观察服务端(集群端)网络情况 4、观察客户端网络情况 5、排查客户端程序处理数据慢 5.1、send (1)声明 (2)作用…

数据库不应放在容器中?- B站Kubernetes有状态服务实践(Elasticsearch/Clickhouse)

本期作者 前言 云原生时代下, Kubernetes已成为容器技术的事实标准, 使得基础设施领域应用下自动化运维管理与编排成为可能。对于无状态服务而言, 业界早已落地数套成熟且较完美的解决方案。可对于有状态的服务, 方案的复杂度就以…

CRC校验(FPGA实现)

1 什么是CRC校验? CRC(循环冗余校验)是一种校验和算法,用于检测数据传输或存储中是否发生了错误。它通过对数据流进行特定的数学运算(比如按照多项式进行除法运算),生成一个特定长度的校验结果,将其附加到数据中一起传输或存储。接收方可以使用相同的算法对接收到的数…

精简版 Obsidian 图床配置 PicGo+ gitee

精简版 Obsidian 图床配置 PicGo gitee 图床的作用 图床(Image Hosting Service)是一种在线服务,用于存储和托管用户上传的图片文件。用户可以将图片上传到图床服务器,并获得一个可访问的图片链接,然后可以在网页、博…

模板进阶:非类型模板参数,特化

一、非类型模板参数 非类型模板参数&#xff0c;就是用一个常量作为 类/函数 的模板参数&#xff0c;在 类/函数 中可以被当成常量使用。 template<class T, size_t N>// N 为一个非类型模板参数 class Stack { public:Stack(){_a new T[N];} protected:T* _a; };int m…

perl 用 XML::Parser 解析 XML文件,访问哈希

本篇我们会看到 Perl 成为知名编程语言的关键特色--哈希 hash&#xff08;2000年以前叫&#xff1a;关联数组&#xff09;。 在Perl 中&#xff0c;可以使用各种模块和函数来解析 XML元素和属性。其中&#xff0c;最古老的模块是 XML::Parser&#xff0c;它提供了一组完整的X…

Java Spring Boot 接收时间格式的参数

报错 JSON parse error: Cannot deserialize value of type java.time.LocalDateTime from String “2024-03-14 12:30:00”: Failed to deserialize java.time.LocalDateTime: (java.time.format.DateTimeParseException) Text ‘2024-03-14 12:30:00’ could not be parsed a…

为什么会出现粘包这个问题

粘包问题通常是由于TCP协议的特性引起的。TCP是一种面向连接的可靠传输协议&#xff0c;它提供了数据的可靠性和有序性&#xff0c;但是在传输过程中也会出现一些问题&#xff0c;其中包括粘包问题。 以下是一些导致粘包问题的主要原因&#xff1a; TCP缓冲区&#xff1a; TCP…

GAMMA数据处理(六)

最近进行Sentinel-1数据处理,需要用到拼接三个iw的命令,找了一下 但是这样大的数据提取进来,处理速度很慢,后面可能要进行研究区的裁剪,除了开始用的方法,直接在生成的burst_tab文件里面修改参数:删去自己不需要的iw,也就是下面说的这种方法 在指导手册上面看到了其他的…

前端接口防止重复请求实现方案

虽然大部分的接口处理我们都是加了loading的&#xff0c;但又不能确保真的是每个接口都加了的&#xff0c;可是如果要一个接口一个接口的排查&#xff0c;那这维护了四五年的系统&#xff0c;成百上千的接口肯定要耗费非常多的精力&#xff0c;根本就是不现实的&#xff0c;所以…

使用OpenCV实现人脸特征点检测与实时表情识别

引言&#xff1a; 本文介绍了如何利用OpenCV库实现人脸特征点检测&#xff0c;并进一步实现实时表情识别的案例。首先&#xff0c;通过OpenCV的Dlib库进行人脸特征点的定位&#xff0c;然后基于特征点的变化来识别不同的表情。这种方法不仅准确度高&#xff0c;而且实时性好&am…

Serverless:无服务器架构的魅力与实践

导语&#xff1a;随着云计算的不断发展&#xff0c;无服务器架构&#xff08;Serverless&#xff09;逐渐成为开发人员关注的焦点。本文将为您深入解析 Serverless 的概念、优势、应用场景以及实践经验&#xff0c;带您领略 Serverless 的魅力&#xff01; 一、Serverless 是什…

用python制作专属生日蛋糕

1.原文来自yk坤帝&#xff0c;觉得好玩就记录下来了 import turtle as t import math as m import random as rdef drawX(a, i):angle m.radians(i)return a * m.cos(angle)def drawY(b, i):angle m.radians(i)return b * m.sin(angle)# 设置背景颜色&#xff0c;窗口位置以…

打卡学习kubernetes——了解kubernetes组成及架构

目录 1 什么是kubernetes 2 kubernetes组件 3 kubernetes架构 1 什么是kubernetes kubernetes是一个旨在自动部署、扩展和运行应用容器的开源平台。目标是构建一个生态系统&#xff0c;提供组件和工具以减轻在公共和私有云中运行应用程序的负担。 kubernetes是&#xff1a…

如何使用 CSS 中的 :root 伪类选择器

了解 CSS 的 :root 伪类选择器&#xff0c;以及在项目中可能想要如何使用它&#xff01; CSS 的 :root 伪类选择器用于选择给定规范的最高级父级。在 HTML 规范中&#xff0c;&#xff1a;root 本质上等同于 html 选择器。 在下面的 CSS 片段中&#xff0c;:root 和 html 样式…

deepin23beta中SQLite3数据库安装与使用

SQLite 是一个嵌入式 SQL 数据库引擎&#xff0c;它实现了一个自包含、无服务器、零配置、事务性 SQL 数据库引擎。 SQLite 的代码属于公共领域&#xff0c;因此可以免费用于任何商业或私人目的。 SQLite 是世界上部署最广泛的数据库&#xff0c;其应用程序数量之多&#xff0c…

Linux使用Docker部署Registry结合内网穿透实现公网远程拉取推送镜像

文章目录 1. 部署Docker Registry2. 本地测试推送镜像3. Linux 安装cpolar4. 配置Docker Registry公网访问地址5. 公网远程推送Docker Registry6. 固定Docker Registry公网地址 Docker Registry 本地镜像仓库,简单几步结合cpolar内网穿透工具实现远程pull or push (拉取和推送)…

VUE 运行NPM 报错:npm ERR! code CERT_HAS_EXPIRED 解决方案

现象 由于各种原因需要调试一下VUE代码&#xff0c;用Git拉下来运行不了&#xff08;之前是可以正常运行的&#xff09;&#xff0c;报错为&#xff1a;npm ERR! code CERT_HAS_EXPIRED........... 原因 NPM 证书签名过期了 解决方法 第一步&#xff1a;CMD 命令 查看NPM代理源…