位置: IT常识 - 正文

ES6 --- 解构赋值(数组,对象,函数)使用详解(es6解构赋值对象)

编辑:rootadmin
ES6 --- 解构赋值(数组,对象,函数)使用详解 解构赋值

推荐整理分享ES6 --- 解构赋值(数组,对象,函数)使用详解(es6解构赋值对象),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:es6解构赋值是浅拷贝,es6解构赋值 剩余,es6解构赋值数组对象,es6解构赋值是浅拷贝,es6解构赋值是浅拷贝,es6解构赋值有哪几种,es6解构赋值是浅拷贝,es6解构赋值是浅拷贝,内容如对您有帮助,希望把文章链接给更多的朋友!

JavaScript 中最常用的两种数据结构是 Object 和 Array。

对象让我们能够创建通过键来存储数据项的单个实体。数组则让我们能够将数据收集到一个有序的集合中。

但是,当我们把它们传递给函数时,函数可能不需要整个对象/数组。它可能只需要对象/数组的一部分。

解构赋值 是一种特殊的语法,它使我们可以将数组或对象“拆包”至一系列变量中,因为有时这样更方便。

解构操作对那些具有很多参数和默认值等的函数也很奏效。我们马上会看到类似的例子。

数组解构

下面是一个将数组解构到变量中的例子:

// 我们有一个存放了名字和姓氏的数组let arr = ["John", "Smith"]// 解构赋值// sets firstName = arr[0]// and surname = arr[1]let [firstName, surname] = arr;alert(firstName); // Johnalert(surname); // Smith

现在我们就可以针对这些变量进行操作,而不是针对原来的数组元素。

当与 split 函数(或其他返回值是数组的函数)结合使用时,看起来就更优雅了:

let [firstName, surname] = "John Smith".split(' ');alert(firstName); // Johnalert(surname); // Smith

正如我们所看到的,语法很简单。但是有几个需要注意的细节。让我们通过更多的例子来加深理解。

“解构”并不意味着“破坏”

这种语法叫做“解构赋值”,因为它通过将结构中的各元素复制到变量中来达到“解构”的目的。但数组本身是没有被修改的。

这只是下面这些代码的更精简的写法而已:

// let [firstName, surname] = arr;let firstName = arr[0];let surname = arr[1];

忽略使用逗号的元素

数组中不想要的元素也可以通过添加额外的逗号来把它丢弃:

// 不需要第二个元素let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];alert( title ); // Consul

在上面的代码中,数组的第二个元素被跳过了,第三个元素被赋值给了 title 变量,数组中剩下的元素也都被跳过了(因为在这没有对应给它们的变量)。

等号右侧可以是任何可迭代对象

……实际上,我们可以将其与任何可迭代对象一起使用,而不仅限于数组:

let [a, b, c] = "abc"; // ["a", "b", "c"]let [one, two, three] = new Set([1, 2, 3]);

这行得通,因为在内部,结构赋值是通过迭代右侧的值来完成工作的。这是一种用于对在 = 右侧的值上调用 for..of 并进行赋值的操作的语法糖。

赋值给等号左侧的任何内容

我们可以在等号左侧使用任何“可以被赋值的”东西。

例如,一个对象的属性:

let user = {};[user.name, user.surname] = "John Smith".split(' ');alert(user.name); // Johnalert(user.surname); // Smith

与 .entries() 方法进行循环操作

在前面的章节中我们已经见过了 Object.entries(obj) 方法。

我们可以将 .entries() 方法与解构语法一同使用,来遍历一个对象的“键—值”对:

let user = { name: "John", age: 30};// 循环遍历键—值对for (let [key, value] of Object.entries(user)) { alert(`${key}:${value}`); // name:John, then age:30}

用于 Map 的类似的代码更简单,因为它是可迭代的:

let user = new Map();user.set("name", "John");user.set("age", "30");// Map 是以 [key, value] 对的形式进行迭代的,非常便于解构for (let [key, value] of user) { alert(`${key}:${value}`); // name:John, then age:30}

交换变量值的技巧

有一个著名的使用结构赋值来交换两个变量的值的技巧:

