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 相关文章推荐
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
Angularjs过滤器使用详解
May 25 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
Ajax实现局部刷新的方法实例
前端学习——JavaScript原生实现购物车案例
JavaScript中关于预编译、作用域链和闭包的理解
JavaScript 去重和重复次数统计
Mar 31 #Javascript
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
vue3中的组件间通信
You might like
php 静态页面中显示动态内容
2009/08/14 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
php简单统计中文个数的方法
2016/09/30 PHP
phpfpm的作用和用法
2019/10/10 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Django实现文件上传下载功能
2019/10/06 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
python加载自定义词典实例
2019/12/06 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
英国绿色商店:Natural Collection
2019/05/03 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
一道输出判断型Java面试题
2014/10/01 面试题
电钳专业个人求职信
2014/01/04 职场文书
采购部经理岗位职责
2014/02/10 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
人事局接收函
2015/01/30 职场文书
慰问信格式
2015/02/14 职场文书