0

0

ES6学习之变量的解构赋值

高洛峰

高洛峰

发布时间:2017-02-15 16:55:23

|

1443人浏览过

|

来源于php中文网

原创

有时变量多写起来真的很麻烦,很多繁琐的差不多的重复工作,es6为我们提供了多种更加便利的声明变量的形式——变量的解构赋值。下面这篇文章主要介绍了es6中变量解构赋值的相关资料,需要的朋友可以参考下。

变量的解构赋值

ES6中允许按照一定模式,从数组和对象中提取,对变量进行赋值。

数组的解构赋值

var [a,b,c] = [1,2,3];
a // 1;
b // 2;
c // 3;

PHP与MySQL程序设计3
PHP与MySQL程序设计3

本书是全面讲述PHP与MySQL的经典之作,书中不但全面介绍了两种技术的核心特性,还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性,书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验,可用于解决开发者在实际中所面临的各种挑战。 本书内容全面深入,适合各层次PHP和MySQL开发人员阅读,既是优秀的学习教程,也可用作参考手册。

下载

上面的代码标示可以从数组中提取值,按照位置的对应关系对变量进行赋值。

本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。

let [foo,[[bar],baz]] = [1,[[2],3]];
foo //1;
bar //2;
baz //3;

let [,,third] = ['foo','bar','baz'];
third //'baz'

let [head,...tail] = [1,2,3,4]
head //1;
tail //[2,3,4]

如果解构不成功,变量的值就等于undefined。

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

不完全解构

如果等号左边的模式只匹配等号右边数组的一部分,解构依然可以成功,这种情况叫做不完全解构。

let [x,y] = [1,2,3]
x //1
y //2

如果等号右边不是数组,那么将会报错。(不具备可遍历的结构)。

只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值

function* fibs(){
 var a = 0;
 var b = 1;
 while(true){
  yield a;
  [a,b] = [b,a+b];
 }
}

var [first,second,third,fourth,fifth,sixth] = fibs();
sixth // 5

fibs是一个Generator函数,原生具有Iterator接口,解构赋值会依次从这个接口获取值。

默认值

解构赋值允许指定默认值。

var [foo=true] = [];
foo //true

ES6内部使用严格相等于运算符(===)判断一个位置是否有值。所以,一个数组成员如果不严格等于undefined,默认值便不会生效。

var [x = 1] = [undefined]
x // 1

var [x = 1] = [null]
x // null

表达式也可以作为默认值,如果表达式作为默认值的时候,该表达式是惰性求值的,只有在用到的时候才会求值。

function f(){
 console.log('aaa')
}

let [x = f()] = [1]

在上面的代码中,函数f不会执行,是因为x能取到值。

默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

对象的解构赋值

解构赋值可以应用在数组上,同样也可以用于对象。

 var {foo,bar} = {foo:'aaa',bar:'bbb'}
 foo // 'aaa'
 bar // 'bbb'

对象的解构赋值与数组有一个不同点,就是数组的元素是按次序排序的,变量的取值由它的位置决定,而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

var {bar,foo} = {foo:'aaa',bar:'bbb'}
foo //'aaa'
bar //'bbb'


var {baz} = {foo:'aaa',bar:'bbb'}
baz //undefined

如果变量名与属性名不一致,那必须写成这样:

var {foo:baz} = {foo:'aaa'}
baz //'aaa'

实际上对象的解构赋值是以下的形式简写:

var {foo:foo,bar:bar} = {foo:'aaa',bar:'bbb'}

对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量,真正被赋值的是后者,而不是前者。

但是,采取上面的写法时,变量的声明和赋值是一起的,对于let和const而言,变量不能重新声明,所以一旦赋值的变量以前声明过,就会报错。

对象的解构也可以用于嵌套结构的对象。

var obj = {
 p: [
  'hello' ,
  {
   y : 'world'
  }
 ]
}

var {p:[x,{y}]} = obj

x //'hello'
y //'world'

这时p是模式,不是变量,因此不会被赋值。

对象的解构赋值也可以指定默认值,默认值的生效条件是,对象的属性值严格等于undefined。

var {x=3} = {x:undefined}
x //3

var {x=3} = {x:null}
x //null

如果解构模式是嵌套对象,而且子对象所在的父属性不存在,那么将会报错。

var {foo:{bar}} = {baz:'baz'}

更多ES6学习之变量的解构赋值相关文章请关注PHP中文网!

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

36

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

18

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

34

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

5

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号