ES6下javascript解构赋值常见用法总结

更新时间：2022年01月30日 09:42:14 投稿：wdc

这篇文章主要介绍了在ES6下javascript赋值常见用法总结,需要的朋友可以参考下

Javascript解构赋值出现的契机：

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

Javascript解构赋值问题核心：

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

上面的问题解构方案:

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

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

Javascript解构赋值应用场景：

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'} = {})
    {...}

更多关于ES6下的Javascript使用小技巧请查看下面的相关链接

您可能感兴趣的文章:

js
解构

JavaScript自定义函数用法详解
本文详细讲解了JavaScript自定义函数的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-03-03
浅谈JavaScript的Polymer框架中的事件绑定
这篇文章主要介绍了浅谈JavaScript的Polymer框架中的事件绑定,Polymer是由Google开发的针对Web UI的框架,需要的朋友可以参考下
2015-07-07
解读JavaScript中 For, While与递归的用法
本篇文章对JavaScript中 For, While与递归的用法进行了详细的分析介绍。需要的朋友参考下
2013-05-05
关于JavaScript中string 的replace
在使用JavaScript对字符串进行处理的时候我们经常会用到replace方法，很简单的一个方法，以前一直不以为意，直到今天看JavaScript语言精粹的时候读到了一个有趣的小例子的时候，并不是十分理解，了解了一下replace的用法才明白，原来replace不像想象中的那么简单
2013-04-04
简介JavaScript中的italics()方法的使用
这篇文章主要介绍了JavaScript中的italics()方法使用,是JS入门学习中的基础知识,需要的朋友可以参考下
2015-06-06
了解JavaScript中的选择器
这篇文章主要介绍了JavaScript中的选择器，下面和小编一起了看看吧
2019-05-05
JavaScript函数详解
本文结合前面发布的文章，详细介绍了javascript的函数问题，非常的详尽，非常的实用，这里推荐给大家，是篇不可多得的文章
2014-11-11
分析Node.js connect ECONNREFUSED错误
最近在准备Angularjs +node.js demo的时候在我的mac开发中遇见此错误
2013-04-04
关于JavaScript 原型链的一点个人理解
本文给大家分享的是个人关于JavaScript原型链相关知识的一些理解，这里推荐给大家，希望大家能够喜欢
2016-07-07
浅谈JavaScript的Polymer框架中的behaviors对象
这篇文章主要介绍了浅谈JavaScript的Polymer框架中的behaviors对象,Polymer是由Google开发的Web UI相关框架,需要的朋友可以参考下
2015-07-07