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' ...
随机推荐
- 前端使用bcrypt对密码加密,服务器对密码进行校验
以前为了防止前端密码安全问题,都是对密码进行md5(password + salt). 有些也会用别的加密方式,但还是会存在撞库,彩虹表等破解常规密码. 因此使用bcrypt加密是一个不错的选择,因为 ...
- Macbook 安装kali linux 双系统 2020.3 超详细
博主折腾了一星期这东西,到现在都还有些坑没解决(最后面会讲).不过最起码系统装上了,可以用了,看到这桌面惊艳了,再点下左上角表示人间值得. 其实我是装了windos 10.macos 和kali三系统 ...
- 【Visual Studio调教小记录】C++指针靠前靠后??
本文地址:https://www.cnblogs.com/oberon-zjt0806/p/14631149.html 甜咸之争 经常写C++的基本上避不开使用指针,而且C++中指针类型的写法大体上有 ...
- ECharts使用指南
第一步,引入ECharts: echars的引入十分简单,只需要在html中嵌入即可: <!DOCTYPE html> <html> <head> <scri ...
- Linux(六):系统运维常用命令
实际的生产环境下,不论是研发还是运维,或多或少的得面对在linux上定位问题这个关卡,这里介绍一下linux环境下一些状态查看常用的命令. 系统资源监控 总体资源占用情况查看 命令:top 像wind ...
- [Fundamental of Power Electronics]-PART I-4.开关实现-4.1 开关应用
4.1 开关应用 4.1.1 单象限开关 理想的SPST(Single pole single throw)开关如图4.1所示.开关包含电源端子1和0,其电流和电压极性如图所示.在接通状态下,电压\( ...
- Kotlin编写Processing程序(使用函数式编程思维和面向接口方式)
写一例Kotlin编写的Processing程序,充分调用函数式编程思维和面向接口的编程思维,供自己和读者参考学习. 初衷 想要实现一行行的文字排版功能,每一行作为一个单位,可制定显示的位置.大小.文 ...
- redis的持久化有哪几种方式?不同的持久化机制都有什么优缺点?(偏难)
1.RDB和AOF两种持久化机制的介绍 RDB持久化机制,对redis中的数据执行周期性的持久化 AOF机制对每条写入命令作为日志,以append-only的模式写入一个日志文件中,在redis重启的 ...
- 自定义函数和调用函数 return返回值
1.Q: 为什么要有函数,函数是什么? A: 函数能提高应用的模块性,和代码的重复利用率 2. 函数分为两个阶段: 1.定义阶段 2.调用阶段 3.关于函数调用: 01.函数的内存地址加上()就是调用 ...
- 【运维】Shell -- 快速上手Shell脚本
1.Shell概述 shell脚本是利用shell的功能所写的一个[程序(program)].这个程序是使用纯文本文件,将一些shell的语法与命令(含外部命令)写在里面,搭配正则表达式.管道命令与数 ...