ES6 set與map詳解
阿新 • • 發佈：2022-05-09
// set 的建立
// （1）成員不能重複
// （2）只有鍵值沒有鍵名，類似陣列
// （3）可以遍歷，方法有add, delete,has
// add(value) – 追加一個新的元素到Set中，返回Set物件，我們可以使用鏈式呼叫。
// clear() – 清空Set中的所有元素。
// delete(value) – 刪除Set中的元素。
// entries()– 返回一個新的Iterator（可迭代物件）包含[value, value] 。
// forEach(callback [, thisArg]) – 像陣列的forEach一樣，並且每次呼叫會將this設定為thisArg
// has(value) – 判斷Set中是否有該元素，返回true/false
const setObject = new Set(); //向set中新增元素 可以是任何元素 setObject.add(3); setObject.add('哥'); //新增物件 setObject.add({ a: 1 }); //新增陣列 setObject.add([1, 2, 3]); // console.log(setObject) // 列印結果 Set(4) { 3, '哥', { a: 1 }, [ 1, 2, 3 ] } 4代表元素的長度 //has 檢查set裡面有沒有某個元素
//利用 set求交集 const set1 = new Set([1, 2, 3, 4, 5, 5, 5]); const set2 = new Set([4, 5, 6, 7, 8, 9]); // console.log(set1) // console.log(set2) //迭代整個set //便利其中一個set 然後利用has 屬性相同的就返回true 完成交集 let intersection = new Set([...set1].filter((x) => set2.has(x))); // console.log(intersection) //兩交集的交集 {4,5} //找差集 let intersection2 = new Set([...set1].filter((x) => !set2.has(x))); // console.log(intersection2) // set1 在 set2 中的差集 let intersection3 = new Set([...set2].filter((x) => !set1.has(x))); // console.log(intersection3) // set2 在 set1 中的差集 let mySet = new Set([1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }])
// for (let item of mySet) console.log(item); //輸出順序 依次 1 some text { a: 1, b: 2 } { a: 1, b: 2 } (鍵與值相等) // 使用.size來獲取Set的長度，這和陣列length不同 // console.log(mySet.size) // //Map： map類似於物件 set2.has(x) // （1）本質上是健值對的集合，類似集合 // （2）可以遍歷，可以跟各種資料格式轉換
// map.has('a') //true // map.get('a') //a // map.set('c': 3) //Map(3) {'a' => 1, 'b' => 2, 'c' => 3} // map.delete('a') //Map(2) {'b' => 2, 'c' => 3} // map.size //2 // map.keys() //MapIterator {'a', 'b', 'c'} 可迭代物件 // map.values() //MapIterator {1, 2, 3} 可迭代物件 // map.entries() //MapIterator {'a' => 1, 'b' => 2, 'c' => 3} 可迭代物件 // map.clear(); //清空map
const mapObject = new Map([ ['a', 1], ['b', 2] ]); // 1. map的遍歷 mapObject.forEach((value, key) => { // console.log(value, key) // 1 a // 2 b }); // 2. map轉換陣列 // (1) // console.log([...mapObject]); //[ [ 'a', 1 ], [ 'b', 2 ] ] // (2) // console.log(Array.from(mapObject)) //[ [ 'a', 1 ], [ 'b', 2 ] ] // (3) let arr = []; for (var key of mapObject) { arr.push(key); } // console.log(arr); //[ [ 'a', 1 ], [ 'b', 2 ] ]
//3. map克隆/合併 let original = new Map([ [1, 'one'] ]);
let clone = new Map(original);
console.log(clone.get(1)); // one console.log(original === clone); // false. 淺比較 不為同一個物件的引用
const setObject = new Set(); //向set中新增元素 可以是任何元素 setObject.add(3); setObject.add('哥'); //新增物件 setObject.add({ a: 1 }); //新增陣列 setObject.add([1, 2, 3]); // console.log(setObject) // 列印結果 Set(4) { 3, '哥', { a: 1 }, [ 1, 2, 3 ] } 4代表元素的長度 //has 檢查set裡面有沒有某個元素
//利用 set求交集 const set1 = new Set([1, 2, 3, 4, 5, 5, 5]); const set2 = new Set([4, 5, 6, 7, 8, 9]); // console.log(set1) // console.log(set2) //迭代整個set //便利其中一個set 然後利用has 屬性相同的就返回true 完成交集 let intersection = new Set([...set1].filter((x) => set2.has(x))); // console.log(intersection) //兩交集的交集 {4,5} //找差集 let intersection2 = new Set([...set1].filter((x) => !set2.has(x))); // console.log(intersection2) // set1 在 set2 中的差集 let intersection3 = new Set([...set2].filter((x) => !set1.has(x))); // console.log(intersection3) // set2 在 set1 中的差集 let mySet = new Set([1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }])
// for (let item of mySet) console.log(item); //輸出順序 依次 1 some text { a: 1, b: 2 } { a: 1, b: 2 } (鍵與值相等) // 使用.size來獲取Set的長度，這和陣列length不同 // console.log(mySet.size) // //Map： map類似於物件 set2.has(x) // （1）本質上是健值對的集合，類似集合 // （2）可以遍歷，可以跟各種資料格式轉換
// map.has('a') //true // map.get('a') //a // map.set('c': 3) //Map(3) {'a' => 1, 'b' => 2, 'c' => 3} // map.delete('a') //Map(2) {'b' => 2, 'c' => 3} // map.size //2 // map.keys() //MapIterator {'a', 'b', 'c'} 可迭代物件 // map.values() //MapIterator {1, 2, 3} 可迭代物件 // map.entries() //MapIterator {'a' => 1, 'b' => 2, 'c' => 3} 可迭代物件 // map.clear(); //清空map
const mapObject = new Map([ ['a', 1], ['b', 2] ]); // 1. map的遍歷 mapObject.forEach((value, key) => { // console.log(value, key) // 1 a // 2 b }); // 2. map轉換陣列 // (1) // console.log([...mapObject]); //[ [ 'a', 1 ], [ 'b', 2 ] ] // (2) // console.log(Array.from(mapObject)) //[ [ 'a', 1 ], [ 'b', 2 ] ] // (3) let arr = []; for (var key of mapObject) { arr.push(key); } // console.log(arr); //[ [ 'a', 1 ], [ 'b', 2 ] ]
//3. map克隆/合併 let original = new Map([ [1, 'one'] ]);
let clone = new Map(original);
console.log(clone.get(1)); // one console.log(original === clone); // false. 淺比較 不為同一個物件的引用