文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

ES6中解构赋值实现变量批量赋值解放双手

2024-04-02 19:55

关注

引言

变量的解构赋值, 听起来很复杂, 简单点说可以理解成批量操作变量赋值,先有个印象, 下面慢慢来看

变量的解构赋值一共分为以下几种:数组的解构赋值 、对象的解构赋值 、字符串的解构赋值 、

一、数组的解构赋值

先来看一下我们平时对很多个变量赋值是如何操作的:

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变量解构批量赋值的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