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']

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript中合并数组的N种方法

    这是一篇简单的文章,关于JavaScript数组使用的一些技巧.我们将使用不同的方法结合/合并两个JS数组,以及讨论每个方法的优点/缺点. 让我们先考虑下面这情况: 复制代码 代码如下: var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]; var b = [ "foo", "bar", "baz", "bam", "bun", "fun" ]; 很显然最简单的结

  • js深度合并两个数组对象的实现

    目录 js深度合并两个数组对象 关于数组对象的深浅合并 js深度合并两个数组对象 js合并两个数组对象, 如果a中含有b,则b的值覆盖a的值 如果a中不含有b 则b的值新增到a MergeRecursive(obj1, obj2) { // 合并两个数组 for (var p in obj2) { if (obj1[p] === undefined) { // 如果obj1没有p 直接把obj2的p加入 obj1[p] = obj2[p] } try { if (obj2[p].construc

  • javascript合并两个数组最简单的实现方法

    在开发的过程中,我们很多时候会遇到需要将两个数组合并成一个数组的情况出现. var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; // 将arr1和arr2合并成为[1, 2, 3, 4, 5, 6] 这里总结一下在JavaScript中合并两个数组的方法. for循环数组 这个方式是最简单的,也是最容易实现的. var arr3 = []; // 遍历arr1 for (var i = 0; i < arr1.length; i++) { arr3.push(

  • 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: '陈伟停',     gend

  • numpy系列之数组合并(横向和纵向)

    目录 1.横向合并 1.1 concatenate方法 1.2 hstack方法 1.3 column_stack方法 2.纵向合并 2.1 concatenate方法 2.2 vstack方法 2.3 row_stack方法 先新建两个数组用于合并 import numpy as np arr1 = np.array([[1, 2, 3], [4, 5, 6]]) print(arr1) result: [[1 2 3]  [4 5 6]] arr2 = np.array([[7, 8, 9]

  • JS对象创建的几种方式整理

    最近一直在看JS高级程序设计这本书,有空来梳理一下几种创建对象的方式.话不多说,直接步入正题. 第一种:Object构造函数创建 var Person = new Object(); Person.name = 'Nike'; Person.age = 29; 这行代码创建了Object引用类型的一个新实例,然后把实例保存在变量Person中. 第二种:使用对象字面量表示法 var Person = {};//相当于var Person = new Object(); var Person =

  • 基于JS对象创建常用方式及原理分析

    基于JS对象创建常用方式及原理分析

    前言 俗话说"在js语言中,一切都对象",而且创建对象的方式也有很多种,所以今天我们做一下梳理 最简单的方式 JavaScript创建对象最简单的方式是:对象字面量形式或使用Object构造函数 对象字面量形式 var person = new Object(); person.name = "jack"; person.sayName = function () { alert(this.name) } 使用Object构造函数 var person = { na

  • 详解JS对象封装的常用方式

    详解JS对象封装的常用方式

    JS是一门面向对象语言,其对象是用prototype属性来模拟的,下面,来看看如何封装JS对象. 常规封装 function Person (name,age,sex){ this.name = name; this.age = age; this.sex = sex; } Pserson.prototype = { constructor:Person, sayHello:function(){ console.log('hello'); } } 这种方式是比较常见的方式,比较直观,但是Per

  • 理解js对象继承的N种模式

    本文分享了js对象继承的N种模式,供大家参考. 一.原型链继承 function Person(){}; Person.prototype = { constructor: Person, name: "Oliver" }; function People(){}; People.prototype = new Person(); People.prototype.constructor = People; People.prototype.sayName = function(){

  • 浅谈js对象的创建和对6种继承模式的理解和遐想

    JS中总共有六种继承模式,包括原型链.借用构造函数.组合继承.原型式继承寄生式继承和寄生组合式继承.为了便于理解记忆,我遐想了一个过程,对6中模式进行了简单的阐述. 很长的一个故事,姑且起个名字叫女娲造人吧. 创建对象 女娲一个一个的捏人(创建对象),这样太慢,于是设计了一种机器(函数),想造什么样的,告诉他这个人有哪些特点和功能,机器来制造.这就是工厂模式的(使用同一个接口创建对象,回产生大量重复代码,由此发明了一种函数(模具)). 但是机器造人同样也比较麻烦(挖土.和泥.捏眼睛.捏鼻子...

  • JS 实现导航菜单中的二级下拉菜单的几种方式

    JS 实现导航菜单中的二级下拉菜单的几种方式

    最近整理了, JS 实现导航菜单中的二级下拉菜单的三种方式,便于项目中应用. 如何实现导航菜单栏中的二级下拉菜单? 我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <meta charset="UTF-8"> <title>Document</title> <style> *{margin

  • js实现以最简单的方式将数组元素添加到对象中的方法

    如下所示: //如题,通常做法就是循环数组,最后在添加length属性,如: var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr.length;i++) { obj[i] = pushArr[i]; } obj.length = pushArr.length; console.log(obj); //{0:11,1:22,2:33,3:44,4:55,5:66,length:6} 简单方法: //js将数组

  • JS对象数组去重的3种方法示例及对比

    JS对象数组去重的3种方法示例及对比

    目录 一.去重前后数据对比 二.使用方法 1.使用filter和Map 2.使用reduce 3.使用for循环 三.2400条数据,三种方法处理时间对比 总结 一.去重前后数据对比 // 原数据是这样的 // 去重后数据是这样的 [{ [{ "goodsId": "1", "goodsId": "1", "quota": 12, "quota": 12, "skuId&quo

随机推荐