Javascript中的解构赋值语法详解


Posted in Javascript onApril 02, 2021

前言

首先在 ES6中引入的“解构赋值语法”允许把数组和对象中的值插入到不同的变量中。虽然看上去可能很难,但实际上很容易学习和使用。

解构赋值语法是一种 JS表达式。ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

在ES6解构赋值出现之前,我们需要为变量赋值的时候,只能直接指定值。

比如:

let a = 1;
let b = 2;
let c = 3;
let d = 4;
let e = 5;

数组解构非常简单。你所要做的就是为数组中的每个值声明一个变量。你可以定义更少的变量,而不是数组中的索引(即,如果你只想解处理前几个值),请跳过某些索引或甚至使用 REST 模式将所有剩余的值放到新数组中。

const nums = [ 3, 6, 9, 12, 15 ];
const [
 k,    // k = 3
 l,    // l = 6
 ,    // Skip a value (12)
 ...n   // n = [12, 15]
] = nums;

对象解构

对象解构与数组解构非常相似,主要区别是可以按名称引用对象中的每个key,从而创建一个有相同名称的变量。此外还可以将键解构为新的变量名,只解构所需的 key,然后用 rest 模式将剩余的 key 解构为新对象。

const obj = { a: 1, b: 2, c: 3, d: 4 };
const {
 a,       // a = 1
 c: d,      // d = 3
 ...rest     // rest = { b: 2, d: 4 }
} = obj;

嵌套解构

嵌套对象和数组可以通过相同的规则来进行解构。区别在于可以将嵌套 key 或值直接解构为变量,而不必将父对象存储在变量本身中。

const nested = { a: { b: 1, c: 2 }, d: [1, 2]};
const {
 a: {
  b: f,     // f = 1
  ...g     // g = { c: 2 }
 },
 ...h      // h = { d: [1, 2]}
} = nested;

高级解构

由于数组的行为与对象相似,所以可以通过使用索引作为对象解构分配中的 key,用解构分配语法从数组中获取特定值。用这种方法还可以得到数组的其他属性(例如数组的 length)。最后,如果解构后的值是 undefined,则还可以为解构过程中的变量定义默认值。

const arr = [ 5, 'b', 4, 'd', 'e', 'f', 2 ];
const {
 6: x,      // x = 2
 0: y,      // y = 5
 2: z,      // z = 4
 length: count, // count = 7
 name = 'array', // name = 'array' (not present in arr)
 ...restData   // restData = { '1': 'b', '3': 'd', '4': 'e', '5': 'f' }
} = arr;

总结

到此这篇关于Javascript中解构赋值语法的文章就介绍到这了,更多相关JS解构赋值语法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS 统计时间
Mar 09 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
Ajax实现局部刷新的方法实例
前端学习——JavaScript原生实现购物车案例
JavaScript中关于预编译、作用域链和闭包的理解
JavaScript 去重和重复次数统计
Mar 31 #Javascript
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
vue3中的组件间通信
You might like
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
一个oracle+PHP的查询的例子
2006/10/09 PHP
用 php 编写的日历
2006/10/09 PHP
php桌面中心(一) 创建数据库
2007/03/11 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
你必须知道的Javascript知识点之"深入理解作用域链"的介绍
2013/04/23 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
Python解决鸡兔同笼问题的方法
2014/12/20 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
大学生优秀的自我评价分享
2013/10/22 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
未婚证明书模板
2014/10/08 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
升学宴学生致辞
2015/07/27 职场文书
公司人力资源管理制度
2015/08/05 职场文书
学校运动会开幕词
2016/03/03 职场文书
Redis 常见使用场景
2021/08/30 Redis