ES6 解构赋值的原理及运用


Posted in Javascript onMay 25, 2021

数组的解构赋值

let [a, b, c] = [1, 2, 3]

同时定义多个变量,a匹配1、b匹配2、c匹配3

ES6 解构赋值的原理及运用

解构赋值允许指定默认值,即左边变量指定默认值,右边没有对应的值,会优先输出默认值。

let [x, y = 'b'] = ['a'] // x = 'a', y = 'b'

x匹配字符a,y默认值为字符b,若右边没有对应的,默认输出字符b。

对象的解构赋值

解构不仅可以用于数组,还可以用于对象,对象的解构与数组有一个重要的不同,数组的元素是按照次序排列的,变量的取值由它的位置决定的;而对象的属性没有次序,变量必须与属性同名才能取到正确的值。

let {
    name,
    age,
    hobbies: [one, two]
} = {
    name: 'shiramashiro',
    age: 21,
    hobbies: ['骑行', '动漫']
}

比如我取age的值,改成取abc的值,由于没有和对象中的属性名对应,无法对应赋值,所以是undefined。

解构赋值的运用

交换变量的值

正常想到交换变量的值的方式

let x = 1,
    y = 2,
    temp = 0

temp = x // x = 1 = temp
x = y // y = 2 = x
y = temp // temp = 1 = y

console.log('x => ', x)
console.log('y => ', y)

利用解构赋值交换变量

let x = 1;
let y = 2;
[x, y] = [y, x];

console.log('x => ', x)
console.log('y => ', y)

这样交换变量x和y的值,写法不仅简洁,而且易读,语义非常清晰。

从函数返回多个值

函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回,有了解构赋值,就变得更加方便了。

提取hobbies数组中的第二个值

function getArray() {
    return {
        name: 'kongsam',
        age: 21,
        hobbies: ['骑行', '动漫', '羽毛球']
    }
}
console.log(getArray().name + '喜欢' + getArray().hobbies[1]) // 动漫

利用解构赋值获取hobbies数组中的第二个值

let {name, age, hobbies} = getArray()
console.log(name + '喜欢' + hobbies[1]) // 动漫

遍历Map结构

对于for...of循环遍历来说,遍历出来的值是一个数组,而解构赋值对于数组是可以“模式匹配”的,这很快速地取出键-值。

ES6 解构赋值的原理及运用

for...of循环遍历配合解构赋值获取键-值就非常方便。

for (let [key, value] of map) {
    console.log("key => ", key)
    console.log("value => ", value)
}

ES6 解构赋值的原理及运用

函数参数的解构赋值

// let { x = 10, y = 5 } = {}

function f({ x = 10, y = 5 } = {}) {
    return [x, y]
}

console.log(f({ x: 100, y: 50 })) // [100, 50]
console.log(f({ x: 3 })) // [3, 5]
console.log(f({})) // [10, 5]
console.log(f()) // [10, 5]

可以给函数的参数中传入对象,并且可以对传入的对象设置默认值。它将被解构到函数内部里进行使用,你也可以这样理解。

function f(x = 10, y = 5) {
    return [x, y]
}

console.log(f(100, 50)) // [100, 50]
console.log(f(3)) // [3, 5]
console.log(f()) // [10, 5]

上面的写法不一样,也会导致结果不一样

function f({ x, y } = { x: 10, y: 5 }) {
    return [x, y]
}

console.log(f({ x: 100, y: 50 })) // [100, 50]
console.log(f({ x: 3 })) // [3, undefined]
console.log(f({})) // [undefined, undefined]
console.log(f()) // [10, 5]

第三和第四个打印会有undefined,这是因为传入的x或y不对应对象属性中的值,匹配不成功所导致的。

以上就是ES6 解构赋值的原理及运用的详细内容,更多关于ES6 解构赋值的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
简单的三步vuex入门
May 20 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
js Proxy的原理详解
May 25 #Javascript
解析原生JS getComputedStyle
80行代码写一个Webpack插件并发布到npm
Ajax请求超时与网络异常处理图文详解
May 23 #Javascript
vue-element-admin项目导入和导出的实现
May 21 #Vue.js
vue2实现provide inject传递响应式
May 21 #Vue.js
You might like
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
Python抓取框架 Scrapy的架构
2016/08/12 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Django中Forms的使用代码解析
2018/02/10 Python
Python装饰器用法示例小结
2018/02/11 Python
python检测IP地址变化并触发事件
2018/12/26 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
《狼》教学反思
2014/03/02 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
美容院店长岗位职责
2014/04/08 职场文书
学雷锋宣传标语
2014/06/25 职场文书
学习作风建设心得体会
2014/10/22 职场文书
表彰大会新闻稿
2015/07/17 职场文书
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript