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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
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+javascript的日历控件
2009/11/19 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
JS中常用的输出方式(五种)
2016/06/12 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
shiro授权的实现原理
2017/09/21 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
vue--vuex详解
2019/04/15 Javascript
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Numpy之文件存取的示例代码
2018/08/03 Python
python中wheel的用法整理
2020/06/15 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
退伍老兵事迹材料
2014/01/31 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
公司行政管理制度范本
2015/08/05 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
Navicat连接MySQL错误描述分析
2021/06/02 MySQL