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' ...
随机推荐
- Android Studio 之 制作 Nine-Patch 图片(.9图片)
•引言 9.png 可以保证图片在合适的位置进行局部拉伸,避免了图片全局缩放造成的图片变形问题. 但是由于Android Studio对于.9图片的检查更加严格,所以不符合AS要求的.9图片会带来很多 ...
- 日志文件删除shell脚本
大日志文件切割shell脚本 #!/bin/bash # --------------------------------------------------------------------- # ...
- HTTPS证书通过cert-manager自动获取,部署,续期
HTTP-01验证和DNS-01验证 使用cert-manager给阿里云的DNS域名授权SSL证书 第一步:安装cert-manager 配置 CRD kubectl apply -f https: ...
- 结对编程-stage_2
教学班 罗杰.任建班周五3.4节 gitlab项目地址 Here it is. 成员 周远航(3004) 李辰洋(3477) 结对编程体验 经过了上一阶段的磨合,第二阶段我们的配合更加流畅,也熟悉了对 ...
- 软工2021个人阅读作业#2——构建之法和CI/CD的运用
项目 内容 这个作业属于哪个课程 2021学年春季软件工程(罗杰 任健) 这个作业的要求在哪里 2021年软工-热身阅读作业#2 我在这个课程的目标是 了解和掌握现代软件开发和项目管理技术,锻炼在大规 ...
- LNMP架构上线动态网站
第一步,一键安装所需程序 yum install -y nginx php php-mysql php-fpm mariadb-server 第二步,修改Nginx配置文件/etc/nginx/ngi ...
- HUAWEI AppGallery Connect 正式发布移动端App,随时随地掌握应用动态
华为应用市场AppGallery Connect应用一站式服务平台正式发布移动端App,帮助您随时随地查看应用信息,获取运营分析数据,接收重要消息通知,快速回复用户评论等,提升应用的运营管理效率,更便 ...
- Codeforces Global Round 14 E. Phoenix and Computers
题目链接 点我跳转 题目大意 给定 \(N\) 台电脑,起初每台电脑都是关闭的 现在你可以随意打开电脑,但如果第 \(i-1\).第 \(i+1\) 台电脑是开启的,则第 \(i\) 台电脑也会自动开 ...
- 2- MySQL客户端工具Workbench的使用及数据库的操作
数据库增删改查快速入门 查看数据库: show databases; 选在数据库:use 数据库名: 创建数据库:create database db_name; 删除数据库:drop databa ...
- 03- 手机App功能测试要点以及登录页面的测试
当你进入一个互联网公司以后,首先对公司结构有所了解,然后遇到问题找对应的工作人员,效率就事半功倍了. 公司的结构: 产品经理 项目经理 设计师 开发人员 测试人员 运维人员 运营人员 配置管理 App ...