let guest = "Jane";let admin = "Pete";// 让我们来交换变量的值:使得 guest = Pete,admin = Jane[guest, admin] = [admin, guest];alert(`${guest}${admin}`); // Pete Jane(成功交换!)ES6 --- 解构赋值(数组,对象,函数)使用详解(es6解构赋值对象)

这里我们创建了一个由两个变量组成的临时数组,并且立即以交换了的顺序对其进行了解构。

我们可以用这种方式交换两个以上的变量。

其余的 ‘…’

通常,如果数组比左边的列表长,那么“其余”的数组项会被省略。

例如,这里只取了两项,其余的就被忽略了:

let [name1, name2] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];alert(name1); // Juliusalert(name2); // Caesar// 其余数组项未被分配到任何地方

如果我们还想收集其余的数组项 —— 我们可以使用三个点 "..." 来再加一个参数以获取“其余”数组项:

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];// rest 是包含从第三项开始的其余数组项的数组alert(rest[0]); // Consulalert(rest[1]); // of the Roman Republicalert(rest.length); // 2

rest 的值就是数组中剩下的元素组成的数组。

不一定要使用变量名 rest,我们也可以使用任何其他的变量名,只要确保它前面有三个点,并且在解构赋值的最后一个参数位置上就行了。

let [name1, name2, ...titles] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];// 现在 titles = ["Consul", "of the Roman Republic"]默认值

如果数组比左边的变量列表短,这里也不会出现报错。缺少的值被认为是 undefined:

let [firstName, surname] = [];alert(firstName); // undefinedalert(surname); // undefined

如果我们想要一个“默认”值给未赋值的变量,我们可以使用 = 来提供:

// 默认值let [name = "Guest", surname = "Anonymous"] = ["Julius"];alert(name); // Julius(来自数组的值)alert(surname); // Anonymous(默认值被使用了)

默认值可以是更加复杂的表达式甚至可以是函数调用,这些表达式或函数只会在这个变量未被赋值的时候才会被计算。

举个例子,我们使用了 prompt 函数来提供两个默认值:

// 只会提示输入姓氏let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];alert(name); // Julius(来自数组)alert(surname); // 你输入的值

请注意:prompt 将仅针对缺失值(surname)运行。

对象解构

解构赋值同样适用于对象。

基本语法是:

let {var1, var2} = {var1:…, var2:…}

在等号右侧应该有一个已经存在的对象,我们想把它拆分到变量中。等号左侧包含了对象相应属性的一个类对象“模式(pattern)”。在最简单的情况下,等号左侧的就是 {...} 中的变量名列表。

举个例子:

let options = { title: "Menu", width: 100, height: 200};let {title, width, height} = options;alert(title); // Menualert(width); // 100alert(height); // 200

属性 options.title、options.width 和 options.height 值被赋给了对应的变量。

变量的顺序并不重要,下面这个代码也奏效:

// 改变 let {...} 中元素的顺序let {height, width, title} = { title: "Menu", height: 200, width: 100 }

等号左侧的模式(pattern)可以更加复杂,并且指定了属性和变量之间的映射关系。

如果我们想把一个属性赋值给另一个名字的变量,比如把 options.width 属性赋值给名为 w 的变量,那么我们可以使用冒号来设置变量名称:

let options = { title: "Menu", width: 100, height: 200};// { sourceProperty: targetVariable }let {width: w, height: h, title} = options;// width -> w// height -> h// title -> titlealert(title); // Menualert(w); // 100alert(h); // 200

冒号表示“什么值:赋值给谁”。上面的例子中,属性 width 被赋值给了 w,属性 height 被赋值给了 h,属性 title 被赋值给了同名变量。

对于可能缺失的属性,我们可以使用 "=" 设置默认值,如下所示:

let options = { title: "Menu"};let {width = 100, height = 200, title} = options;alert(title); // Menualert(width); // 100alert(height); // 200

就像数组或函数参数一样,默认值可以是任意表达式甚至可以是函数调用。它们只会在未提供对应的值时才会被计算/调用。

在下面的代码中,prompt 提示输入 width 值,但不会提示输入 title 值:

let options = { title: "Menu"};let {width = prompt("width?"), title = prompt("title?")} = options;alert(title); // Menualert(width); // (prompt 的返回值)

我们还可以将冒号和等号结合起来:

