บทนำ

หากคุณพบกรณีการใช้งานของการวนซ้ำnหลายครั้งใน JavaScript มีโอกาสที่คุณอาจลองใช้วิธีแก้ปัญหาด้านล่าง (โดยเฉพาะอย่างยิ่งในการตอบสนอง เมื่อคุณต้องการแสดงองค์ประกอบ JSX เป็นจำนวนครั้ง)

Array(5).map(() => console.log("hello"))

อาร์เรย์กระจัดกระจาย

เมื่ออาร์เรย์ JavaScript ถูกสร้างอินสแตนซ์โดยไม่มีองค์ประกอบใดๆ แต่มีความยาว องค์ประกอบในดัชนีทั้งหมดจะถูกเติมด้วยempty items.

องค์ประกอบเหล่านี้ไม่สามารถวนซ้ำได้ด้วยวิธีการวนซ้ำของอาร์เรย์ เช่นforEach, map, filterฯลฯ องค์ประกอบเหล่านี้จะข้ามองค์ประกอบว่างและวนซ้ำองค์ประกอบอื่นๆ ที่ไม่ว่าง หากมี

ตัวอย่างเช่น,

const arr = Array(5);

console.log(arr); // [ <5 empty items> ]

arr[1] = 1;
arr[3] = 3;
arr[5] = 5;

console.log(arr); // [ <1 empty item>, 1, <1 empty item>, 3, <1 empty item>, 5 ]

arr.forEach((ele) => console.log(ele)); // 1, 3, 5

const arr = [1, 2, 3];

arr.length = 5;

console.log(arr); // [ 1, 2, 3, <2 empty items> ]

arr[7] = 8;

console.log(arr); // [ 1, 2, 3, <4 empty items>, 8 ]

arr.forEach((ele) => console.log(ele)); // 1, 2, 3, 8

delete arr[1];

console.log(arr); // [ 1, <1 empty item>, 3, <4 empty items>, 8 ]

const newArr = [1, , 2, , 3];

console.log(newArr); // [ 1, <1 empty item>, 2, <1 empty item>, 3 ]

รายการว่างจะถือว่าเป็นการundefinedดำเนินการบางอย่าง เช่น การfor...ofวนซ้ำ การเข้าถึงผ่านดัชนี และตัว...ดำเนินการสเปรด

const arr = [1, , 2, , 3];

for (const ele of arr) { // 1, undefined, 2, undefined, 3, undefined
  console.log(ele);
}

console.log(...arr); // 1, undefined, 2, undefined, 3, undefined

console.log(arr[0]); // 1
console.log(arr[1]); // undefined

[...Array(3)].map((e) => console.log(e)); // undefined, undefined, undefined

Array.from({ length: 3 }).map((e) => console.log(e)); // undefined, undefined, undefined

วิธีการข้างต้นมีประโยชน์เมื่อคุณต้องการทำซ้ำตามจำนวนครั้งที่กำหนดในคำสั่งเดียว เช่น การเรนเดอร์องค์ประกอบ JSX หลายครั้งใน React

นั่นคือทั้งหมด! ขอบคุณที่อ่าน.

เนื้อหาเพิ่มเติมที่PlainEnglish.io สมัครรับจดหมายข่าวรายสัปดาห์ฟรีของ เรา ติดตามเราได้ที่Twitter , LinkedIn , YouTubeและDiscord สนใจในการแฮ็คการเติบโตหรือไม่? ตรวจสอบวงจร