本文介绍在 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) 打印查看,它会把数组中的对象依次打印出来。