1. 程式人生 > >JavaScript基礎物件---Map

JavaScript基礎物件---Map

一、建立Map物件

Map 物件儲存鍵值對。任何值(物件或者原始值) 都可以作為一個鍵或一個值

1.建構函式

語法:new Map([iterable])
引數:

        iterable  可以是一個數組或者其他 iterable 物件,其元素或為鍵值對,或為兩個元素的陣列;每個鍵值對都會新增到新的 Map,null 會被當做 undefined


    let arr = [1,2,3];
    let myMap = new Map(arr.entries());
    console.log(myMap.get(0)); // 1

二、Map例項屬性

1.myMap.size 可訪問屬性返回 Map 物件的元素數量

size 屬性的值是一個整數,表示 Map 物件有多少個鍵值對。size 是隻讀屬性,它對應的 set 方法是 undefined,即不能改變它的值


    let myMap = new Map();
    myMap.set("a", "alpha");
    myMap.set("b", "beta");
    myMap.set("g", "gamma");
    console.log(myMap.size); // 3

三、Map例項方法

1.set()

語法:myMap.set(key, value)

引數:
        key 必填,新增到Map物件的元素的key值
        value 必填,新增到Map物件的元素的value值


    let myMap = new Map();
    myMap.set("bar", "foo");
    myMap.set(1, "foobar");
    // 在Map物件中更新一個新元素
    myMap.set("bar", "baz");

2.get()

語法:myMap.get(key)

引數:
        key 想要獲取的元素的鍵

返回值:返回一個Map物件中與指定鍵相關聯的值,如果找不到這個鍵則返回undefined


    let myMap = new Map();
    myMap.set("bar", "foo");
    console.log(myMap.get("bar"));  // "foo"
    console.log(myMap.get("baz"));  // undefined

3.has()

語法:myMap.has(key)

引數:
         key 必填,用來檢測是否存在指定元素的鍵值

返回值:如果指定元素存在於Map中,則返回true。其他情況返回false


    let myMap = new Map();
    myMap.set("bar", "foo");
    console.log(myMap.has("bar"));  // returns true
    console.log(myMap.has("baz"));  // returns false

4.delete() 方法用於移除 Map 物件中指定的元素

語法:myMap.delete(key)

引數:
        key 必須,從 Map 物件中移除的元素的鍵(key)

返回值:如果 Map 物件中存在該元素,則移除它並返回 true;否則如果該元素不存在則返回 false


    let myMap = new Map();
    myMap.set("bar", "foo");
    myMap.delete("bar"); // 返回 true。成功地移除元素
    console.log(myMap.size); // 0

5.clear()方法會移除Map物件中的所有元素

語法:myMap.clear()


    let myMap = new Map();
    myMap.set("bar","baz");
    myMap.set(1,"foo");
    console.log(myMap.size); // 2
    myMap.clear();

6.entries()

語法:myMap.entries()

返回值:返回一個新的包含[key, value]對的Iterator物件,返回的迭代器的迭代順序與Map物件的插入順序相同


    let myMap = new Map();
    myMap.set("0", "foo");
    myMap.set(1, "bar");
    myMap.set({}, "baz");

    let mapIter = myMap.entries();
    console.log(mapIter.next().value); // ["0", "foo"]
    console.log(mapIter.next().value); // [1, "bar"]
    console.log(mapIter.next().value); // [Object, "baz"]

7.keys() 返回一個新的 Iterator 物件。它包含按照順序插入Map物件中每個元素的key值

語法:myMap.keys()


    let myMap = new Map();
    myMap.set("0", "foo");
    myMap.set(1, "bar");
    myMap.set({}, "baz");

    let mapIter = myMap.keys();
    console.log(mapIter.next().value); // "0"
    console.log(mapIter.next().value); // 1
    console.log(mapIter.next().value); // Object

8.values() 方法返回一個新的Iterator物件。它包含按順序插入Map物件中每個元素的value值

語法:myMap.values()


    let myMap = new Map();
    myMap.set("0", "foo");
    myMap.set(1, "bar");
    myMap.set({}, "baz");

    let mapIter = myMap.values();
    console.log(mapIter.next().value); // "foo"
    console.log(mapIter.next().value); // "bar"
    console.log(mapIter.next().value); // "baz"

9.forEach()

語法:myMap.forEach(callback[, thisArg])

引數:
        callback 必要,每個元素所要執行的函式
        thisArg 可選,callback 執行時其 this 的值


    let myMap = new Map([["foo", 3], ["bar", {}], ["baz", undefined]]);
    myMap.forEach((value,key,map) => {
        console.log("key =",key,",value =",value); //key = foo ,value = 3
    });

原文地址:https://segmentfault.com/a/1190000016724865