ลองนึกภาพสิ่งนี้: คุณมีการตั้งค่าการเรียก API และใช้งานได้ ข้อมูลกลับมาพร้อมกับสิ่งที่คุณคาดหวัง ตอนนี้? ถึงเวลาทำงานกับข้อมูลนั้นเพื่อสร้างโซลูชันที่คุณต้องการ ทันใดนั้น คุณเห็นข้อผิดพลาดในคอนโซลของคุณ

เกิดอะไรขึ้น และเหตุใดคุณจึงเห็น object.map is not a function การอ่านเพื่อหา.

ปัญหา

สาเหตุของข้อผิดพลาดนั้นค่อนข้างง่าย: เมธอด .map() ใช้ได้เฉพาะเมื่อทำงานกับอาร์เรย์เท่านั้น โดยเฉพาะอย่างยิ่ง วิธีการนี้มีอยู่บนต้นแบบ Array เป็น Array.prototype.map()

วิธีนี้เริ่มใช้ครั้งแรกในปี 2552 พร้อม 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 ( จาวาสคริปต์ )

การแก้ไขปัญหา

ในการแก้ไข 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 ( จาวาสคริปต์ )

อาจเป็นไปได้ว่าข้อมูลของคุณเป็นวัตถุธรรมดา แต่ข้อมูลที่คุณต้องการทำซ้ำจะถูกเก็บไว้ในแต่ละคีย์ของวัตถุ ในกรณีนั้น คุณสามารถวนซ้ำคีย์เหล่านั้นและดำเนินการตรรกะของคุณกับค่าที่เกี่ยวข้องของแต่ละคีย์:

 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 Set หรือ Map เนื่องจากสิ่งเหล่านี้เป็นทั้งแบบวนซ้ำได้ และยังมี .forEach() คุณจึงอาจถือว่า .map() 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 ( จาวาสคริปต์ )

หากคุณต้องการหลีกเลี่ยงข้อผิดพลาดในอนาคต โดยเฉพาะอย่างยิ่งหากคุณไม่ทราบรูปร่างที่แน่นอนของข้อมูล คุณจะต้องพยายามเรียกใช้ 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 ( จาวาสคริปต์ )

หวังว่าหนึ่งในวิธีแก้ปัญหาเหล่านี้จะแก้ไขกรณีเฉพาะของคุณได้ แต่ถ้าไม่ โปรดแสดงความคิดเห็นและเรายินดีที่จะช่วยเหลือ