想像一下：您已經設置好 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 ）

希望其中一個解決方案可以解決您的具體情況，但如果沒有，請發表評論，我們很樂意提供幫助。