Metode Map JavaScript

new Map() 方法

可以通过将数组传递给 new Map() 构造函数来创建 Map：

instansi

// membuat Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Coba sendiri

Map.get()

dapat digunakan get() 方法获取 Map 中键的值：

instansi

fruits.get("apples");

Coba sendiri

Map.set()

dapat digunakan set() 方法向 Map 添加元素：

instansi

// membuat Map
const fruits = new Map();
// 设置 Map 值
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

Coba sendiri

set() 方法也可以用于更改现有的 Map 值：

instansi

fruits.set("apples", 500);

Coba sendiri

Map.size

size 属性返回 Map 中元素的数量：

instansi

fruits.size;

Coba sendiri

Map.delete()

delete() 方法移除 Map 中的一个元素：

instansi

fruits.delete("apples");

Coba sendiri

Map.clear()

clear() 方法移除 Map 中的所有元素：

instansi

fruits.clear();

Coba sendiri

Map.has()

如果 Map 中存在某个键，has() 方法返回 true：

instansi

fruits.has("apples");

Coba sendiri

尝试以下代码：

fruits.delete("apples");
fruits.has("apples");

Coba sendiri

Map.forEach()

forEach() 方法为 Map 中的每个键值对调用回调函数：

instansi

// 列出所有条目
let text = "";
fruits.forEach(function(value, key) {
  text += key + ' = ' + value;
});

Coba sendiri

Map.entries()

entries() 方法返回一个包含 Map 中 [key, value] 对的迭代器对象：

instansi

// 列出所有条目
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

Coba sendiri

Map.keys()

keys() 方法返回一个包含 Map 中键的迭代器对象：

instansi

// 列出所有键
let text = "";
for (const x of fruits.keys()) {
  text += x;
}

Coba sendiri

Map.values()

values() metode mengembalikan sebuah objek iterator yang berisi nilai dalam Map:

instansi

// menampilkan semua nilai
let text = "";
for (const x of fruits.values()) {
  text += x;
}

Coba sendiri

dapat digunakan values() metode menghitung total nilai dalam Map:

instansi

// menghitung total semua nilai
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

Coba sendiri

objek sebagai kunci

Petunjuk:kemampuan untuk menggunakan objek sebagai kunci adalah sifat penting dari Map.

instansi

// membuat objek
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// membuat Map
const fruits = new Map();
// menambahkan elemen baru ke Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

Coba sendiri

Perhatian:kunci adalah objek (apples), bukan string ("apples"):

instansi

fruits.get("apples"); // kembalikan undefined

Coba sendiri

JavaScript Map.groupBy()

ES2024 menambahkan ke JavaScript Map.groupBy() metode.

Map.groupBy() metode ini mengelompokkan elemen objek berdasarkan nilai string yang dipilih kembali oleh fungsi balik.

Map.groupBy() metode ini tidak akan mengubah objek asli.

instansi

// membuat sebuah array
const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];
// fungsi balik untuk pengelompokkan
function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}
// mengelompokkan berdasarkan jumlah
const result = Map.groupBy(fruits, myCallback);

Coba sendiri

Dukungan Browser

Map.groupBy() Adalah fitur ES2024.

Dari bulan Maret 2024, semua browser yang baru mendukung fitur ini:

Perbedaan antara Object.groupBy() dan Map.groupBy()

Object.groupBy() dan Map.groupBy() Perbedaan nya adalah:

Object.groupBy() Kumpulkan elemen ke dalam objek JavaScript.

Map.groupBy() Kumpulkan elemen ke dalam objek Map.

Panduan referensi Map penuh

Untuk referensi penuh, kunjungi situs kami:Panduan Referensi Map JavaScript.

Panduan referensi Map yang mencakup deskripsi dan contoh semua properti dan metode Map.