JavaScript 配列のソート

SafariのJavaScriptコンソールで配列ソート実行

JavaScriptはデータを連続で並べた配列という変数を持たせることができます。配列は文字列や数値とJSONを配列で扱えます。通常の変数では var a = 100と一つの値をセットしますが、配列数値の場合var a = [100, 200, 300]数値をいくつも入れることができます。たくさんのデータが入るJavaScriptの配列には、ソート(sort)という並べ替えできる機能が付いています。数値の場合[9,8,2,6,5,3]という不揃いの配列の場合ソートは下記のように記述します。

var a = [9,8,2,6,5,3]
console.log(a.sort())

SafariのJavaScriptコンソール(⌘⌥c)で実行すると下記の結果が出ました。

JavaScriptシンプルな配列ソート例
JavaScriptシンプルな配列ソート例

JavaScript配列ソートは、降順に並び替えることもできます。下記は降順した場合のお例です。

var x = [9,8,2,6,5,3]
console.log(x.sort((a,b) => {
    return (a >= b)? -1: 1 
}))

文字列も同じようにソートできます。降順でのコード例です。

var x = ["あいうえお","かきくけこ","サシスセソ"]
console.log(x.sort((a,b) => {
    return (a >= b)? -1: 1 
}))
文字列配列での降順ソート例
文字列配列での降順ソート例

文字列型“あいうえお”の変数を配列に変換した後ソートする場合

var x = "あいうえお"
x.split("").sort((a,b) => {
    return (a >= b)? -1: 1 
}).forEach(_elem => {
    console.log(_elem)
})
文字列をsplitで配列に変換し降順ソートした結果
文字列をsplitで配列に変換し降順ソートした結果

[].sort((a,b) => {})のa,bは、文字列数値以外のオブジェクトにも使えます。

文字列”あいうえお”を一旦id, valueで構造化し、その後に降順にした例です。

let x = "あいうえお"
let y = []
x.split("").sort().forEach((_elem, _index, _my) => {
    y.push({id: _index, key1: _elem})
})
console.log(y.sort((a,b) => {
    return (a.id >= b.id)? -1 : 1
}))
JavaScriptコンソールで実行
JavaScriptコンソールで実行

JavaScript 配列 Filter

JavaScript配列フィルター

JavaScriptの配列にはfilterというヘルパーが付いています。filterは、配列内で必要なエレメントだけを抽出することや重複したデータ消してリスト化することもできます。下記は数値[1,2,3,4,5]という配列内の2より大きい数値だけをフィルターしたコード例です。

console.log([1,2,3,4,5].filter(a1 => {
    return (a1 > 2)
}))

SafariJavaScriptコンソールで実行すると下のように表示されました。

Filterの実行結果 [3,4,5]
Filterの実行結果 [3,4,5]

この配列部分をそのままに文字列に置き換えても使えます。

console.log(["ガンダム","ガンキャノン","ガンタンク"].filter(a1 => {
    return (a1 >= "ガンタ")
}))
"ガンタ"でフィルターするとガンダムとガンタンクの2つが出てきた?
“ガンタ”でフィルターするとガンダムとガンタンクの2つが出てきた?

配列フィルターの1つ目の引数だけを使いましたが配列は3つの引数(value: string, index: number, array: string[])が使えます。これを使うと重複などの比較も可能です。

console.log(["ガンダム","ガンキャノン","ガンキャノン","ガンキャノン","ガンキャノン"].filter((a1, i1, _my) => {
    return _my.indexOf(a1) === i1
}))

ガンダム1個とガンキャノン4個入っていますが実行すると重複分のガンキャノンが1個になります。

JS 配列フィルターで文字列重複削除
JS 配列フィルターで文字列重複削除

その逆で 重複した4つのガンキャノンだけを取り出すには下のコードです。

console.log(["ガンダム","ガンキャノン","ガンキャノン","ガンキャノン","ガンキャノン"].filter((a1, i1, _my) => {
    return _my.indexOf(a1) !== _my.lastIndexOf(a1)
}))

重複で取り出したガンキャノン4つ_my.lastIndexOf(a1) !== i1を&&し1つに===で1個にもできます。

console.log(["ガンダム","ガンキャノン","ガンキャノン","ガンキャノン","ガンキャノン"].filter((a1, i1, _my) => {
    return _my.indexOf(a1) === i1 && _my.lastIndexOf(a1) !== i1
}))

実行すると[ガンキャノン]1個が表示されます。

配列がJSONなどの構造体の場合にもフィルターは使えます。下記コードはJSON配列を使ったフィルター例です。

console.log([{mobileSuit: "ガンダム", mainFlg: true},{mobileSuit: "ガンキャノン"}].filter(a1 => {
    return a1.mainFlg 
}))

mainFlgがtrueのエレメントをフィルターした配列を返しています。結果は下のようになりました。

配列の要素内mainFlgがtrueの場合だけをフィルター
配列の要素内mainFlgがtrueの場合だけをフィルター
2022 MJELD TECHNOLOGIES. ALL RIGHTS RESERVED