一文搞懂ES6解构

2023-11-05

ES6引入了一个新的语法特性,名为解构(destructuring),把这个功能可以看作是一个结构化赋值(structured assignment)方法。

1 解构简介

1.1 考虑下面的场景:给a,b,c赋值需要借用一个中间变量tmp

function foo() {
    return [1,2,3];
}
var tmp = foo(),a = tmp[0], b = tmp[1], c = tmp[2];
console.log( a, b, c ); // 1 2 3

1.2 有了数组解构后,代码可简化为下列代码,无需再借用中间变量

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

1.3除了数组可以解构外,对象也可以解构,示例如下

function bar() {
    return {
        x: 4,
        y: 5,
        z: 6
    }
}
var {x:xx,y:yy,z:zz}=bar()//解构
console.log( xx, yy, zz );// 4 5 6

解释:var{x:xx,y:yy,z:zz}=bar(),其中x是源字段,是bar()中返回的字段;xx是目标字段,即将bar()中x的值赋值给字段xx。当然我们可以取bar()中的部分字段,例如var{x:xx,y:yy}=bar(),这样,一行解构语句即可实现提取所需字段且赋值给指定变量的功能。very nice!

2.解构是一个通用的赋值操作

2.1 解构不仅可以声明和赋值同时进行,也可以先声明变量,解构用于赋值

var a, b, c, x, y, z;
[a, b, c] = foo();
( { x, y, z } = bar() );//
console.log( a, b, c );// 1 2 3
console.log( x, y, z );/ 4 5 6

特别对于对象解构形式来说,如果省略了var/let/const声明符,就必须把整个赋值表达式用( )括起来。因为如果不这样做,语句左侧的{..}作为语句中的第一个元素就会被当作是一个块语句而不是一个对象。实际上,赋值表达式(a、y等)并不必须是变量标识符。

2.2 任何合法的赋值表达式都可以,示例如下

var o = {};
[o.a, o.b, o.c] = foo();
( { x: o.x, y: o.y, z: o.z } = bar() );
console.log( o.a, o.b, o.c );       // 1 2 3
console.log( o.x, o.y, o.z );       // 4 5 6

2.3 甚至可以在解构中使用计算出的属性表达式

var which = "x",
o = {};
( { [which]: o[which] } = bar() );
console.log( o.x );                 // 4

这个很有用,因为有时我们的变量名是动态的,需要通过取到另一个变量的值作为所需的变量名。

2.4 等号后面可以是任何数组或者对象,而不一定是返回数组或对象的函数

var o1 = { a: 1, b: 2, c: 3 },
o2 = {};
( { a: o2.x, b: o2.y, c: o2.z } = o1 );
console.log( o2.x, o2.y, o2.z );    // 1 2 3

2.5 可以把一个对象映射为一个数组

 var o1 = { a: 1, b: 2, c: 3 },
a2 = [];
( { a: a2[0], b: a2[1], c: a2[2] } = o1 );
console.log( a2 ); // [1,2,3]

2.6 可以把一个数组映射为一个对象

var a1 = [ 1, 2, 3 ],
o2 = {};
[ o2.a, o2.b, o2.c ] = a1;
console.log( o2 );    // {a: 1, b: 2, c: 3}

2.7 不用临时变量,交换两个变量

var x = 10, y = 20;
[ y, x ] = [ x, y ];
console.log( x, y );// 20 10

3.重复赋值

对象解构形式允许多次列出同一个源属性。举例来说:

var { a: X, a: Y } = { a: 1 };
X;  // 1
Y;  // 1

4.解构无法解除双向绑定,当取到的值是引用型时,如果将取到的值改掉,原值也将被修改

var X,Y;
( { a: X, a: Y, a: [ Z ] } = { a: [ 1 ] } );
X.push( 2 );
Y[0] = 10;
console.log(X);  // [10,2]
console.log(Y);  // [10,2]
console.log(Z);  // 1

ES6的解构介绍到这儿就全部结束了,希望能够对大家有些许帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

一文搞懂ES6解构 的相关文章

