当前位置:Gxlcms > JavaScript > 深入理解ES6数据解构

深入理解ES6数据解构

时间:2021-07-01 10:21:17 帮助过:5人阅读

相信大家都听说过ES6数据解构,本文主要帮助大家深入理解ES6之数据解构的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

一 对象解构

对象解构语法在赋值语句的左侧使用了对象字面量


type与name标识符既声明了本地变量,也读取了对象的相应属性值。

解构赋值表达式的值为表达式右侧的值。当解构表达式的右侧的计算结果为null或者undefined时,会抛出错误。

默认值

当你使用解构赋值语句时,如果所指定的本地变量在对象中没有找到同名属性,那么该变量会被赋值为undefined


你可以选择性地定义一个默认值,以便在指定属性不存在时使用该值。


赋值给不同的本地变量名


type:localType这种语法表示要读取名为type的属性,并把它的值存储在变量localType上。该语法与传统对象字面量的语法相反

嵌套的对象结构


当冒号右侧存在花括号时,表示目标被嵌套在对象的更深一层中(loc: {start: localS,end: localE})

二 数据解构

数组解构的语法看起来跟对象解构非常相似,只是将对象字面量换成了数组字面量。


你也可以在解构模式中忽略一些项,并只给感兴趣的项提供变量名。


thirdC之前的逗号是为数组前面的项提供的占位符。使用这种方法,你就可以轻易从数组任意位置取出值,而无需给其他项提供名称。

解构赋值


数组解构有一个非常独特的用例,能轻易的互换两个变量的值。


嵌套的解构


剩余项


使用剩余项可以进行数组克隆


三 混合解构


相关推荐:

js导出Excel表格超出26位英文字符的解决方法ES6

利用babel将es6语法转es5的简单方法

ES6中类的静态方法有哪些作用

以上就是深入理解ES6数据解构的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行