成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

shiyang6017 / 1938人閱讀

摘要：想閱讀更多優(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ù)組中每個(gè)值的函數(shù)，包含四個(gè)參數(shù)：

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

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

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

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

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

rudeuce 過程描述：

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

回到原文：

如下面的例子所示，咱們想讓 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)建一個(gè)數(shù)組。

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

使用reduce來創(chuàng)建一個(gè)函數(shù)，參數(shù)為一個(gè)數(shù)組，最后輸出以數(shù)組項(xiàng)為鍵，索引為值，如 {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è)置，咱們可以將它與一個(gè)可重用的函數(shù)放在一起，該函數(shù)傳入一個(gè)數(shù)組(data)、一個(gè)sortby數(shù)組和一個(gè)sortField，這樣咱們就知道要在哪個(gè)字段上排序：

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"}))

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

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

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

完整代碼：

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"
  })
);

運(yùn)行結(jié)果：

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

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

交流

干貨系列文章匯總?cè)缦?，覺得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。

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

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

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

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

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

相關(guān)文章

  • 2017-08-06 前端日報(bào)

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

    z2xy 評論0 收藏0

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

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

    seanHai 評論0 收藏0

  • XML 實(shí)體擴(kuò)展攻擊

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

    TerryCai 評論0 收藏0

  • Jest + Enzyme 前端自動化測試

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

    xushaojieaaa 評論0 收藏0

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

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

    kviccn 評論0 收藏0

發(fā)表評論

0條評論

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