JS-10-es6常用知识-对象扩展

news2024/11/18 1:30:25

目录

1  Object.assign:实现拷贝继承

2 扩展运算符(...)

1)介绍

2)数组中的扩展运算符

3)对象中的扩展运算符


1  Object.assign:实现拷贝继承

1)目的:Object.assign()方法在 JavaScript 中被用来复制一个或多个源对象的所有可枚举的自有属性到目标对象。

2)返回值:目标对象target。

3)注意:Object.assign() 执行的是浅拷贝(shallow copy),而不是深拷贝deep copy这意味着如果源对象的属性值是一个对象或数组,那么目标对象将获得该对象或数组的引用,而不是它的一个全新副本。

4)基本用法

Object.assign ( target , source ) ;

newObj、newObj2都是通过源对象浅拷贝得到的一个目标对象

<script>
    //Object.assign 就是进行对象的浅拷贝
    var source = { age: 18, height: 170, className: "3年2班" }

    //克隆一个新对象出来
    // 写法1
    var newObj = Object.assign({}, source);
    console.log(newObj);
    // 写法2
    var newObj2 = {};
    Object.assign(newObj2, source);
    console.log(newObj2);
</script>

2 扩展运算符(...)

1)介绍

    ES6(ECMAScript 2015)引入了许多新特性,其中之一就是扩展运算符(spread operator),也被称为三点运算符(...)。扩展运算符在数组和对象上都可以使用,但用法和效果略有不同。

2)数组中的扩展运算符

主要用于复制数组、合并数组或用于函数参数展开

复制数组

let arr1 = [1, 2, 3];  
let arr2 = [...arr1]; // arr2 现在也是 [1, 2, 3]

合并数组

let arr1 = [1, 2, 3];  
let arr2 = [4, 5, 6];  
let arr3 = [...arr1, ...arr2]; // arr3 是 [1, 2, 3, 4, 5, 6]

函数参数展开

function add(a, b, c) {  
  return a + b + c;  
}  
  
let numbers = [1, 2, 3];  
add(...numbers); // 相当于 add(1, 2, 3),返回 6

3)对象中的扩展运算符

主要用于复制对象和合并对象

复制对象:在复制对象的同时,还可以修改对象的属性值或者添加属性

let obj1 = { a: 1, b: 2 };  
let obj2 = { ...obj1 }; // obj2 现在也是 { a: 1, b: 2 }
let obj3 = { ...obj1 , b: 3 };  //obj3 是 { a: 1, b: 3 }

合并对象:合并对象,若存在属性名相同,同后面的属性值覆盖前面的

let obj1 = { a: 1, b: 2 };  
let obj2 = { b: 3, c: 4 };  
let obj3 = { ...obj1, ...obj2 }; // obj3 是 { a: 1, b: 3, c: 4 }  
// 注意:如果属性名相同,后面的对象会覆盖前面的对象中的同名属性

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1792372.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vscode 搜索框乱码

vscode 搜索文件夹 搜索txt文件 ignore取消 搜索中文乱码 https://zhuanlan.zhihu.com/p/661347670 文件 -》首选项-》设置 搜索encoding -》设置 simpified chinese 中文插件

LabVIEW开发EOL功能测试系统

LabVIEW开发EOL功能测试系统 介绍了一种基于LabVIEW开发的EOL功能测试系统方案&#xff0c;涵盖软件架构、工作流程、模块化设计、低耦合性、易于修改与维护、稳定性及硬件选型。系统通过高效的CAN通信实现对电机控制器的全面测试&#xff0c;确保运行可靠并支持未来的升级需求…

VM-Import 导入 Debian 12 系统

介绍 之前介绍过使用 VM-Import 导入 Windows 系统到 AWS 环境启动 EC2 实例, 本文将介绍如何导入 Debian 12 系统. 本地虚拟化使用 VMWare Workstation 创建虚拟机安装和准备 Debian 12 系统, 导出 OVA 文件后上传到 S3 存储桶中再使用 AWSCLI 执行 VM-Import 命令实现导入过…

线性代数|机器学习-P7SVD奇异值分解

文章目录 1. 奇异值分解1.1 SVD求解1.2 行基和列基转换 2. Ax图像表示3. 极坐标表示4. 小结 1. 奇异值分解 现在我们用的是一个m行n列的矩阵A&#xff0c;那么我们计算下特征值方程&#xff1a; A m n x n 1 λ x n 1 ; b m 1 A m n x n 1 \begin{equation} A_{m\tim…

攻防世界---misc---misc_pic_again

1、题目描述&#xff0c;flag为hctf{}格式&#xff0c;下载附件是一张图片 2、将图片放在winhex中分析&#xff0c;没有发现奇怪的信息&#xff0c;接着将图片用Stegsolve分析&#xff0c;查看通道没有发现奇怪的图片&#xff0c;接着分析&#xff0c;对数据进行提取 3、将三个…

性能工具之 JMeter 常用组件介绍(三)

文章目录 一、常用组件介绍二、Sampler&#xff1a;取样器三、Controller:控制器&#xff08;逻辑控制器&#xff09;四、Pre Processor:预处理五、Post Processor:请求之后的处理六、Assertions:断言七、Timer:定时器八、Test Fragment&#xff1a;片段九、Config Element:配置…

【全开源】云调查考试问卷系统(FastAdmin+ThinkPHP+Uniapp)