let options = { title: "Menu"};let {width: w = 100, height: h = 200, title} = options;alert(title); // Menualert(w); // 100alert(h); // 200

如果我们有一个具有很多属性的复杂对象,那么我们可以只提取所需的内容:

let options = { title: "Menu", width: 100, height: 200};// 仅提取 title 作为变量let { title } = options;alert(title); // Menu剩余模式(pattern)"…"

如果对象拥有的属性数量比我们提供的变量数量还多,该怎么办?我们可以只取其中的某一些属性,然后把“剩余的”赋值到其他地方吗?

我们可以使用剩余模式(pattern),就像我们对数组那样。一些较旧的浏览器不支持此功能(例如,使用 Babel 对其进行填充),但可以在现代浏览器中使用。

看起来就像这样:

let options = { title: "Menu", height: 200, width: 100};// title = 名为 title 的属性// rest = 存有剩余属性的对象let {title, ...rest} = options;// 现在 title="Menu", rest={height: 200, width: 100}alert(rest.height); // 200alert(rest.width); // 100

不使用 let 时的陷阱

在上面的示例中,变量都是在赋值中通过正确方式

本文链接地址:https://www.jiuchutong.com/zhishi/300786.html 转载请保留说明!

上一篇:2022最全最新前端面试题(附加解答)(20221年最新)

