首頁 > web前端 > js教程 > JavaScript中Map物件的解析(附範例)

JavaScript中Map物件的解析(附範例)

不言
發布: 2018-10-18 16:47:47
轉載
6089 人瀏覽過

這篇文章帶給大家的內容是關於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實例屬性

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
});
登入後複製


以上是JavaScript中Map物件的解析(附範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板