首頁 > 軟體

js操作兩個json陣列合併、去重,以及刪除某一項元素

2020-09-22 15:00:26

兩個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)列印看下,它會把陣列中的物件依次列印出來。


IT145.com E-mail:sddin#qq.com