Js陣列物件的屬性值升序排序，並指定陣列中的某個物件移動到陣列的最前面

追逐時光者發表於2020-07-26
JS陣列物件排序

需求整理：

　　本篇文章主要實現的是將一個陣列的中物件的屬性值通過升序的方式排序，然後能夠讓程式可以指定對應的陣列物件移動到程式的最前面。

陣列如下所示：

var arrayData= [{name: "夏明", Id:24}, {name: "小紅", Id: 25},{name: "大袁", Id: 22},{name: "大姚", Id: 23},{name: "小芳", Id: 18}];　　

首先把陣列中的Id值通過升序的方式排序：

//源陣列
var arrayData= [{name: "夏明", Id:24}, {name: "小紅", Id: 25},{name: "大袁", Id: 22},{name: "大姚", Id: 23},{name: "小芳", Id: 18}];　　

//重寫排序方法
var compare = function (attribute) {
   return function (obj1, obj2) {
   var val1 = obj1[attribute];
   var val2 = obj2[attribute];
   if (val1 < val2) {
    return -1;
   } else if (val1 > val2) {
    return 1;
   } else {
    return 0;
   }  
   } 
  } 
var newArrayData=arrayData.sort(compare('Id'));//通過Id排序完成後的陣列
console.log(newArrayData);

排序完成後輸出的值：

[{ name: "大袁", Id: 22 },  { name: "大姚", Id: 23 }, { name: "夏明", Id: 24 },{ name: "小紅", Id: 25 }]

找到Id為23的物件，移動到陣列的最前面去（注意Id值唯一）：

實現原理：因為移除陣列物件需要找到對應陣列物件的下標索引才能進行移除，現在我們需要移除Id=23的物件，讓其排到最前面去（先找到物件下標，然後把給陣列物件賦值給temporaryArry臨時陣列，然後在通過下標移除newArrayData中的該物件值，最後將arrayData等於temporaryArry.concat(newArrayData)重新渲染陣列資料）。

程式碼實現：

//建立臨時陣列
var  temporaryArry=[];

//找到陣列中Id=23的下標索引(從0開始)
let currentIdx=newArrayData.findIndex(v=>v.Id==23);
console.log('Id=23的索引值為：',currentIdx);

//把Id=23的物件賦值給臨時陣列
temporaryArry.push(newArrayData[currentIdx]);

//移除陣列newArray中Id=23的物件
newArrayData.splice(currentIdx,1);//從start[一般為物件的索引]的位置開始向後刪除delCount個元素

console.log('移除後的資料',newArrayData);

//重新渲染陣列
newArrayData=temporaryArry.concat(newArrayData);	

console.log(newArrayData);

輸出結果：　

[{ name: "大姚", Id: 23 }, { name: "小芳", Id: 18 }, { name: "大袁", Id: 22 }, { name: "夏明", Id: 24 },{ name: "小紅", Id: 25 }]

　

相關文章