はじめに
Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。
前回の記事
目的
- 反復処理についての理解を深める
本題
1.MapとSet
MapとSetとは
- データを入れておく入れ物のこと
- ES6から導入された
- コレクションと呼ばれることもある
ObjectとMapの違い
| Object | Map | |
|---|---|---|
| キー | 文字列 | 制約なし（数値や関数もキーとして取れる） |
| for...in | ◎ | ✗ |
| for...of | ✗ | ◎ |
例1
使い方
オブジェクトを渡した場合
// mapというオブジェクトを作成
const map = new Map();
// 値をセット 空のオブジェクトを渡す
const key1 = {};
// setメソッドを使って第一引数にキー情報,第二引数に値を渡す
map.set(key1,"value1")
// getメソッドを使用して値を渡すとキーを取得できる
console.log(map.get(key1));
// value1と出力される
関数を渡した場合
const map = new Map();
const key2 = function(){}
map.set(key2, "value2");
console.log(map.get(key2));
// value2と出力されるので,関数もキーとして取れることがわかる
プリミティブ型で渡した場合
const map = new Map();
let key3 = 0;
// 下記の場所でkey3 = 0;でもOK
map.set(key3, "value3")
console.log(map.get(key3));
// value3と出力される
注意：キーの値の参照を保持している
const map = new Map();
const key1 = {};
map.set(key1,"value1")
//undefinedと出力される
console.log(map.get({}));
例2
キー情報を削除したい場合
const map = new Map();
const key1 = {};
map.set(key1,"value1")
// 下記のdeleteメソッドを使うと情報を削除できる
map.delete(key1);
// undefinedと出力される
console.log(map.get(key1));
例3
for...ofで値を取得した場合
const map = new Map();
const key1 = {};
map.set(key1,"value1")
for(const m of map){
// 配列として値が渡ってくる
console.log(m);
}
実行結果.
(2) [{…}, 'value1']
0: {}
1: "value1"
length: 2
分割代入を使用して値を渡すと
const map = new Map();
const key1 = {};
map.set(key1,"value1")
// keyとvalueの値をそれぞれ渡す
for(const [k,v] of map){
// {}[[Prototype]]: Object 'value1'と出力される
console.log(k,v);
}
for(const a in map){
// for...inでは出力されない
console.log(a);
}
ArrayとSetの違い
| Array | Set | |
|---|---|---|
| 重複値 | ◎ | ✗ |
| for...in | ◎ | ✗ |
| for...of | ✗ | ◎ |
例1
setが重複で表示されないか確認
// setをインスタンス化
const set = new Set();
const key1 = {};
// addメソッドで値を取得
set.add(key1)
set.add(key1)
for(const k of set){
// このようにしても{}が１つしか出力されない
console.log(k);
}
例2
その他のsetの動作確認
// setをインスタンス化
const set = new Set();
const key1 = {};
set.add(key1)
// キーの値が削除され、何も出力されない
set.delete(key1)
// 値が含まれているか確認する(hasメソッド)
console.log(set.has(key1));
// deleteしているのでfalseが返ってくる
// deleteをコメントアウトするとtrueと返ってくる
for(const k of set){
console.log(k);
}
例3
配列の取得
配列の添字とは
// setをインスタンス化
const set = new Set();
const key1 = {};
set.add(key1)
// setは配列の添字を指定して値を取得できない
// よって以下の通りに取得する
// Array.fromというメソッドを使用する
const array = Array.from(set);
// 下記のスプレット構文でも可
// const array = [...set];
console.log(array);
// 添字を指定して出力される（0:{}）
今日はここまで！