js中对象合并的4种方式,数组合并的4种方法_js合并对象-程序员宅基地

技术标签: JavaScript  IT面试  javascript  开发语言  ecmascript  

目录

一、对象合并

1、拓展运算符(...)

2、Object.assign()

 3、递归赋值

4、jquery中的extend()

二、数组合并

1、扩展操作符

2、使用array.concat()方法进行合并

3、关于Apply

4、array.push()方法进行合并


一、对象合并

1、拓展运算符(...)

ES6入门中是这样说的:

对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。

let obj1 = {
    name: '陈伟霆',
    gender: '男',
    hobby: '唱歌'
};
let obj2 = {
    name: '陈伟霆',
    gender: '男',
    hobby: '跳舞',
    nationality: '中国'
};
 
let obj = {...obj1, ...obj2};
console.log(obj);  // { name: '陈伟霆', gender: '男', hobby: '跳舞', nationality: '中国' }
 

由上面的代码可以看出:

  • 同名属性:合并,并且后边的(obj2)把前边的(obj1)覆盖。
  • 不同名属性:属性值不变,只合并。

注:第一级是深拷贝,第二级开始都是浅拷贝。

2、Object.assign()

MDN上是这样写的:

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

用于对象合并,写法如下: 

let obj = Object.assign({}, obj1, obj2);
console.log(obj);  // { name: '陈伟霆', gender: '男', hobby: '跳舞', nationality: '中国' }

由上面的代码可以看出,效果与法一相同。 

注:第一级是深拷贝,第二级开始都是浅拷贝。

 3、递归赋值

let obj = obj1;
for (var p in obj2){
    if(obj2.hasOwnProperty(p))
    obj[p] = obj2[p];
}
console.log(obj);  // { name: '陈伟霆', gender: '男', hobby: '跳舞', nationality: '中国' }

由上面的代码可以看出,效果与法一相同。 类似于直接赋值增加属性

注:第一级是深拷贝,第二级开始都是浅拷贝

4、jquery中的extend()

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

$.extend(obj1, obj2)  // 浅拷贝
$.extend(true, obj1, obj2)  // 深拷贝

二、数组合并

1、扩展操作符

使用ES6语法的拓展运算符:这个方法也是创建一个新数组

var newArray = [...array,...elements]
console.log(newArray); // ["a", "b", 0, 1, 2]

2、使用array.concat()方法进行合并

使用concat方法:这个方法不是添加到现有数组,而是创建并返回一个新数组。

var array = ["a", "b"];
var elements = [0, 1, 2];
 
var newArray = array.concat(elements);
console.log(array); //['a', 'b']
console.log(newArray);// ["a", "b", 0, 1, 2]

3、关于Apply

使用Apply方法:这个方法是将数组各项添加到另一个数组当中,是一种改变原数组的方法

var array = ["a", "b"];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.log(array); // ["a", "b", 0, 1, 2]

4、array.push()方法进行合并

const heroes = ['Batman'];

heroes.push('Superman');

heroes; // ['Batman', 'Superman']
const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];

heroes.push(...villains);

heroes; // ['Batman', 'Superman', 'Joker', 'Bane']

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_64346035/article/details/125355340

智能推荐

Mysql区间查询的注意点_mysql check 区间-程序员宅基地

文章浏览阅读7.4k次。1. Description   最近在使用mysql区间查询的时候遇到的一个问题。在此简单记录以下SELECT * from table where 1 < id <100 ;这样查询会返回table表中所有的数据或者空数据,实际上的sql其实是SELECT * from table where 1; SELECT * from table where 0;2..._mysql check 区间

hwpf POI-程序员宅基地

文章浏览阅读214次。样式集StyleSheet styleSheet = hwpfDocument.getStyleSheet();字体集hwpfDocument.getFontTable().getMainFont(0)hwpfDocument.getFontTable().getAltFont(0)Times New RomanTimes New RomanSymbolSy..._poi stylesheet操作hwpf

微信小程序 多选框的使用_微信小程序多选框两列布局-程序员宅基地

