JavaScriptのSetを使用するサンプルです。
確認環境 ・Google Chrome |
目次
仕組み | Setオブジェクト |
for文のループで要素を取得する | |
要素を順番に処理する(forEach文) | |
値が存在するか確認する(has) | |
要素数を取得する(size) | |
更新する | 要素を追加する(add) |
要素を削除する(delete) | |
すべての要素を削除する(clear) |
Setオブジェクト
変数 = new Set (値, ... ]); |
- ひとつの変数に複数の値を設定できます。
- 値の重複は不可です。代入しようとしても追加されません。
→ユニークな値のみになります。Setの特徴です。 - ECMAScript 2015(ES6)で導入されました。
- 以下は、MDNのSetのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set
for文のループで要素を取得する
<script>
const color1 = new Set(["赤", "黄", "青"]);
for (let c1 of color1) {
//for (let c1 of color1.values()) {
console.log(c1); //赤 黄 青
}
</script>
3行目は、for~of文でループさせて値を取得しています。
4行目も3行目と同じ結果になります。
要素を順番に処理する(forEach文)
<script>
const color1 = new Set(["赤", "黄", "青"]);
color1.forEach(function (a) {
console.log(a); //赤 黄 青が出力される
});
</script>
3行目は、forEach文で値を取得しています。
値が存在するか確認する(has)
<script>
const color1 = new Set(["赤", "黄", "青"]);
console.log(color1.has("黄")); //true
console.log(color1.has("オレンジ")); //false
</script>
3行目は、hasメソッドで存在を確認しています。存在するのでtrueです。
4行目も、hasメソッドで確認していますが、存在しないのでfalseです。
要素数を取得する(size)
<script>
const color1 = new Set(["赤", "黄", "青"]);
console.log(color1.size); // 3が出力される
</script>
要素を追加する(add)
<script>
const color1 = new Set();
color1.add("赤");
console.log(color1); //{"赤"}
color1.add("赤");
console.log(color1); //{"赤"}
</script>
2行目は、セットを作成しています。
3行目は、addメソッドで値を追加しています。
5行目は、同じ値を追加しようとしていますが追加されません。
要素を削除する(delete)
<script>
const color1 = new Set(["赤", "黄", "青"]);
color1.delete("黄");
console.log(color1); //{"赤", "青"}
</script>
3行目は、値を削除しています。
すべての要素を削除する(clear)
<script>
const color1 = new Set(["赤", "黄", "青"]);
color1.clear();
console.log(color1); // Set(0) {} 空のSet
</script>
3行目は、clearメソッドですべての要素を削除しています。
関連の記事