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

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使用小技巧请查看下面的相关链接

推荐阅读

    es6 filter方法的参数有哪些

    es6 filter方法的参数有哪些,元素,数组,filter方法接受两个参数:1、一个回调函数,不可省略,用于设置条件来过滤数组元素,并返回数组中满足条件

    Javascript中 toFixed四舍六入方法

    Javascript中 toFixed四舍六入方法,浮点,手动,银行家,进,javascript中toFixed使用的是银行家舍入规则。银行家舍入:所谓银行家舍入法,其实

    javascript怎么隐藏元素值

    javascript怎么隐藏元素值,隐藏,元素,设置,显示,位置,属性,javascript隐藏元素值的方法:1、设置元素style属性中的display,语句如“t.style.displ

    javascript对象怎么转换成字符串

    javascript对象怎么转换成字符串,字符串,参数,对象,序列化,属性,数组,在javascript中可以使用“JSON.stringify()”方法将对象转换成字符串,其语

    javascript怎么将字母转为小写

    javascript怎么将字母转为小写,方法,字符串,函数,语法,主机,语言,javascript字母转为小写的方法:1、使用toLowerCase()函数,语法“string.toLower

    javascript怎么实现二维码

    javascript怎么实现二维码,二维码,二维码生成,下载,插件,扫描二维码,操作,javascript实现二维码的方法:1、下载qrcodejs插件;2、使用qrcode实现二

    javascript如何获取字符串长度

    javascript如何获取字符串长度,字符,获取,属性,字符串长度,字符串,输出,javascript获取字符串长度的方法:1、使用length属性按字符来获取字符串

    javascript怎么类型转换

    javascript怎么类型转换,方法,字符串,转换,转换成,类型,数字,方法:1、使用“+”运算符自动进行转换。2、使用JS内置的函数进行转换,例toString()