JavaScript中 ES6变量的结构赋值


Posted in Javascript onJuly 10, 2018

变量的结构赋值用户很多

1、交换变量的值

let x = 1;
let y = 2;
[x,y] = [y,x]

上面的代码交换变量x和变量y的值,这样的写法不仅简洁,易读,语义非常清晰

2、从函数返回多个值

函数只能返回一个值,如果要返回多个值,只能讲他们放在数组或者对象里返回。了解 解构赋值 ,取值这些值非常方便

//返回一个数组
function example(){
  return [1,2,3];
}
let [a,b,c] = example();
[a,b,c];  //[1,2,3]
//返回一个对象
function example(){
  return {
    foo:1,
    bar:2
  };
}
let {foo,bar} = example();
foo;  //1
bar;  //2

3、函数参数的定义

解构赋值可以方便的讲一组参数与变量名对应起来。

//参数是一组有次序的值
function f([x,y,z]){
  console.log(x,y,z);
}
f([1,2,3]); //1,2,3
//参数是一组无次序的值
function func({x,y,z}){
  console.log(x,y,z);
}
func({z:3,y:2,x:1}); //1,2,3

4、提取JSON数据

解构赋值对提取JSON对象中的数据尤其有用

let jsonData = {
  id:42,
  status:"OK",
  data:[123,456]       
} ;
let {id,status,data:number} = jsonData;
console.log(id,status,number);  //42 "OK" (2) [123, 456]

5、函数参数的默认值

、、、

6、遍历Map结构

任何部署了Iterator接口的对象都可以使用for... of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值获取名和键值就非常方便。

var map = new Map();
map.set('first','hello');
map.set('second','world');

for(let [key,value] of map){
  console.log(key,value);
}

//first hello
//second world

如果只想获取键名,或者只想获取键值,可以这样写。

//获取键名
for(let [key] of map){
  console.log(key);
}

//first
//second
//获取键值
for(let [,value] of map){
  console.log(value);
}
//hello
//world

7、输入模块的指定方法

加载模块时,往往需要指定输入的方法。解构赋值使得输入语句非常清晰。

const {a,b} = require('source-map');

总结

以上所述是小编给大家介绍的JavaScript中 ES6变量的结构赋值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
web css实现整站样式互相切换
Oct 29 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
jQuery.each使用详解
Jul 07 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 Javascript
javascript实现放大镜功能
Dec 09 Javascript
vue超时计算的组件实例代码
Jul 09 #Javascript
微信小程序自定义底部弹出框
Nov 16 #Javascript
详解vue中组件参数
Jul 09 #Javascript
微信小程序实现手指触摸画板
Jul 09 #Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 #Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 #Javascript
js中Object.defineProperty()方法的不详解
Jul 09 #Javascript
You might like
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
Python实现方便使用的级联进度信息实例
2015/05/05 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
Django更新models数据库结构步骤
2020/04/01 Python
Python实现验证码识别
2020/06/15 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
施工安全生产承诺书
2014/05/23 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
2015年教研员工作总结
2015/05/26 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
新员工入职感言范文!
2019/07/04 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技