ES6的解构赋值
2019-05-08 07:26:00来源:博客园 阅读 ()
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处理。
原文链接:https://www.cnblogs.com/xutao1517588477/p/10817658.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- es6学习笔记(二) 2019-08-14
- 数组解构赋值,方法 2019-08-14
- Es6常用方法filter 2019-08-14
- es6学习笔记(一) 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash