当前位置:Gxlcms > JavaScript > ES6的解构赋值实例详解

ES6的解构赋值实例详解

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

这次给大家带来的是ES6的解构赋值实例详解,我们知道ES6是非常强大的,这篇文章就给大家好好分析一下。

基本用法

let [x, y, ...z] = ['a']
//"a", undefined, []

1.等号右边如果不是数组,将会报错(不是可遍历结构)
2.解构赋值 var, let, const命令声明均适用
3.set结构也可解构赋值(具有Iterator接口,可采用数组形式结构赋值)

set解构:任何类型的单个值的集合

let [x, y, z] = new Set(["a", "b", "c"])
x //"a"

默认值

1.数组成员的值不严格等于undefined,默认值不生效(null的话相应值依然为null)

[x=1, y=2, z=3, o=4] = ['a', , undefined, null]
//"a", 2, 3, null、

2.如果默认值是表达式,表达式惰性求值,只有在用到的时候才会去执行

3.默认值可以引用结构赋值的其他变量,但该变量必须已声明

对象结构赋值

1.数组按次序排列,对象变量必须与属性同名

var {bar, foo, baz: loc} = {foo: 'aaa', baz: 'bbb'}
bar //undefined
foo //"aaa"
loc //"bbb"
baz //ReferenceError: baz is not defined

2.变量以前声明过,使用let赋值会报错

3.可用于嵌套结构的对象

var node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
}
var {loc:{start:{line}}} = node
line //1
loc //ReferenceError: loc is not defined
start //ReferenceError: start is not defined

line是变量,loc,start都是模式

相信看了以上介绍你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

相关阅读:

横向不间断滚动效果代码

JS引擎运行时是什么样的

JS的使用过程中如何自定义console对象

以上就是ES6的解构赋值实例详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行