文章浏览阅读8.1k次,点赞5次,收藏37次。微信小程序 多选框的使用需求需求![在这里插入图片描述](https://img-blog.csdnimg.cn/20181229092342945.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RzZngwNTE0MzVhZHNs,..._微信小程序多选框两列布局

初投稿:关于Volley请求的乱码处理-程序员宅基地

文章浏览阅读210次。在Volley请求中,我们会遇到通过Volley请求时返回的数据是乱码的,这个问题对于我来说非常地头疼,于是我到网上寻找合适的解决方案。终于发现一个比较简单的解决方法,只需一个方法就可以解决请求乱码了。现在,我就给大家分享一下关于Volley请求返回数据乱码处理,大家可以参考一下。protected Response<String> parseNetworkResponse(Netw...

TensorFlow1.2~2.1各个GPU版本CUDA和cuDNN对应版本整理_cuda对应的tensorflow-gpu2.0版本-程序员宅基地

文章浏览阅读1.2k次。要搭建TensorFlow的GPU版本,首先需要的必备条件就是一块能够支持CUDA的NVIDIA显卡,因为在搭建TensorFlow的GPU版本时,首先需要做的一件事就是安装其基础支持平台CUDA和其机器学习库cuDNN,然后在此基础上搭建TensorFlow GPU版本。其次还要了解一下不同的TensorFlow版本所需要对应安装的CUDA和cuDNN版本是多少,因为在TensorFlow的G..._cuda对应的tensorflow-gpu2.0版本

留言板v2.0(添加了一个简单登录功能php+mysql)_完成留言板首页indexc.php及登录页面login.html。-程序员宅基地

文章浏览阅读5.2k次,点赞7次,收藏20次。简述:在之前基础上添加了一个非常简单的登录功能,不涉及数据库,本地判断。第一步:建立数据库。(之前写过,在写一遍。)第二步:登录界面代码login.php 留言板登录 .center{text-align: center;} .login-page { width: 360px; padding: 8% 0 0; margin: auto; } _完成留言板首页indexc.php及登录页面login.html。

随便推点

正则判断字符串是否为数值(正数、负数、小数)_判断是否数值的正则-程序员宅基地

文章浏览阅读1w次,点赞3次,收藏6次。在用MapReduce进行处理业务时,发现HDFS中的数据有的列为汉字、有的列为字符串、有的列为正数、有的为负数、有的为小数,根据业务要求只有数字参与运算,因此首先清洗数据,用正则提取所有数值:public boolean isNumber(String str){ String reg = "^[-\\+]?([0-9]+\\.?)?[0-9]+$"; ret..._判断是否数值的正则

秦始皇陵-程序员宅基地

文章浏览阅读198次。秦始皇陵 2010年11月30日  风水传说    骊山以它特有的温泉和风景而闻名于世。西周末年的周幽王与爱妾褒姒曾在这里演出了一场兴起烽火戏诸侯的历史悲剧,从而葬送了西周王朝。相传秦始皇生前在骊山与神女相遇,游览当中欲戏神女,神女盛怒之下,朝他脸上唾了一口,秦始皇很快就长了一身的烂疮。虽然这是一个神话故事,但隐隐约约可以看出秦始皇与骊山似乎有些缘分。他的墓地也选在骊山之旁。秦始皇..._秦始皇陵背山面水左右各是什么

【vscode】vscode中文支持设置_如何让vscode支持注释中文-程序员宅基地

文章浏览阅读209次。1)打开vscode工具;2)使用快捷键组合【Ctrl+Shift+p】,在搜索框中输入“configure display language”,点击确定后;3)修改locale.json文件下的属性“locale”为“zh-CN”;4)重启vscode工具;如果重启后vscode菜单等仍然是英文显示,在商店查看已安装的插件,把中文插件重新安装一遍(如下图),然后在重启工具。在上图中商..._如何让vscode支持注释中文

STM8学习笔记---串口uart1_stm8串口发送字符串-程序员宅基地

文章浏览阅读1.4w次,点赞3次,收藏14次。使用uart1串口,需要用到stm8s_uart1.c和stm8s_uart1.h两个文件1、建立工程目录结构如下:2、编写uart.h文件如下:#ifndef __UART_H#define __UART_H#include "stm8s.h"#include "stm8s_clk.h"void USART_Configuration(void); //串口配置函数void UART_sen..._stm8串口发送字符串

X11 Wayland 及 Mir 比较_mir x11-程序员宅基地

文章浏览阅读1.1w次,点赞3次,收藏8次。MirCanonical 2013年3月宣布开发自己的显示服务器 Mir之后,引发了开源界的大量谴责,很多人指责Canonical为什么不采用被设计用来取代X11的Wayland,Wayland的开发者也表示Wayland完全能够满足Canonical的需求,指责Canonical搞分裂的行为。而 Canonical 则表示现在的 X 以及未来的 Wayland 无法满足未来横跨桌面、手机_mir x11

Linux 连接sftp 影响下载速度的因素_sftp速度受什么限制-程序员宅基地

文章浏览阅读5k次。  最近公司的一个项目需要使用sftp来下载文件到Linux服务器,然后再通过AES解密,RSA验签,解压等操作读取数据然后插入到数据库中。  公司的sftp部署到了公网上,刚开始传输小文件的时候。sftp都是正常,没有发现什么异常情况。但是当文件达到600M时候,sftp就卡着不动了。我自己电脑上跑项目下载速度还是可以的,大约10min就可以了。但是Linux中卡死了,下载不完。  首先分析..._sftp速度受什么限制