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 检测浏览器和操作系统的脚本
Dec 26 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
EsLint入门学习教程
Feb 17 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 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
Zerg基本策略
2020/03/14 星际争霸
xml+php动态载入与分页
2006/10/09 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
ThinkPHP安装和设置
2015/07/27 PHP
php实现购物车功能(上)
2020/07/23 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python使用贪婪算法解决问题
2019/10/22 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
详细分析Python垃圾回收机制
2020/07/01 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
教师简历自我评价
2014/02/03 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
管理建议书范文
2014/05/13 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
销售员岗位职责范本
2015/04/11 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
Oracle 死锁的检测查询及处理
2021/09/25 Oracle