JavaScript 实现 JSON 数组合并、去重与元素删除

作者：青柠时间：2026-10-23 22:06:14浏览：641

本文介绍在 JavaScript 中如何处理 JSON 数组。主要涵盖三种操作：使用 Object.assign 进行浅拷贝合并、利用 concat 方法连接数组，以及通过 map 结合临时对象实现基于特定属性（如 name）的去重。此外，还详细说明了 splice 方法在删除数组指定位置元素时的参数用法及注意事项。

本文主要讲解如何在 JavaScript 中对两个 JSON 数组执行合并、去重操作，以及如何删除数组中的特定元素。


let ha = [
 {id:'H',name:'3'},
 {id:'A',name:'6'},
 {id:'B',name:'14'},
 {id:'C',name:'60'}
 ];

let hb= [ 
 {id:'H',name:'2'},
 {id:'A',name:'6'},
 {id:'B',name:'16'}, 
 {id:'N',name:'2'},
 {id:'C',name:'19'}
 ];

// 合并两个json数组，并去重;

ha= Object.assign([], ha, hb);
console.log('ha',ha);

// [ 
 {id:'H',name:'2'},
 {id:'A',name:'6'},
 {id:'B',name:'16'}, 
 {id:'N',name:'2'},
 {id:'C',name:'19'}
 ];


// 去除json数组中的某一项

ha.splice(3, 1);
console.log('ha',ha);

// [ 
 {id:'H',name:'2'},
 {id:'A',name:'6'},
 {id:'B',name:'16'}, 
 {id:'C',name:'19'}
 ];

注意：

一、Object.assign() 方法：浅拷贝与对象属性合并（数组本质也是对象）

二、splice() 方法

在 W3C 文档中可以查阅到关于 splice() 的相关描述：

详细信息可参考这篇文章：https://www.jb51.net/article/43046.htm

arrayObject.splice(index, howmany, item1, ....., itemX) 方法用于向或从数组中添加/删除项目，并返回被删除的项目。

参数 1：index 指定插入或（和）删除操作的起始位置；

参数 2：howmany 指定从数组中添加或删除的元素个数；

参数 3：item1, ....., itemX 为可选参数，在执行添加操作时填入，表示需要添加的元素。

参考：

JS 中彻底删除 json 对象组成的数组中的元素

js 删除 json 中指定的元素

JS 删除数组里的某个元素方法

下面是其他网友的补充

将两个 json 数组合并


var str1=[{name:"11",age:11}];
var str2=[{name:"22",age:22}];
 
var str3 = [];
 
for (var i = 0; i < str1.length; i++) {
  str3.push(str1[i]);
}
 
for (var i = 0; i < str2.length; i++) {
  str3.push(str2[i]);
}
 
--------------
 
var str3 = str1.concat(str2);

其本质仍是数组操作，因此可以使用合并数组的方法来执行合并。

JS 实现 JSON 数组合并和去重

假设有两个 json 数组 demo1 和 demo2

var demo1 = [{"id": 0, "name": "牛肉"},{"id": 1,"name": "羊肉"}]; var demo2 = [{"id": 2, "name": "牛肉"},{"id": 3,"name": "鱼肉"},{ "id": 4,"name":"鸡肉"}];

数组合并

var totalDemo = demo1.concat(demo2); console.log(totalDemo); //[{"id": 0, "name": "牛肉"},{"id": 1,"name": "羊肉"},{"id": 2, "name": "牛肉"},{"id": 3,"name": "鱼肉"},{ "id": 4,"name":"鸡肉"}]

数组合并使用的是 concat 方法，该函数可用于字符串之间的连接以及数组之间的连接。

数组去重

上面已经得到合并后的数组 totalDemo，现在需要去掉 name 属性相同的 json 对象。


var temp = {};  //用于name判断重复
var result = []; //最后的新数组

totalDemo.map(function (item, index) {
  if(!temp[item.name]){
    result.push(item);
    temp[item.name] = true;
  }
});

console.log(result);//[{"id": 0, "name": "牛肉"},{"id": 1,"name": "羊肉"},{"id": 3,"name": "鱼肉"},{ "id": 4,"name":"鸡肉"}];

map 方法：按照原始数组元素顺序依次处理元素。可以在 map 方法里面输入 console.log(item) 打印查看，它会把数组中的对象依次打印出来。

作者最新文章

ES6模块化中js文件怎么用import和export交互

2026-11-05 17:00:48

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53