JS 中創建自定義排序方法

shiyang6017 發布于2019-08-26 10:47 / 1935人閱讀

摘要：想閱讀更多優質文章請猛戳博客一年百來篇優質文章等著你一般情況咱們排序大都按數字或字母順序，但也有一些情況下，咱們可能需要自定義排序順序。數組中正在處理的元素。

為了保證的可讀性，本文采用意譯而非直譯。

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！

一般情況咱們排序大都按數字或字母順序，但也有一些情況下，咱們可能需要自定義排序順序。

在此之前先簡單介紹一下 reduce 方法：

語法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

callback：執行數組中每個值的函數，包含四個參數：

accumulator：累計器累計回調的返回值; 它是上一次調用回調時返回的累積值，或initialValue（見于下方）。

currentValue：數組中正在處理的元素。

currentIndex (可選):數組中正在處理的當前元素的索引。如果提供了initialValue，則起始索引號為0，否則為1。

array(可選): 調用 reduce() 的數組

initialValue(可選):作為第一次調用 callback 函數時的第一個參數的值。如果沒有提供初始值，則將使用數組中的第一個元素。在沒有初始值的空數組上調用 reduce 將報錯。

rudeuce 過程描述：

回調函數第一次執行時，accumulator 和currentValue的取值有兩種情況：如果調用reduce()時提供了initialValue，accumulator取值為initialValue，currentValue取數組中的第一個值；如果沒有提供 initialValue，那么accumulator取數組中的第一個值，currentValue取數組中的第二個值。

回到原文：

如下面的例子所示，咱們想讓 inProgress 在第一位，接著是 todo,然后是 done。

const tasks = [
  {id:1, title: "Job A", status: "done"},
  {id:2, title: "Job B", status: "inProgress"},
  {id:3, title: "Job C", status: "todo"},
  {id:4, title: "Job D", status: "inProgress"},
  {id:5, title: "Job E", status: "todo"}
]

首先按照所需的排序順序創建一個數組。

const sortBy = ["inProgress", "todo", "done"]

使用reduce來創建一個函數，參數為一個數組，最后輸出以數組項為鍵，索引為值，如 {inProgress：0，todo：1，done：2}。

const sortByObject = data => data.reduce(
  (obj,item,index) => ({
    ...obj,
    [item]:index
}), {}
)
console.log(sortByObject(sortBy))
/* {inProgress: 0, todo: 1, done: 2} */

這樣就有了排序設置，咱們可以將它與一個可重用的函數放在一起，該函數傳入一個數組(data)、一個sortby數組和一個sortField，這樣咱們就知道要在哪個字段上排序：

const customSort = ({data, sortBy, sortField}) => {
  const sortByObject = sortBy.reduce(
  (obj, item, index) => ({
      ...obj,
      [item]: index
  }), {})
  return data.sort((a, b) => sortByObject[a[sortField]] - sortByObject[b[sortField]])
}

console.log(customSort({data:tasks, sortBy, sortField: "status"}))

這樣就可以按照咱們的自定義順序排序，不過還有一個問題，如果列表中有一個status不同的項(不在咱們的排序順序中)，就會出現問題。因此，為了處理這個問題，咱們需要設置一個默認的sort字段來捕獲排序中不需要的所有項。

const tasksWithDefault = tasks.map(item => (
  {  
    ...item,
    sortStatus: sortBy.includes(item.status) ? item.status:"other"
  })
 )

這次傳遞的是更新后的sort字段，那么現在就有了正確的排序順序，列表底部還有包含狀態為 other 的項目。

完整代碼：

const tasks = [
  { id: 1, title: "Job A", status: "done" },
  { id: 2, title: "Job B", status: "inProgress" },
  { id: 3, title: "Job C", status: "todo" },
  { id: 3, title: "Job D", status: "onHold" },
  { id: 4, title: "Job E", status: "inProgress" },
  { id: 5, title: "Job F", status: "todo" }
];

const sortBy = ["inProgress", "todo", "done"];

