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 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
PHP之header函数详解
2021/03/02 PHP
js技巧--转义符"\"的妙用
2007/01/09 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
公关关系专员的自我评价分享
2013/11/20 职场文书
你懂得怎么写自荐信吗?
2013/12/27 职场文书
工作迟到检讨书
2014/02/21 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
工作鉴定评语
2014/05/04 职场文书
暑期教师培训方案
2014/06/07 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
优秀教师个人材料
2014/12/15 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书