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的书。


                      相关文章
                      |
                      4月前
                      |
                      存储 JavaScript 前端开发
                      引用类型的赋值操作和比较方式是怎样的?
                      【10月更文挑战第29天】引用类型的赋值操作和比较方式的特点决定了在处理引用类型数据时需要特别注意对象的引用关系,以避免因共享引用而导致的数据不一致等问题。
                      |
                      6月前
                      |
                      存储 前端开发 JavaScript
                      前端基础(十二)_函数高级、全局变量和局部变量、 预解析(变量提升)、函数返回值
                      本文介绍了JavaScript中作用域的概念,包括全局变量和局部变量的区别,预解析机制(变量提升),以及函数返回值的使用和类型。通过具体示例讲解了变量的作用域、函数的返回值、以及如何通过return关键字从函数中返回数据。
                      40 1
                      前端基础(十二)_函数高级、全局变量和局部变量、 预解析(变量提升)、函数返回值
                      |
                      10月前
                      |
                      移动开发 前端开发 JavaScript
                      web前端之ES6的实用深度解构赋值方法、复杂的解构赋值
                      web前端之ES6的实用深度解构赋值方法、复杂的解构赋值
                      95 1
                      |
                      缓存 运维 监控
                      【运维知识进阶篇】Ansible变量详解(变量定义+变量优先级+变量注册+层级定义变量+facts缓存变量)
                      【运维知识进阶篇】Ansible变量详解(变量定义+变量优先级+变量注册+层级定义变量+facts缓存变量)
                      472 0
                      |
                      JSON JavaScript 网络架构
                      ES6中变量的解构赋值和扩展操作符的使用技巧
                      ES6中提供了一种非常方便的赋值方法:解构赋值。此外,还有组成解构的`...`及其作为展开操作符时,在实际中有着很多的巧妙用法...
                      252 0
                      ES6中变量的解构赋值和扩展操作符的使用技巧
                      |
                      JSON 数据格式
                      想学变量的解构赋值?看完这一篇就够了
                      想学变量的解构赋值?看完这一篇就够了
                      103 0
                      |
                      前端开发
                      前端工作总结150-[““]进行变量赋值
                      前端工作总结150-[““]进行变量赋值
                      134 0
                      前端工作总结150-[““]进行变量赋值
                      |
                      编译器 C++
                      <C++>运算符重载完结,详解赋值,关系,函数调用运算符
                      <C++>运算符重载完结,详解赋值,关系,函数调用运算符
                      165 0
                      <C++>运算符重载完结,详解赋值,关系,函数调用运算符