02 解构赋值

解构赋值

1.1 什么是解构赋值

允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值

1.2 数组解构赋值和对象解构赋值的区别

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

2.1 数组的解构赋值

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
//解构数组
let [a,b,c] = [1,2,3]
console.log(a,b,c) //1,2,3
//解构Set
let [x, y, z] = new Set(['a', 'b', 'c']);
console.log(x,y,z)//'a','b','c'
//解构 Generator 函数
function* fibs() {let a = 0;let b = 1;while (true) {yield a;[a, b] = [b, a + b];}
}let [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5

2.2 默认值

解构赋值允许指定默认值
只有当一个数组成员严格等于undefined,默认值才会生效。

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

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

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

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

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: y is not defined

2.3 数组的嵌套结构

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

3.1 对象的解构赋值

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

3.2 对象的嵌套解构

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"}]

下面是另一个例子。

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

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

下面是嵌套赋值的例子

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

对象的解构赋值可以取到继承的属性

const obj1 = {};
const obj2 = { foo: 'bar' };
Object.setPrototypeOf(obj1, obj2);const { foo } = obj1;
foo // "bar"

3.3 对象解构的默认值

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

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

3.4 注意点

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

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

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

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

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

4、字符串的解构赋值

const [a,b,c,d,e] = 'hello';
console.log(a,b,c,d,e) // 'h','e','l','l','o'

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

let {length:len} ='hello';
console.log(len) //5

5、数组和布尔值的解构赋值

解构时,如果等号的右边是数组和字符串,则会先转换为对象

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

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

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

相关文章

如何帮助业务丝滑配置?阿里巴巴用了 11 年的“功能开关” 是什么?

简介:AHAS 功能开关是一个轻量级的动态配置框架,通过功能开关可以动态管理代码中的配置项,根据需求为某个应用开启或关闭部分功能,或设置某个性能指标的阈值。功能开关通常用于设置黑白名单、运行时动态调整日志级别、降级业务功能…

摆脱 AI 生产“小作坊”:如何基于 Kubernetes 构建云原生 AI 平台

简介:本文将介绍和梳理我们对云原生 AI 这个新领域的思考和定位,介绍云原生 AI 套件产品的核心场景、架构和主要能力。 作者:张凯 前言 云原生(Cloud Native)[1]是云计算领域过去 5 年发展最快、关注度最高的方向之一…

Node 之父斥责 Oracle:你们也不用,那请交出 JavaScript 商标!

整理 | 苏宓出品 | CSDN(ID:CSDNnews)也许 13 年前,Oracle 以 74 亿美元收购 Sun Microsystems 公司时,也不会想到自己后续要牵扯到诸多的版权诉讼与投诉的漩涡之中。众所周知,Oracle 在收购 Sun 之后&…

mobx的使用

mobx的使用 1、API mobx-react Provider 包裹根组件,用于传递数据observer 组件变为响应式inject 接收mobx实例(用于类组件)MobXProviderContext mobx observable 声明变量action 声明函数用于修改observable 的值makeObservable 更新状态 2、安装 yarn add mo…

OPLG:新一代云原生可观测最佳实践

简介:OPLG 体系拥有成熟且富有活力的开源社区生态,同时也经过了大量企业生产环境的实践检验,是当下建设新一代云原生统一可观测平台的热门选择。但是,OPLG 只是提供了一个技术体系,如何灵活运用,解决实际问…

EventBridge 集成云服务实践

简介:本篇文章主要向大家分享了通过 EventBridge 如何集成云产品事件源,如何集成云产品事件目标以及通过事件流如何集成消息产品。 作者:李凯(凯易) EvenBridge 集成概述 EventBridge 是阿里云所推出了一款无服务器…

前端性能——数据持久化

如何实现数据持久化 一般情况下,借用本地存储用的比较多,或者一些插件,如vue的keep-alive,配合redux使用的persist 为什么需要数据持久化 1、减少发起请求的次数,从而提高性能。 场景:比如一个网站&…

云原生微服务的下一站,微服务引擎 MSE 升级

简介:管好微服务,成为云原生时代的新难题。 管好微服务,成为云原生时代的新难题。 从建好微服务到管好微服务,差的虽是一个字,连接起两边的却需要大量的微服务落地经验。因为软件架构的核心挑战是解决业务快速增长带…

火爆全网的“数字人”,到底是个啥?

作者 | 小枣君来源 | 鲜枣课堂庄子他老人家说过:“人生,就是一场游戏。”对于这场游戏,有些人玩得很嗨,到了结尾不肯退场,总希望无限期玩下去。例如秦始皇,总想着灵丹妙药、长生不死。还有些人呢&#xff0…

阿里云RemoteShuffleService新功能:AQE和流控

简介:阿里云EMR自2020年推出Remote Shuffle Service(RSS)以来,帮助了诸多客户解决Spark作业的性能、稳定性问题,并使得存算分离架构得以实施。为了更方便大家使用和扩展,RSS在2022年初开源,欢迎各路开发者共建。本文将…

react如何在父组件中调用子组件事件

父组件是如何使用子组件的事件的,下边数值累加的例子 类组件 将子组件的this传到父组件,给父组件添加一个属性,值为this,之后就可以通过父组件的属性调用子组件的事件了 import React,{Component} from react;// 这是子组件 clas…

OpenSergo 正式开源,多家厂商共建微服务治理规范和实现

简介 OpenSergo,Open 是开放的意思,Sergo 则是取了服务治理两个英文单词 Service Governance 的前部分字母 Ser 和 Go,合起来即是一个开放的服务治理项目。 该项目由阿里云、bilibili、字节跳动,以及 Spring Cloud Alibaba、Nacos…

Linux中常见的网络端口号

在使用计算机或智能手机时,我们使用各种硬件端口,如用于音频、HDMI、Type-c 等的 3.5mm 端口,其用于与硬件外围设备通信。同样,网络端口可以让我们在一台计算机上访问各种网络服务来达到通信的目的。因此,端口被认为是…

如何在云原生混部场景下利用资源配额高效分配集群资源?

简介:由于混部是一个复杂的技术及运维体系,包括 K8s 调度、OS 隔离、可观测性等等各种技术,之前的一篇文章《历经 7 年双 11 实战,阿里巴巴是如何定义云原生混部调度优先级及服务质量的?》,主要聚焦在调度优…

前端面试题网址合辑

八个笔试&面试仓库 1.Front-end Developer Interview Questions网址:https://h5bp.org/Front-end-Developer-Interview-Questions/ 2.CS-Interview-knowledge-Map 网址:https://github.com/InterviewMap/CS-Interview-Knowledge-Map 3.Daily-Questio…

稳定性与高可用保障的工作思路

简介:稳定性与高可用性是老生常谈的两个词。凭借经验和感受我们知道,提高系统的这两项指标,系统会更加健康,产品也会有更好的用户体验。但是如果要给稳定性和高可用性下一个定义该如何表述?稳定性和高可用性这二者又有…

招商银行 KubeVela 离线部署实践

简介:本文将以 KubeVela v1.2.5 版本为例,介绍招商银行 KubeVela 的离线部署实践,来帮助其他用户在离线环境中更便捷的完成 KubeVela 的部署。 招商银行云平台开发团队自 2021 年开始接触 KubeVela,并探索 KubeVela 在招商银行云…

腾讯云数据库自研内核全新升级 新架构比原先性能提升20%

9月16日,腾讯云数据库自研内核TXSQL完成了全新升级。搭载了新一代内核的云数据库在性能上较之前提升超过20%,延迟降低80%。目前,新一代内核TXSQL已应用于腾讯云数据库MySQL、分布式数据库TDSQL、云原生数据库TDSQL-C等多款主流云数据库产品中…

系统性能分析从入门到进阶

简介:本文以系统为中心, 结合日常工作和用例, 由浅入深地介绍了性能分析的一些方法和体会, 希望对想了解系统性能分析的同学有所帮助。 作者 | 勿非 本文以系统为中心, 结合日常工作和用例, 由浅入深地介绍了性能分析的一些方法和体会, 希望对想了解系统性能分析的…

百度地图实用案例

1、创建一个js文件 export function BMPGL(ak) {return new Promise(function (resolve, reject) {window.init function () {// eslint-disable-next-lineresolve(BMapGL)}const script document.createElement(script)script.type text/javascriptscript.src http://api…