一日客語：中文：柚子 客語：Ｕ欸
是收集資料的類型
主要功用:可以用於快速搜索和查找資料
Map又稱映射，像是集合論的map
a=>"wendy"
b=>"ann"
c=>"steven"

• 一般object和map是相同概念使用key-value 儲存資料

• 一般object(Regular Object) 的key是必須是整數或字符串或符號但map object 可以任何type像array/object

• 引數：可迭代物件 iterable object

• 回傳值：key,value

• 一組鍵值(key,value),key都有另一個關聯的value

• 是Object的instance

• 原始順序會保留

創建map方式:new Map()

let emptyMap = new Map();
console.log(emptyMap);
//Map(0) {}

參數使用二維陣列

let myMap = new Map([['name', 'wendy']]);
console.log(myMap);
//Map(1) { 'name' => 'wendy' }

let myMap = new Map([
    [1, 'wendy'],
    [2, 'nick'],
    ['red', 'apple'],
]);

console.log(myMap);
//Map(3) { 1 => 'wendy', 2 => 'nick', 'red' => 'apple' }

參數使用迭代物件

copy物件特性和value

let phone = {
    logo: 'apple',
    size: 4.7,
    color: 'red',
};
let iterablePhone = Object.entries(phone);
let myMap = new Map(iterablePhone);
console.log(myMap);
//Map(3) { 'logo' => 'apple', 'size' => 4.7, 'color' => 'red' }

copy另一個映射(Map)

let theMap = new Map([
    ['name1', 'wendy'],
    ['name2', 'gary'],
    ['name3', 'maggie'],
]);
let myMap = new Map(theMap);
console.log(myMap);
//Map(3) { 'name1' => 'wendy', 'name2' => 'gary', 'name3' => 'maggie' }

新增key:set()

引數:一對key和value

let emptyMap = new Map();
console.log(emptyMap); //Map(0) {}
emptyMap.set('banana', 'yellow');
console.log(emptyMap); //Map(1) { 'banana' => 'yellow' }
emptyMap.set(10, 'apple');
console.log(emptyMap); //Map(2) { 'banana' => 'yellow', 10 => 'apple' }```

已經存在key值不會創建新的key會覆蓋原本key值對應的value

let theMap = new Map([
    ['name1', 'wendy'],
    ['name2', 'gary'],
    ['name3', 'maggie'],
]);
let myMap = new Map(theMap);
console.log(myMap.has('name1'));
myMap.set('name1', 'eason'); //把name1 從wendy 改成eason
console.log(myMap); //Map(3) { 'name1' => 'eason', 'name2' => 'gary', 'name3' => 'maggie' }

可以鏈串在一起

let myMap = new Map().set(30, 'wendy').set(1, 'nick').set('eat', 'apple');
console.log(myMap);//Map(3) { 30 => 'wendy', 1 => 'nick', 'eat' => 'apple' }

key可以任何類型

let myMap = new Map()
    .set({}, 'wendy')
    .set(null, 'nick')
    .set([10], 'apple')
    .set(10n, 'orange')
    .set(Symbol('wendy'), 'good');
console.log(myMap);
//Map(5) {
//  {} => 'wendy',
//  null => 'nick',
//  [ 10 ] => 'apple',
//  10n => 'orange',
//  Symbol(wendy) => 'good'
//}

查詢key:has()

查詢映射是否有key
引數:key值
回傳:true/false

let phone = {
    logo: 'apple',
    size: 4.7,
    color: 'red',
};
let iterablePhone = Object.entries(phone);
let myMap = new Map(iterablePhone); 
console.log(myMap.has('size'))//true;

取key:get()

Map.prototype.get(key)
取key對應的value值
引數:key值
回傳:value值

let phone = {
    logo: 'apple',
    size: 4.7,
    color: 'red',
};
let iterablePhone = Object.entries(phone);
let myMap = new Map(iterablePhone);
console.log(myMap.get('size'));//4.7

刪除key:delete()

刪除鍵值，刪掉key連同對應的value一同刪除
回傳:true/false

let theMap = new Map([
    ['name1', 'wendy'],
    ['name2', 'gary'],
    ['name3', 'maggie'],
]);
let myMap = new Map(theMap);
console.log(myMap.delete('name1'));//true
console.log(myMap);//Map(2) { 'name2' => 'gary', 'name3' => 'maggie' }

Map資料全部清除:clear()

let theMap = new Map([
    ['name1', 'wendy'],
    ['name2', 'gary'],
    ['name3', 'maggie'],
]);
let myMap = new Map(theMap);
myMap.clear();
console.log(myMap); //Map(0) {}

說說排序

一般Object key會一內置排序:物件key值是numeric/numeric-string 會排序，map沒有內置排序所以轉array進行sort

const classmate = { 22: 'jack', 30: 'jason', 1: 'wendy', 2: 'ann', 3: 'emma' };
console.log(classmate);
// '1': 'wendy', '2': 'ann', '3': 'emma', '22': 'jack', '30': 'jason' }

map的順序會保留

const myMap = new Map([
    [1, 'wendy'],
    [30, 'nick'],
    [2, 'ann'],
    [10, 'ken'],
]);
console.log(myMap); //Map(4) { 1 => 'wendy', 30 => 'nick', 2 => 'ann', 10 => 'ken' }

目前學到這裡～再度跪下囉～

使用映射 (Map) 和集合 (Set)
ES6 — Map vs Object — What and when?
Array vs Set vs Map vs Object — Real-time use cases in Javascript (ES6/ES7)
JavaScript大全第七版