javascriptで配列の重複を削除する方法について悩んでいます。

Question

解決したいこと

Javascriptにて
[1,1,2,3,4,4]
という配列がある時に

reduceとfindを使って

[1,2,3,4]

と重複のない形で要素を抽出したいと思っていますが上手くいきません。

let numbers = [1,1,2,3,4,4];
 
function unique(array) {
  return array.reduce((prev, number) => {
    /*この辺でif文とかfindを使って「prevという配列にない値はpushする」みたいな感じ・・・？*/
    prev.push(number);
    return prev
  }, []);
}
 
unique(numbers);

上記だと当然ですが、[1,1,2,3,4,4]という値が返ってきてしまいます。（reduceしかしていませんので。。）

他のメソッドを使えばできる（filterとindexOfなどを使ってできる）というのはQiitaなど調べて理解しております。

何かヒントをいただけないでしょうか？

Comments

[kei344]

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。後から見た人から見て、現在の回答が「無いコードに対しての指摘」になり、意味がわからなくなります。

Answer 1

こんにちは

reduce に与える関数の中で、 number を prev に追加する条件は、 includesを使えば

• prev.includes(number) が false であるとき

ですが、これを find で代替させると、

• prev.find(e => e === number) が undefined を返すとき

ですので、例えば以下のようになります。

function unique(array) {
  return array.reduce((prev, number) => {
    if (prev.find(e => e === number) === void 0)
        prev.push(number);
    return prev
  }, []);
}

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/WNbXvZQ?editors=0012

補足

以下、 参考までにincldues および find を使わない方法をいくつか挙げます。

(1) numbers が昇順にソートされていることを使う

numbers が昇順にソートされていることを前提にしてよいならば、uniqueを以下のように書けます。

function unique(array) {
  return array.filter((e, i, self) => i === 0 || self[i-1] !== e);
}

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/dyPZoVg?editors=0012

(2) Setを使う

unique が返す配列は、重複が取り除かれていればよく、必ずしも昇順になっていなくてもよいならば、Setを使うと以下のように手短に書けます。

function unique(array) {
  return [...new Set(array)];
}

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/WNbXvXr?editors=0012

(3) lodash の uniq

配列やオブジェクトの操作で便利なライブラリ lodash に、_.uniq が用意されています。

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/NWPwqXG?editors=0012

以上、参考になれば幸いです。

Answer 2

少なくともreduceした結果を返しましょう。

function unique(array) {
  return array.reduce((prev, number) => {
    /*この辺でif文とかfindを使って「prevという配列にない値はpushする」みたいな感じ・・・？*/
    prev.push(number);
    return prev
  }, []);
}

Comments

[kei344]

「if文とかfindを使って「prevという配列にない値はpushする」みたいな感じ」はincludesとか使えばよいです。というか、一度試しに書いてみてはいかがでしょう。

【Array.prototype.includes() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

[MH00214]

早速のご回答ありがとうございます。
reduceの方でreturnしておりませんでした。失礼しました！

[MH00214]

> includesとか使えばよいです

includes使った形はすでに試していて実装してみて、期待の動作になっていると思っているのですがいかがでしょうか？

```
let numbers = [1,1,2,3,4,4];

function unique(array) {
return array.reduce((prev, number) => {
let isValue = prev.includes(number)
if(!isValue){
prev.push(number);
}
return prev
}, []);
}

unique(numbers);
```

[kei344]

To: MasanariHoriさん
期待の動作になっているならそれでよいのでは。そもそも「filterとindexOfなどを使ってできる」というのであれば、何を聞きたくて、何に詰まっているのかが質問文から読み取れません。

[MH00214]

まあそうなんですが。
findを使ってもできるということでチャレンジしてみたんですが、うまくいかなかったので聞いてみた次第です。
何に詰まっているのかは質問文からは読み取れると思うので、このまま質問は残しておきますね。