[譯]正確使用 sort() 方法

dreambei 發布于2019-08-26 10:19 / 2079人閱讀

摘要：方法參數該有一個可選參數，允許此方法幫助對內容進行排序。例如，在非常大的數組中，可以使用新的方法來獲得更有效的排序函數，而不是使用。在瀏覽器和節點中以全局對象的形式呈現，并具有廣泛的支持包括。

英文原文： 《Usar correctamente el método sort()》   
注意：內容有做精簡和調整。

在過去的幾個星期里，我們在不同的團隊中看到，一般來說都沒有使用 Array.prototype.sort() 的習慣，并且不知道這種方法是如何工作的。今天我們將嘗試簡要描述它是如何工作的 .sort()，揭示它的一些秘密。

1. 修改原數組

在這種情況下，我們必須記住，此方法通過對數組進行排序來修改數組，返回相同的有序數組，但不返回新數組。如果我們想要保持數組不可變并獲得另一個排序，這一點很重要，我們必須在排序之前制作數組的拷貝。

2. 字符串在 Unicode 代碼中的位置比較

默認情況下，.sort() 方法會根據 Unicode 代碼中每個字母的位置將數組值排序為字符串，因此您可以對此數組進行排序而不會出現問題：

console.log(["Zaragoza", "Madrid", "Barcelona"].sort());
// [ "Barcelona", "Madrid", "Zaragoza" ]

這似乎是正確的，但是如果和一些名稱以小寫字母開頭，那么排序似乎不正確：

console.log(["Zaragoza", "madrid", "Barcelona"].sort());
// [ "Barcelona", "Zaragoza", "madrid" ]

在這種情況下，排序是在 Unicode 代碼表中的每個字母的位置之后完成的，并且 m 落后 Z ，因此它已經以這種方式排序。

如果我們想對數字排序，事情就會變得復雜起來:

console.log([80, 9, 100].sort());
// [ 100, 80, 9 ]

結果似乎很荒謬，但這是有道理的，發生的事情是數字已被轉換為字符串，因此被比較的是字符串"100"，"80"并且"9"。由于它們在 Unicode 代碼中的位置是按順序的，因此排序是正確的，即使它不是我們最初的預期。

這些情況的產生導致一些人放棄使用 .sort() 產生混亂的行為。這有點草率，因為只需一點幫助，這種方法可以毫無問題地運行。

3. Sort() 方法參數

該 .sort() 有一個可選參數，允許此方法幫助對內容進行排序。這是此方法的關鍵，因為我們對每種情況都感興趣。

此函數接收兩個要比較的值，因此也會有這么三種情況：

如果第一個值大于第二個值，則返回正值 (1);

如果第一個值小于第二個值，則返回負值 (-1);

如果兩個值相等或等效于排序，則返回零值 (0);

這個函數由 Javascript 調用，只要您需要對數組中的元素進行排序，我們就可以進行必要的比較和調整。例如，為了比較數字，我們可以使用類似方法：

console.log([80, 9, 100].sort((a, b) => a - b));
// [ 9, 80, 100 ]

另外，(a, b) => a – b 還可以這么使用：使用其中一個值 a 去判斷是否大于另一個值 b 來返回排序結果：

const data = [ "Zaragoza", "madrid", "Barcelona" ];
data.sort ((a, b) => a.toLowerCase () > b.toLowerCase ());
console.log (data);
// [ "Zaragoza", "madrid", "Barcelona" ]

顯然結果不正確，因為我們草率的將函數比較的結果 true 或者 false 返回，我們必須記住支持函數 .sort() 希望我們返回 -1 ， 1 或者 0。為了使它正常運行，我們必須做修改：

const data = [ "Zaragoza", "madrid", "Barcelona" ];
data.sort ((a, b) =>
  a.toLowerCase() > b.toLowerCase() ? 1 :
  a.toLowerCase() < b.toLowerCase() ? -1:
  0
);
console.log (data);
// [ "Barcelona", "madrid", "Zaragoza" ]

現在的結果是我們需要的，因為我們已經對小寫和大寫也進行了比較，并且我們已經返回-1，1或者0根據每種情況。

我們還沒有真正完成，因為如果我們加入一些重音字母，我們會得到一個不希望的結果：

const data = [ "Zaragoza", "madrid", "Barcelona", "ávila" ];

data.sort ((a, b) =>
  a.toLowerCase() > b.toLowerCase() ? 1 :
  a.toLowerCase() < b.toLowerCase() ? -1:
  0
);
console.log (data);
// [ "Barcelona", "madrid", "Zaragoza", "ávila" ]

