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 相关文章推荐
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
Javascript之Date对象详解
Jun 07 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
javascript实现滚动条效果
Mar 24 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
Python中的zip函数使用示例
2015/01/29 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
详解Python中for循环是如何工作的
2017/06/30 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Python变量访问权限控制详解
2019/06/29 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
编写strcpy函数
2014/06/24 面试题
2019年最新借条范本!
2019/07/08 职场文书