资讯专栏INFORMATION COLUMN

JavaScript ES6解构赋值

IT那活儿 / 3146人阅读
JavaScript ES6解构赋值

点击上方“IT那活儿”公众号,关注后了解更多内容,不管IT什么活儿,干就完了!!!


什么是解构赋值

解构赋值是JavaScript数据结构中的数据或者是元素从对象或者数组中取出来,赋值给其他变

Es6之前我们将数组中的值赋值给一个变量是这样,如图:


数组的解构赋值

通过数组下标一一对应进行匹配,我们可以用es6中的解构赋值简化得到变量a,b,c的值,数组中嵌套数组,原理相同,如图:

数组解构的默认值,如果a的默认值为1,b没有默认值,那么输出结果为1,undefined。

默认值生效条件:

如果有值,取值,没有默认值为undefined,值若是全等于undefined,取默认值,否则如图中为null,并非全等于undefined,不取默认值。


对象的解构赋值

键值对,属性名相同的值一一对应。

对象解构的默认值同数组原理相同。

给m一个默认值fdsg,输出结果如图:


本文作者:朱 维(上海新炬王翦团队)

本文来源:“IT那活儿”公众号

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/129419.html

相关文章

  • [译]JavaScript ES6解构赋值指南

    摘要:解构赋值允许我们将右边的表达式看起来也像变量声明一般,然后在左边将值一一提取。数组的解构赋值现在假设我们有一个变量,其值为。通过,这会看上去更清晰简洁最后的解构赋值给的语法带来了更多的现代化。 前言 让我们来仔细地看看ES6所带来的更清晰的变量声明与赋值语法。现今的变量声明语法十分的直接:左边是一个变量名,右边可以是一个数组:[]的表达式或一个对象:{}的表达式,等等。解构赋值允许我...

    Jeff 评论0 收藏0
  • ES6学习手稿之基本类型扩展

    摘要:它是一个通用标准,奠定了的基本语法。年月发布了的第一个版本,正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。 前言 ES6标准以及颁布两年了,但是,好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手,逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的,该公司1996年11月将JavaSc...

    tommego 评论0 收藏0
  • JavaScript基础之ES6对象解构赋值

    摘要:具体的分析暂时不讨论解决的方式很简单,把上面的代码块变成一段表达式就小明总结解构赋值是提供一个十分方便的表达式。的解构赋值小明的对象赋值这里可以被赋予初始值小明对象的属性不存在能够赋值给多个变量 对象解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 --- 阮一峰《ECMAScript...

    sutaking 评论0 收藏0
  • ES6 学习笔记(一)let,const和解构赋值

    摘要:另外对于已经声明的变量进行解构赋值时,要非常小心。因此在行首加,将其强制转化为表达式执行。由于和无法转为对象,所以对它们进行解构赋值,都会报错。 let和const let和const是es6新增的两个变量声明关键字,与var的不同点在于: (1)let和const都是块级作用域,在{}内有效,这点在for循环中非常有用,只在循环体内有效。var为函数作用域。 (2)使用let和con...

    iOS122 评论0 收藏0
  • 带你入门 JavaScript ES6 (一)

    摘要:是国际组织于年月日发布的第六版,正式名为通常被成为或。二模版字面量提供一种简单实现表达式嵌套的字符串字面量操作,简而言之就是能够以简单的方法实现字符串拼接操作。 本文同步 带你入门 JavaScript ES6 (一),转载请注明出处。 ES6: 是 ECMA国际组织于 2015 年 6 月 17 日发布的 ECMAScript 第六版,正式名为 ECMAScript 2015,通常被...

    lindroid 评论0 收藏0
  • ES6系列---解构

    摘要:的解构特性,可以简化这项工作。必须传值的解构参数如果调用函数时不提供被解构的参数会导致程序抛出错误程序报错缺失的第三个参数,其值为。 在编码过程中,我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段。ES6的解构特性,可以简化这项工作。解构是一种打破数据结构,将其拆分为更小部分的过程。 未使用解构的做法 let options = { repeat: true, ...

    baoxl 评论0 收藏0

发表评论

0条评论

IT那活儿

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<