ES6解构赋值常见用法

Wesley13
• 阅读 523

解构赋值出现的契机:

    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    let a = obj.a
    let b = obj.b

问题核心:

每次取值既要确定对象属性名,还得重新定义一个变量占用多一行,代码行数和重复的声明a,使得代码不够简洁,能否通过左边变量名,匹配到右边的属性名从而取得对应的值,ES6解构语法核心就基于这样的模式匹配思想

上面的问题解构方案:

    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    let {a, b} = obj
    // a=1 b=2


很明显看到,我们无需在右侧显式声明取值属性名,完全依据右边结构进行对应取值,非常优雅

应用场景:

1.对象声明解构

    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    let {a, b} = obj
    // a=1 b=2

2.对象赋值解构

    let a, b
    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    ({a, b} = obj)
    // 更常见的场景是变量c d被声明到全局,这种情况在vue很常见,数据被提前声明到data选项,数据访问一般都是this.xxxdata,此时就很有用了
    ({a:c, b:d} = obj)

3.变量交换

    [x,y] = [y,x]

4.数组解构

   let  [first,] = arr//获取 
   let [first, ...rest] = arr//获取第一个,以及剩余参数

5.函数对象实参解构

    function buildAnimal({accessory = "", animal = "cat", color = 'rainbow', hairType = 'straight'} = {})
    {...}
点赞
收藏
评论区
推荐文章
翼
3年前
ES6的解构赋值是深拷贝or浅拷贝?
面试时候有面试官问到ES6的解构赋值是深拷贝还是浅拷贝?,这里做一个总结.ES6的解构赋值,大家应该都清楚,就是可以快速取出数组或者对象中的值;我们先来看一个使用案例:更多的解构赋值知识可以查看:https://es6.ruanyifeng.com/docs/destructuring那么,ES6的解构赋值到底是深拷贝还是浅拷贝呢?我们先来看一下深拷贝和浅
Karen110 Karen110
3年前
盘点JavaScript中解构赋值,数组解构常用的数组操作
大家好,我是进阶学习者。前言解构赋值:是一种特殊的语法,它使可以将数组或对象“拆包”为到一系列变量中,因为有时候使用变量更加方便。解构操作对那些具有很多参数和默认值等的函数也很奏效。一、数组解构下面是一个将数组解构到变量中的。例://有一个存放了名字和姓氏的数组letarr现在就可以针对这些变量
似梦清欢 似梦清欢
3年前
Linux shell(2)
1.变量以固定名称存放的可能变化的值,可以提高脚本的适应能力,方便脚本执行中重复使用某个值。定义/赋值变量格式为:变量名变量值注意事项:若指定变量已存在,则相当于重新给变量赋值;等号两边无空格;变量名区分大小写;变量名不能以数字开头,不使用关键字和特殊字符。root@localhostX1//定义变量
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Souleigh ✨ Souleigh ✨
3年前
Dart 基础
Dart基础1.类型dartStringint整数值,其取值通常位于253和253之间double64bit(双精度)浮点数,符合IEEE754标准。DateTimeMap是一个键值相关的对象。Function可以赋值给变量,也可以当作其他方法的参数。可使用胖箭头。可选位置参
Stella981 Stella981
3年前
Python基础(二)
1.赋值语句(1)作用:定义赋值(2)复合与链式赋值ab2a2(3)特殊类型的赋值序列的赋值:a,b,c(1,2,3)print(a,b,c)变量交换:a
Wesley13 Wesley13
3年前
ES6编程风格
1、块级作用域使用let和const2、解构赋值letarr\1,2,3,4,5,6,7,8,9\;let\a,b,c\arr;letobj{foo:'aaa',bar:'bbb'};let{bar,foo}obj;//bar等于'bbb',foo等于'aaa'(
Wesley13 Wesley13
3年前
ES6新语法(二)
1.解构在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量,即将数组或对象中的值,拆成一个一个变量。解构:自动解析数组或对象中的值,并赋值给指定的变量。、1.1数组解构vararr3,4,5;vara,b,carr;
Wesley13 Wesley13
3年前
ES6 对象增强
  对象字面量语法扩展:  1, 属性初始化语法简写:给一个属性赋一个变量值,如果变量名和属性名相同,可以省略变量名和冒号,直接写属性名,js引擎在执行代码的时候,自动查找 和属性命名相同的变量并赋值。!复制代码(https://oscimg.oschina.net/oscnet/414cf48b53ba46e84b673583a