下一篇:openprompt使用记录:分类,生成案例(openprop教程)

  • 微信Windows3.3.5正式版更新了什么(微信 windows 3.3.0)

    微信Windows3.3.5正式版更新了什么(微信 windows 3.3.0)

  • iphone13怎么隐藏相册(iphone13怎么隐藏刘海屏)

    iphone13怎么隐藏相册(iphone13怎么隐藏刘海屏)

  • 萤石摄像头被别人绑定了怎么解绑(萤石摄像头被别人添加)

    萤石摄像头被别人绑定了怎么解绑(萤石摄像头被别人添加)

  • 微信怎么邀请对方成为监护人(微信怎么邀请对方赠送亲属卡)

    微信怎么邀请对方成为监护人(微信怎么邀请对方赠送亲属卡)

  • iqoou1充电口是什么类型(iqoou1是什么充电接口)

    iqoou1充电口是什么类型(iqoou1是什么充电接口)

  • apple验证码发哪去了(apple的验证码)

    apple验证码发哪去了(apple的验证码)

  • vivo手机忘记锁屏密码(vivo手机忘记锁屏密码怎么办)

    vivo手机忘记锁屏密码(vivo手机忘记锁屏密码怎么办)

  • 微博可以不让别人看到动态吗(微博可以不让别人看吗)

    微博可以不让别人看到动态吗(微博可以不让别人看吗)

  • vivo手机发烫电量消耗快是什么原因(vivo手机发烫电量消耗快什么原因)

    vivo手机发烫电量消耗快是什么原因(vivo手机发烫电量消耗快什么原因)

  • windows源无效怎么回事(windows源无效是什么意思)

    windows源无效怎么回事(windows源无效是什么意思)

  • 腾讯最多几个人同时用(腾讯最多几个人登陆)

    腾讯最多几个人同时用(腾讯最多几个人登陆)

  • 抖音拍的视频不发布怎么保存到手机(抖音拍的视频不小心返回了还能找到吗)

    抖音拍的视频不发布怎么保存到手机(抖音拍的视频不小心返回了还能找到吗)

  • 6g独显什么意思(6g独显的显卡)

    6g独显什么意思(6g独显的显卡)

  • 2060s配什么cpu(2060s配什么cpu和主板好)

    2060s配什么cpu(2060s配什么cpu和主板好)

  • 小米9来电秀怎么设置(小米9来电秀怎么设置自己的视频)

    小米9来电秀怎么设置(小米9来电秀怎么设置自己的视频)

  • 服务器是什么(服务器是什么意思)

    服务器是什么(服务器是什么意思)

  • 苹果手机自动扣费怎么关闭(苹果手机自动扣款了可以退款吗)

    苹果手机自动扣费怎么关闭(苹果手机自动扣款了可以退款吗)

  • qq获取地理位置失败是什么原因(qq获取位置信息)

    qq获取地理位置失败是什么原因(qq获取位置信息)

  • 抖音删作品就不被推荐了吗(抖音删作品 不利)

    抖音删作品就不被推荐了吗(抖音删作品 不利)

  • 余额宝体验金怎么分享好友(余额宝体验金怎么查看)

    余额宝体验金怎么分享好友(余额宝体验金怎么查看)

  • 淘宝怎么清空可能认识的人(怎样清空淘宝所有记录)

    淘宝怎么清空可能认识的人(怎样清空淘宝所有记录)

  • 手机锁屏时间怎么移动(手机锁屏时间怎么换位置)

    手机锁屏时间怎么移动(手机锁屏时间怎么换位置)

  • 微信地理位置怎么打开(微信地理位置怎么删除)

    微信地理位置怎么打开(微信地理位置怎么删除)

  • 拼多多满返的钱在哪里(拼多多满返的钱怎么提现)

    拼多多满返的钱在哪里(拼多多满返的钱怎么提现)

  • soul被封了怎么解除(soul封禁的账号怎么解封)

    soul被封了怎么解除(soul封禁的账号怎么解封)

  • 抖音怎样配本地音乐(抖音怎么使用本地音乐配乐)

    抖音怎样配本地音乐(抖音怎么使用本地音乐配乐)

  • 固定资产报废收入
  • 计提增值税的会计凭证
  • 如何计算土地增值税的增值额
  • 管家婆软件记账流程
  • 企业所得税季报时间
  • 发票号码代码不合法
  • 酒店购买餐具会计分录
  • 代扣个人所得税现金流入哪个科目?
  • 企业取得非货币性收入
  • 没有土地使用证的房子拆迁怎么办
  • 企业职工遣散费标准
  • 应付账款发生额在哪方
  • 付给其他公司的利息怎么做账
  • 股权转让后没有给转让费怎么办
  • 公司的样品一般怎么处理
  • 记账凭证广告费
  • 简易征收不动产租赁税率是多少
  • 2020退税时间超过了怎么办
  • 单次劳务费税率
  • 广告发布税收编码
  • 资管新规出台目的
  • 增值税专用发票电子版
  • 金税盘年费如何做账
  • 个人承担的社保计入管理费用吗
  • 股权转让收到钱会计分录
  • 资产评估溢价部分如何处理?
  • 对公账户转账有延迟吗
  • 加计抵减申报表填写视频
  • 上月没交社保本人能交吗
  • 企业计提的坏帐会计分录
  • 结转收入怎么计算
  • 房产税和城镇土地使用税
  • 不予抵扣的进项税额是什么意思
  • 工厂返费能拿到吗
  • 开发商卖房子要交多少营业税
  • 应交税金应交增值税科目设置
  • html关于边框的代码
  • 固定资产一次性折旧政策2023
  • linuxulator
  • 七姐妹悬崖是怎样形成
  • 小微企业免征增值税优惠
  • 研发费用范围归集不正确
  • 递延所得税资产借贷方向
  • python模块的扩展名
  • 辅助生产车间照明费用计入什么科目
  • 离岸价的含义
  • db2入门
  • macos添加用户
  • 小规模纳税人零售收入含税吗
  • 公司年度汇算清缴费用多少
  • 预提房租会计分录怎么填
  • 低值易耗品属于周转材料吗
  • 融资租赁会计处理实例承租人
  • 投资性房地产的定义
  • 应收票据背书支付是什么
  • 购买原材料还没发票
  • 不动产租赁属于什么税目
  • 会计错账的更正方法及适用范围
  • 建账时必须输入的内容有哪些
  • mysql基本sql语句大全(基础用语篇)
  • mysql主从复制原理详解
  • instmsiw.exe进程简介
  • win10系统玩游戏卡
  • win10系统无法进入
  • 批处理命令是什么语言
  • AndroidSharedpreference数据共享
  • shell脚本编程100例
  • Jquery通过ajax请求NodeJS返回json数据实例
  • ThreadPool.RegisterWaitForSingleObject 设置等待超时事件
  • js怎么设置字体
  • jquery作品
  • flask框架官方文档
  • 入户走访时宣传内容
  • 曲靖市税务局领导班子
  • ppr管材税收编码
  • 深圳税务局实名注册
  • 个人所得税怎么扣除
  • 新疆国税网
  • 常设机构怎么缴纳所得税
  • 财税65号第一条
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设