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 来操作字符串(一些字符串函数)
Feb 15 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 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经典面试题之设计模式(经常遇到)
2015/10/15 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
php表单处理操作
2017/11/16 PHP
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
基于node.js实现微信支付退款功能
2017/12/19 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
python获取图片颜色信息的方法
2015/03/18 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
合作协议书范本
2014/10/25 职场文书
苏州园林导游词
2015/02/03 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
PHP基本语法
2021/03/31 PHP
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python