不想用Object和Array存盤資料，你還有Set和Map

全文共4271字，預計學習時長11分鐘

圖源：unsplash

許多年來，程式員們一直使用Object和Array來存盤資料，這種趨勢不僅僅局限于JavaScript，除了這兩個選項外，沒有其他選擇來存盤多個值和處理資料結構，然而，在使用Object和Array時有幾個限制，例如：

· Array可以存盤重復的元素，

· 沒有像Array那樣找到Object長度的方法，

· 只有字串可以存盤在Object中，不記插入順序，

· 開發人員必須根據用例選擇陣列或物件，

· 像Lodash這樣的第三方庫被用來增強陣列的功能，

隨著2015年ES6的發布，情況開始好轉，ES6引入了對Map和Set的支持，旨在克服上述限制，

什么是Set和Map?

如前所述，這兩個功能都是在JavaScript的ES6版本中引入的，Set是唯一元素的有序集合，“唯一元素”是最重要的，因為它意味著一個Set中不能存盤重復的元素，但是它沒有鍵-值對系統，

Map是Array和Object資料結構的組合，它像Object一樣是鍵-值對的Set，但它也記住插入格式，并具有length(.size)屬性，

· Set的宣告和初始化：一個集合可以像這樣初始化，

const set = new Set();

· 從Set中添加和洗掉元素：你可以使用.add()方法輕松地將元素插入到集合中，

const set = new Set();set.add('John');set.add('Martha')set.add('Bryan');set.add('John');//set = {'John','Martha','Bryan'}

JavaScript中的Set借用了很多數學集合的屬性，并且只包含唯一的元素，洗掉元素也非常簡單，使用.delete()方法洗掉單個元素，或使用.clear()方法洗掉所有元素，

set.add('John');set.add('Martha')set.add('Bryan');set.delete('Martha')//set= {'John','Bryan'}set.clear(); // removes all the element

· Set的大小：使用.size，你可以很容易地找到有用的Set的大小，

set.add('a')set.add('b');set.add('c');console.log(set.size) // => 3

· 訪問Set中的元素：Set在嘗試記錄或訪問其值時的方式不同，你可以記錄陣列并查看元素，但這不適用于Set，

var arr=[1,2,3];const set = new Set(arr);console.log(set) // => [objectSet]console.log(arr) // => (3) [1,2,3]

為了訪問Set，我們需要一個SetIterator()來獲取所有的值，JavaScript提供了一個屬性.values()來獲取一個迭代器，然后我們可以將該迭代器與回圈結合使用獲取所有的值，如以下代碼片段演示：

var arr=[1,2,3];const set = new Set(arr);variterator=set.values()console.log(iterator.next().value) //1

檢索所有元素更簡單的方法是使用.forEach()，如下所示：

var arr=[1,2,3];const set = new Set(arr);set.forEach(v=>console.log(v))

輸出：

1
2
3

此外，你可以使用.has()方法檢查是否存在某個值，如果找到該元素，該方法將回傳true，

var arr=[1,2,3];const set = new Set(arr);console.log(set.has(1)); // true

值得一提的是，盡管Set不支持鍵-值對元素，但keys()和entries()等方法對Set是可用的，

Set vs Array

Set和Array傾向于執行和處理相同的操作，但存在一些差異，最大的區別是Set不能像Array那樣有重復項，而Set提供了一種更簡單的方法來洗掉項，此外，Set的元素在插入順序上是可迭代的，

與數學集合一樣，JavaScript中的集合也可以用于執行union和intersection等操作，這些操作可以在合并資料或在兩個Set中尋找公共元素時使用，

初始化和宣告Map

與Set類似，Map也可以用同樣的方式宣告，

const map = new Map();

從Map中添加和洗掉元素：Map支持類似Object的鍵值對，因此，在增加價值的同時，我們也需要提供一個密鑰，這和我們在Set中看到的不一樣，

const map = new Map();map.set('Name', 'iPhone'); // map.set(key,value)formatmap.set('Brand', 'Apple');map.set('Price', '$1000');

要從Map中洗掉一個值，我們可以簡單地將鍵傳遞給.delete()屬性，

const map = new Map();map.set('Name', 'iPhone'); map.set('Brand','Apple');map.set('Price', '$1000');map.delete('Price'); //removes the elementwith key 'Price'

與Set類似，可以使用.clear()洗掉所有元素，

map.clear() // removes all the element

Map的大小：使用.size可以很容易地檢索Map的大小(長度)，

const map = new Map();map.set('Name', 'iPhone');map.set('Brand','Apple');map.set('Price', '$1000');console.log(map.size)//=> 3

訪問Map中的元素：Map為我們提供了一個.get()方法，通過將鍵作為引數傳遞到方法中來快速獲取值，

const map = new Map();map.set('Name', 'iPhone');map.set('Brand','Apple');map.set('Price', '$1000');console.log(map.get('Name'));//iPhoneconsole.log(map.get('Brand')); // Apple

但是如果你只想要鍵、值，或者鍵和值都想要，該怎么辦呢?Map有.keys()，.values()和.entries()分別實作相同的功能，使用上面代碼中的相同Map：

console.log(map.keys());
// iterator {'Name','Brand',Price'}console.log(map.values());
// iterator {'iPhone','Apple','$1000'}console.log(map.entries());
//iterator {'Name':'iPhone','Brand':'Apple',Price':'$1000'}

Map的迭代也非常簡單：

//with for-each
map.forEach((value, key) => {
   console.log(`${key} is ${value} yearsold!`);
});


// with for-of
for(const [key, value] of map) {
  console.log(`${key} : ${value}`);
}

此外，你可以使用.has()屬性并傳遞鍵輕松地檢查元素是否存在，

var map = new Map();
map.set('age',19);console.log(map.has('age')) // true since 'age' key ispresent

如果你決定將object轉換為map，JavaScript已經搞定了，我們之前使用.entries()來獲取所有鍵-值對，但這次我們將使用針對Object的方法，

const myObject= {
  'Age': '25',
  'Gender': 'Male',
  'Nationality': 'Australian'
};


const myMap = new Map(Object.entries(myObject)); //object to mapconstanotherObject = Object.fromEntries(myMap) // map to object

你可以輕松地將map轉換為object，如上所示，要將Map轉換為Array，可以使用array .from(myMap)，

Map vs Array &Objects

Map似乎解決了Array和Object的許多缺點，比如它能夠處理更復雜的操作，Map就像是Array和Object的混合體，它有一個類似array的size屬性，可以以鍵-值對格式存盤元素，除此之外，它還提供了.has()之類的方法來檢查元素是否存在，這可以節省大量時間，

而且，它不要求鍵必須是字串型別，你甚至可以使用一個物件作為鍵來幫助你撰寫更好的代碼，

雖然Array和Object已經成為存盤集合和鍵-值對元素的事實上的標準，但通過引入Map和Set，你可以為代碼提供一種有趣的方法，Set和Map是JavaScript提供的用于存盤復雜資料結構的新標準，

此外，使用這些資料結構還消除了使用第三方庫(如Lodash)的需要，因為這些新的資料結構默認提供了.has()和.delete()等方法，

圖源：unsplash

Array和Object在任何意義上都不是過時的，不過使用Set和Map肯定是處理資料更好的方法，尤其是在構建大型復雜應用程式時，

一起分享AI學習與發展的干貨

歡迎關注全平臺AI垂類自媒體 “讀芯術”

（添加小編微信：dxsxbb，加入讀者圈，一起討論最新鮮的人工智能科技哦～）