随机推荐

  • Docker学习研究笔记(三)

    Docker安装 Docker 支持以下的centos 版本 Centos 7 64 bit Centos 6 5 64 bit 目前 centos 仅发行版本的内容支持 docker Docker 运行在 centos 7上 要求系统为6
  • 52道常见Python面试题,你来试一试?

    最近有很多人找小编询问python求职面试的一些情况 python岗位众多 面试官的个性也千人千面 其实是没有固定的套路的 还是一句老话 要成功拿下一个重要的面试 靠的是 台上三分钟 台下几年功 小编虽然没有套路 但是有干货呀 最近整理近一
  • gcc常用选项及常见的文件格式,扩展名

    gcc常用选项 编译过程 预处理 编译 汇编 链接 gcc的选项 必须分开给出 x 语言名 指出后面文件的语言 c 编译 汇编源文件 生成目标文件 S 编译不汇编 生成汇编文件 E 预处理 输出送到标准输出 o 指定输出的文件名 pipe
  • ext4 delay allocation之ext4_writepages页回写源码剖析

    概述 ext4 write写入pagecache之后 再合适的时机会回写到磁盘 ext4文件系统中是通过ext4 writepages写入磁盘 本来将在源码角度分析该过程 建议先参照ext4 delay allocation数据结构 ngi
  • 2022尚硅谷SSM框架跟学(三)MyBatis基础三

    2022尚硅谷SSM框架跟学 三 MyBatis基础三 9 动态SQL 9 1if 9 2where 方法一 加入恒成立的条件 方法二 使用where标签 9 3trim 9 4choose when otherwise 9 5foreac
  • Hive中运行任务报错:Error during job, obtaining debugging information...

    错误 Ended Job job 1545829388777 0070 with errors Error during job obtaining debugging information FAILED Execution Error
  • 华为od机考题目-分苹果

    A B两个人把苹果分成两队 A希望按照他的计算规则等分苹果 他的计算规则时按照二进制加法计算的 并且不计算走位 B的计算规则时十进制加法 包括正常进位 B希望在满足A的情况下获得苹果的重量最多 输入苹果的数量和每个苹果的重量 输出满足A的情
  • 编写程序,输入一个1~7之间的整数,输出该数字对应星期的英文单词。若数字超出范围,输出相应的提示信息。

    编写程序 输入一个1 7之间的整数 输出该数字对应星期的英文单词 若数字超出范围 输出相应的提示信息 例如 输入1输出Monday 输入7输出Sunday 运行结果示例1 运行结果示例2 运行结果示例3 1 7 8 Monday Sunda
  • 真题详解(补码转换)-软件设计(七十四)

    真题详解 索引查询 软件设计 七十三 https blog csdn net ke1ying article details 130659024 Composite模式 以树形结构来表示 整体 部分 的关系 使得单个和团体的使用都具有一致性
  • unity3d asset store 的资源下载到本地的目录

    之前一直不知道unity3d asset stored额资源下载在本地什么目录的 也不知道是不是我用的破解版的原因 下载的资源有一部分导入不成功 包解压错误的消息 我确定是没有中文目录 但是一直无解 本地目录也找不到 照成我长期没办法用as
  • 别踩坑!使用MySQL唯一索引请注意

    背景 在程序设计中 我们往往需要确保数据的唯一性 比如在常见的注册模块 我们需要确保一个手机号只能注册为一个账号 这种情况下 我们的程序往往是第一道关卡 用户来注册之前 首先判断这个手机号是否已经注册 如果已经注册则返回错误信息 或直接去登
  • 122-124

    7 123 冬奥会的好项目 滑雪 while True try R C map int input split mat 高度矩阵 dic 记录每一个高度在矩阵中的位置 ele list 所有高度组成的列表 solution 解矩阵 表示到达
  • 【yarn】yarn客户端与服务端通讯协议ApplicationClientProtocol

    文章目录 1 概述 1 1 应用信息 1 2 资源信息 1 3 集群 节点 配置信息 1 4 队列信息 1 概述 上一篇文章 Yarn yarn源码阅读之ClientRMService 在一篇文章中 我们看到了在创建服务端ClientRMS
  • PHP计算机毕设题目大全

    源码 最新仿金蝶电商ERP进销存系统多仓库版带扫描功能 php网页版BS 14110100931郭婧 旅游网站 1626考勤管理系统 172酒店管理jhne434程序论文 320办公人事亢 413学生社团管理系统Y1A9程序 428志愿者信
  • 怎样访问远程服务器文件夹,访问远程服务器的共享文件夹

    访问远程服务器的共享文件夹 内容精选 换一换 FOTA升级作用 在官方更新新固件后 模组设备无需寄回给官方 而是通过远程FTP HTTP进行OTA升级固件 以更新新固件版本 从而达到更新设备的功能 BUG修复 本次我采用FPT的方式来升级L
  • Hashtable vs ConcurrentHashMap

    来源 黑马教程 Hashtable vs ConcurrentHashMap 要求 掌握 Hashtable 与 ConcurrentHashMap 的区别 掌握 ConcurrentHashMap 在不同版本的实现区别 Hashtable
  • 关于python 的空的__init__.py文件的作用,可不可以删除,到底有没有用?

    0 声明 本篇只讨论空 init py文件的情况 不顾前提非得说 init py文件里面也可以写东西的不在此讨论了范围之内 重点是个 空 字 1 很多地方的文件夹都有 init py 网上一般都说 有了这个东西会把它当作一个包 否则impo
  • AWK快速入门教程

    最近看到安装开源软件的相关脚本 其中大量用到AWK相关内容 本文介绍AWK的基础知识及典型用法 结合示例进行说明 方便备忘查询 了解awk基础知识将大大提高命令行上操作文本文件的能力 awk有几种不同的实现 我们将使用awk的GNU实现 它
  • 面向对象7大原则

    单一职责 一个对象应该只包含单一的职责 并且该职责被完整地封装在一个类中 开放闭合原则 开闭原则就是指软件实体应当尽量保证在不修改原有代码的情况下 对软件进行扩展 开闭原则是面向对象设计的基石 里氏替换原则 根据 运行时子类对象覆盖父类对象
  • 一文搞懂ES6解构

    ES6引入了一个新的语法特性 名为解构 destructuring 把这个功能可以看作是一个结构化赋值 structured assignment 方法 1 解构简介 1 1 考虑下面的场景 给a b c赋值需要借用一个中间变量tmp fu