あなたが私が書くものが好きならばsubscribe to my newsletter . 任意の議論にお気軽に.
ジャバスクリプトarrays 任意の型のデータを保持できる順序付きコレクションです.配列は角括弧で作成されますと重複する要素を許可します.JavaScriptでは、組み込みメソッドを使用して配列の要素をソートできます.sort() .
この記事では、我々はsort() 方法5重要なヒント(または情報).あなたがそれらを有用見つける.

1 .デフォルト配列。sort ()は文字列型です

The sort() メソッドは配列要素をソートし、ソートされた配列を返します.

let artists = [
    'John White Abbott', 
    'Leonardo da Vinci', 
    'Charles Aubry', 
    'Anna Atkins', 
    'Barent Avercamp'
];

let sorted = artists.sort();

console.log('Sort the artist names', sorted);

出力

Sort the artist names
[
"Anna Atkins", 
"Barent Avercamp", 
"Charles Aubry", 
"John White Abbott", 
"Leonardo da Vinci"
]

注意してくださいsort() メソッドは実際に元の配列を展開します.

console.log(artists === sorted); // returns true

さて、ここで注意する重要な点はです.

With the sort() method, the default sort order is ascending, and elements are converted into strings. Hence the default sort() method is not enough to sort arrays with different data type elements.

どのように分類順を降順？

デフォルトsort() 昇順でソートします.どのように、我々は降順でソートを実行しますか?ようこそ.compare function . エーcompare function 要素は、その戻り値に従って順序でソートするのに役立ちます.例を見てみましょう.

// A compare function
function (a, b) {
    if (a > b) {
      return -1;
    }
    if (a < b) {
      return 1;
    }
    // a must be equal to b
    return 0;
 }

上記の比較関数は、配列の各要素を比較して降順ソートを実行するのに役立ちます.もちろん、同じ機能を簡単に書くことができます.

function (a,b) {
   return a === b ? 0 : a > b ? -1 : 1;
}

だから今、ソートしましょうartists 降順の配列.

artists.sort(function (a, b) {
   return a === b ? 0 : a > b ? -1 : 1;
});

console.log('Sort the artist names(Descending)', artists);

出力

Sort the artist names(Descending)
[
"Leonardo da Vinci", 
"John White Abbott", 
"Charles Aubry", 
"Barent Avercamp", 
"Anna Atkins"
]

方法についてのソート番号？

同じ哲学が適用される.デフォルトsort() 関数は正しく処理できません.これを見てください.

let ages = [2, 1000, 10, 3, 23, 12, 30, 21];

ages.sort();
console.log(ages);

出力

[10, 1000, 12, 2, 21, 23, 3, 30]

変な右?デフォルトでsort() , 要素は文字列に変換され、UTF - 16コード単位で比較されます.したがって、変換された「12」は変換された「2」の前に来る.
我々は必要compare function 再びここで救出のために.昇順ソートを行うことができます.

ages.sort(function(a,b) {return a-b});
console.log(ages);

注意sort() メソッド.比較関数はBからBを減算し、結果は正の数、負の数、またはゼロのいずれかになります.
あなたが使用しているならES6 コーディングスタイルは、arrow として機能する.

ages.sort((a,b) => a-b);

出力

[2, 3, 10, 12, 21, 23, 30, 1000]

降順番号ソートは、代わりにa-b , リターンb-a 比較関数から.

ages.sort(function(a,b) {return b-a})
console.log(ages);

出力

[1000, 30, 23, 21, 12, 10, 3, 2]

2 .配列reverse ()はソート用の力に適しています。

The array.reverse() 要素を逆方向に並べる別の便利な配列メソッドです.

let arr = ['bob', 'anna', 'elsa', 'marlon'];
console.log(arr.reverse());

出力

["marlon", "elsa", "anna", "bob"]

ご覧のように、配列要素は現在逆順になります.これは良いですが、我々はよく使用するreverse() ソート方法

let arr = ['bob', 'anna', 'elsa', 'marlon'];
let sorted = arr.sort(); // Ascending
let reversed = sorted.reverse(); // Descending

console.log(reversed);

出力

["marlon", "elsa", "bob", "anna"]

それは動作しますが、予期しない結果につながる可能性がありますreverse() 順序ソートのためのものではありません.あなたの並べ替えのニーズに適切な比較機能を使用してください.

非ASCII文字のソートは簡単です

アプリケーションでは、非英語で、非ASCII文字で表される文字列に遭遇することがあります.文字列を使用するlocaleCompare() あなたの比較関数のメソッドをソートします.

