簡介
Map -- JS內置物件
Map物件保存鍵值對 -- 能夠記住鍵的原始插入順序 -- 任何值(資料型別包括物件)都可以作為一個鍵或一個值
Map物件是鍵值對的集合 -- Map中的一個鍵只能出現一次
Map物件按鍵值對迭代 -- for...of回圈在每次迭代后會回傳一個形式為[key,value]的陣列
let map = new Map([
[1, 'liu'],
[2, 'hei'],
[3, 'may']
]);
for (const item of map) {
console.log(item); // [1,'liu'] [2,'hei'] [3,'may']
}
Map可以在內部表示為復雜度小于O(N)的任何資料結構 -- 包括哈希表(O(1)查找)、搜索樹(O(log(N))查找)
創建Map物件
語法
iterable -- Map物件的一個元素 -- 是鍵值對的陣列或是其他可迭代物件
new Map() // 創建空物件
new Map(iterable) //創建帶有元素的物件
創建新Map
const map = new Map([
[1,'one'],
[2,'two'],
[3,'three'],
]);
console.log(map);

實體屬性
Map.prototype.size
size -- 只讀屬性 -- 不能修改 -- 值是一個整數 -- 表示Map物件有多少個鍵值對
const map = new Map([
[1,'one'],
[2,'two'],
[3,'three'],
]);
console.log(map.size); //3
實體方法
Map.prototype.clear()
clear() -- 移除Map物件中的所有元素
const map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
])
console.log(map.size); //3
map.clear();
console.log(map.size); //0
Map.prototype.delete()
delete() -- 移除Map物件中指定的元素
語法--delete(key)
key -- 要從Map中洗掉的元素的鍵
回傳值 -- Map物件中的元素存在且已被移除 - 回傳true;若元素不存在 - 回傳false
const map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
])
console.log(map.delete(1)); //true
console.log(map.delete(5)); //false
console.log(map); //Map(2) {2 => 'two', 3 => 'three'}
Map.prototype.get()
get() -- 從Map物件中回傳指定的元素
若與該鍵相匹配的值是一個物件 -- 會獲得對該物件的參考 -- 可用在Map物件中修改它
語法 -- get(key)
key -- Map物件回傳的元素的鍵
回傳值 -- 與該鍵相匹配的值 -- 若該鍵在Map物件中不存在 -- 回傳undefined
const map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
[4, []]
])
console.log(map.get(1)); //one
console.log(map.get(10)); //undefined
map.get(4).push('four')
console.log(map.get(4)); //['four']
Map.prototype.has()
has() -- 回傳一個布林值 -- 判斷具有指定鍵的元素是否存在
語法 -- has(key)
回傳值 -- 若Map物件中存在具有指定鍵的元素 -- 回傳true ;否則回傳false
const map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
[4, []]
])
console.log(map.has(1)); //true
console.log(map.has(6)); //false
Map.prototype.set()
set() -- 為Map物件添加或更新一個指定鍵和值的新鍵值對
語法 -- set(key,value)
回傳值Map物件
const map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
[4, []]
])
map.set('a', 'A');
map.set(4, 'four')
console.log(map.set('b', 'B'));

鏈式使用set
map.set('c', 'C')
.set('d', 'D')
.set('e', 'E')
console.log(map);

Map.prototype.entries()
entries() -- 回傳一個新的迭代器物件 -- 包含Map物件中按插入順序排序的每個元素的鍵值對
迭代器物件也是一個可迭代物件 -- 可使用for-of回圈
語法 -- entries
回傳值 -- 一個新的Map迭代器物件
const map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
[4, []]
])
let iter = map.entries();
console.log(iter.next().value);
console.log(iter.next().value);
console.log(iter.next());

Map.prototype@@iterator
@@iterator -- 初始值與entries屬性的初始值是同一個函式物件
語法 -- map[Symbol.iterator]
回傳值 -- Map的iterator函式默認是entries()函式
let iter = map[Symbol.iterator]();
console.log(iter.next().value); //[1, 'one']
console.log(iter.next().value); //[2, 'two']
console.log(iter.next().value); //[3,'three']
在for...of中使用
for (const entry of map) {
console.log(entry);
}
Map.prototype.keys()
keys() -- 回傳一個參考的迭代器物件 -- 包括按順序插入Map物件中每個元素的key值
語法 -- keys()
回傳值 -- 一個新的迭代器物件
let iter = map.keys()
console.log(iter.next().value); //1
console.log(iter.next().value); //2
console.log(iter.next().value); //3
Map.prototype.values()
values() -- 回傳一個新的的迭代器物件 -- 包括按順序插入Map物件中每個元素的value值
語法 -- values()
回傳值 -- 一個新的迭代器物件
let iter = map.values()
console.log(iter.next().value); //one
console.log(iter.next().value); //two
console.log(iter.next().value); //three
Map.prototype.forEach()
forEach() -- 安裝插入順序依次對Map中每個鍵值對執行一次給定的函式
語法
forEach(callbackFn)
forEach(callbackFn,thisArg)
- callbackFn --Map中每個元素要執行的函式 -- 有如下引數 -- 都是可選
- value -- 每個迭代的值
- key -- 每個迭代的鍵
- map -- 每個迭代的Map
- thisArg -- 在callbackFn執行中使用的this的值
回傳值undefined
- 注意
- forEach方法會對 map 中每個真實存在的鍵執行一次給定的 callbackFn函式,它不會對被洗掉的鍵執行函式,然而,它會對每個值為 undefined的鍵執行函式
- 每個值只被訪問一次,除非它在 forEach結束前被洗掉并被重新添加,callbackFn不會對在被訪問前就洗掉的元素執行,在 forEach結束前被添加的元素都將會被訪問
function logMapElements(value, key, map) {
console.log(`map.get('${key}') = ${value}`);
}
new Map([
['foo', 3],
['bar', {}],
['baz', undefined]
]).forEach(logMapElements)

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/554736.html
標籤:JavaScript
上一篇:Electron-ChatGPT桌面端ChatGPT實體|electron25+vue3聊天AI模板EXE
下一篇:返回列表
