js中数组的合并和对象的合并

妖狐艹你老母 2022-04-10 13:11 339阅读 0赞

## 1 数组合并 ##

### 1.1 concat 方法 ###

var a = [1,2,3], b = [4,5,6];
    var c = a.concat(b);
    console.log(c);// 1,2,3,4,5,6
    console.log(a);// 1,2,3  不改变本身

### 1.2 循环遍历 ###

var arr1 = ['a','b'];
    var arr2 = ['c','d','e'];
    
    for(var i=0;i<arr2.length;i++){
      arr1.push(arr2[i]);
    }
    
    console.log(arr1); //['a','b','c','d','e']

### 1.3 apply ###

合并数组arr1和数组arr2,使用Array.prototype.push.apply(arr1,arr2) or arr1.push.apply(arr1,arr2);

var arr1 = ['a','b'];
    var arr2 = ['c','d','e'];
    
    Array.prototype.push.apply(arr1,arr2);
    //或者
    arr1.push.apply(arr1,arr2);
    
    console.log(arr1); // ['a','b','c','d','e']

## 2 对象合并 ##

### 2.1 $.extend() ###

var obj1 = {'a': 1};
    var obj2 = {'b': 1};
    var c = $.extend(obj1, obj2);
    
    console.log(obj1); // {a: 1, b: 1}  obj1已被修改
    
    //或者
    var obj3 = $.extend({}, obj1, obj2);
    console.log(obj3); // {a: 1, b: 1} 不会改变obj1,obj2

#### 2.2 遍历赋值 ####

var obj1 = {'a':1};
    var obj2 = {'b':2,'c':3};
    
    for(var key in obj2){
      if(obj2.hasOwnProperty(key)===true){
        // 此处hasOwnProperty是判断自有属性
        // 使用 for in 循环遍历对象的属性时,原型链上的所有属性都将被访问会避免原型对象扩展带来的干扰
        obj1[key]=obj2[key];
      } 
    }
    
    console.log(obj1); // {'a':1,'b':2,'c':3};

### 2.3 Obj.assign() ###

可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。

Object.assign(target, …sources)

//a. 复制一个对象
    var obj = { a: 1 ,b:2};
    var copyObj = Object.assign({}, obj);
    console.log(copyObj); // { a: 1,b:2 }
    
    //b.合并多个对象
    var o1 = { a: 1 };
    var o2 = { b: 2 };
    var o3 = { c: 3 };
    
    var obj = Object.assign(o1, o2, o3);
    console.log(obj); // { a: 1, b: 2, c: 3 }
    console.log(o1);  // { a: 1, b: 2, c: 3 }, 且目标对象自身也会改变。

### 2.4 对象的深拷贝和浅拷贝 ###

#### 2.4.1 浅拷贝 ####

var obj1 = {'a':1};
    var obj2 = {'b':{'b1':22,'b2':33}};
    
    $.extend(obj1, obj2);   //obj1拷贝了obj2的属性
    
    console.log(obj1)  // {'a':1,'b'{'b1':22,'b2':33}}
    console.log(obj1.b.b1)  // 22
    
    obj2.b.b1 = 44;   //obj2重新赋值
    console.log(obj1.b.b1)  // 44  obj1.b仅拷贝了对象的指引，所以受原obj2的影响

#### 2.4.2 深拷贝 ####

var obj1 = {'a':1};
    var obj2 = {'b':{'b1':22,'b2':33}};
    
    $.extend(true,obj1, obj2);   //第一个参数设为true表示深复制
    
    console.log(obj1)  // {'a':1,'b'{'b1':22,'b2':33}}
    console.log(obj1.b.b1)  // 22
    
    obj2.b.b1 = 44;   //obj2重新赋值
    console.log(obj1.b.b1);  // 22 obj1拷贝了obj2的所有属性以及值，并不受obj2的影响

.

发表评论取消回复

表情：

评论列表（有 0 条评论，339人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS合并两个数组的方法

JS合并两个数组的方法我们在项目过程中，有时候会遇到需要将两个数组合并成为一个的情况。比如： var a = [1,2,3]; var b

妖狐艹你老母/ 2023年10月18日 22:06/ 0 赞/ 127 阅读

相关 JavaScript合并数组的方法

在JavaScript编程中，经常需要将不同数组合并为一个数组，以便于进行数据处理和展示。在本文中，我们将介绍JavaScript中常用的几种合并数组的方法。 JavaScr

╰+哭是因爲堅強的太久メ/ 2023年10月13日 17:49/ 0 赞/ 44 阅读

相关 java合并数组的方法

![5c2fb36cf5b649e28fdc98a6df17665f.jpeg][] 在 Java中，数组是一种重要的数据结构，在 Java中数组的操作方式有两种，

￡神魔★判官ぃ/ 2023年10月09日 21:11/ 0 赞/ 33 阅读

相关 js 对象合并与数组合并

在 JavaScript 中，对象和数组都是非常常见的数据结构，它们可以用来存储和操作数据。有时候我们需要将两个对象或数组合并在一起，以便更好地进行操作。本文将会介绍如何在 J

深碍√TFBOYSˉ_/ 2023年09月25日 21:45/ 0 赞/ 28 阅读

相关 jQuery中的extend的用法及实现对象和数组的深浅合并和深浅克隆

jQuery中的extend方法的作用 1.给jQuery的原型和对象扩展方法 2.数组和对象的深浅合并 jQuery.extend = jQuer

悠悠/ 2022年12月31日 02:29/ 0 赞/ 81 阅读

相关 js中数组的合并和对象的合并

1 数组合并 1.1 concat 方法 var a = [1,2,3], b = [4,5,6]; var c = a.concat(b);

妖狐艹你老母/ 2022年04月10日 13:11/ 0 赞/ 340 阅读

相关 js 合并数组的方法

> 数组案例： var a = \[1,2,3,4\]; var b = \[5,6,7,8\]; > 1，concat js的Array对象提供了一个叫co

素颜马尾好姑娘i/ 2022年01月29日 16:47/ 0 赞/ 275 阅读

相关 JS合并两个数组的方法

我们在项目过程中，有时候会遇到需要将两个数组合并成为一个的情况。 var a = [1,2,3]; var b = [4,5,6]; 有两个数组a、b，需求

阳光穿透心脏的1/2处/ 2022年01月22日 05:01/ 0 赞/ 281 阅读

相关 JS深度合并对象

/ 如果target(也就是FirstOBJ[key])存在，且是对象的话再去调用deepObjectMerge，否则就是Fir

Love The Way You Lie/ 2022年01月06日 08:25/ 0 赞/ 356 阅读

相关 java 数组的复制与合并

直接上案例，通过案例来讲解 static void m3() { int[] arr1= {1,5,8,7,4}; int[] arr2=ne

比眉伴天荒/ 2021年11月09日 01:40/ 0 赞/ 336 阅读