JavaScript Map-menetelmät

new Map() -menetelmän

Voit luoda Mapin lähettämällä taulukon new Map() Konstruktori luo Mapin:

实例

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

Kokeile itse

Map.get()

可以使用 get() Metodi hakee Mapin avaimen arvon:

实例

fruits.get("apples");

Kokeile itse

Map.set()

可以使用 set() Metodi lisää elementin Mapiin:

实例

// 创建 Map
const fruits = new Map();
// aseta Map-arvo
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

Kokeile itse

set() Metodi voidaan myös käyttää nykyisten Map-arvojen muuttamiseen:

实例

fruits.set("apples", 500);

Kokeile itse

Map.size

size Ominaisuus palauttaa Mapin elementtien määrän:

实例

fruits.size;

Kokeile itse

Map.delete()

delete() Metodi poistaa yhden elementin Mapista:

实例

fruits.delete("apples");

Kokeile itse

Map.clear()

clear() Metodi poistaa kaikki Mapin elementit:

实例

fruits.clear();

Kokeile itse

Map.has()

Jos Mapissa on tiettyä avainta:has() Metodi palauttaa totuusarvon:

实例

fruits.has("apples");

Kokeile itse

Yritä seuraavaa koodia:

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

Kokeile itse

Map.forEach()

forEach() Metodi kutsuu takaisinvinkkifunktion jokaiselle Mapin avain-arvoparille:

实例

// luettelo kaikista kohteista
let text = "";
fruits.forEach(function(value, key) {
  text += avain + ' = ' + arvo;
});

Kokeile itse

Map.entries()

entries() Metodi palauttaa iterointiobjektin, joka sisältää Mapin [avain, arvo] oikean iterointiobjektin:

实例

// luettelo kaikista kohteista
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

Kokeile itse

Map.keys()

keys() Metodi palauttaa iterointiobjektin, joka sisältää Mapin avaimet:

实例

// luettelo kaikista avaimista
let text = "";
for (const x of fruits.keys()) {
  text += x;
}

Kokeile itse

Map.values()

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

实例

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

Kokeile itse

可以使用 values() 方法对 Map 中的值求和：

实例

// 对所有值求和
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

Kokeile itse

对象作为键

提示：能够使用对象作为键是 Map 的一个重要特性。

实例

// 创建对象
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// 创建 Map
const fruits = new Map();
// 向 Map 添加新元素
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

Kokeile itse

注意：键是对象（apples），而不是字符串（"apples"）：

实例

fruits.get("apples"); // 返回 undefined

Kokeile itse

JavaScript Map.groupBy()

ES2024 向 JavaScript 添加了 Map.groupBy() 方法。

Map.groupBy() 方法根据回调函数返回的字符串值对对象的元素进行分组。

Map.groupBy() 方法不会更改原始对象。

实例

// 创建数组
const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];
// 分组回调函数用于
function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}
// 分组按数量
const result = Map.groupBy(fruits, myCallback);

Kokeile itse

Selaimen tuki

Map.groupBy() Se on ES2024 ominaisuus.

Vuodesta 2024 maaliskuusta lähtien kaikki uudet selaimet tukevat tätä ominaisuutta:

Object.groupBy() ja Map.groupBy() ero

Object.groupBy() ja Map.groupBy() Ero on siinä:

Object.groupBy() Ryhmittele elementit JavaScript-objektiin.

Map.groupBy() Ryhmittele elementit Map-objektiin.

Täydellinen Map-referenssikirja

Täydelliselle referenssille käy:JavaScript Map-referenssikirja.

Tämä oppikirja sisältää kaikkien Map-ominaisuuksien ja metodiensa kuvaukset ja esimerkit.