首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >ECMAScript6基础学习教程(三)变量的解构赋值

ECMAScript6基础学习教程(三)变量的解构赋值

作者头像
娜姐
发布于 2022-05-13 06:30:33
发布于 2022-05-13 06:30:33
38300
代码可运行
举报
文章被收录于专栏:娜姐聊前端娜姐聊前端
运行总次数:0
代码可运行

“解构赋值”是ES6亮点之一,其简化了对数组和对象的部分属性赋值操作。

解构赋值分为两种:数组和对象。

1.数组的解构赋值

ES中,如果取某个数组部分值进行赋值,必须写成如下方式:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var array = [1,2,3];
var a = array[0];  // 1
var b = array[1];  // 2
...

有些啰嗦,不是吗?在ES6中,可以简写成:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var [a, b, c] = [1, 2, 3]; // a===1; b===2; c===3
//也可以只取部分值
var [, b, ,] = [1, 2, 3]; // b === 2
// rest参数:可以利用...取剩余值
var [a, ...b] = [1, 2, 3]; // b === [2,3]
// 注意:余值必须是数组变量的最后一个元素值
var [a, ...b, c] = [1, 2, 3]; // SyntaxError: Rest element must be last element in array

从上面例子可以看出,如果做数组的解构赋值,需要将变量也声明为数组,并且,变量的取值由它的位置决定。第一个变量对应数组下标为0的值,第二个变量对应数组下标为1的值...以此类推。

并且,可以用rest参数...取余值。

(1) 指定默认值

解构赋值运行指定默认值(用全等运算符? === undefined判断一个位置是否有值)。例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var [a=4] = []; // a===4
// 等号右边数组的第三个元素值为undefined,命中“空值”条件
var [a, b, c ='str'] = [1, 2, undefined]; // c ==='str'
// 等号右边数组的第三个元素值为null,不属于“空值”
var [a, b, c ='str'] = [1, 2, null]; // c ===null

默认值也可以是变量。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var [a=1, b=a+1] = []; // a===1; b ===2
(2) 注意事项
  1. 如果解构不成功,但是等号右边值为数组类型,则变量赋值为undefined
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var [a] = []; // a===undefined
  1. 如果等号右边值不是数组类型,那么解构失败。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var [a] = false; // TypeError: undefined is not a function
2.对象的解构赋值

和数组不同,对象的解构赋值与对象属性顺序无关,而是根据变量和属性名一一对应,从而取得正确的值。例子如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var {a, b} = {a: 1, b:2}; // a===1; b===2;
var {b, a} = {a: 1, b:2}; // a===1; b===2;
// 给变量取别名
var {a:x, b:y} = {a: 1, b: 2}; // x===1; y ===2
// rest参数:利用...取对象属性余值
var {a, b, ...c} = { a:1, b:2, x: 3, y:4}; // c === {x: 3, y:4}

对象解构赋值的内部机制,是先找到同名属性,然后再赋值给相应的变量。也就是说,var {a, b} = {a: 1, b:2};的完整写法应该是var {a:a, b:b} = {a: 1, b:2};

同样,对象的解构赋值也支持rest参数...(此特性属于ES7范畴,但是babel已经支持此功能)。

(1) 指定默认值

对象的解构赋值也可以指定默认值,用法和数组解构类似(用undefined全等判断空值)。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var {x=3} = {}; // x===3;
(2) 注意事项

如果将一个已经声明的变量用于对象解构,那么,需要在解构赋值语句外面加()

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var x; 
{x} = {x:123}; //SyntaxError: Unexpected token =
({x} = {x:123}); // x === 123

不加()之所以会报错,是因为JavaScript引擎会将{x}解析为一个代码块,所以执行到=时,无法找到赋值对象,从而报错。为了避免将大括号{}解析为代码块,我们可以将赋值语句放在小括号()中。

3. 小结
(1) 函数参数的解构赋值

解构赋值常用应用场景是函数参数赋值。利用解构赋值,可以简化参数取值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 场景一:解析对象属性值
function test({a, b, c}) {
    return a+b+c;
}
test({a:1, b:2, c:3}); // 6
// 场景二:解析数组元素值
var total = [[1,2], [3,4]].map(function ([a, b]) {
    return a+b;
}); // [3, 7]
(2) rest参数

数组和对象解构都支持rest参数...,要注意,rest参数是浅复制,并且,不能复制继承对象的原型属性。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let obj = {a: {b:1}};
let {...x} = obj; // x==={a: {b:1}}
obj.a.b = 2; // x ==={a: {b:2}}

