首页 > web前端 > js教程 > 正文

ES6的解构赋值实例详解

php中世界最好的语言
发布: 2017-12-30 17:20:26
原创
1234 人浏览过

这次给大家带来的是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都是模式

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

相关阅读:

横向不间断滚动效果代码

JS引擎运行时是什么样的

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

以上是ES6的解构赋值实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!