便捷、高效的在线调研与考试新选择​ 云调查考试问卷是一款基于FastAdminThinkPHPUniapp开发的问卷调查考试软件&#xff0c;可以自由让每一个用户自由发起调查问卷、考试问卷。发布的问卷允许控制问卷的搜集、回答等各个环节的设置&#xff0c;同时支持系统模板问卷&#xff…

【CMake】CMake从入门到实战系列(十五)—— CMake中添加编译选项的几种方法

文章目录 一、前言二、add_compile_options【1】基本语法【2】参数含义【3】示例【4】备注 三、target_compile_options【1】基本语法【2】参数含义【3】示例【4】备注 四、CMAKE_C_FLAGS 或 CMAKE_CXX_FLAGS 一、前言 在嵌入式工作开发调试过程中&#xff0c;我们常会遇到需要…

科技赋能,无障碍出行的新纪元

在现代社会&#xff0c;公共设施的建设不仅是衡量城市文明程度的标尺&#xff0c;更是实现社会公平与包容的重要载体。对于盲人群体而言&#xff0c;一个完善的公共设施网络&#xff0c;意味着他们能够更加独立、自信地融入社会&#xff0c;享受与视力健全者同等的公共服务与便…

【C语言之排序】-------六大排序

作者主页&#xff1a;作者主页 数据结构专栏&#xff1a;数据结构 创作时间 &#xff1a;2024年5月18日 前言&#xff1a; 今天我们就给大家带来几种排序的讲解&#xff0c;包括冒泡排序&#xff0c;插入排序&#xff0c;希尔排序&#xff0c;选择排序&#xff0c;堆排序&…

jmeter的infludb+grafana实时监控平台

目的&#xff1a;可以实时查看到jmeter拷机信息 框架&#xff1a;将 Jmeter 的数据导入 InfluxDB &#xff0c;再用 Grafana 从 InfluxDB 中获取数据并以特定的模板进行展示 性能监控平台部署实践 一、influxDB 官网&#xff1a;https://www.influxdata.com/downloads/ wget h…

Unity 自定义房间布局系统 设计与实现一个灵活的房间放置系统 ——物体占用的区域及放置点自动化

放置物体功能 效果&#xff1a; 功能&#xff1a; 自定义物体占用区域的大小一键调整占用区域调整旋转度数&#xff0c;分四个挡位&#xff1a; NoRotation&#xff1a;该物体不能调整旋转。MaximumAngle&#xff1a;每次转动90。NormalAngle&#xff1a;每次转动45&#xff…

Vue03-HelloWord

一、Hello World 1-1、示例1 1、现有html容器&#xff1b; 2、再有vue实例。 new Vue({});中的{}是配置对象。配置对象是&#xff1a;key&#xff1a;value的格式。 el&#xff1a;element元素。id对应#&#xff0c;class对应. 把容器中变化的数据&#xff0c;交给Vue实例去保…

嵌入式软件跳槽求指导?

嵌入式软件行业的跳槽确实需要一些特定的策略和技巧。我这里有一套嵌入式入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习嵌入式&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&#xff0c;我在后台发给你。 因为这个…

[Algorithm][动态规划][两个数组的DP][最长公共子序列][不相交的线][不同的子序列][通配符匹配]详细讲解

目录 1.最长公共子序列1.题目链接2.算法原理详解3.代码实现 2.不相交的线1.题目链接2.算法原理详解3.代码实现 3.不同的子序列1.题目链接2.算法原理详解3.代码实现 4.通配符匹配1.题目链接2.算法原理详解3.代码实现 1.最长公共子序列 1.题目链接 最长公共子序列 2.算法原理详…

Linux网络编程:数据链路层协议

目录 前言&#xff1a; 1.以太网 1.1.以太网帧格式 1.2.MTU&#xff08;最大传输单元&#xff09; 1.2.1.IP协议和MTU 1.2.2.UDP协议和MTU 1.2.3.TCP协议和MTU 2.ARP协议&#xff08;地址解析协议&#xff09; 2.1.ARP在局域网通信的角色 2.2.ARP报文格式 2.3.ARP报文…

SpringBoot高手之路02-全局异常处理器

RestControllerAdvice 可以将响应数据返回json格式然后响应 那么开始做全局异常处理器 首先先定义一个类 package com.healer.exception;import com.healer.common.Result; import org.springframework.web.bind.annotation.ExceptionHandler; import org.springframework.we…

AIGC专栏11——EasyAnimateV2结构详解与Lora训练 最大支持768x768 144帧视频生成

AIGC专栏11——EasyAnimateV2结构详解与Lora训练 最大支持768x768 144帧视频生成 学习前言源码下载地址EasyAnimate V2简介技术储备Diffusion Transformer (DiT)Motion ModuleU-VITLora 算法细节算法组成视频VAE视频DIT 数据处理视频分割视频筛选视频描述 模型训练视频VAE视频D…

Leetcode3168. 候诊室中的最少椅子数

Every day a Leetcode 题目来源&#xff1a;3168. 候诊室中的最少椅子数 解法1&#xff1a;模拟 代码&#xff1a; /** lc appleetcode.cn id3168 langcpp** [3168] 候诊室中的最少椅子数*/// lc codestart class Solution { public:int minimumChairs(string s){int chair…

前缀树的实现

前缀树的实现 何谓前缀树&#xff1f;实现前缀树节点的选择插入查找查找前缀完整代码 何谓前缀树&#xff1f; 前缀树&#xff08;字典树&#xff09;&#xff0c;使用树状的数据结构存储一个字典的所有单词。前缀树是一个多叉树&#xff0c;一个节点可能有多个子节点&#xf…