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 相关文章推荐
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
javascript 得到变量类型的函数
May 19 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
javascript无刷新评论实现方法
May 13 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
vue路由缓存的几种实现方式小结
Feb 02 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无限分类(树形类)的深入分析
2013/06/02 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
php微信支付接口开发程序
2016/08/02 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
node.js express中app.param的用法详解
2017/07/16 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
解决Vue watch里调用方法的坑
2020/11/07 Javascript
用Python设计一个经典小游戏
2017/05/15 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
python字符串格式化方式解析
2019/10/19 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
简短的公司员工自我评价分享
2013/11/13 职场文书
超市业务员岗位职责
2013/12/05 职场文书
技术总监岗位职责
2013/12/05 职场文书
自荐信如何制作?
2014/02/21 职场文书
推广普通话演讲稿
2014/05/23 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
国博复兴之路观后感
2015/06/02 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python