JavaScript的對象(Object)颖御,本質(zhì)上是鍵值對的集合(Hash結(jié)構(gòu)),但是傳統(tǒng)上只能用字符串當(dāng)做鍵潘拱。這給它的使用帶來了很大的限制。
為解決這個(gè)問題瘪弓,ES6提供了Map數(shù)據(jù)結(jié)構(gòu)禽最,它類似于對象,也是鍵值對的集合呛占。但是“鍵”的范圍不限于字符串懦趋,各種類型的值(包括對象)都可以當(dāng)做鍵。
const m = new Map();
const o = { p: 'hello' }
m.set(o, 'content');//使用set方法,將對象o作為m的一個(gè)鍵
//使用get方法讀取
console.log(m.get(o)); //content
console.log(m.has(o)); //true
//使用delete方法刪除
m.delete(o);
console.log(m.has(o)); //false
作為構(gòu)造函數(shù)佛猛,Map也可以接受一個(gè)數(shù)組作為參數(shù)坠狡,該數(shù)組的成員是一個(gè)個(gè)表示鍵值對的數(shù)組
const map = new Map([
['name', 'Mr Wang'],
['title', 'Author']
])
console.log(map.size); //2
console.log(map.has('name')); // true
console.log(map.get('name')); // Mr Wang
console.log(map.has('title')); // true
console.log(map.get('title')); // Author
Map構(gòu)造函數(shù)接受數(shù)組作為參數(shù)遂跟,實(shí)際上是執(zhí)行下面的操作
const items = [
['name', 'Mr Wang'],
['title', 'Author']
]
const map = new Map()
items.forEach(
([key, value]) => map.set(key, value)
)
注意:如果對一個(gè)鍵多次賦值,后面的值將覆蓋前面的值
實(shí)例的屬性和操作方法
- size屬性
size屬性返回Map結(jié)構(gòu)的成員總數(shù)
const map = new Map();
map.set('one', 1);
map.set('two', 2);
console.log(map.size); // 2
-set(key,value)
set方法設(shè)置鍵名key對應(yīng)值為value凯亮,然后返回整個(gè)Map結(jié)構(gòu)哄尔,如果key已經(jīng)有值,則鍵值會被更新富拗,否則生成該鍵
const map = new Map();
map.set('one', 1);
map.set('one', '一');
map.set(2, 'two');
map.set(undefined, true);
console.log(map.get(undefined)); // true
console.log(map.get(2)); // two
console.log(map.get('one')); // 一
set方法返回的是當(dāng)前的Map對象鸣戴,因此可以采用鏈?zhǔn)綄懛?/strong>
let map = new Map().set(1, 'a').set(2, 'b').set(3, 'c')
- get(key)
get方法讀取key對應(yīng)的鍵值,如果找不到创千,返回undefined
const map = new Map();
const hello = function() { console.log('Hello') }
map.set(hello, 'Hello Mr'); // 鍵是函數(shù)
console.log(map.get(hello)); //Hello Mr
- has(key)
has方法返回一個(gè)布爾值入偷,表示某個(gè)鍵是否在當(dāng)前Map對象之中
const map = new Map();
map.set('one', 1);
map.set(2, 'two');
map.set(undefined, true);
console.log(map.has(2)); //true
console.log(map.has(undefined)); //true
console.log(map.has("name")); //false
delete(key)
delete方法刪除某個(gè)鍵,返回true氯檐,如果刪除失敗体捏,返回false
const map = new Map();
map.set('one', 1);
console.log(map.has('one')); //true
console.log(map.delete('one')); //true
console.log(map.has('one')); //false
clear()
clear方法清除所有成員,沒有返回值
const map = new Map();
map.set('one', 1);
map.set(2, 'two');
map.set(undefined, true);
console.log(map.size); //3
map.clear()
console.log(map.has('one')); //false
console.log(map.size); //0
遍歷方法與Set結(jié)構(gòu)的數(shù)據(jù)大同小異河泳,唯一需要注意的是Map的遍歷順序就是插入順序
const map = new Map([
['F', 'no'],
['T', 'yes'],
]);
for (let key of map.keys()) {
console.log(key);
}
// "F"
// "T"
for (let value of map.values()) {
console.log(value);
}
// "no"
// "yes"
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map.entries()) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
// 等同于使用map.entries()
for (let [key, value] of map) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
Map結(jié)構(gòu)轉(zhuǎn)為數(shù)組結(jié)構(gòu)年栓,比較快速的方法是使用拓展運(yùn)算符(...)
const map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
[...map.keys()]
// [1, 2, 3]
[...map.values()]
// ['one', 'two', 'three']
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]