Deep Dive - 37.SetとMap

<Map>:オブジェクトに類似

🔶オブジェクトとの相違

1)対象:可愛いx/MAP対象:可愛いO
2)オブジェクト:文字(キー値)と記号値/MAPオブジェクトのみ:オブジェクト(オブジェクトを含む)の任意の値

🔶 Mapオブジェクトの作成

可愛い子を引数としてMapオブジェクト//はい)[]

パラメータとして渡されるかわいい子は、キー値ペアからなる要素で構成されなければなりません.//例)[鍵,値]

Mapオブジェクトの作成時に、最初から引数を入力すると、引数は二重配列で渡されます.

// (1)
const mapObj1 = new Map(); // {} - Map생성자 함수로 인한 인스턴스 객체가 생김
// (2)
const mapObj2 = new Map([['key1', 'value1'],['key2', 'value2'],]); 
// mapObj2 = {'key1' => 'value1', 'key2' => 'value2'}

🔶 MapのProperty、メソッド

1.要素カウント−MAP.prototype.size

console.log(mapObj2.size); // 2

2.要素-mapを追加します.prototype.set(key,value)
-戻り値:新しい要素が追加されたMapオブジェクトを返します.

const mapObj = new Map();
mapObj.set('key1', 'value1').set('key2', 'value2');
// console.log(mapObj); // {'key1' => 'value1', 'key2' => 'value2'}

重複キーを持つ要素は、Mapオブジェクトの要素として使用できません.

mapObj.set('key1', 'value1');
// console.log(mapObj); // {'key1' => 'value1', 'key2' => 'value2'}

4.文字列だけでなく、任意の値をキーとして使用できます.

mapObj.set(['a', 'b', 'c'], 'value3');
mapObj.set({ k: 'v' }, 'value4');
// console.log(mapObj); 
// {'key1' => 'value1', 'key2' => 'value2', Array(3) => 'value3', Object => "value4"}

5.要素取得−MAP.prototype.get(key)

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };
const mapObject = new Map([
  [lee, 'designer'],
  [kim, 'developer'],
]);

// console.log(mapObject); 
// mapObject = [{Object => "developer"} , {Object => "designer"}]
console.log(mapObject.get(kim)); // developer

要素検索-map.prototype.has(key)
:Mapオブジェクトにキーがある場合はtrueまたはfalse

を返します.

console.log(mapObject.has(kim)); // true

7.要素-mapを削除します.prototype.delete(key);
:戻り値-削除に成功したかどうかを示すブール値を返します.

mapObject.delete(lee); // true
console.log(mapObject); // mapObject = [{Object => "developer"}]

8.要素-mapを一括削除します.prototype.clear();
//
9.要素巡回
1)forEach((現在巡回中の要素の値、現在巡回中の要素のキー、現在巡回中のオブジェクト自体)=>{})

const MAPOBJ = new Map([['a', '1'],['b', '2'],['c', '3'],]);
// mapObject = {'a' => '1', 'b' => '2', 'c' => '3'}

// 1)forEach
MAPOBJ.forEach((value, key, map) => console.log(value, key, map));
// 1,a , 2,b,  3,b,MAPOBJ

2) for...of

for (const el of MAPOBJ) {
  // console.log(el); // ['a', '1'] , ['b', '2'] , ['c', '3']
}

for (const key of MAPOBJ.keys()) {
  console.log(key); // a,b,c
}

for (const value of MAPOBJ.values()) {
  console.log(value); // 1,2,3,
}

for (const entry of MAPOBJ.entries()) {
  console.log(entry); // ['a', '1'] , ['b', '2'] , ['c', '3']
}

for (const [k, v] of MAPOBJ.entries()) {
  console.log(k, v); // a 1, b 2, c 3
}

10.Mapオブジェクトはかわいいです.
1)したがって、スプレッドシート構文を使用できます.

console.log([...MAPOBJ]); // [['a', '1'] , ['b', '2'] , ['c', '3']]

2)アレイを分解することができる.

const [k, v] = MAPOBJ;
// console.log(k, v); // ['a', '1']  ['b', '2']

<Set>:配列に類似

🔶排他的

1.重複値を無効にします.
2.インデックスにアクセスできません.
3.したがって要素の順序は意味がない

🔶Setオブジェクトの作成

引数としてセットオブジェクトを作成

const setObj1 = new Set(); // {} - Set생성자 함수로 인한 인스턴스 객체가 생김
const setObj2 = new Set([1, 2, 3, 4, 5]); // {1, 2, 3, 4, 5}

🔶 SetでのProperty、メソッド

1.繰り返し値は、Setオブジェクトに要素として保存されません。

const setObj3 = new Set([1, 1, 2, 2, 3, 4, 5]); // {1, 2, 3, 4, 5}

1-2. Setを使用してアレイ内の重複要素を除去する方法

const arr = [1, 1, 2, 2, 2, 3, 3, 4, 4, 5];

const x = new Set(arr); // {1,2,3,4,5}
const arrResult = Array.from(x); 
// Array.from - 이터러블객체,유사 배열 객체를 새로운 array로 바꿈(얕은 복사)

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

2.エレメント数-setを決定します。prototype.size

const setObj = new Set([1, 2, 3, 3, 4, 4, 4]);
console.log(setObj.size); // 4

3.要素-setを追加します。prototype.add();

:配列のようにすべての要素を入れることができます.
:戻り値-新しい要素が追加されたSetオブジェクトを返します.

setObj.add(5);
setObj.add(true);
let threeArr = ['a', 'b', 'c'];
setObj.add(threeArr); // setObj = {1, 2, 3, 4, 5, true, ["a","b","c"]}

4.要素検索-set。prototype.has();

:戻り値-setオブジェクトに要素が存在する場合はtrueまたはfalseを返します.

console.log(setObj.has(1)); // true

5.エレメント-setを削除します。prototype.delete();

:戻り値-削除に成功したかどうかを示すブール値を返します.

setObj.delete(threeArr); // true
setObj.delete(true); // true
console.log(setObj); // setObj = {1, 2, 3, 4, 5}

6.要素-setを一括削除します。prototype.clear();

setObj.clear(); // {}

7.エレメント巡回

1)forEach

Setオブジェクトは順序に意味がなく、forEachコールバック関数にはインデックスパラメータがありません.
(配列内のforEach-arr.forEach(コールバック(currentvalue,index,array)=>{/})

const setObject = new Set([1, 2, 3, 4, 5]);
setObject.forEach((el) => console.log(el)); // 1,2,3,4,5

2)for...of

for (const el of setObject) {
console.log(el); // 1,2,3,4,5
}

8.Setオブジェクトはかわいいです。

1)したがって、スプレッドシート構文を使用できます.

const setObject1 = new Set([1, 2, 3, 4, 5]); // setObject1 = {1, 2, 3, 4, 5}
console.log([...setObject1]); // [1, 2, 3, 4, 5]

2)アレイを分解することができる.

const [a, b, ...rest] = setObject1;
console.log(a, b, rest); // 1 , 2 ,[3, 4, 5]