當我們想對文本字符串進行排序，就非常有必要使用 .localeCompare() 方法，也是非常重要。

4. 用對象屬性排序數組

通常，如果數組包含對象，我們可以使用對象的屬性進行比較，例如：

const data = require ("./municipios.json");
data.sort ((a, b) => a.municipio.localeCompare (b.municipio));

我們可以對數據結構中的日期和任何其他類型的對象執行相同的操作。

5. 關于性能方面

如果我們想對非常大的數組進行排序，我們必須記住。sort() 方法的支持函數將被多次調用，我們必須避免在這個函數中執行許多操作或非常重的操作。我們必須盡可能有效地進行比較。

例如，在非常大的數組中，可以使用新的方法 Int.Collate().compare 來獲得更有效的排序函數，而不是使用 .localecompare()。Int 對象是名為 International API ，也是 ECMA-402 的標準的一部分，

該標準側重于國際化功能，包括每種語言的正確排序。Int 在瀏覽器和節點中以全局對象的形式呈現，并具有廣泛的支持(包括IE11)。

const data    = [ "Zaragoza", "ávila", "madrid", "Barcelona" ];
const compare = new Intl.Collator ().compare;
data.sort (compare);
console.log (data);
// [ "ávila", "Barcelona", "madrid", "Zaragoza" ]

排序操作很復雜，性能也很差，因此對于非常大的數組，排序方法支持函數速度的任何改進都將對性能產生非常顯著的影響。

6. 總結

一般來說，我們應該利用 .sort() 功能和一個支持函數來控制排序應該如何執行：

數字： (a, b) => a – b

鏈式： (a, b) => a.localeCompare(b)

在沒有函數參數的情況下使用 .sort() 是沒有意義的，也許在少數情況下是這樣，但是如果我們用一個簡單的函數支持它，那么 .sort 是一個非常有用的工具。

在許多情況下，排序是一個基本的操作，我們不應該放棄在Javascript中進行這種排序。

關于我

本文首發在 pingan8787個人博客，如需轉載請保留個人介紹。

Author	王平安
E-mail	pingan8787@qq.com
博客	www.pingan8787.com
微信	pingan8787
每日文章推薦	https://github.com/pingan8787...
ES小冊	js.pingan8787.com

微信公眾號

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

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

(譯)React hooks：它不是一種魔法，只是一個數組——使用圖表揭秘提案規則

摘要：它并不是實際在內部的工作方式，而且它只是一個提案，在未來都會有可能發生變化。這意味著，數據的存儲是獨立于組件之外的。因此，有一個訣竅就是你需要思考作為一組需要一個匹配一致的指針去管理的數組染陌譯。原文地址：https://medium.com/@ryardley/... 譯文：染陌（Github）譯文地址：https://github.com/answershuto/Blog 轉...

fjcgreat 2019-08-23 13:41 評論0 收藏0
【譯】JS基礎算法腳本：求插入數字的最小索引

摘要：需求給出定兩個參數，參數，參數查找參數插入數組時的最小索引思路數組重排序判斷數組中是否包含的最小數，有，則返回其最小數的索引無，則返回其數組長度思路用變量存儲大于中各元素的次數返回變量思路數組重排序查找大于的數組最小值的索引索引等于返需求給出定兩個參數，參數1：arr，參數2：num；查找參數num插入數組時的最小索引 getIndexToIns([10, 20, 30, 40, ...

xingqiba 2019-08-21 12:00 評論0 收藏0
[譯]JavaScript ES6迭代器指南

摘要：前言又稱提供一個全新的迭代器的概念，它允許我們在語言層面上定義一個有限或無限的序列。后者可以被用來幫助我們理解迭代器。但是當我們使用迭代器時，這個問題就迎刃而解了。是中的新語法，用來配合迭代器。這是因為數組的迭代器只返回其中預期的元素。前言 EcmaScript 2015 （又稱ES6）提供一個全新的迭代器的概念，它允許我們在語言層面上定義一個（有限或無限的）序列。暫時先拋開它...

daryl 2019-08-21 10:36 評論0 收藏0
【譯】Handling Events

摘要：如果你使用實驗性屬性初始化語法，你能用這方法來正確綁定回調函數的綁定這語法在中默認支持。然而，如果這回調函數是作為一個傳遞到更下一級的組件中的時候，些組件可能會做一個額外的重新渲染。下面是react官方文檔的個人翻譯，如有翻譯錯誤，請多多指出原文地址：https://facebook.github.io/re... Handling events with React element...

sugarmo 2019-08-20 14:47 評論0 收藏0