js中对象合并的4种方式,数组合并的4种方法
目录
一、对象合并
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']
js中对象合并的4种方式,数组合并的4种方法相关推荐
- 前端百题斩【006】——js中三类字符串转数字的方式
写该系列文章的初衷是"让每位前端工程师掌握高频知识点,为工作助力".这是前端百题斩的第6斩,希望朋友们关注公众号"执鸢者",用知识武装自己的头脑. js中字符串 ...
- JS 中对象的深浅拷贝(ES3、ES5、ES6不同方法底层实现,一文搞清楚深浅拷贝面试常问题)
JS 中对象的深浅拷贝 拷贝我们都知道这个词的意思,我们经常做过复制.粘贴的操作,其中的复制就是拷贝,那么在拷贝的时候,如果我们复制出来的内容和原内容是完全的分开,各自不相影响,那么这就属于深拷贝 ...
- JS中对象按属性排序(冒泡排序)
原文地址 https://www.cnblogs.com/it-Ren/p/10898947.html 一路向北√ 越努力,越幸运. JS中对象按属性排序(冒泡排序) 冒泡排序:它重复地走访过要排序的 ...
- JS中对象key为数字的使用
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>JS中 ...
- js中对象数组根据对象id分组并转map
js中对象数组根据对象id分组并转map 如果要将具有相同 id 属性的对象元素,分成不同的数组. 可以先从对象数组中提取相同的 id 属性,再使用 Array.reduce() 和 Map 来进行对 ...
- js中对象参数的传递
js中对象参数传递都是按值传递,当参数为对象时,传递的是对象的引用地址,函数中改变对象参数的值时,会影响函数外的该对象.但为对象参数重新赋值时,相当于改变了其引用地址,将其指向了其它内存地址,故自然不 ...
- Java 创建对象的 6 种方式,总有一种适合你
创建对象的 6 种方式 假设有个女朋友类: @Data @NoArgsConstructor @AllArgsConstructor class GirlFriend {private String ...
- JS中对象的四种继承方式:class继承、原型链继承、构造函数继承、组合继承(构造函数和原型链继承的结合)
前言 才发现之前没有对JavaScript中的继承做过总结,不过看得到是不少,接下来就对这几种继承方式做一下总结. class继承 class继承是ES6引入的标准的继承方式. ES6引入了class ...
- js中对象数据类型的深拷贝方法(5种)
目录 一.使用JSON暴力转换 二. 使用拓展运算符+解构赋值 三. 使用对象的合并,即通过Object.assign()方法 四.通过遍历对象 五.利用循环递归 一.使用JSON暴力转换 通过JSO ...
最新文章
- 【Qt】Qt样式表总结(一):选择器
- 环形动画加载视图AnimatedCircleLoadingView
- 什么是脏读,不可重复读,幻读
- File类3 文件读取
- CPU 乱序执行验证
- php插入成功数据不显示,PHP插入数据不成功,什么原因呢?
- 机器学习都需要有哪些数学知识?
- tomcat默认连接数_Tomcat的默认连接器
- 苹果几最好用_深度解析安卓手机和苹果手机到底有哪些区别,哪种手机最好用...
- linux 实时查看日志 最新最后100行 tail
- AMPL这个币居然复活了,而且势不可挡!
- 大数据环境下数据质量指标体系
- pycharm下django实战
- matlab脉冲压缩,雷达线性调频脉冲压缩的原理及其matlab仿真
- 多媒体音箱选购指南--理论篇
- android P 锁屏初探 ——3 power键锁屏流程
- 5GC 网元AMF、SMF、AUSF、UPF、PCF、UDM、NRF、NSSF、NEF介绍
- 云计算机中弹性,什么是弹性云计算?
- 怎样让PHP提示错误信息
- 码隆科技在 CVPR 2019 主办商品识别大赛,等你来战!
热门文章
- python BFS最短路径问题
- 2018刚入手一台UGP U8VR眼镜,ugp vr眼镜怎么样评测效果好不好,跟我看看
- 对接百度OCR发票识别功能
- Corona建筑作品 | 272 Hedges Ave 海景顶级豪宅建筑表现
- 基于微信小程序的同城家政服务小程序
- CMSIS-DSP的arm_mat_init_f32矩阵求逆函数结果不对问题解决方法
- Home Assistant 接入 Lifesmart(云起智能)家居的途径。
- Python读取excel中的图片
- 关于video设置autoplay属性无法自动播放问题
- Mac上备份iphone照片