ES6基础语法之变量解构赋值(对象)
时间:2022-06-08
本文章向大家介绍ES6基础语法之变量解构赋值(对象),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
昨天简单看了并且了解了数组的解构赋值,今天进一步看一下对象的解构赋值,并逐渐深入看一些复杂的对象结构赋值是怎么样子的!!!
先来看一个简单的对象,我们进行解构!
let obj = {
a: 1,
b: 2
}
//解构对象中的变量
let {a,b}=obj;
console.log("a="+a+" "+"b="+b);//打印出结果a=1,b=2
上述是一个简单的对象解构变量实例,下面进一步看一些结构对象中变量的拓展,当结构不存在的变量会是怎么样的情形呢?
let obj = {
a: 1,
b: 2
}
//不存在的对象提示undefined
let { c, b } = obj
console.log("c:" + c); //由于对象中不存在c,返回undefined
如果想将对象中的变量重命名该如何操作?
let obj = {
a: 1,
b: 2
}
//获取到a或者b重命名在ES5下应该是这样的
var A=obj.a;//将对象中a重新赋值给A
//在ES6解构中就是很简单了
let {a:A,b}=obj;//这样A=obj中的a了,冒号表示重新赋值给后面的变量名
//那么原来的表示什么呢
let {a,b}=obj 相当于 a=obj.a b=obj.b了在对应的对象中找到相应的去赋值
对应已经存在的变量如何进行解构赋值呢?
let obj = {
a: 1,
b: 2
}
let a = 0;
console.log("a:" + a);
// {a,b}=obj;重新赋值提示语法错误,表示变量a已经存在,这个不是一个代码块,只是语法解构
//但是被默认当做代码块
({a,b}=obj);//外加括号包围,表示这是一个语法解构就ok
看一下较为复杂的对象解构化.
//声明一个复杂的对象
let obj={
arr:[
'Y.o',
{
a:1,
b:2,
c:3
},
]
}
let {arr:[str,{a,b,c}]}=obj;
再看一个更为复杂的对象,进行解构
let sts={
name:"小米",
test:"期末考试",
add:['河南省','北京','上海','天津','云南','贵州'],
days:{
desc:"这是一天",
time:"00:00",
sort:['上午','中午','下午']
}
}
let {name,test,add:[a,b,c,d],days:{dc,time,sort:[top,mid,bot]}}=sts;
总结:对于嵌套的对象(对象的中变量又是一个对象),解构的时候加冒号使用基础的{}进行嵌套结构,嵌套的如果是数组就嵌套解构数组(使用中括号)的方式嵌套结构.一般遇到的数据不会这么复杂的,对象的结构赋值大概就这样,如有问题请留言谢谢!
- jQuery:delegate中select()不起作用的解决方法
- Casper系列02——Casper 数据结构与投注出块
- Silverlight:用Enter键替换Tab键切换焦点
- RDLC报表多条件分组
- tomcat 新手上路
- haXe下体验jQuery
- silverlight:如何在后端代码中控制Behaviors
- silverlight:ScrollViewer的各种高度研究
- 主题建设之主题表
- mysql:索引原理与慢查询优化
- Silvelright:ListBox无法用Tab顺序切换内部元素焦点的解决
- 2017精典书店年度好书
- silverlight:贝塞尔曲线
- 三要素支撑“人工智能+安防”:识别技术扛大旗
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Mysql系列第七讲 玩转select条件查询,避免采坑
- Mysql第六讲 select查询基础篇
- Mybatis系列第四讲 Mybatis使用详解(2)
- 大型项目技术栈第八讲 Redis
- 大型项目技术栈第七讲 Chosen的使用
- 大型项目技术栈第六讲 EasyExcel的使用
- JavaWeb第二讲 重定向与转发 & doGet()与doPost()
- JavaWeb第一讲 Servlet的工作原理及生命周期
- 多系列数据核密度图
- leetcode树之二叉树的层平均值
- 大型项目技术栈第二讲 ES6(ECMAScript 6.0)的使用
- 大型项目技术栈第三讲 ztree的使用
- JavaWeb新手训练经典项目 & 半小时高效开发 & 海量知识点涵盖 = 从这里开始
- Java反射_笔记分享
- Java注解详细总结