下一节:ECMAScript6基础学习教程(四)函数

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-05-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
深度学习中的数学(二)——线性代数
线性可分的定义:线性可分就是说可以用一个线性函数把两类样本分开,比如二维空间中的直线、三维空间中的平面以及高维空间中的超平面。(所谓可分指可以没有误差地分开;线性不可分指有部分样本用线性分类面划分时会产生分类误差的情况。)
润森
2022/09/22
9790
深度学习中的数学(二)——线性代数
深度学习-数学基础
目前主要有两种度量模型深度的方式。第一种方式是基于评估架构所需执行的顺序指令的数目。假设我们将模型表示为给定输入后,计算对应输出的流程图,则可以将这张流程图中的最长路径视为模型的深度。另一种是在深度概率模型中使用的方法,它不是将计算图的深度视为模型深度,而是将描述概念彼此如何关联的图的深度视为模型深度。在这种情况下,计算每个概念表示的计算流程图的深度可能比概念本身的图更深。这是因为系统对较简单概念的理解在给出更复杂概念的信息后可以进一步精细化
范中豪
2019/09/10
9020
深度学习-数学基础
【机器学习基础】机器学习的数学基础
  作为一门以数据及其模型为研究对象的学科,优化模型、分析模型性能等都需要数学手段的帮助。和其他学科一样,数学可以帮我们更清晰地描述和理解机器学习算法,也可以从理论上证明算法的有效性,是机器学习中必不可少的一环。本文将会介绍机器学习中常用的数学工具,为后面的学习打下基础。