let items = ['communiqué', 'zèbre', 'adieu', 'éclair'];

items.sort();
console.log('Without localeCompare', items);

items.sort((a,b) => a.localeCompare(b));
console.log('With localeCompare', items);

出力

Without localeCompare 
[
"adieu", 
"communiqué", 
"zèbre", 
"éclair"
]
With localeCompare 
[
"adieu", 
"communiqué", 
"éclair", 
"zèbre"
]

4 .オブジェクト配列のソート

JavaScriptではobjects 複数の値を複雑なデータ構造として格納するために使用されます.
オブジェクトは巻き括弧で作成されます{…} とリストproperties . エーproperty はkey-value ペアkey は文字列でなければならず、value 任意の型を指定できます.
オブジェクトをソートするのは、プロパティ値に基づいてソートすることです.値を任意の型にすることができますので、例でさまざまなソートを理解しましょう.
エーuser オブジェクト

let users = [
    {'name': 'Joe', 'address': 'Huston', 'dob':'February 9, 1991', 'income': 87654},
    {'name': 'Bob', 'address': 'London', 'dob':'July 1, 1986', 'income': 47974},
    {'name': 'Carl', 'address': 'Bangalore', 'dob':'December 25, 1982', 'income': 97351},
    {'name': 'Amanda', 'address': 'Lagos', 'dob':'March 19, 2001', 'income': 57753},
];

名前順

比較関数を使用して、配列内の各オブジェクトの名前を比較します.

 users.sort(function(a, b) {
    let left = a.name;
    let right = b.name;
    return left === right ? 0 : left > right ? 1 : -1;
  });

 console.table(users);

出力

あなたは、下向きの並べ替えのために何をすべきか、右?はい、比較機能の変更のビットは、以前に示したように.

収入順

収入値は数字です.私たちはここで何をすべきか知っています.我々は、オブジェクトの所得値を比較するつもりです.

 users.sort((a,b) => (a.income - b.income));
 console.table(users);

出力

生年月日によるソート

ユーザーは、文字列である誕生日(DOBプロパティ)を持ちます.さて、我々は文字列のようなそれらを並べ替えることができない、右?日付のようにソートする必要があります.変更のために、我々はここで降順注文をしています.

users.sort((a,b) => (new Date(b.dob) - new Date(a.dob)));
console.table(users);

出力

5 .大文字小文字を区別しないソートを必要とする場合があります

異なるケース(キャピタルとスモール)の配列要素を扱う必要があります.デフォルトsort() 関数は役に立たないかもしれない.混合ケースの要素を持つ配列です.

 let names = ['Bob', 'bakshi', 'adam', 'Maya', 'carl'];
 names.sort();
 console.log(names);

出力

["Bob", "Maya", "adam", "bakshi", "carl"]

この出力は、UTF-16 code 単位順序.ただし、次の順序で指定できます.

"adam", "bakshi", "Bob", "carl", "Maya"

比較関数を使用してtoUpperCase() 大文字小文字を区別しない比較を行う.

names.sort(function (a, b) {
    let left = a.toUpperCase();
    let right = b.toUpperCase();

    return (left === right) ? 0 : left > right ? 1 : -1;
  });
console.log(names);

出力

["adam", "bakshi", "Bob", "carl", "Maya"]

要約する

配列sort() 使いやすい.ほとんどの場合、比較関数が必要です.
本稿では5つの重要な点を論じた.

デフォルトarray.sort() メソッドは配列要素を昇順にソートし、文字列に変換します.

使用しないarray.reverse() ソート用.予期せぬ結果につながる可能性があります.

我々は、メソッドを使用することができますlocaleCompare() 並べ替えるnon-ASCII 登場人物

オブジェクトの配列をソートするdata types .

Case insensitive ソートはいくつかの場合に必要となる場合があります.

あなたはそれが有用見つける.この記事で使用されるすべてのソースコードは、私のgithubレポでここにあります.私がコード例でそれらを更新し続けるので、気軽に従ってください.

アタパス / アレイソート

ヒントによるJavaScript配列のソートの様々な例。

アレイソート

ヒントによるJavaScript配列のソートの様々な例.
View on GitHub
閉じるこの動画はお気に入りから削除されています.

Explain Me Like I am Five: What are ES6 Symbols?

Everything you need to know about JavaScript Set

How to use JavaScript Collection with Map

10 lesser-known Web APIs you may want to use

Hey, I have made a demolab using JAMstack

それがあなたにとって有用であるならば、同様に/共有してください、それは同様に他にも達します.
あなたは@ Twitterの上で@コメントすることができますか、または以下の自由を感じる.