详解JavaScript中定义Map的各种方法

发布时间：2023-05-19

一、js定义map对象

Map是ES6新加入的数据结构，它提供了一种以键值对形式来存储和操作数据的方式，与Object不同的是，它支持任何类型的数据作为键名。创建一个新的Map对象可以直接调用Map构造函数：

const map = new Map();

这样就可以创建一个空的Map对象了。 当然，我们也可以通过传入一个数组作为参数，来定义初始的键值对：

const map = new Map([
  ["name", "小明"],
  ["age", 18],
  ["gender", "男"]
]);

这样，就可以同时定义key为"name"、"age"、"gender"，value为"小明"、18、"男"的项。

二、js定义一个全局变量

我们可以使用var、let、const等关键字来定义全局变量，以便在不同的作用域中使用。

// 使用var定义全局变量
var globalVar = "全局变量";
function test() {
  console.log(globalVar); //输出"全局变量"
}
// 使用let定义全局变量
let globalLet = "全局变量";
function test() {
  console.log(globalLet); //输出"全局变量"
}
// 使用const定义全局变量
const globalConst = "全局变量";
function test() {
  console.log(globalConst); //输出"全局变量"
}

三、js定义Map并赋值

除了前面所说的通过构造函数或者传入数组来创建一个Map对象之外，我们还可以通过set()方法来动态添加键值对：

const map = new Map();
map.set("name", "小明");
map.set("age", 18);
map.set("gender", "男");

这样就可以实现动态添加键值对的效果。

四、js定义类

在JavaScript中，我们可以使用class关键字来定义一个类，从而更好地组织和封装代码。

class Person {
  constructor(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  sayHi() {
    console.log(`我叫${this.name}，今年${this.age}岁，是一个${this.gender}生。`);
  }
}
const person = new Person("小明", 18, "男");
person.sayHi(); //输出"我叫小明，今年18岁，是一个男生。"

定义一个类，需要用到constructor方法，在其中定义类的属性；而方法可以通过直接在类的花括号中定义来实现。

五、js定义Map类型

JavaScript中原生支持的数据类型有Number、String、Boolean、Array、Object、undefined和null。而使用ES6中新增的数据结构，我们可以通过class来定义自己想要的数据类型。

class Map {
  constructor() {
    this.data = {};
  }
  set(key, value) {
    this.data[key] = value;
  }
  get(key) {
    return this.data[key];
  }
  has(key) {
    return key in this.data;
  }
  delete(key) {
    delete this.data[key];
  }
}
const map = new Map();
map.set("name", "小明");
map.set("age", 18);
map.set("gender", "男");
console.log(map.get("name")); //输出"小明"

这样就自己定义了一个类Map，包含了set()、get()、has()和delete()方法，以及一个数据存储对象data。在set()方法中，使用键值对的方式将数据存储到data中。在get()方法中，通过传入键名，来获取对应的键值。在has()方法中，使用in操作来检测是否存在该键名。在delete()方法中，使用delete操作来删除指定键名对应的项。

六、js定义方法

在JavaScript中，方法也是函数的一种形式，所以定义方法的方式其实就是定义函数。

class Person {
  constructor(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  sayHi() {
    console.log(`我叫${this.name}，今年${this.age}岁，是一个${this.gender}生。`);
  }
  sayHello() {
    console.log("你好，世界！");
  }
}
const person = new Person("小明", 18, "男");
person.sayHi(); //输出"我叫小明，今年18岁，是一个男生。"
person.sayHello(); //输出"你好，世界！"

在上面的代码中，我们在Person类中定义了sayHi()方法和sayHello()方法，分别输出不同的结果。

七、js定义Map数组

在ES6中，新增了一个Array.of()方法，可以用来创建包含任意数量元素的数组。我们可以使用这个方法来创建包含Map对象的数组：

const map1 = new Map([
  ["name", "小明"],
  ["age", 18]
]);
const map2 = new Map([
  ["name", "小红"],
  ["age", 16]
]);
const mapArray = Array.of(map1, map2);
console.log(mapArray); //输出[Map(2), Map(2)]

这样就可以创建了一个包含两个Map对象的数组，mapArray[0]和mapArray[1]分别对应map1和map2。

八、js定义Map并初始化

有时候我们需要定义一个Map对象，并在初始化时就赋值。可以通过传入一个Object对象来实现：

const obj = {
  name: "小明",
  age: 18,
  gender: "男"
};
const map = new Map(Object.entries(obj));
console.log(map); //输出Map(3) {"name" => "小明", "age" => 18, "gender" => "男"}

在这个例子中，我们先定义了一个Object对象obj，包含了name、age和gender三个键值对。然后通过Object.entries()方法，将obj转成一个数组形式的二维数组，再通过new Map()方法，将数组传入来创建一个Map对象。

九、js定义Map怎么调用

定义了Map对象之后，我们可以通过get()、set()、has()和delete()等方法来操作Map对象中的键值对。

const map = new Map([
  ["name", "小明"],
  ["age", 18],
  ["gender", "男"]
]);
console.log(map.get("name")); //输出"小明"
map.set("name", "小红");
console.log(map.get("name")); //输出"小红"
console.log(map.has("height")); //输出false
map.delete("age");
console.log(map); //输出Map(2) {"name" => "小红", "gender" => "男"}
map.clear();
console.log(map); //输出Map(0) {}

在上面的代码中，我们先定义了一个Map对象map，然后通过get()方法，根据键名获取对应的值；通过set()方法，改变或添加某个键名对应的值；通过has()方法，判断是否存在某个键名；通过delete()方法，删除指定的键值对；通过clear()方法，清空Map对象中的所有键值对。

十、小结

通过本文的介绍，我们了解了JavaScript中定义Map的各种方法，包括使用构造函数或数组创建Map对象、通过set()方法动态添加键值对、使用class定义自己的Map类型等。同时，我们也学会了如何通过get()、set()、has()和delete()等方法来操作Map对象中的键值对。Map作为一种新的数据结构，在实际的编程中也常常被使用到，希望本文能够对你对Map有更深入了解和应用指导。

推荐文章