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

目录

TypeError: map is not a function in JavaScript

  1. TypeError: map 不是 JavaScript 中的函数
  2. 类型错误:object.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 个元素组成 – 键和值。

我们使用数组解构来解构每个内部数组的keyvalue,并直接在我们的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()在有效数组上调用该方法。