JavaScript Map 与对象

Mehvish Ashiq 2023年10月12日
  1. 在 JavaScript 中定义 Map
  2. 在 JavaScript 中定义对象
  3. JavaScript 中的 Map 代码示例
  4. JavaScript 中对象的代码示例
JavaScript Map 与对象

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

在 JavaScript 中定义 Map

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

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

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

在 JavaScript 中定义对象

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

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

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

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

S# JavaScript Map JavaScript 对象
1 Map 被称为对象的实例。 Object 不是 Map 的一个实例。
2 Map 保持原来的插入顺序。 对象不保留原始插入顺序。
3 key 的类型可以是任意值,包括 String、Object、函数等。 key 的类型只能是 String 类型。
4 我们可以使用以下代码快速获取 Map 的大小:<br />map.size 需要手动计算才能使用以下代码找到对象的大小:<br />Object.keys(obj).length
5 Map 是可迭代的,可以使用 for...of 循环来完成,如下所示:<br />for (const m of map){<br /> console.log(m);<br />} 对象是不可迭代的,我们必须持有对象的键才能遍历。 <br />Object.keys(obj).forEach(key => {<br /> console.log(key, obj[key]);<br />}
6 没有默认键。 对象可以从原型继承键。
7 我们必须编写一个自定义解析器来将 Map 转换为 JSON 字符串。 对象可以使用 JSON.stringify 转换为 JSON 字符串。

JavaScript 中的 Map 代码示例

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 中对象的代码示例

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

使用字符串文字创建 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`);
}
作者: Mehvish Ashiq
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相关文章 - JavaScript Object