ES6中的展开运算符和解构对象
let obj = {
a:1
b:2
}
let obj2 = {
...obj
c:3
d:4
}
console.log(obj2)//1,2,3,4,对象展开
//常考题目
let a = 1
let b = 2
将两个值交换,过去是通过声明一个变量c来解决
现在可以通过解构变量
[a,b] = [b,a] //数组,对象,字符串都可以进行解构变量
//解构对象的剩余参数通过展开运算符会变成一个新对象,将obj2对象展开
let {a,b,...c} = obj2
consoloe.log(a,b,c)//1,2,{3,4} 剩余参数的展开会变成一个对象
//利用剩余参数通过展开运算符创建新对象的特性,可以解决复杂数据类型的引用问题()
//简单类型是指基本数据类型又叫做值类型;复杂类型除简单类型之外的数据类型又叫做引用类型
//简单类型在存储时存储的是值本身,而复杂类型存储的是一个地址这就会导致相同引用地址的数据会互相影响
//通过展开运算符怎么解决呢?
let obj = {a:1}
let obj2 = obj//将obj的存储地址给了obj2
obj2.a = 2//这会导致obj.a 和obj2.a 的值都变为2
let obj2 = {...obj}//这里{...obj}创建了一个新的对象就不会影响obj地址的值
ES6中的展开运算符和解构对象的更多相关文章
- es6 初级之展开运算符
1.1 先看一个求最大值的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- ES6学习笔记(一)——扩展运算符和解构赋值
前言 随着前端工程化的快速推进,在项目中使用ES6甚至更高的ES7等最近特性早已不是什么新鲜事.之前还觉得既然浏览器支持有限,那了解一下能看懂就好,然而仅仅了解还是不够的,现在放眼望去,那些成熟框架的 ...
- ES6中的变量的解构赋值, 解放我们的双手,实现变量的批量赋值
ES6--变量的解构赋值 引言 正文 一.数组的解构赋值 解构失败 不完全解构 默认值 二.对象的解构赋值 三.字符串的解构赋值 结束语 引言 变量的解构赋值, 听起来很复杂, 简单点说可以理解成批量 ...
- vuex中使用对象展开运算符
使用场景 当需要进行vuex进行数据状态管理的时候,会使用到mapGetters,mapState,还有自身的计算属性的时候,这个时候就会用到这个了! 1.首先需要安装 npm install bab ...
- ES5与ES6常用语法教程之 ④展开运算符...在数组和对象中的作用
展开操作符(spread) 展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以 ...
- ES6中数组和对象的扩展运算符拷贝问题以及常用的深浅拷贝方法
在ES6中新增了扩展运算符可以对数组和对象进行操作.有时候会遇到数组和对象的拷贝,可能会用到扩展运算符.那么这个扩展运算符到底是深拷贝还是浅拷贝呢? 一..使用扩展运算符拷贝 首先是下面的代码. le ...
- ES6之展开运算符
本文介绍ES6新增的展开运算符(spread operator). 由上图可得,展开运算符负责拼装数组和对象,与之相反,解构赋值负责分解数组和对象. 由上图可得,展开运算符能和解构赋值一起发挥成更大的 ...
- ES6展开运算符数组合并,函数传参
定义: .展开运算符允许一个表达式在某处展开. 使用场景 1.展开函数在多个参数的地方使用 .意指用于函数传参 2.多个元素的地方使用,意指用于数组字面量 3.多个边框的地方使用,意指用于解构赋值 函 ...
- ES6展开运算符(...)
数组字面量中使用展开运算符 我们可以这样合并数组: var arr1=['a','b','c']; var arr2=[...arr1,'d','e']; //['a','b','c','d','e' ...
随机推荐
- NetCore的缓存使用详例
关于我 作者博客|文章首发 缓存基础知识 缓存可以减少生成内容所需的工作,从而显著提高应用程序的性能和可伸缩性. 缓存最适用于不经常更改的 数据,生成 成本很高. 通过缓存,可以比从数据源返回的数据的 ...
- shiro报错SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".和Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/commons/logging/LogFactory
未能加载类"org.slf4j.impl.StaticLoggerBinder" 解决方案: <dependency> <groupId>org.slf4j ...
- HarmonyOS三方件开发指南(17)-BottomNavigationBar
目录: 1.引言 2.功能介绍 3.BottomNavigationBar使用指南 4.BottomNavigationBar开发指南 5.<HarmonyOS三方件开发指南>文章合集 引 ...
- 000 - 准备工作ADB wifi连接多台鸿蒙设备进行调试
首先将两台鸿蒙设备插入电脑的usb上 查看两台鸿蒙设备的deviceid C:\Users\Administrator>adb devices * daemon not running; sta ...
- Python 高级进阶知识(一)
参考 Python学习手册 第四版 1 from vs import import 模块 : 导入的一整个模块(python中模块对应一个py文件) 因为import使用一个变量名引用整个模块对象,所 ...
- Android通过Web与后台数据库交互
2021.1.27 更新 已更新新版本博客,更新内容与原文章相比有点多,因此新开了一篇博客,请戳这里. 1 背景 开发一个App与后台数据库交互,基于MySQL+原生JDBC+Tomcat,没有使用D ...
- Mycat Web监控工具
简介 Mycat-web 是 Mycat 可视化运维的管理和监控平台,弥补了 Mycat 在监控上的空白.帮 Mycat 分担统计任务和配置管理任务.Mycat-web 引入了 ZooKeeper 作 ...
- Day14_78_可变长参数
可变长参数 可变长参数只能在形参列表的最后一个,且只能出现一次. 代码实例 import java.util.Date; public class 可变长参数 { public static void ...
- Sass中连体符(&)的运用
在CSS中,这种想法是无法实现的,但在Sass中,可以轻松的通过连体符&来实现.这也是我们今天要说的. 我们先来回忆一下,CSS中常见的一组样式: /*页面中链接的颜色*/ a {clolor ...
- pwn 好的联系网站
https://pwnable.kr/ https://w3challs.com/challenges/wargame http://overthewire.org/wargames/ http:// ...