站長資訊網
最全最豐富的資訊網站

es6 map成員是唯一的么

es6 map成員是唯一的。ES6新增的Map數據結構類似于對象,key值不限于字符串,成員值唯一;Map結構提供了“值—值”的對應,是一種更完善的Hash結構實現。Map對象保存鍵值對,并且能夠記住鍵的原始插入順序;任何值(對象或者原始值)都可以作為一個鍵或一個值。

es6 map成員是唯一的么

前端(vue)入門到精通課程:進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具:點擊使用

本教程操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

Map和Set都是ES6新增的數據結構

  • Map 類似于對象,key值不限于字符串,成員值唯一。

  • Set 類似于數組,成員值唯一。

Map 基本概念

ES6 提供了 Map 數據結構。它類似于對象,也是鍵值對的集合,但是“鍵”的范圍不限于字符串,各種類型的值(包括對象)都可以當作鍵。也就是說,Object 結構提供了“字符串—值”的對應,Map 結構提供了“值—值”的對應,是一種更完善的 Hash 結構實現。如果你需要“鍵值對”的數據結構,Map 比 Object 更合適。

Map 特征

  • Map 對象保存鍵值對,并且能夠記住鍵的原始插入順序。

  • 任何值(對象或者原始值) 都可以作為一個鍵或一個值。

  • Map 是 ES6 中引入的一種新的數據結構,可以參考 ES6 Map 與 Set。

Maps 和 Objects 的區別

  • 一個 Object 的鍵只能是字符串或者 Symbols,但一個 Map 的鍵可以是任意值。

  • Map 中的鍵值是有序的(FIFO 原則),而添加到對象中的鍵則不是。

    關于對象是無序的官方解釋: 1.An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method. 2.Chrome Opera 的 JavaScript 解析引擎遵循的是新版 ECMA-262 第五版規范。因此,使用 for-in 語句遍歷對象屬性時遍歷書序并非屬性構建順序。而 IE6 IE7 IE8 Firefox Safari 的 JavaScript 解析引擎遵循的是較老的 ECMA-262 第三版規范,屬性遍歷順序由屬性構建的順序決定。

  • Map 的鍵值對個數可以從 size 屬性獲取,而 Object 的鍵值對個數只能手動計算。

  • Object 都有自己的原型,原型鏈上的鍵名有可能和你自己在對象上的設置的鍵名產生沖突。

Map 屬性

  • Map.prototype.size – 返回 Map 對象鍵/值對的數量。

Map 操作方法

  • Map.prototype.clear() – 移除 Map 對象的所有鍵/值對 。
  • Map.prototype.set() – 設置鍵值對,返回該 Map 對象。
  • Map.prototype.get() – 返回鍵對應的值,如果不存在,則返回 undefined。
  • Map.prototype.has() – 返回一個布爾值,用于判斷 Map 中是否包含鍵對應的值。
  • Map.prototype.delete() – 刪除 Map 中的元素,刪除成功返回 true,失敗返回 false。

Map 循環方法

Map 的遍歷順序就是插入順序。

  • Map.prototype.keys():返回鍵名的遍歷器。
  • Map.prototype.values():返回鍵值的遍歷器。
  • Map.prototype.entries():返回所有成員的遍歷器。
  • Map.prototype.forEach():遍歷 Map 的所有成員。

其他方法

  • for of 由于有iterable 所以也可以使用此方法

開始創建

使用 Map 類型和 new 關鍵字來創建 Map:

不僅僅是數組,任何具有 Iterator 接口、且每個成員都是一個雙元素的數組的數據結構 所以 Set Map 數組 都可以創建 Map

創建空map 再添加

let map1 = new Map(); map1.set('123',123)
登錄后復制

數組創建Map

const m2 = new Map([['baz', 3]]);
登錄后復制

set 創建Map

const set = new Set([   ['foo', 1],   ['bar', 2] ]);  const m3 = new Map(set);
登錄后復制

map 創建新的map

注意 m3 === m2 //false

const m3 = new Map(m2);
登錄后復制

