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弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
checkbox使用示例
Aug 23 Javascript
浅谈bootstrap源码分析之tab(选项卡)
Jun 06 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
angular十大常见问题
Mar 07 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
原生js+canvas实现下雪效果
Aug 02 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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
编译问题
2006/10/09 PHP
基于mysql的bbs设计(一)
2006/10/09 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
使用python脚本实现查询火车票工具
2018/07/19 Python
用Python读取几十万行文本数据
2018/12/24 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
美国购车网站:TrueCar
2016/10/19 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
护士个人简历自荐信
2013/10/18 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
理发店策划方案
2014/06/05 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
毕业欢送会致辞
2015/07/29 职场文书