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 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
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中其实也可以用方法链
2011/11/10 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
小议javascript 设计模式 推荐
2009/10/28 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
jQuery读取XML文件内容的方法
2015/03/09 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python字符串处理函数简明总结
2015/04/13 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
python图像常规操作
2017/11/11 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
Python threading的使用方法解析
2019/08/28 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
学校出纳员岗位职责
2014/03/18 职场文书
单位考核聘任报告
2015/03/02 职场文书
部队个人年终总结
2015/03/02 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android