初学者跪着学JavaScript Day18 : 物件：new Map()

一日客语：中文：柚子客语：Ｕ欸
是收集资料的类型
主要功用:可以用於快速搜索和查找资料
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' }

目前学到这里～再度跪下罗～