const customSort = ({ data, sortBy, sortField }) => {
  const sortByObject = sortBy.reduce(
    (obj, item, index) => ({
      ...obj,
      [item]: index
    }),
    {}
  );
  return data.sort(
    (a, b) => sortByObject[a[sortField]] - sortByObject[b[sortField]]
  );
};

const tasksWithDefault = tasks.map(item => ({
  ...item,
  sortStatus: sortBy.includes(item.status) ? item.status : "other"
}));
console.log(
  customSort({
    data: tasksWithDefault,
    sortBy: [...sortBy, "other"],
    sortField: "sortStatus"
  })
);

運行結果：

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://www.youtube.com/watch...

交流

干貨系列文章匯總如下，覺得不錯點個Star，歡迎加群互相學習。

https://github.com/qq44924588...

我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨，在進階的路上，共勉！

關注公眾號，后臺回復福利，即可看到福利，你懂的。

GPU云服務器云服務器 js中數據排序方法 js函數定義方法 js中數據排序方法有哪些 js 提示方法未定義

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106784.html

2017-08-06 前端日報

摘要：前端日報精選前端實現文件的斷點續傳精讀最佳前端面試題及面試官技巧渲染機制解析十日談第一日繪制隨機不規則三角彩條小談個人主頁的實現發布中文譯使用被認為是有害的了解的命令掘金譯文檔序言及章上北歐小鎮的前端小船譯文檔 2017-08-06 前端日報精選前端實現文件的斷點續傳精讀《最佳前端面試題》及面試官技巧React 渲染機制解析【React Native十日談】第一日繪制隨機不規則三角...

z2xy 2019-08-20 18:33 評論0 收藏0
【Docker實戰入門學習筆記】什么是docker？

摘要：實現前述目的的方式有兩種在一個文件中指定一個基礎鏡像及需要完成的修改或通過運行一個鏡像，對其進行修改并提交。容器對外公開服務是必要的，因此允許公開容器的特定端口。鏡像必須完全可移植，不允許例外。 Docker是一個相對較新且發展非?？焖俚捻椖?，可用來創建非常輕量的虛擬機。注意，這里的引號非常重要，Docker創建的并非真正的虛擬機，而更像是打了激素的chroot，嗯，是大量的激素。 D...

seanHai 2019-06-28 16:07 評論0 收藏0
XML 實體擴展攻擊

摘要：雖說可以通過上述方式進行防御，遠程實體擴展通過使解析器發出遠程請求來獲得被引用實體的擴展值來進行攻擊。返回結果將自行定義其他解析器必須另行請求的外部實體。 XMl Entity Expansion（攻擊）某種程度上類似于 XML Entity Expansion，但是它主要試圖通過消耗目標程序的服務器環境來進行DOS攻擊的。這種攻擊基于XML Entity Expansion實現，通過...

TerryCai 2019-08-27 10:52 評論0 收藏0
Jest + Enzyme 前端自動化測試

摘要：簡介是發布的一個開源的基于框架的單元測試工具。具體版本對照如下版本版本此處使用的版本為，所以我們需要安裝依賴安裝完成，接下來需要進行相關的配置。這樣就可以將測試集中在組件的結構和邏輯上。 Jest、Enzyme 簡介 Jest 是 Facebook 發布的一個開源的、基于 Jasmine 框架的 JavaScript 單元測試工具。 Enzyme 是 React 的測試類庫。 Enzy...

xushaojieaaa 2019-08-23 14:47 評論0 收藏0
觀察者設計模式

摘要：定義觀察者設計模式中有一個對象被稱為根據觀察者維護一個對象列表，自動通知它們對狀態的任何修改。與觀察者模式不同，它允許任何訂閱者實現一個適當的事件處理程序來注冊并接收發布者發布的主題通知。觀察者設計模式是一個好的設計模式，這個模式我們在開發中比較常見，尤其是它的變形模式訂閱/發布者模式我們更是很熟悉，在我們所熟悉jQuery庫和vue.js框架中我們都有體現。我在面試中也曾經被問到o...

kviccn 2019-08-21 18:32 評論0 收藏0