TypeError: map 不是 JavaScript 中的函数 [已解决]

TypeError: map 不是 JavaScript 中的函数

“TypeError: map is not a function”发生在我们map()对一个不是数组的值调用方法时。

要解决该错误，console.log您调用该map()方法的值并确保仅map()在有效数组上调用该方法。

typeerror map 不是一个函数

下面是错误如何发生的示例。

索引.js


const obj = {};

// ⛔️ Uncaught TypeError: map is not a function
const result = obj.map(element => {
  return element + 1;
});

我们

在导致错误的对象上调用了Array.map()方法。

`map()`仅在有效数组上调用方法

要解决该错误，console.log您调用该map()方法的值并确保它是一个有效的数组。

索引.js


const arr = [1, 2, 3];

const result = arr.map(element => {
  return element + 1;
});

console.log(result); // 👉️ [2, 3, 4]

如果您的对象具有带数组值的属性，请在调用之前访问该属性Array.map()。

索引.js


const obj = {
  numbers: [1, 2, 3],
};

const arr = obj.numbers.map(num => {
  return num + 10;
});

console.log(arr); // 👉️ [11, 12, 13]

该对象具有numbers我们在调用该Array.map方法之前访问的数组类型的属性。

在调用之前检查该值是否为数组`map()`

您可以使用Array.isArray
方法有条件地检查值是否为数组
。

索引.js


const arr = 'test';

const result = Array.isArray(arr) ? arr.map(element => element + 1) : [];

console.log(result); // 👉️ []

我们使用了
与语句
非常相似的三元运算符。if/else

如果值是一个数组，我们返回调用map数组方法的结果，否则我们返回一个空数组。

这样即使值不是数组也不会出错。

您还可以使用简单的if语句来检查值是否为数组。

索引.js


const arr = 'test';

let result = [];

if (Array.isArray(arr)) {
  result = arr.map(element => element + 1);
}

console.log(result); // 👉️ []

如果该值是一个数组，该if块将在我们调用该Array.map()
方法的地方运行。

如果该值是从远程服务器获取的，请通过将其记录到控制台来确保它是您期望的类型。

您还应确保在调用该map()方法之前已将值解析为原生 JavaScript 数组。

在调用之前将值转换为数组`find()`

如果您有类似数组的对象，请Array.from()在调用之前使用方法将其转换为数组map()。

索引.js


const set = new Set([1, 2, 3]);

const result = Array.from(set).map(element => element + 1);
console.log(result); // 👉️ [2, 3, 4]

在调用方法之前，我们使用Array.from()方法将 a 转换Set为数组Array.map()。

这也适用于类似数组的对象，例如NodeList调用getElementsByClassName方法返回的对象。

如果您使用React.js，则可以在映射之前检查该值是否为数组。

应用程序.js


{Array.isArray(value) ? (value).map(e => /* your code */) : null}

我们使用三元运算符来检查值是否为数组。

如果它是一个数组，我们返回对map()数组调用方法的结果，否则我们返回一个null值。

TypeError: object.map 不是 JavaScript 中的函数

出现“object.map is not a function”错误是因为该map()方法未在对象上实现。

要迭代一个对象，请使用该Object.keys()方法获取对象键map()的数组并在键数组上调用该方法。

typeerror 对象映射不是一个函数

下面是错误如何发生的示例。

索引.js


const obj = {
  name: 'James',
  country: 'Chile',
};

// ⛔️ TypeError: object.map is not a function
obj.map(element => {
  console.log(element);
});

要解决该错误，请使用
Object.keys()
方法获取对象键的数组，然后对该数组调用
Array.map()
方法。

索引.js


const obj = {
  name: 'James',
  country: 'Chile',
};

// 👇️ ['name', 'country']
console.log(Object.keys(obj));

const result = Object.keys(obj).map(key => {
  console.log(key); // 👉️ name, country
  console.log(obj[key]); // 👉️ James, Chile

  return {[key]: obj[key]};
});

// 👇️ [{name: 'James'}, {country: 'Chile'}]
console.log(result);

该Object.keys()方法返回对象键的数组，我们可以在该数组上调用该Array.map()方法。

请注意，您还可以使用
Object.values()
方法来获取对象值的数组。

索引.js


const obj = {
  num1: 4,
  num2: 8,
};

// 👇️ [4, 8]
console.log(Object.values(obj));

const result = Object.values(obj).map(value => {
  console.log(value); // 👉️ 4, 8

  return value * 2;
});

// 👇️ [8, 16]
console.log(result);

如果您只需要对象的值，则可以使用Object.values方法获取对象值的数组。然后您可以使用该方法遍历数组Array.map。

如果您需要数组中对象的键和值，请使用
Object.entries()
方法。

索引.js


const obj = {
  name: 'James',
  country: 'Chile',
};

// 👇️ [['name', 'James'], ['country', 'Chile']]
console.log(Object.entries(obj));

const result = Object.entries(obj).map(([key, value]) => {
  console.log(key); // 👉️ name, country
  console.log(value); // 👉️ James, Chile

  return {[key]: value};
});

// 👇️ [{name: 'James'}, {country: 'Chile'}]
console.log(result);

该Object.entries()方法返回一个数组数组，其中嵌套数组由 2 个元素组成 – 键和值。

我们使用数组解构来解构每个内部数组的key和value，并直接在我们的map()方法中使用变量。

如果你的对象有一个数组属性，访问属性

如果您的对象具有带数组值的属性，请在调用之前访问该属性Array.map()。

索引.js


const obj = {
  numbers: [1, 2, 3],
};

const arr = obj.numbers.map(num => {
  return num + 10;
});

console.log(arr); // 👉️ [11, 12, 13]

该对象具有numbers我们在调用该Array.map方法之前访问的数组类型的属性。

结论

“TypeError: map is not a function”发生在我们map()对一个不是数组的值调用方法时。

要解决该错误，console.log您调用该map()方法的值并确保仅map()在有效数组上调用该方法。

–

TypeError: map 不是 JavaScript 中的函数 [已解决]

目录

TypeError: map is not a function in JavaScript