Francek Chen
2025/01/23
2760
【机器学习基础】机器学习的数学基础
深度学习系列笔记(二)
我们定义一个包含向量中元素索引的集合,然后将集合写在脚标处,表示索引向量中的元素。比如,指定 x_1、x_3、x_6​​ ​,我们定义集合S={1,3,6}​ ,然后写作 x_S​ 。
Marigold
2022/06/17
1.4K0
深度学习系列笔记(二)
《deep learning》学习笔记(2)——线性代数
http://blog.csdn.net/u011239443/article/details/77942575
小爷毛毛_卓寿杰
2019/02/13
5530
《deep learning》学习笔记(2)——线性代数
呆在家无聊?何不抓住这个机会好好学习!
本公众号一向坚持的理念是数据分析工具要从基础开始学习,按部就班,才能深入理解并准确利用这些工具。鼠年第一篇原创推送比较长,将从基础的线性代数开始。线性代数大家都学过,但可能因为联系不到实用情况,都还给了曾经的老师。线性代数是数理统计尤其是各种排序分析的基础,今天我将以全新的角度基于R语言介绍线性代数,并手动完成PCA分析,从而强化关于线性代数和实际数据分析的联系。
SYSU星空
2022/05/05
8620
呆在家无聊?何不抓住这个机会好好学习!
机器学习数学基础--线性代数
换种表达方式,线性无关是说:其中任意一个向量都不在其他向量张成空间中,也就是对所有的
Ai学习的老章
2019/05/10
1.2K0
机器学习数学基础--线性代数
万字长文带你复习线性代数!
课程主页:http://speech.ee.ntu.edu.tw/~tlkagk/courses_LA16.html
石晓文
2018/12/25
1.7K0
万字长文带你复习线性代数!
我的机器学习线性代数篇观点向量矩阵行列式矩阵的初等变换向量组线性方程组特征值和特征向量几个特殊矩阵QR 分解(正交三角分解)奇异值分解向量的导数
前言: 线代知识点多,有点抽象,写的时候尽量把这些知识点串起来,如果不行,那就两串。其包含的几大对象为:向量,行列式,矩阵,方程组。 观点 核心问题是求多元方程组的解,核心知识:内积、秩、矩阵求逆,应用:求解线性回归、最小二乘法用QR分解,奇异值分解SVD,主成分分析(PCA)运用可对角化矩阵 向量 基础 向量:是指具有n个互相独立的性质(维度)的对象的表示,向量常 使用字母+箭头的形式进行表示,也可以使用几何坐标来表示向量。 单位向量:向量的模、模为一的向量为单位向量 内积又叫数量积
DC童生
2018/04/27
1.9K0
我的机器学习线性代数篇观点向量矩阵行列式矩阵的初等变换向量组线性方程组特征值和特征向量几个特殊矩阵QR 分解(正交三角分解)奇异值分解向量的导数
【读书笔记】之矩阵知识梳理
这篇笔记,主要记录花书第二章关于线性代数知识的回顾。希望把常用的概念和公式都记录下来,同时标记编号(为了方便,标记序号与书中一致),在后续公式推导过程中可以直接关联使用。 梳理成文章,主要
用户1594945
2018/07/20
9310
【机器学习】在向量的流光中,揽数理星河为衣,以线性代数为钥,轻启机器学习黎明的瑰丽诗章
在正式踏入机器学习的实战领域前,我们需要为自己筑起一座坚实的数学地基。 对于零基础的学习者而言,数学听起来也许陌生甚至有点“吓人”。然而,不必惧怕:本篇文章将带你从最直观的概念出发,帮助你理解和掌握线性代数这门支撑机器学习大厦的重要支柱。
半截诗
2025/01/09
2470
博客 | MIT—线性代数(上)
在中国不知所以的《线性代数》教材的目录排版下,当前大多数本土毕业生均能熟练使用公式计算行列式或求解线性方程组,却丝毫不能体会线性代数真正内涵的精髓所在。包括我在内,在学习机器学习那满篇的矩阵表示更是让人头痛欲裂,这让我事实上感受到了线性代数才是机器学习中最重要的数学工具,因此不得不静下心来按照网易名校公开课—“MIT线性代数”重学一遍,受到的启发超乎想象,线性代数新世界的大门似乎也对我缓缓打开,遂有了这两篇学习笔记,供自己或有兴趣的小伙伴后续参考。
AI研习社
2018/12/28
2.7K1
博客 | MIT—线性代数(上)
「Deep Learning」读书系列分享第二章:线性代数 | 分享总结
「Deep Learning」这本书是机器学习领域的重磅书籍,三位作者分别是机器学习界名人、GAN 的提出者、谷歌大脑研究科学家 Ian Goodfellow,神经网络领域创始三位创始人之一的蒙特利尔大学教授 Yoshua Bengio(也是 Ian Goodfellow 的老师)、同在蒙特利尔大学的神经网络与数据挖掘教授 Aaron Courville。只看作者阵容就知道这本书肯定能够从深度学习的基础知识和原理一直讲到最新的方法,而且在技术的应用方面也有许多具体介绍。这本书面向的对象也不仅是学习相关专业的
AI研习社
2018/03/19
1.1K0
「Deep Learning」读书系列分享第二章:线性代数 | 分享总结
Deep Learning Chapter01:机器学习中线性代数
好久不见,大家好,我是北山啦。机器学习当中需要用到许多的数学知识,如今博主又要继续踏上深度学习的路程,所以现在在网上总结了相关的考研数学和机器学习中常见相关知识如下,希望对大家有所帮助。
北山啦
2022/10/31
5340
Deep Learning Chapter01:机器学习中线性代数
MADlib——基于SQL的数据挖掘解决方案(4)——数据类型之矩阵
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wzy0623/article/details/78904700
用户1148526
2019/05/25
2.1K0
线性代数整理(三)行列式特征值和特征向量
比方说在二维平面中,这里有三组二维向量,每组都有两个向量,那么每组向量的面积就可以表示它们的不同。当然这里说面积是针对二维平面来说的,在三维空间中,就是体积;在更高维度中,可能就是一个体,但这个体比较抽象
算法之名
2021/03/04
2.8K0
线性代数(持续更新中)
当 a\times d-b\times c=0 时 A 没有定义,A^{-1}不存在,则 A 是奇异矩阵。
浪漫主义狗
2023/09/04
3840
线性代数(持续更新中)
博客 | MIT—线性代数(下)
1、 投影矩阵与最小二乘:向量子空间投影在机器学习中的应用最为广泛。就拿最小二乘的线性拟合来说,首先根据抽样特征维度假设线性方程形式,即假设函数。
AI研习社
2018/12/28
1.5K0
博客 | MIT—线性代数(下)
机器学习的数学基础
向量空间一组基中的向量如果两两正交,就称为正交基;若正交基中每个向量都是单位向量,就称其为规范正交基。
iOSDevLog
2019/05/30
1.4K0
开发者必读:计算机科学中的线性代数(附论文)
来源:机器之心 作者:Petros Drineas、Michael W. Mahoney 本文共3994字,建议阅读6分钟。 本文为你分享一篇来自普渡大学与UC Berkeley两位教授的概述论文中的线性代数知识。 矩阵计算在计算机科学中占有举足轻重的地位,是每个开发者都需要掌握的数学知识。近日,来自普渡大学的 Petros Drineas 与 UC Berkeley 的 Michael Mahoney 提交了一篇概述论文《Lectures on Randomized Numerical Linear
数据派THU
2018/01/29
2.4K0
开发者必读:计算机科学中的线性代数(附论文)
推荐阅读
相关推荐
深度学习中的数学(二)——线性代数
更多 >
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档