深入解析ES6之数据解构的用法
本文介绍了深入理解ES6之数据解构的用法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。
一 对象解构
对象解构语法在赋值语句的左侧使用了对象字面量
let node = {
type: true,
name: false
}
//既声明又赋值
let {
type,
name
} = node;
//或者先声明再赋值
let type, name
({type,name} = node);
console.log(type);//true
console.log(name);//false
type与name标识符既声明了本地变量,也读取了对象的相应属性值。 解构赋值表达式的值为表达式右侧的值。当解构表达式的右侧的计算结果为null或者undefined时,会抛出错误。
默认值
当你使用解构赋值语句时,如果所指定的本地变量在对象中没有找到同名属性,那么该变量会被赋值为undefined
let node = {
type: true,
name: false
},
type, name, value;
({type,value,name} = node);
console.log(type);//true
console.log(name);//false
console.log(value);//undefined
//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
你可以选择性地定义一个默认值,以便在指定属性不存在时使用该值。
let node = {
type: true,
name: false
},
type, name, value;
({
type,
value = true,
name
} = node);
console.log(type);//true
console.log(name);//false
console.log(value);//true
赋值给不同的本地变量名
let node = {
type: true,
name: false,
value: "dd"
}
let {
type: localType,
name: localName,
value: localValue = "cc"
} = node;
console.log(localType);
console.log(localName);
console.log(localValue);
type:localType这种语法表示要读取名为type的属性,并把它的值存储在变量localType上。该语法与传统对象字面量的语法相反
嵌套的对象结构
let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
}
}
let {
loc: localL,
loc: {
start: localS,
end: localE
}
} = node;
console.log(localL);// start: {line: 1,column: 1},end: {line: 1,column: 4}
console.log(localS);//{line: 1,column: 1}
console.log(localE);//{line: 1,column: 4}
//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
当冒号右侧存在花括号时,表示目标被嵌套在对象的更深一层中(loc: {start: localS,end: localE})
二 数据解构
数组解构的语法看起来跟对象解构非常相似,只是将对象字面量换成了数组字面量。
let colors = ["red", "blue", "green"];
let [firstC, secondC, thirdC, thursC = "yellow"] = colors;
console.log(firstC//red
console.log(secondC);//blue
console.log(thirdC);//green
console.log(thursC);//yellow
你也可以在解构模式中忽略一些项,并只给感兴趣的项提供变量名。
let colors = ["red","green","blue"];
let [,,thirdC] = colors;
console.log(thirdC);//blue
//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
thirdC之前的逗号是为数组前面的项提供的占位符。使用这种方法,你就可以轻易从数组任意位置取出值,而无需给其他项提供名称。
解构赋值
let colors = ["red","green","blue"],
firstColor = "black",
secondColor = "purple";
[firstColor,secondColor] = colors;
console.log(firstColor);//red
console.log(secondColor);//green
数组解构有一个非常独特的用例,能轻易的互换两个变量的值
let a =1,b =2;
[a,b] = [b,a];
console.log(a);//2
console.log(b);//1
//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
嵌套的解构
let colors = ["red", ["green", "blue"], "yellow"];
let [firstC, [, ssc]] = colors;
console.log(ssc);//blue
剩余项
let colors = ["red", "green", "blue"];
let [firstC, ...restC] = colors;
console.log(firstC);
console.log(...restC);
console.log(restC[0]);//green
console.log(restC[1]);//blue
使用剩余项可以进行数组克隆
let colors = ["red", "green", "blue"];
let [...restC] = colors;
console.log(restC);//["red", "green","blue"]
三 混合解构
let node = {
type: "Identifier",
name: 'foo',
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
},
range: [0, 3]
}
let {
type,
name: localName,
loc: {
start: {
line: ll
},
end: {
column: col
}
},
range: [, second]
} = node;
console.log(type);//Identifier
console.log(localName);//foo
console.log(ll);//1
console.log(col);//4
console.log(second);//3
//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
结语
感谢您的观看,如有不足之处,欢迎批评指正。

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
-
上一篇
解析Angularjs的$http异步删除数据及实例
这篇文章主要介绍了Angularjs的$http异步删除数据详解及实例的相关资料,这里提供实现思路及实现具体的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 Angularjs的$http异步删除数据详解及实例 有人会说删除这东西有什么可讲的,写个删除的service,controller调用一下不就完了。 嗯...看起来是这样,但是具体实现起来真的有这么简单吗?首先有以下几个坑 怎么确定数据是否删除成功? 怎么同步视图的数据库的内容? 1.思路 1.实现方式一 删除数据库中对应的内容,然后将$scope中的对应的内容splice 2.实现方式二 删除数据库中对应的内容,然后再reload一下数据(也就是再调用一次查询方法,这种消耗可想而知,并且还要保证先删除数据再查询) 2.具体实现方式 删除数据的service:用异步,返回promise service('deleteBlogService',//删除博客 ['$rootScope', '$http', '$q', function ($rootScope, $http,...
-
下一篇
vue中$refs的用法及作用详解
一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值。 但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行。 然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了 用法如下: HTML: <div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </div> JS: <script> new Vue({ el: "#app", methods:{ add:function(){ this.$refs.input1.value ="test"; //this.$refs.input1 减少获取dom节点的消耗 } } }) </script> 前端全栈学习交流圈:866109386,面...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- Dcoker安装(在线仓库),最新的服务器搭配容器使用
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS7,8上快速安装Gitea,搭建Git服务器