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' ...
随机推荐
- kubernetes使用statefulset部署mongoDB 单机版 自定义配置文件、密码等
注: 官方镜像地址: https://hub.docker.com/_/mongo?tab=description docker版的mongo移除了默认的/etc/mongo.conf, 修改了db数 ...
- [模拟]P1046 陶陶摘苹果
陶陶摘苹果 ## 题目描述 陶陶家的院子里有一棵苹果树,每到秋天树上就会结出10个苹果.苹果成熟的时候,陶陶就会跑去摘苹果.陶陶有个30厘米高的板凳,当她不能直接用手摘到苹果的时候,就会踩到板凳上再试 ...
- Java 获取Word中的标题大纲(目录)
概述 Word中的标题可通过"样式"中的选项来快速设置(如图1), 图1 在添加目录时,可将"有效样式"设置为"目录级别"显示(如图2),一 ...
- 自动化kolla-ansible部署ubuntu20.04+openstack-victoria之镜像制作centos6.5-14
自动化kolla-ansible部署ubuntu20.04+openstack-victoria之镜像制作centos6.5-14 欢迎加QQ群:1026880196 进行交流学习 制作OpenSta ...
- 在IntellJ中查看JavaDoc
1. [perference--Editor--General--Code Completion] 勾上Show the documentation popup in ** ms 2. 快速显示Ja ...
- adb 简介与常用命令
1. abd 简介 2. adb 常用命令 1. abd 简介 adb 的全称为 Android Debug Bridge,就是起到调试桥的作用. 借助 adb 工具,我们可以管理设备或手机模拟器的状 ...
- 程序员的开源月刊《HelloGitHub》第61期
兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 内容包括:有趣.入门级的开源项目.开源书籍.实战项目.企业级项目等,让你在短时间内感 ...
- Redis系统学习之事物
Redis事物操作 Redis 事务可以一次执行多个命令, 并且带有以下三个重要的保证: 批量操作在发送 EXEC 命令前被放入队列缓存. 收到 EXEC 命令后进入事务执行,事务中任意命令执行失败, ...
- hdu4849 最短路
题意: 让你求0到所有点最短路中对m取余最小的那个数. 思路: 简单题,直接根据题目给的公式把z求出来,然后建边,然后最短路,然后枚举每一个点对m取余记录最小,然后输出答案,然 ...
- Ubuntu下修改Nexus 5的boot.img--改user模式为debug模式
博客地址:http://blog.csdn.net/qq1084283172/article/details/52422205 在学习Android逆向的时候,总会用到Android的调试模式.一般情 ...