国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS 中創(chuàng)建自定義排序方法

shiyang6017 / 1930人閱讀

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

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

想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！

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

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

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

callback：執(zhí)行數(shù)組中每個值的函數(shù)，包含四個參數(shù)：

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

currentValue：數(shù)組中正在處理的元素。

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

array(可選): 調(diào)用 reduce() 的數(shù)組

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

rudeuce 過程描述：

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

回到原文：

如下面的例子所示，咱們想讓 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"}
]

首先按照所需的排序順序創(chuàng)建一個數(shù)組。

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

使用reduce來創(chuàng)建一個函數(shù)，參數(shù)為一個數(shù)組，最后輸出以數(shù)組項為鍵，索引為值，如 {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} */

這樣就有了排序設(shè)置，咱們可以將它與一個可重用的函數(shù)放在一起，該函數(shù)傳入一個數(shù)組(data)、一個sortby數(shù)組和一個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不同的項(不在咱們的排序順序中)，就會出現(xiàn)問題。因此，為了處理這個問題，咱們需要設(shè)置一個默認的sort字段來捕獲排序中不需要的所有項。

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

這次傳遞的是更新后的sort字段，那么現(xiàn)在就有了正確的排序順序，列表底部還有包含狀態(tài)為 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"
  })
);

運行結(jié)果：

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行l(wèi)og 調(diào)試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug。

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

交流

干貨系列文章匯總?cè)缦拢X得不錯點個Star，歡迎 加群 互相學(xué)習(xí)。

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

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

關(guān)注公眾號，后臺回復(fù)福利，即可看到福利，你懂的。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/106784.html

相關(guān)文章

  • 2017-08-06 前端日報

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

    z2xy 評論0 收藏0

  • 【Docker實戰(zhàn)入門學(xué)習(xí)筆記】什么是docker？

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

    seanHai 評論0 收藏0

  • XML 實體擴展攻擊

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

    TerryCai 評論0 收藏0

  • Jest + Enzyme 前端自動化測試

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

    xushaojieaaa 評論0 收藏0

  • 觀察者設(shè)計模式

    摘要：定義觀察者設(shè)計模式中有一個對象被稱為根據(jù)觀察者維護一個對象列表，自動通知它們對狀態(tài)的任何修改。與觀察者模式不同，它允許任何訂閱者實現(xiàn)一個適當(dāng)?shù)氖录幚沓绦騺碜圆⒔邮瞻l(fā)布者發(fā)布的主題通知。 觀察者設(shè)計模式是一個好的設(shè)計模式，這個模式我們在開發(fā)中比較常見，尤其是它的變形模式訂閱/發(fā)布者模式我們更是很熟悉，在我們所熟悉jQuery庫和vue.js框架中我們都有體現(xiàn)。我在面試中也曾經(jīng)被問到o...

    kviccn 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<