ES6中的变量的解构赋值, 解放我们的双手,实现变量的批量赋值
引言
变量的解构赋值, 听起来很复杂, 简单点说可以理解成批量操作变量赋值,先有个印象, 下面慢慢来看
正文
变量的解构赋值一共分为以下几种:数组的解构赋值 、对象的解构赋值 、字符串的解构赋值 、
一、数组的解构赋值
先来看一下我们平时对很多个变量赋值是如何操作的:
let a = 1
let b = 2
let c = 3
let d = 4
那么我们看一下如何批量命名这些变量:
let [a, b, c, d] = [1, 2, 3, 4]
a // 1
b // 2
c // 3
d // 4
这就是一个简单的数组的变量解构赋值,即等号左边的变量与等号右边的相同位置的值一一对应进行赋值。
解构失败
有几种情况会解构失败:
- 等号左边的变量与等号右边没有对应上,则会被解析成undefined
let [a, b, c] = [1, 2]
a // 1
b // 2
c // undefined
上述代码中的 c , 与之匹配的是undefined,所以最后为undefined
- 等号右边是一个不可遍历的结构
let [a, b] = 1
这很明显就会直接报错, 解构失败, 因为等号两边都无法进行匹配
不完全解构
这个简单,直接看代码:
let [a, b] = [1, 2, 3]
a // 1
b // 2
简单点说就是等号右边有很多值,但等号左边只有两个变量需要赋值, 这种叫做不完全解构, 不会报错。
默认值
在解构时,是允许给予一个默认值的, 如果该变量没有解构成功, 则会将默认值赋值给它, 例如:
let [a, b=2] = [1]
a // 1
b // 2
如果b没有赋值一个默认值 2 , 则 b 应为 undefined , 现在给了b 一个默认值 2 , 则在b 解构失败时,将默认值2赋值了给它。
补充一下: 在给予变量默认值时, 只有当没有对应的值与之匹配时或者与之匹配的是 undefined 时, 才会将默认值赋值给自己, 但是如果与之匹配的是 null , 则默认值不起作用, 最后会将 null 赋值给它, 看例子:
let [a=1, b=2, c=3] = [undefined, null]
a // 1
b // null
c // 3
二、对象的解构赋值
对象的解构赋值可以很方便的取出对象里面的值, 先来看一下我们平时取出对象中的值,并赋值给一个变量是如何操作的吧:
let obj = {name: 'jack', age: 18, gender: '男'}
let name = obj.name
let age = obj.age
let gender = obj.gender
有没有觉得很麻烦?因为要命名一个个变量,并对齐进行赋值,我们来看一下对象的解构赋值是如何帮我们简化操作的:
let {name, gender, age} = {name: 'jack', age: 18, gender: '男'}
就只需要一行代码就可以将对象中的三个值都取出来并赋值给三个变量。但是,我们在使用对象的解构赋值的时候必须要注意,等号左边的顺序是随意的, 系统会根据你的变量名, 优先去对象中寻找与你对象名相同的键, 将它的值赋值给这个变量。
这么一说, 我们的变量名就必须要跟对象中的健名一样了吗?不是的, 其实我们可以自己再起一个名字,例如:
let {n: name, g: gender, a: age} = {name: 'jack', age: 18, gender: '男'}
这样就可以做到自己给变量起名字了, 并且这样做有一个好处, 就是可以避免与前面的代码中的变量名重合了。
当然,对象的解构赋值也是可以给一个默认值的, 用法跟数组的解构赋值一样,这里就不多做解释了, 感兴趣的可以尝试一下。
三、字符串的解构赋值
这个也非常简单,直接看例子吧:
let [a, b, c, d] = 'word'
a // "w"
b // "o"
c // "r"
d // "d"
其实字符串的解构,就相当于遍历这个字符串,然后放到一个数组中, 赋值给等号左边的变量
结束语
好了, 关于变量解构赋值的知识就将这么多,其实还有一些相关知识,例如数值和布尔值的解构赋值、函数参数的解构赋值等, 但我觉得都不常用,所以就没给大家细讲,如果感兴趣可以去查阅ES6的书。
ES6中的变量的解构赋值, 解放我们的双手,实现变量的批量赋值的更多相关文章
- ES6中变量的解构赋值
1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 输出: 上面代码表示,可以从数组中提取值,按照对应位置,对变 ...
- ES6 中变量的解构赋值
1. 数组的解构赋值 解构: ES6 中允许按照一定的模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构(Destructuring). 1. 基本用法 本质上,这种写法属于"模式匹 ...
- es6之变量的解构赋值
es5中通常我们声明变量都是以下的方式: var a = 10; var b = 20; var c = 30; //或者 var a = 10,b = 20,c = 30; //或者 var arr ...
- es6分享——变量的解构赋值
变量的解构赋值:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前的写法: var a = 1; var b = 2; es6允许的写法 ...
- ES6 变量的解构赋值
数组的解构赋值 var [a,b,c] = [1,2,3]; 左边是变量,右边是值,根据数据结构一一对应 只要等号两边的模式相同,左边的变量就会被赋予右边对应的值,必须模式相同 如果等号 ...
- JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值
1.解构赋值的定义 在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3; //等价于 var [a, ...
- ES6 - 变量的解构赋值学习笔记
变量的解析赋值 数组的解析赋值 es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就称为解构. var a = 1; var b = 2; var c = 3; //在es6中允许写成 ...
- ES6 继续 变量的解构赋值
春节放假这几天,感觉跟梦一样,瞬间就过去了.现在上班的前几天,都感觉有点不真实,不过看到口袋里的钱,就知道,是真真实实的度过了这个假期. 现在得开始重新工作了: 变量的解构赋值 ES6 允许按照一定模 ...
- ES6学习之变量的解构赋值
前言:什么是ES6?ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.其中相比较于ES5新增了诸多的特性,并且ES6可转换为ES5的语法.- ...
随机推荐
- 2.pandas的数据结构
对于文件来说,读取只是最初级的要求,那我们要对文件进行数据分析,首先就应该要知道,pandas会将我们熟悉的文件转换成了什么形式的数据结构,以便于后续的操作 数据结构 pandas对文件一共有两种数据 ...
- 人车识别实验丨华为ModelArts VS 百度Easy DL硬核体验
摘要:想了解时下流行的自动驾驶相关AI模型吗?接下来就用华为云的ModelArts和百度的Easy DL带你体验一下AI平台是怎么进行模型训练的. 华为ModelArts自动学习 VS 百度Easy ...
- Day02_SpringCloud
学于黑马和传智播客联合做的教学项目 感谢 黑马官网 传智播客官网 微信搜索"艺术行者",关注并回复关键词"乐优商城"获取视频和教程资料! b站在线视频 0.学习 ...
- Maven——软件开发中一个神奇的项目管理工具
由于本人是从c++转入从事JAVA工作的 所以很多东西要从头学起,相信有很多跟我一样的人吧,那么我们一起来学习. 今天我们一起来认识下Maven这个工具,很多人可能会问题了,为什么说是工具呢?不是写代 ...
- python入门神书!|python编程从入门到实践|内附网盘链接带提取码|
点击此处进入网盘下载地址 提取码:o39n 全书共有20章,书中的简介如下: 本书旨在让你尽快学会 Python ,以便能够编写能正确运行的程序 —— 游戏.数据可视化和 Web 应用程序,同时掌握让 ...
- 提取txt文本有效内容
原理: 1.使用足够多的垃圾邮件和非垃圾邮件的内容作为训练集 2.读取全部训练集 删除其中的干扰字符 [ ] ,* . 进行分词 删除长度为 1 的单个字符 3.统计全部训练集中每个有效词汇的出现次数 ...
- Python file() 函数
描述 file() 函数用于创建一个 file 对象,它有一个别名叫 open(),更形象一些,它们是内置函数.参数是以字符串的形式传递的.每组词 www.cgewang.com 更多文件操作可参考: ...
- PHP str_shuffle() 函数
实例 随机地打乱字符串中的所有字符: <?php高佣联盟 www.cgewang.comecho str_shuffle("Hello World");?> 定义和用法 ...
- qemu 如何退出qemu
如何退出qemu ctrl + a 放开后,再按下x 这里字母是小写!(不要按着大写键)
- 学习使用CompletableFuture
CompletableFuture 一.前言 1.JDK5的异步处理方式 2.JDK8的异步处理方式 二.学习CompletableFuture 1.结果获取方式 2.创建CompletableFut ...