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中的展开运算符和解构对象的更多相关文章

  1. es6 初级之展开运算符

    1.1 先看一个求最大值的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  2. ES6学习笔记(一)——扩展运算符和解构赋值

    前言 随着前端工程化的快速推进,在项目中使用ES6甚至更高的ES7等最近特性早已不是什么新鲜事.之前还觉得既然浏览器支持有限,那了解一下能看懂就好,然而仅仅了解还是不够的,现在放眼望去,那些成熟框架的 ...

  3. ES6中的变量的解构赋值, 解放我们的双手,实现变量的批量赋值

    ES6--变量的解构赋值 引言 正文 一.数组的解构赋值 解构失败 不完全解构 默认值 二.对象的解构赋值 三.字符串的解构赋值 结束语 引言 变量的解构赋值, 听起来很复杂, 简单点说可以理解成批量 ...

  4. vuex中使用对象展开运算符

    使用场景 当需要进行vuex进行数据状态管理的时候,会使用到mapGetters,mapState,还有自身的计算属性的时候,这个时候就会用到这个了! 1.首先需要安装 npm install bab ...

  5. ES5与ES6常用语法教程之 ④展开运算符...在数组和对象中的作用

    展开操作符(spread) 展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以 ...

  6. ES6中数组和对象的扩展运算符拷贝问题以及常用的深浅拷贝方法

    在ES6中新增了扩展运算符可以对数组和对象进行操作.有时候会遇到数组和对象的拷贝,可能会用到扩展运算符.那么这个扩展运算符到底是深拷贝还是浅拷贝呢? 一..使用扩展运算符拷贝 首先是下面的代码. le ...

  7. ES6之展开运算符

    本文介绍ES6新增的展开运算符(spread operator). 由上图可得,展开运算符负责拼装数组和对象,与之相反,解构赋值负责分解数组和对象. 由上图可得,展开运算符能和解构赋值一起发挥成更大的 ...

  8. ES6展开运算符数组合并,函数传参

    定义: .展开运算符允许一个表达式在某处展开. 使用场景 1.展开函数在多个参数的地方使用 .意指用于函数传参 2.多个元素的地方使用,意指用于数组字面量 3.多个边框的地方使用,意指用于解构赋值 函 ...

  9. ES6展开运算符(...)

    数组字面量中使用展开运算符 我们可以这样合并数组: var arr1=['a','b','c']; var arr2=[...arr1,'d','e']; //['a','b','c','d','e' ...

随机推荐

  1. Androi Studio 之 RelativeLayout

    RelativeLayout简介 •基本属性 •根据父容器定位 •父容器定位属性示意图 •根据兄弟组件定位 •根据兄弟组件定位 •margin(偏移) •padding(填充) •margin与pad ...

  2. QT项目-Chart Themes Example学习(一)

    1.main.cpp #include "themewidget.h" #include <QtWidgets/QApplication> #include <Q ...

  3. 计算机体系结构——CH2 指令系统

    CH2 指令系统 右键点击查看图像,查看清晰图像 X-mind CH2 指令系统 数据表示 定义 指计算机硬件能够直接识别,可以被指令系统直接调用的那些数据类型 确定哪些数据类型用哪些数据表示实现,是 ...

  4. pwn题命令行解题脚本

    目录 脚本说明 脚本内容 使用 使用示例 参考与引用 脚本说明 这是专门为本地调试与远程答题准备的脚本,依靠命令行参数进行控制. 本脚本支持的功能有: 本地调试 开启tmux调试 设置gdb断点,支持 ...

  5. 搜狗高级架构师帮你系统掌握TypeScript开发

    JavaScript 是一门动态弱类型语言,对变量的类型非常宽容,而且不会在这些变量和它们的调用者之间建立结构化的契约. Angular 已经使用 TypeScript 重构了代码,另一大前端框架 V ...

  6. 自动化kolla-ansible部署ubuntu20.04+openstack-victoria之系统安装-03

    自动化kolla-ansible部署ubuntu20.04+openstack-victoria之系统安装-03  欢迎加QQ群:1026880196  进行交流学习 一.镜像下载 网易源: http ...

  7. 2020.1 PyCharm 激活

    1 下载安装 平台windows,官网: 选路径后, 选项分别是64位的快捷方式,添加运行目录到环境变量PATH,添加右键菜单"打开文件夹作为一个工程",python文件关联,按需 ...

  8. day9.函数2

    一.函数对象 函数是第一类对象,第一等公民,函数对象即函数可以被当作变量去用. 具体分为四个方面: 1.可以被赋值 def func(): print('from func') f = func pr ...

  9. Selenium 3 常用 API

    元素定位 获取页面元素属性 元素判断 元素操作 操作输入框/单击 双击 下拉框操作 键盘操作 鼠标操作 单选框操作 多选框操作 拖动窗口 操作 JS 框 切换 frame 使用 JS 操作页面对象 操 ...

  10. 753. Cracking the Safe

    There is a box protected by a password. The password is n digits, where each letter can be one of th ...