详细了解JS Map，它和传统对象有什么区别？

前端开发作者： 2024-08-22 02:55:01

一直以来，JavaScript使用数组和对象来定义和存放结构化数据，在这篇文章中，我们将一起深挖另一种对象Map的一切，我们将会去了解它是什么、如何遍历、都包括什么属性和方法以及优缺点是什么。

var firstInstance = { id: 1 };
var secondInstance = { id: 2 };
console.log(firstInstance["id"]);
console.log(secondInstance ["id"]);

var firstInstance = { id: 1 };
var secondInstance = { id: 2 };

var sqlServer = {};

sqlServer[firstInstance] = "SQLServer1";
sqlServer[secondInstance] = "SQLServer2";

let myMap = new Map();
console.log(myMap);

使用Array

let topProgrammingLanguages = new Map([
    [1,'JavaScript'],[2,'Python'],[3,'Java'],[4,'C#'],[5,'C']
]);

console.log(topProgrammingLanguages);

使用set() 方法

let myFavoriteBooks = new Map();

myFavoriteBooks.set(1,'Rich Dad Poor Dad');

myFavoriteBooks.set(2,'The Magic of Thinking Big');

myFavoriteBooks.set(3,'Think and Grow Rich');

myFavoriteBooks.set(4,'How to Win Friends & Influence People');

myFavoriteBooks.set(5,'Shoe Dog');

 

console.log(myFavoriteBooks);

使用get、has、includes、clear和delete方法

使用 get() 方法

let sqlServerInstances = new Map();

sqlServerInstances.set('SQL_DEV_Instance','MS_SQLSERVER_1');
sqlServerInstances.set('SQL_UAT_Instance','MS_SQLSERVER_2');
sqlServerInstances.set('SQL_PROD_Instance','MS_SQLSERVER_3');

console.log(sqlServerInstances.get("SQL_DEV_Instance"));   //output: MS_SQLSERVER_1 
console.log(sqlServerInstances.get('SQL_UAT_Instance'));   //output: MS_SQLSERVER_2 
console.log(sqlServerInstances.get("SQL_PROD_Instance"));  //output: MS_SQLSERVER_3
console.log(sqlServerInstances.get("SQL "));  //output: undefined

使用 has() 方法

let sqlServerInstances = new Map();

sqlServerInstances.set('SQL_DEV_Instance','MS_SQLSERVER_3');

console.log(sqlServerInstances.has("SQL_PROD_Instance"))   //output: true
console.log(sqlServerInstances.has("SQL_PROD2_Instance"))  //output: false

使用 clear() 方法

let products = new Map();

products.set("PRODUCT_001",{ name: "Product 1" });
products.set("PRODUCT_002",{ name: "Product 2" });
products.set("PRODUCT_003",{ name: "Product 3" });

//let's get the size of the Map before invoking clear()
console.log(products.size);  //output: 3
products.clear();            //clears the Map-products
console.log(products.size);  //output: 0

使用 delete() 方法

let sqlServerInstances = new Map();

sqlServerInstances.set('SQL_DEV_Instance','MS_SQLSERVER_3');

//let's delete the UAT instance
console.log(sqlServerInstances.get('SQL_UAT_Instance'));    //output: MS_SQLSERVER_2 
console.log(sqlServerInstances.delete('SQL_UAT_Instance')); //deletes the key/value pair
console.log(sqlServerInstances.has('SQL_UAT_Instance'));    //output: false
console.log(sqlServerInstances.get('SQL_UAT_Instance'));    //output: undefined

Map遍历的方式

let myFavoriteBooks = new Map();
myFavoriteBooks.set(1,'Rich Dad Poor Dad');
myFavoriteBooks.set(2,'The Magic of Thinking Big');
myFavoriteBooks.set(3,'Think and Grow Rich');
myFavoriteBooks.set(4,'How to Win Friends & Influence People');
myFavoriteBooks.set(5,'Shoe Dog');

使用 keys() 方法

const myMap1 = new Map([[1,'red'],'blue']]);
console.log(myMap1.keys());     //output: { 1,2 }

/**
 * Output
 * 1
 * 2
 * 3
 * 4
 * 5
 */
for (const key of myFavoriteBooks.keys()) {
    console.log(key);
}
//end of iteration over the keys

使用 values() 方法

const myMap2 = new Map([['Electronic Gadget','Smart Phone'],['Input Devices','Mouse']]);
console.log(myMap2.values());   //output: {"Smart Phone","Mouse"}

/**
 * Output
 * Rich Dad Poor Dad
 * The Magic of Thinking Big
 * Think and Grow Rich
 * How to Win Friends & Influence People
 * Shoe Dog
 */
for (const value of myFavoriteBooks.values()) {
    console.log(value);
}
//end of iteration over the values

使用 entry() 方法

const myMap3 = new Map([['Samsung',['Colgate','Toothpaste'],['Coke','Soda']]);
console.log(myMap3.entries());   //output: {"Samsung" => "Smart Phone",//"Colgate" => "Toothpaste","Coke" => "Soda"}

/**
 * Output
 * 1 "Rich Dad Poor Dad"
 * 2 "The Magic of Thinking Big"
 * 3 "Think and Grow Rich"
 * 4 "How to Win Friends & Influence People"
 * 5 "Shoe Dog"
 */
for (const [key,value] of myFavoriteBooks.entries()) {
    console.log(key,value);
}
//end of iteration over the entries

散布运算符遍历Map

let fastFoods = new Map([[1,'McDO'],'Burger King'],'KFC'],'Wendys'],'Pizza Hut']]);

console.log(...fastFoods.keys());
console.log(...fastFoods.values());