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;
总结:对于嵌套的对象(对象的中变量又是一个对象),解构的时候加冒号使用基础的{}进行嵌套结构,嵌套的如果是数组就嵌套解构数组(使用中括号)的方式嵌套结构.一般遇到的数据不会这么复杂的,对象的结构赋值大概就这样,如有问题请留言谢谢!
- Java案例-求和与打印九九乘法表
- hive学习笔记——Hive表的创建
- 和开发讨论的一个数据变更需求(r9笔记第8天)
- Java案例-分数查等级程序
- Go语言的标准输入-scan 和bufio
- Java案例-判断给定年份是闰年
- 分分钟搭建Oracle环境 (r9笔记第23天)
- Java面试系列25-spring(4)-国际化、加入web容器,标签、事务等
- Java面试系列24-spring(3)-配置文件相关问题
- Java基础-day03-基础题
- 简单易学的机器学习算法——EM算法
- 备库跳归档恢复的有趣案例(r9笔记第19天)
- Java基础-day02-代码题
- 优化算法——拟牛顿法之L-BFGS算法
- 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 数组属性和方法