快捷導(dǎo)航

JavaScript中數(shù)組嵌套對(duì)象排序方法的示例詳解

更新時(shí)間：2024年03月05日 08:29:03 作者：還是大劍師蘭特

在?JavaScript?中,可以使用?sort()?方法對(duì)包含嵌套對(duì)象的數(shù)組進(jìn)行排序,本文將通過(guò)三個(gè)簡(jiǎn)單的示例為大家進(jìn)行簡(jiǎn)單的介紹,需要的可以參考下

sort() 方法可以接受一個(gè)比較函數(shù)作為參數(shù)來(lái)指定排序規(guī)則。該比較函數(shù)應(yīng)該返回一個(gè)負(fù)數(shù)、零或正數(shù)，以指示要排序的兩個(gè)元素的相對(duì)順序。如果要對(duì)數(shù)組中的對(duì)象按照其屬性進(jìn)行排序，則可以在比較函數(shù)中訪問(wèn)這些屬性并將它們進(jìn)行比較。如果要對(duì)嵌套對(duì)象進(jìn)行排序，則可以使用點(diǎn)表示法或方括號(hào)表示法訪問(wèn)嵌套對(duì)象的屬性。

示例1

let arr = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Mary', age: 30 },
  { id: 4, name: 'Tom', age: 20 }
];

arr.sort(function(a, b) {
  if (a.age < b.age) {
    return -1;
  }
  if (a.age > b.age) {
    return 1;
  }
  
  // 年齡相同的情況下，按照 id 排序 
  if (a.id < b.id) {
    return -1;
  }
  if (a.id > b.id) {
    return 1;
  }

  return 0;
});

console.log(arr);

執(zhí)行結(jié)果：

示例2

var arr = [
 {name:'大', age:5},
 {name:'劍', age:18},
 {name:'師', age:8},
];

// 排序方法
function compare(property) {//property:根據(jù)什么屬性排序
 return function(a,b){
  var value1 = a[property];
  var value2 = b[property];
      // value2 - value1; ——> 降序
      // value1 - value2; ——> 升序
  return value1 - value2;//升序排序
 }
}

console.log(arr.sort(compare('age')))

執(zhí)行結(jié)果：

示例3

js提供了字符串的對(duì)比方法**localeCompare()**，該方法返回的是一個(gè)數(shù)字用來(lái)表示一個(gè)參考字符串和對(duì)比字符串是排序在前，在后或者相同。該方法基本不單獨(dú)使用，大部分時(shí)間是配合字符串排序使用的。

let arr = [
  { name: "張三", age: 20 },
  { name: "李四", age: 25 },
  { name: "王五", age: 22 }
];

// 按年齡升序排序
arr.sort((a, b) => a.age - b.age);
console.log(arr);
/*
[
  { name: "張三", age: 20 },
  { name: "王五", age: 22 },
  { name: "李四", age: 25 }
]
*/

// 按姓名升序排序
arr.sort((a, b) => a.name.localeCompare(b.name));
console.log(arr);
/*
[
  { name: "張三", age: 20 },
  { name: "李四", age: 25 },
  { name: "王五", age: 22 }
]
*/

什么是數(shù)組嵌套對(duì)象

數(shù)組嵌套對(duì)象是指一個(gè)數(shù)組中的元素是對(duì)象，這些對(duì)象可以包含多個(gè)屬性或方法。

處理嵌套對(duì)象數(shù)組時(shí)，可以使用多種方法來(lái)訪問(wèn)和操作其中的數(shù)據(jù)。以下是一些常見(jiàn)的操作方法：

遍歷數(shù)組：可以使用for循環(huán)、forEach方法或者for…of循環(huán)來(lái)遍歷數(shù)組中的每個(gè)對(duì)象。
訪問(wèn)對(duì)象屬性：通過(guò)點(diǎn)符號(hào)（.）或方括號(hào)（[]）語(yǔ)法來(lái)訪問(wèn)對(duì)象的屬性。
遞歸處理：如果數(shù)組中的對(duì)象還包含數(shù)組，可以通過(guò)遞歸函數(shù)來(lái)處理嵌套結(jié)構(gòu)。
使用高階函數(shù)：map、filter、reduce等高階數(shù)組方法可以用來(lái)轉(zhuǎn)換或操作數(shù)組中的元素。

到此這篇關(guān)于JavaScript中數(shù)組嵌套對(duì)象排序方法的示例詳解的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組嵌套對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: