es6 map成員是唯一的麼

es6 map成員是唯一的。ES6新增的Map資料結構類似於物件，key值不限於字串，成員值唯一；Map結構提供了「值—值」的對應，是一種更完善的Hash結構實現。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
登入後複製

【相關推薦：、】

以上就是es6 map成員是唯一的麼的詳細內容，更多請關注TW511.COM其它相關文章！