想象一下：您已经设置好 API 调用并开始工作。 数据会按照您的预期返回。 现在？ 是时候使用这些数据来创建您正在寻找的解决方案了。 突然间，您在控制台中看到一个错误。

发生了什么事，为什么你看到这个object.map is not a function错误？ 请仔细阅读，找出答案。

问题

错误的原因实际上很简单： .map()方法仅适用于使用数组时。 更具体地说，该方法作为Array.prototype.map()存在于Array原型上。

这种方法最初是在 2009 年随 ES5 引入的，在很多场景下都非常有用。 Array.map()将回调函数作为其唯一的参数。 该回调有两个参数：当前项目及其在数组中的索引。 该方法本身的工作方式类似于调用Array.forEach() ，只是回调的返回值被放在一个由方法本身返回的新数组中。

例如，如果您有一个数字数组，并且想要创建一个新数组，其中原始数组中的每个数字都加倍，您可以简单地执行以下操作：

 const items = [ 1 , 2 , 3 ]; // ES5 approach const doubledItems = items.map( function ( item ) { return item * 2 ; }); // ES6+ approach const doubledItems = items.map( ( item ) => { return item * 2 ; }); // Least code approach const doubledItems = items.map( ( item ) => item * 2 ); console .log(doubledItems); // [2, 4, 6]
 代码语言： JavaScript （ javascript ）

解决方案

要解决object.map is not a function错误，首先要弄清楚您正在使用的数据的形状，然后根据数据的内容从该数据创建一个数组。 例如，也许您的数据是一个简单的对象，但您要查找的数组实际上在该对象内。 在这种情况下，只需使用点符号来访问所需的属性：

 const object = { items : [ { id : 1 , data : "item 1 data" , }, { id : 2 , data : "item 2 data" , }, ], }; const error = object.map( ( item ) => item.data); // This will cause your error! // Instead, map over the items property rather than the parent object const result = object.items.map( ( item ) => item.data); console .log(result); // ["item 1 data", "item 2 data"]
 代码语言： JavaScript （ javascript ）

您的数据也可能是一个简单的对象，但您想要迭代的数据存储在对象的每个键中。 在这种情况下，您可以遍历这些键并对每个键的各自值执行逻辑：

 const object = { 1 : { id : "1" , data : "item 1 data" , }, 2 : { id : "2" , data : "item 2 data" , }, }; const error = object.map( ( item ) => item.data); // This will cause your error! // Get an array of the keys in your object const array = Object .keys(object); // [1, 2] // Loop through that array using each key to get the value const result = array.map( ( key ) => { const value = object[key]; // Perform your desired logic here then return a new value return value.data; }); console .log(result); // ["item 1 data", "item 2 data"]
 代码语言： JavaScript （ javascript ）

当您使用 JavaScript Set或Map时，需要另一个常见的解决方案。 因为这些都是可迭代的，甚至有一个.forEach()方法，你可以合理地假设.map()也可以工作。 但是，由于它们在技术上不是阵列，因此您需要一种解决方法。 Set或Map的解决方案类似，我们甚至有一篇文章更详细地解释了如何使用它们的值，您可以在此处查看。

 // --- Map solution example --- const myMap = new Map (); myMap.set( 1 , "item 1 data" ); myMap.set( 2 , "item 2 data" ); const myMapError = myMap.map(); // This will cause your error! // Create an array from the values of the Map const myMapArray = [...myMap.values()]; const myMapResult = myMapArray.map( ( item ) => { // Perform your logic here if (item) { return item; } }); console .log(myMapResult); // ["item 1 data", "item 2 data"] // --- Set solution example --- const mySet = new Set (); mySet.add( "item 1 data" ); mySet.add( "item 2 data" ); // Since set values are unique this won't be added to the Set mySet.add( "item 2 data" ); const mySetError = mySet.map(); // This will cause your error! const mySetArray = [...mySet.values()]; const mySetResult = mySetArray.map( ( item ) => { // Perform your logic here if (item) { return item; } }); console .log(mySetResult); // ["item 1 data", "item 2 data"]
 代码语言： JavaScript （ javascript ）

如果您想在将来避免错误，特别是如果您不知道您将尝试调用Array.map()的数据的确切形状，这里有一个简单的函数来安全地映射数组的值：

 const safelyMap = ( data, callback ) => { if (!(data && Array .isArray(data))) { return []; } return data.map(callback); }; // Arbitrary callback function const callback = ( item ) => item; console .log(safelyMap( null , callback)); // [] console .log(safelyMap( new Set (), callback)); // [] console .log(safelyMap([ 1 , 2 , 3 ], callback)); // [1, 2, 3]
 代码语言： JavaScript （ javascript ）

希望其中一个解决方案可以解决您的具体情况，但如果没有，请发表评论，我们很乐意提供帮助。