例子:可以做什么

和對象最大的區別: 多類型的key

字符串

var myMap = new Map();  var keyString = "a string";  myMap.set(keyString, "和鍵'a string'關聯的值");
登錄后復制

對象

var myMap = new Map();  var keyObj = {} myMap.set(keyObj, "和鍵 keyObj 關聯的值");
登錄后復制

函數

var myMap = new Map();  var keyFunc = function () {} // 函數  myMap.set(keyFunc, "和鍵 keyFunc 關聯的值");
登錄后復制

NaN

var myMap = new Map();  myMap.set(NaN, "not a number");
登錄后復制

Map 遍歷成員方法

keys() , values() , entries()Map 的遍歷順序就是插入順序

const map = new Map([   ['F', 'no'],   ['T',  'yes'], ]);  for (let key of map.keys()) {   console.log(key); } // "F" // "T"  for (let value of map.values()) {   console.log(value); } // "no" // "yes"  for (let item of map.entries()) {   console.log(item[0], item[1]); } // "F" "no" // "T" "yes"  // 或者 for (let [key, value] of map.entries()) {   console.log(key, value); } // "F" "no" // "T" "yes"  // 等同于使用map.entries() for (let [key, value] of map) {   console.log(key, value); }
登錄后復制

使用擴展運算符可以快速轉數組

const map = new Map([  [1, 'one'],   [2, 'two'],   [3, 'three'], ]);  [...map.keys()] // [1, 2, 3]  [...map.values()] // ['one', 'two', 'three']  [...map.entries()] // [[1,'one'], [2, 'two'], [3, 'three']]  [...map] // [[1,'one'], [2, 'two'], [3, 'three']]
登錄后復制

轉為數組后,可以使用數組的map,filter方法

const map0 = new Map()   .set(1, 'a')   .set(2, 'b')   .set(3, 'c');  const map1 = new Map(   [...map0].filter(([k, v]) => k < 3) ); // 產生 Map 結構 {1 => 'a', 2 => 'b'}  const map2 = new Map(   [...map0].map(([k, v]) => [k * 2, '_' + v])     ); // 產生 Map 結構 {2 => '_a', 4 => '_b', 6 => '_c'}
登錄后復制

Map 增 刪 查 清空

const m = new Map(); const o = {p: 'Hello World'};  m.set(o, 'content') m.get(o) // "content"  m.has(o) // true m.delete(o) // true m.has(o) // false m.clear()
登錄后復制

與其他數據結構的互相轉換

(1)Map 轉為數組

前面已經提過,Map 轉為數組最方便的方法,就是使用擴展運算符(...)。

const myMap = new Map()   .set(true, 7)   .set({foo: 3}, ['abc']); [...myMap] // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]  var outArray = Array.from(myMap);
登錄后復制

(2)數組 轉為 Map

將數組傳入 Map 構造函數,就可以轉為 Map。

new Map([   [true, 7],   [{foo: 3}, ['abc']] ]) // Map { //   true => 7, //   Object {foo: 3} => ['abc'] // }
登錄后復制

(3)Map 轉為對象

如果所有 Map 的鍵都是字符串,它可以無損地轉為對象。

function strMapToObj(strMap) {   let obj = Object.create(null);   for (let [k,v] of strMap) {     obj[k] = v;   }   return obj; }  const myMap = new Map()   .set('yes', true)   .set('no', false); strMapToObj(myMap) // { yes: true, no: false }
登錄后復制

如果有非字符串的鍵名,那么這個鍵名會被轉成字符串,再作為對象的鍵名。

(4)對象轉為 Map

對象轉為 Map 可以通過Object.entries()

let obj = {"a":1, "b":2}; let map = new Map(Object.entries(obj));
登錄后復制

此外,也可以自己實現一個轉換函數。

function objToStrMap(obj) {   let strMap = new Map();   for (let k of Object.keys(obj)) {     strMap.set(k, obj[k]);   }   return strMap; }  objToStrMap({yes: true, no: false}) // Map {"yes" => true, "no" => false}
登錄后復制

