Setを使って重複のない配列を作る(ES6)
今日は業務でAngularJSイジイジしていました。
その中でカンマをデリミタとして文字列を分割し
重複のない配列を作成したかったので作ってみました。
ちょっと作ってみた感じ下記のようになりました。(コードは少々改変してます
なんならクロージャで作るかなって思い
都営新宿線が運転を見合わせてる間に作ってみました
デリミタで分割する部分は機能からは外してますが
ままいい感じじゃないかなって思ってます。
ここまでコードを掲載しましたが、そもそものSetについて書いてませんでした。。。
Set
SetはJavaやPython等の他のプログラミング言語では既に実装されているもので
特徴としては 重複のないコレクション を作るオブジェクトです。(終わり
上記2つのスクリプトの違い
その他メソッド編とクロージャ編での違いはSetからイテレータを取得
そのイテレータを配列に変換する箇所です。
抜き出すと、
// 上 Array.from(uniqueStore.values()); // 下 [...store.values()]
Array.from
下記の記事から概要を引用すると、
Array.from() メソッドは、配列型 (array-like) オブジェクトや反復可能 (iterable) オブジェクトから新しい Array インスタンスを生成します。
ES6 では、クラス構文は、埋め込みとユーザ定義クラスの両方をサブクラスにできます。結果として、Array.from のようなクラス側の静的メソッドは、Array のサブクラスにより "継承" され、Arrayではなく、サブクラスの新しいインスタンスを生成します。
Spreadオペレータ
spread operatorによって式が(関数の呼び出しのための)複数の引数か(配列リテラルのための)複数の要素が期待される場所で拡張されます。
Spreadオペレータでは、
* イテレータ等を配列に変換
* 可変長引数
* 配列にSpreadオペレータを適用した配列を追加
等等ができるようになります。
ただ、SpreadオペレータはArray.fromと異なり、
配列の”ような”リストは配列化できません!!
例えば、DOM(NodeList) document.querySelectorAll('div')
とかですね。
このような場合はArray.fromで配列化するようにしましょう。
この記事書いていて
下記のaddメソッドで可変長引数を受け付けているのにも関わらず
引数が配列だった場合の処理が足りてないですね。 (あ、明日修正しよう。。。
add: function(...array) { if (!array) { return; } array.forEach(function(item) { if(!item && item === '') { return; } store.add(item.trim()); }); }