ES6的解构赋值实例详解


Posted in Javascript onMay 06, 2019

1 什么是解构赋值

解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁,同时还比传统的属性访问方法更为清晰。解构会仅提取出一个大对象中的部分成员来单独使用。

如下是传统的:

var y=data[0]
var m=data[1]
var d=data[2]

但在ES6中可以简写为:

var [y,m,d]=date;

2 数组与对象的解构

数组解构赋值语法的一般形式为:

 [ variable1, variable2, ..., variableN ] = array;

这将为variable1到variableN的变量赋予数组中相应元素项的值。如果你想在赋值的同时声明变量,可在赋值语句前加入var、let或const关键字

对象的解构类似,如下所示:

var user={
  uid:1001,
  uname:"dingding",
  set:1,
  signin:function(){
   console.log("登录...");
  },
  signout:function(){
   console.log("注销...");
  },
  signup:function(){
   console.log("注册...");
  }
}
//var {uid:uid,signup:signup}=user;//简写如下
var {uid,signup}=user;
console.log(uid);
signup();

对象解构的一个特殊用法是参数结构,在向函数中传参时,将一个大的对象,打散后,传递给对应的形参变量,有效解决了传参时有多个形参不确定但又要求按顺序传入的需求

//1. 定义形参列表时,就用对象结构定义
function ajax({
 //与顺序无关
 url,
 type,
 data,//不确定
 dataType,//不确定
}){
   console.log(`向${url}发送${type}请求`);
   if(data!=undefined&&type=="get"){
    console.log(`在url结尾拼接参数?${data}`)
   }
   if(data!=undefined&&type=="post"){
    console.log(`xhr.send(${data})`);
   }
   if(dataType=="json"){
    console.log(`JSON.parse(返回结果)`);
   }
}
//2. 调用函数传参时,所有实参值,都要放在一个对象结构中整体传入。
ajax({
  url:"http://localhost:3000/products/getProductsByKwords",
  type:"get",
  data:"kw=macbook i5",
  dataType:"json"
});

使用解构很方便,但它强调对应关系,数组解构:下标对下标,对象解构:属性对属性,但允许元素或者参数为空,例如下面三种写法:

var [y,,]=date;
var [y,,d]=date;
var [,m,]=date;

虽然有不同位置的元素为空,但是依然可以正常执行赋值操作,不过和传统方法一样,为空的在用时会按undefined处理。

总结

以上所述是小编给大家介绍的ES6的解构赋值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
vue实现商城秒杀倒计时功能
Dec 12 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 #Javascript
Vue动态组件和异步组件原理详解
May 06 #Javascript
微信小程序按钮点击跳转页面详解
May 06 #Javascript
详解vue中移动端自适应方案
May 05 #Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 #Javascript
彻底揭秘keep-alive原理(小结)
May 05 #Javascript
angular4+百分比进度显示插件用法示例
May 05 #Javascript
You might like
php下删除字符串中HTML标签的函数
2008/08/27 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
Firefox中autocomplete="off" 设置不起作用Bug的解决方法
2011/03/25 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
JS获取时间的方法
2015/01/21 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
python threading模块操作多线程介绍
2015/04/08 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
Python操作qml对象过程详解
2019/09/26 Python
英国绿色商店:Natural Collection
2019/05/03 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
初中数学教学反思
2014/01/16 职场文书
初级党校心得体会
2014/09/11 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
办公用房租赁协议书
2014/11/29 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
2016年元旦致辞
2015/08/01 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