迹忆客 专注技术分享

本教程是关于 JavaScript 中的 Map 和对象的，我们将在其中比较它们并学习如何使用它们。

JavaScript Map 是一种以键值对形式存储数据的数据结构。它会记住键的原始插入顺序。

Map 避免了重复性，因为每一对都有一个唯一的键和一个映射到该特定键的值。键可以是任何值，包括原语、对象和函数。

map 是可迭代的，所以我们可以使用 for...of 循环遍历元素。

对象也以键值对形式存储数据，就像 Map 一样。每个键值对在对象中被称为属性。

对象的键只能是字符串类型。如果你使用数字作为对象中的键，它将被转换为字符串。

对象在使用 iterable protocol 之前是不可迭代的。

现在我们对 Map 和 Object 有了基本的了解。让我们通过使用表格来比较它们以使概念清晰。

JavaScript 代码：

const map = new Map(); //create map
const keyOfStringType = 'string'; //make a key of string type
const keyOfObjectType = {}; //make a key of object type
const keyOfFunctionType = function() {}; //make the function a key

// setting the values with all tpes of keys
map.set(keyOfStringType, "String Value");
map.set(keyOfObjectType, 'Object Value');
map.set(keyOfFunctionType, 'function Value');

//check if the map is an instance of object
console.log(map instanceof Object);

//map size
console.log("Map Size: " + map.size);

//get value of key `keyofStyingType`
console.log("Value at key named keyOfStringType: " + map.get(keyOfStringType));

//iterate over the map elements
console.log("Iterate over the Map elements");
for(const m of map){
 console.log(m);
}

输出：

true
"Map Size: 3"
"Value at key named keyOfStringType: String Value"
"Iterate over the Map elements"
["string", "String Value"]
[{ ... }, "Object Value"]
[function() {}, "function Value"]

可以通过下面列出的三种方式创建对象。

使用字符串文字创建 JavaScript 对象：

let person={
 name: 'Mehvish Ashiq',
 city: 'Lahore',
 email: 'mehvish@yahoo.com'
}

通过创建对象实例来创建 JavaScript 对象：

const person = new Object(); //we used this method in this tutorial

使用对象构造函数创建 JavaScript 对象：

function person(name,city,email){
 this.name=name;
 this.city=city;
 this.email=email;
}
let p=new person('Mehvish Ashiq','Lahore','delfstack@example.com');

你可以在此处找到有关对象的更多信息。现在让我们练习一下启动代码。

JavaScript 代码：

//create object using instance of object
const person = new Object();
//set the properties and values
person.firstname = 'Mehvish';
person.lastname = 'Ashiq';
person.age = 30;
person.showInfo = function(){
 console.log(`${person.firstname} ${person.lastname} is ${person.age} years old`);
}

//check if an object named person is an instance of Map
console.log(person instanceof Map);

//object size
console.log("Object Size: " + Object.keys(person).length);

//get value of key `firstname`
console.log("Value at key named firstname: " + person.firstname);

//get all keys
console.log("Object Keys: "+ Object.keys(person));

//get all values
console.log("Object Values: "+ Object.values(person));

//iterate over the person object elements
console.log("Iterate over the person object elements");
Object.keys(person).forEach(key => {
 console.log(key, person[key]);
});

输出：

false
"Object Size: 4"
"Value at key named firstname: Mehvish"
"Object Keys: firstname,lastname,age,showInfo"
"Object Values: Mehvish,Ashiq,30,function(){
 console.log(`${person.firstname} ${person.lastname} is ${person.age} years old`);
}"
"Iterate over the person object elements"
"firstname", "Mehvish"
"lastname", "Ashiq"
"age", 30
"showInfo", function(){
 console.log(`${person.firstname} ${person.lastname} is ${person.age} years old`);
}