JavaScriptで重複のない配列にするfilterの使い方を詳しく解説

配列から重複した要素を取り除く方法についてです。 filterを使うと簡単に書けます。

このブログもJavaScriptで動いており、サイドバーのタグのところで使っています。

重複のない配列にする

let array = [0, 1, 1, 2, 2, 3, 3, 4, 4, 5]

// 重複を削除した配列
let result = array.filter(function(x, i, self) {
        return self.indexOf(x) === i;
    });

console.log(result);
// [ 0, 1, 2, 3, 4, 5 ]

重複のない配列が出来ました。

filter()の解説

Array.prototype.filter()は配列の各要素を判定してtrueの要素だけを配列として返します。

MDSのfilter()のコードを上に合わせて書き直すとこんな感じ。

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(function(x){
    return x.length > 6
});

console.log(result);
// ["exuberant", "destruction", "present"]

コールバック関数のxが各要素に当たり、x.length > 6がtrueになっている要素が配列になっていることがわかります。

重複削除の解説

重複のないコードに戻ります。

// 重複を削除した配列
let result = array.filter(function(x, i, self) {
        return self.indexOf(x) === i;
    });

コールバック関数にx, i, selfの３つが渡っています。 xは要素、iが要素のindex、selfはarray自身に当たります。

判定の部分はself.indexOf(x) === i;です。 self.indexOf(x)はarrayの中でその要素が現れる最初のindexを返します。つまり、その要素の前に同じ値の要素がある場合にfalseになる。よって、重複がない要素だけの配列が出来上がります。

重複した要素

反対に重複している要素を取り出すこともできます。

let array = [0, 1, 2, 2, 3, 3, 3, 4, 5]

// 重複を削除した配列
let result = array.filter(function(x, i, self) {
        return self.indexOf(x) !== i; // !== にした
    });

console.log(result);
// [ 2, 3, 3 ]