本篇內(nèi)容主要講解“es6 map是不是引用類型”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“es6 map是不是引用類型”吧!

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),石林企業(yè)網(wǎng)站建設(shè),石林品牌網(wǎng)站建設(shè),網(wǎng)站定制,石林網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,石林網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

map是引用類型；map（集合）是es6新增的一種引用數(shù)據(jù)類型，表示數(shù)據(jù)的映射關(guān)系。map集合數(shù)據(jù)類型中數(shù)據(jù)是以“鍵/值”的方式存儲的，可以使用對象的屬性作為鍵，使用屬性來引用值；map可以使用new來創(chuàng)建，例“const myMap = new Map();”。

map是引用類型。

es6 map

在ES6之前，在JavaScript中實(shí)現(xiàn)‘鍵’=>‘值’，也就是我們常說的鍵值對，是用Object來完成的。但這種實(shí)現(xiàn)方式在特殊場景下的有問題的，ES6又出了一個為Map的新集合類型，為這門語言帶來正真的鍵值對存儲機(jī)制。

map（集合）是es6新增的一種引用數(shù)據(jù)類型，表示數(shù)據(jù)的映射關(guān)系；map集合數(shù)據(jù)類型中數(shù)據(jù)是以“鍵/值”的方式存儲的，可以使用對象的屬性作為鍵，使用屬性來引用值。

1-1 創(chuàng)建Map

使用new關(guān)鍵字來實(shí)例一個map

let m = new Map();

console.log(m);
// Map(0) {}

創(chuàng)建時初始化:
傳入一個二維數(shù)組參數(shù)(可迭代對象，內(nèi)部以數(shù)組的方式傳入鍵值)
每個子數(shù)組，第一個元素是map對應(yīng)的key， 第二個元素是map對應(yīng)的value

let m = new Map([[{}, 222], [{}, '123']]);

console.log(m);
// Map(2) { {} => 222, {} => '123' }

1-2 Map Api

1-2-1 添加映射元素

通過set()方法添加，傳入兩個參數(shù)，第一個傳入映射的鍵，第二個傳入映射的值。返回的是該映射集合（意味著可以鏈?zhǔn)教砑樱?/p>

let m = new Map();

m.set('prop', '值');

console.log(m);
// Map(1) { 'prop' => '值' }

鏈?zhǔn)教砑渔I值

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m);
// Map(3) { 'prop' => '值', 'prop2' => false, 'num' => { id: 13 } }

1-2-2 映射集合長度

使用size屬性可以獲取到當(dāng)前集合元素數(shù)量

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.size);

1-2-3 獲取元素

通過get()方法獲取到元素，傳入獲取目標(biāo)的key

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.get('prop2'));
// false

1-2-4 刪除元素

通過delete()方法刪除映射集合中的某個元素，返回刪除成功或失敗的布爾值

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.delete('prop2');
// true

console.log(m.get('prop2'), m.size);
// undefined 2

1-2-5 檢測元素是否存在

使用has()方法檢測目標(biāo)元素是否存在，返回檢測結(jié)果的布爾值

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.delete('prop2');
// true

console.log(m.has('prop2'), m.has('num'));
// false  true

1-2-6 清除元素方法

使用clear()方法可以清除所有的元素， 返回清除成功的布爾值

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.clear();
// true

console.log(m);
// Map(0) {}

1-3 順序與迭代

map可以根據(jù)插入順序迭代元素
映射實(shí)例會提供(iterator).能夠以插入的順序生成[key, value]形式的數(shù)組， 可以通過entries()方法(或者提供的Symbol.iterator)迭代器接口遍歷。

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.entries === m[Symbol.iterator]);// true

for(let k1 of m.entries()){
    console.log(k1);
    // [ 'prop', '值' ]
    // [ 'prop2', false ]
    // [ 'num', { id: 13 } ]
    // 遍歷的屬性即對應(yīng)映射元素的鍵值對數(shù)組
}

for(let k2 of m.keys()){
    console.log(k2);
    // prop
    // prop2
    // num
    // 遍歷的屬性對應(yīng)映射元素的鍵
}

for(let k3 of m.values()){
    console.log(k3);
    // 值
    // false
    // { id: 13 }
    // 遍歷的屬性對應(yīng)映射元素的值
}

for(let k4 of m[Symbol.iterator]()){
    console.log(k4);
    // [ 'prop', '值' ]
    // [ 'prop2', false ]
    // [ 'num', { id: 13 } ]
    // 遍歷的屬性即對應(yīng)映射元素的鍵值對數(shù)組
}

1-4 與Object對比

• 內(nèi)存占用

  瀏覽器的差異會導(dǎo)致兩種存儲方式占用的內(nèi)存占用所不同，不過在給定內(nèi)存大小的情況下，map比Object多存儲大約50%的鍵值對

• 插入性能

  插入速度上面 map 和 Object性能大致相同， 但是如果代碼涉及大量的插入，建議使用map

• 查找速度

  差異較小，只包含少量鍵值對的情況下Object更好

• 刪除性能

  Object 的delete()性能較差，而map的刪除delete()性能好，如果數(shù)據(jù)涉及到大量的刪除操作，建議使用map

到此，相信大家對“es6 map是不是引用類型”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！