(5)Map 轉為 JSON

Map 轉為 JSON 要區分兩種情況。一種情況是,Map 的鍵名都是字符串,這時可以選擇轉為對象 JSON。

function strMapToJson(strMap) {   return JSON.stringify(strMapToObj(strMap)); }  let myMap = new Map().set('yes', true).set('no', false); strMapToJson(myMap) // '{"yes":true,"no":false}'
登錄后復制

另一種情況是,Map 的鍵名有非字符串,這時可以選擇轉為數組 JSON。

function mapToArrayJson(map) {   return JSON.stringify([...map]); }  let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']); mapToArrayJson(myMap) // '[[true,7],[{"foo":3},["abc"]]]'
登錄后復制

(6)JSON 轉為 Map

JSON 轉為 Map,正常情況下,所有鍵名都是字符串。

function jsonToStrMap(jsonStr) {   return objToStrMap(JSON.parse(jsonStr)); }  jsonToStrMap('{"yes": true, "no": false}') // Map {'yes' => true, 'no' => false}
登錄后復制

但是,有一種特殊情況,整個 JSON 就是一個數組,且每個數組成員本身,又是一個有兩個成員的數組。這時,它可以一一對應地轉為 Map。這往往是 Map 轉為數組 JSON 的逆操作。

function jsonToMap(jsonStr) {   return new Map(JSON.parse(jsonStr)); }  jsonToMap('[[true,7],[{"foo":3},["abc"]]]') // Map {true => 7, Object {foo: 3} => ['abc']}
登錄后復制

其他

Map 的合并

var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);  var second = new Map([[1, 'uno'], [2, 'dos']]); // 合并兩個 Map 對象時,如果有重復的鍵值,則后面的會覆蓋前面的,對應值即 uno,dos, three  var merged = new Map([...first, ...second]);
登錄后復制

Map 的克隆

var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);  var myMap2 = new Map(myMap1);  console.log(original === clone); // 打印 false。 Map 對象構造函數生成實例,迭代出新的對象。
登錄后復制

注意事項

注意,只有對同一個對象的引用,Map 結構才將其視為同一個鍵。這一點要非常小心。

const map = new Map();  map.set(['a'], 555); map.get(['a']) // undefined
登錄后復制

雖然NaN不嚴格相等于自身,但 Map 將其視為同一個鍵。

let map = new Map(); map.set(NaN, 123); map.get(NaN) // 123
登錄后復制

贊(0)
分享到: 更多 (0)
網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
精品亚洲AV无码一区二区三区 | 久久99精品波多结衣一区| 亚洲精品tv久久久久| 国产美女精品人人做人人爽| 国产精品视频一区二区三区| 98久久人妻无码精品系列蜜桃| 久久青草国产精品一区| 国产午夜精品一区二区三区不卡| 国产精品熟女福利久久AV| 中文字幕日韩欧美一区二区三区| 国产成人精品免费视频大全五级 | 日韩福利视频精品专区| 日韩精品视频在线播放| 国产欧美精品123区发布| 久久天堂AV女色优精品| 亚洲国产成人久久精品软件| 色播精品免费小视频| 国产成人精品天堂| 国产精品久久久久9999| 国产精品一区在线播放| 国产精品一区二区久久精品| 国产精品免费精品自在线观看| 久久青青草原精品国产| 久久99热精品免费观看动漫| 国产精品免费高清在线观看| 国产精品高清一区二区三区 | 99热精品久久只有精品30| 久久久久亚洲精品影视| 特级精品毛片免费观看| 久久久精品2019中文字幕之3| 国自产偷精品不卡在线| 国农村精品国产自线拍| 久久99精品国产| 久久96国产精品| 91精品国产自产91精品 | 一级做a爰黑人又硬又粗免费看51社区国产精品视 | 日韩精品久久一区二区三区| 热re久久精品国产99热| 国产精品二区在线| 国产日韩成人亚洲丁香婷婷 | 久久99精品国产免费观看|