每天十分钟学好ES6--关于解构赋值的彩虹屁
解构赋值是es6中很简单实用的小语法,今天一定要给它吹一下彩虹屁。
说他简单,是因为在es6规范中,排位在第二,也就是let和const之后就是他了,语法篇章也不多,还没说多少就开始说应用,应用的部分又说的很精彩。
所以说解构赋值真的是既简单又好用,应用范围真的太广了,并且对于初识ES6的小伙伴真的很友好。
首先让我们先看一下解构赋值的语法:
let [a, b, c] = [1, 2, 3]
let [head, ...tail] = [1, 2, 3, 4]
let [x, y='1'] = [2]
let [m, n='1'] = [2, undefined]
上面这几行代码基本就包含了解构赋值大部分功能了,别看它简单,使用起来真的好用,下面让我们一起来看一下。
一、基本语法
解构赋值的基本语法很简单,简单到只需要了解两个部分:
- 数组的解构赋值
- 对象的解构赋值
解构赋值只包含这两部分吗?不是的,但是只看这两个就足够了
为什么?
原因很简单,
- 字符串的解构赋值很鸡肋,你几乎不会使用到。
- 数值和布尔的解构赋值也停留在理论上,了解就好。
- 函数参数的解构赋值本质上与对象的解构赋值没有太大差别。
既然这样,废话不多少,我们分别看一下数组的解构赋值和对象的解构赋值。
1、数组的解构赋值
本文开篇的代码其实就是数组的解构赋值,现在我们一一来看一下
1.1 变量
let [a, b, c] = [1, 2, 3]
这个的用处是很方便的定义三个变量a、b、c,
并且赋值,
结果是:
a = 1
b = 2
c = 3
这样一来省了很多代码
对的,没错,我是用es6就是为了节约代码
1.2 数组
let [head, ...tail] = [1, 2, 3, 4]
这里定义了两个变量head和tail
结果是:
head = 1
tail = [2, 3, 4]
我们稍微变换一下思路,可以用来拼接数组 ,如下:
let head = 1, tail = [2, 3, 4]
let newList = [head, ...tail]
// newList = [1, 2, 3, 4]
惊不惊喜,意不意外,是不是眼前一亮,是的!OK,那就好
1.3 默认值
let [x, y='1'] = [2]
let [m, n='1'] = [2, undefined]
这个呢,用到的就是解构赋值的默认值了
由于默认值生效的规则是,属性值严格等于undefined, 所以:
let [d = '1'] = [null]
console.log(d) // null
let [d2 = '1'] = []
console.log(d2) // 1
既然默认值生效的规则是,属性值===严格等于undefined,我们一起看一下es6是如何实现的:
var {z=3} = {}
// 代码转码后是这样的:
var _ref = {},_ref$z = _ref.z,z = _ref$z === void 0 ? 3 : _ref$z;
如果默认值是函数方法,函数是惰性求值,即如果能取到值,函数不会运行使用, 如下面的f()不会运行
function f() {console.log(1)}
let [fun = f()] = [11]
默认值的使用大大提高了解构赋值的实用性,在日常敲代码中真的是超级好用,啦啦啦啦啦~~~
2、对象的解构赋值
对象的解构赋值的原则是;先找到同名属性,赋值给对应变量,像下面这个就是赋值给后者,而不是前者
let {foo: faz} = {foo: '111', bar : '222'}
console.log(faz) // 111
上面的例子很简单,相当于定义一个变量faz,并且把对象中foo的value赋值给了刚定义的变量baz。下面有一个相对复杂的例子:
var node = {loc: {start: {line: 1,column: 5}}
}
var {loc, loc: {start}, loc: {start: {line}}} = node
console.log(loc) // {start: Object}
console.log(start) // {line: 1, column: 5}
console.log(line) // 1
上面进行了三次解构赋值,分别对loc、start、line三个属性解构赋值
最后一次line是变量,但是loc、start都是模式,line = node.loc.start.line
二、解构赋值的应用
我们开篇彩虹屁就吹过了,解构赋值简单且好用,日常代码中很多情况都能用到解构赋值,不信的话我们一起看一下解构赋值的应用场景:
1、数组拼接
这个我们在基本语法–数组的解构赋值就看到过了,代码也是很简单:
let head = [0, 1], tail = [2, 3, 4]
let newList = [...head, ...tail]
// newList = [0, 1, 2, 3, 4]
2、交换变量
let x1 = 1, x2 = 2;
[x1, x2] = [x2, x1]
console.log(x1) // 2
console.log(x2) // 1
这个操作够骚气的吧,主要是他还很简单,简单到你都有点小开心了是不是。
3、提取JSON数据
作为前端工程师,每天都要和后端打交道,如何快速准确的处理json数据,是很重要很有用的,看看解构赋值做了哪些:
let jsonData = {id: 1,status: true,list: [1, 3, 5, 7]
}
let {id, status, list} = jsonData
是不是很棒,是的,但是不仅限于此,如果,我是说如果后端小伙伴不太靠谱,返回json数据不规范,比如jsonData中list没有的情况下,不返回空数组[],而是直接list这个参数都没返回,之前怎么办?
let list = jsonData.list || []
是不是这样,但是解构赋值就方便多了
let {id, status, list=[]} = jsonData
这样是不是赏心悦目多了呢,是的!OK,非常好。
4、函数参数的默认值
上面我们刚说过了提取JSON数据时使用默认值,超级舒适,一样的小伙伴们,函数参数的默认值也超级牛逼的呢
let fn = (id=1, status = true, callback = ()=>{}) =>{函数内部逻辑代码
}
这样又好看又省了不少代码了吧。
5、输入模块的指定方法
在加载模块时,使用解构赋值可以直接指定输入的方法:
const {tool, request} = require('../util/index')
三、关于彩虹屁
一鼓作气看了这么多解构赋值的应用,是不是豁然开朗,是不是兴高采烈,对的,没错,解构赋值就是这么简单且实用,这波彩虹屁请查收~~~
每天十分钟学好ES6--关于解构赋值的彩虹屁相关推荐
- ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?
本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...
- ES6常用解构赋值有哪几种?
ES6常用解构赋值有哪几种? a.数组的解构赋值 //数组解析赋值,模式匹配 {let [a, b, c] = [1, 2, 3];console.log("模式匹配");cons ...
- 前端面试不用怕!一分钟带你了解es6的解构赋值
解构赋值(★★★)!!!!! ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构 <script>var stus=['李钟硕','刘诗诗','易烊千玺']//访问数 ...
- ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries......
2015年6月17日 ECMAScript 6发布正式版本 前面介绍基本语法, 后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法: 1. 定义变 ...
- es6学习 -- 解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c ...
- ES6中解构赋值深入解读
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 1.数组的解构赋值 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail ...
- ES6语法---解构赋值
解构赋值概念 按照一定的模式,从数组和对象中提取值,对变量进行赋值,就被称为解构. 目的是为了提高效率,使用起来更加方便. 以下的各个说明,我会类比着ES5去解释,希望能帮到小伙伴们. 数组解构 正常 ...
- ES6:解构赋值及对象方法
解构赋值 对象解构 起别名:通过:来进行取名 //对象解构赋值 var obj = { uname: "张三", age: 21, sex: "男" } // ...
- 【ES6】变量的解构赋值
[ES6]变量的解构赋值 一.什么叫解构赋值? 二.解构赋值有哪些分类?写法? 1)对数组的解构赋值 2)对对象的解构赋值 3)对字符串的解构赋值 4)对数值和布尔值的解构赋值 5)对函数参数的解构赋 ...
最新文章
- git克隆 不带目录_Git 系统学习笔记
- 团队作业8----第二次项目冲刺(Beta阶段) 第六天
- word中package提取器
- 下载并配置完dex-net,在CLI中执行相应操作命令报错解决
- 通过防火墙堵住×××安全漏洞
- JavaEE的13种核心技术规范
- 防火墙例外里没有远程桌面_证明没有例外
- python打印字符串的前五行_python基础-字符串(6)
- 小程序是否转发群还是个人(转发功能)
- BZOJ1026[SCOI2009]windy数
- 抽象工厂模式 Abstract Factory Pattern
- sublime text3 快捷方式汇总
- KVM的vCPU算法和Xen的Credit算法对比
- MPLS:多协议标签交换
- [Code+#4]最短路 (最短路)
- python写情书_Python程序员用文字加密的方式,给女程序员写情书,一周后牵手回家_TONOW...
- 传统分布式架构部署(apache+tomcat集群)
- 2022-2028全球双斜齿轮行业调研及趋势分析报告
- android 一键锁屏实现
- 【C++】C++11
热门文章
- 全球及中国持续内存行业容量预测及需求规模调研报告2021年版
- 卡西欧计算机怎么调音乐,什么是初学者的最佳拍档?卡西欧音乐陪练教学电子琴给你答案~...
- 我理解的伽马校正(Gamma Correction)
- Python 手写数字识别-1
- 湖南师大c语言考研真题答案,湖南师范大学考研真题汇总
- 一篇文章告诉你SLC、MLC、TLC和QLC究竟有啥区别?
- 【记录】饥荒联机版+个人云服务器搭建(2020.6.19)
- jQuery知识点今日总结
- AI云边端EasyCVR平台新功能解析:支持为角色选择多级分组
- SI 设置全选快捷键