ES6學習歷程 16 — collections（一）

ES6 Map

Photo by Carl Heyerdahl on Unsplash

ES6提供了一個新的資料型態-Map，Map是鍵值對(key-value pair)的形式，有點像object，但不同的是，object 的 key 只能是字串 (string)；map的key跟value都可以是任何型態。

假設有一個物件list：

let john = {name: 'John Doe'},
lily = {name: 'Lily Bush'},
peter = {name: 'Peter Drucker'};

創建map，有以下方法：

let userRoles = new Map([
    [john, 'admin'],
    [lily, 'editor'],
    [peter, 'subscriber']
]);
// 或是
let userRoles = new Map();
userRoles.set(john, 'admin');
// 或是
let userRoles = new Map();
userRoles.set(lily, 'editor')
.set(peter, 'subscriber');

Map 物件的屬性和方法 Properties and Methods

• set(key, value)

新增 key-value pair。如果 key 已經存在，其值會被新值覆蓋過去，set() 方法會返回 Map 本身。

userRoles.set(john, 'admin');
// 或是
userRoles.set(lily, 'editor')
.set(peter, 'subscriber');

• get(key)

透過key取值，如果沒有這個key則回傳undefined

userRoles.get(john); // admin
userRoles.get(foo); // undefined

• has(key)

透過key確認這個key-value pairs存不存在，回傳true / false

userRoles.has(foo); // false
userRoles.has(lily); // true

• size

取得map總數，共有多少key-value pairs

console.log(userRoles.size); // 3

• keys()

遍歷map 中的所有key

for (let user of userRoles.keys()) {
    console.log(user.name);
}
// John Doe
// Lily Bush
// Peter Drucker

• values()

遍歷map中的所有value

for (let role of userRoles.values()) {
    console.log(role);
}
// admin
// editor
// subscriber

• entries()，回傳key : value

遍歷map元素

for (let elem of userRoles.entries()) {
    console.log(`${elem[0].name}: ${elem[1]}`);
}
// John Doe: admin
// Lily Bush: editor
// Peter Drucker: subscriber

• entries()，加上運用解構賦值 遍歷map元素

for (let [user, role] of userRoles.entries()) {
    console.log(`${user.name}: ${role}`);
}
// John Doe: admin
// Lily Bush: editor
// Peter Drucker: subscriber

• forEach()，遍歷map元素

userRoles.forEach((role, user) =>
    console.log(`${user.name}: ${role}`)
);
// John Doe: admin
// Lily Bush: editor
// Peter Drucker: subscriber

• 將map的key或value轉換成array

Key to array

var keys = [...userRoles.keys()];
console.log(keys);
// [ { name: 'John Doe' },
// { name: 'Lily Bush' },
// { name: 'Peter Drucker' } ]

Value to array

var roles = […userRoles.values()];
console.log(roles);
// [ ‘admin’, ‘editor’, ‘subscriber’ ]

• delete(key)

透過key刪除map元素

userRoles.delete(john);

• clear()

刪除所有map元素

userRoles.clear();
console.log(userRoles.size);    // 0