ES6中的变量的解构赋值, 解放我们的双手,实现变量的批量赋值

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

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


数组的解构赋值


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


    let a = 1let b = 2let c = 3let d = 4


    那么我们看一下如何批量命名这些变量


      let [a, b, c, d] = [1, 2, 3, 4]a  // 1b  // 2c  // 3d  // 4


      这就是一个简单的数组的变量解构赋值,即等号左边的变量与等号右边的相同位置的值一一对应进行赋值。


      但是有些情况下,会造成解构失败,例如:


      (1)当等号左边的变量与右边没有对应上时,没对应上的变量则会被赋值 undefined


        let [a, b, c] = [1, 2]a  // 1b  // 2c  // undefined


        (2)等号右边是一个不可遍历的结构


          let [a, b] = 1


          这很明显就会直接报错, 解构失败, 因为等号两边都无法进行匹配


          其实,数组解构赋值还可以给予变量默认值,若等号右边没有值赋值给等号左边的变量时,则那个变量会将默认值作为自身的值,例如


            let [a, b, c = 9] = [1, 2]a   //  1b   //  2c   //  9


            若没有给予变量c一个默认值,则会出现解构失败的现象


            还有一种情况,会出现不完全解构的情况,我们直接来看代码


              let [a, b] = [1, 2, 3]a  // 1b  // 2


              简单点说就是假设等号右边有三个值,但等号左边只有两个变量需要赋值, 小于右边的值的个数,这种叫做不完全解构, 但是不会报错。


              就像例子中的 1 赋值给了变量 a2 赋值给了 b ,但是 3 就没有赋值给任何的变量  

              对象的解构赋值


              对象的解构赋值可以很方便的取出对象里面的值, 先来看一下我们平时取出对象中的值,并赋值给一个变量是如何操作的吧


                let obj = {name: 'jack', age: 18, gender: '男'}let name = obj.namelet age = obj.agelet 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的书。


                      相关文章
                      |
                      7月前
                      |
                      人工智能 算法 搜索推荐
                      人工智能技术对未来就业的影响
                      人工智能大模型技术正在重塑全球就业市场,但其核心是"增强"而非"取代"人类工作。虽然AI在数据处理、模式识别等标准化任务上表现出色,但在创造力、情感交互和复杂决策等人类专属领域仍存在明显局限。各行业呈现差异化转型:IT领域人机协同编程成为常态,金融业基础分析岗位减少但复合型人才需求激增,医疗行业AI辅助诊断普及但治疗决策仍依赖医生,制造业工人转向技术管理,创意产业中人类聚焦高端设计。未来就业市场将形成人机协作新生态,要求个人培养创造力、情商等AI难以替代的核心能力,企业重构工作流程。AI时代将推动人类向更高价值的认知活动跃升,实现人机优势互补的协同发展。
                      867 2
                      |
                      9月前
                      |
                      Java Go 开发者
                      2023年终总结-一名23届毕业生的风雨秋招路
                      人生如巧克力,充满未知。23届大学生经历网课、封校后迎来秋招寒冬,笔者投递三百多家公司,最终收到三个Offer。签约中厂后,享受短暂的轻松时光。热爱编程,参加字节青训营,获技术提升与人脉积累。毕业旅行至云南时突遇毁约,但家人支持下继续前行。重新求职后选择深圳工作,入职半年收获良多。展望2024,立下多个目标,愿新的一年实现愿望。
                      145 4
                      |
                      10月前
                      【12月更文挑战第15天】
                      【12月更文挑战第15天】
                      157 7
                      |
                      10月前
                      提升个人工作技能
                      提升个人工作技能
                      1100 6
                      |
                      SQL 分布式计算 大数据
                      大数据-160 Apache Kylin 构建Cube 按照日期构建Cube 详细记录
                      大数据-160 Apache Kylin 构建Cube 按照日期构建Cube 详细记录
                      194 2
                      |
                      JavaScript 算法
                      【Vue面试题十七】、你知道vue中key的原理吗?说说你对它的理解
                      这篇文章深入探讨了Vue中`key`的原理及其作用,解释了`key`是为每个虚拟DOM节点提供的唯一标识符,作为`diff`算法的优化策略,有助于更快速准确地识别和重用DOM元素。文章通过实际代码示例展示了使用`key`与否在列表渲染时对DOM操作的影响,分析了`key`在不同场景下的性能表现,并提供了源码层面的分析,解释了Vue如何通过`key`来识别和更新虚拟DOM节点。
                      【Vue面试题十七】、你知道vue中key的原理吗?说说你对它的理解
                      |
                      JavaScript 前端开发 API
                      【Azure 应用服务】Azure Function HTTP 触发后, 230秒就超时。而其他方式触发的Function, 执行5分钟后也超时,如何调整超时时间?
                      【Azure 应用服务】Azure Function HTTP 触发后, 230秒就超时。而其他方式触发的Function, 执行5分钟后也超时,如何调整超时时间?
                      195 0
                      |
                      图形学 开发者
                      【制作100个unity游戏之26】unity2d横版卷轴动作类游11(附带项目源码)
                      【制作100个unity游戏之26】unity2d横版卷轴动作类游11(附带项目源码)
                      275 0
                      程序技术好文:欧奈尔的RPS曲线的编制方法(陶博士原创)
                      程序技术好文:欧奈尔的RPS曲线的编制方法(陶博士原创)
                      775 0
                      |
                      数据安全/隐私保护
                      硬盘坏道如何检测和修复?
                      本文介绍了硬盘坏道的概念,包括逻辑坏道和物理坏道的区别,并提供了使用DiskGenius检测和修复坏道的步骤。当硬盘出现坏道且包含重要数据时,应立即备份数据,使用数据恢复软件,或在严重情况下寻求专业帮助。保护和恢复数据是应对硬盘坏道的关键。