Array-like Object คือออบเจ็กต์ที่มีลักษณะคล้ายโครงสร้างอาร์เรย์ ในเมื่ออาร์เรย์มี length เป็นตัวบอกความยาว อ็อบเจ็กต์ { length: 5 } ก็จะเป็น Array-like Object เพราะมี length เหมือนอาร์เรย์นั่นเอง

เราสามารถใช้ Array.from พร้อมส่ง Array-like Object เข้าไปเพื่อสร้างอาร์เรย์ใหม่ได้ เช่น

1Array.from({ length: 5 })

การทำงานดังกล่าวให้ผลลัพธ์เป็น [undefined, undefined, undefined, undefined, undefined] ที่มีสมาชิกทั้งหมด 5 ตัว แต่ละตัวเป็น undefined

Array.from สามารถส่งฟังก์ชันไปเป็นอาร์กิวเมนต์ตัวที่สองได้ ฟังก์ชันนี้เรียกว่า Map Function ฟังก์ชันดังกล่าวจะรับพารามิเตอร์ 2 ค่า ค่าแรกคือตัวแทนของอีลีเมนต์แต่ละตัวในอาร์เรย์ และค่าถัดมาคือ index ของสมาชิกนั้น ๆ ผลลัพธ์ที่คืนออกจาก Map Function จะเป็นสมาชิกใหม่ของอาร์เรย์ผลลัพธ์

หากเราต้องการให้สมาชิกใหม่ในอาร์เรย์ผลลัพธ์มีค่าเป็น index + 1 สามารถเขียนได้ดังนี้

1Array.from({ length: 5 }, (_, index) => index + 1)

ผลลัพธ์ที่ได้คือ [1, 2, 3, 4, 5] นั่นเอง

สำหรับ constructor ของ Array สามารถส่งตัวเลขเพื่อระบุจำนวนสมาชิกในอาร์เรย์ได้ เช่น Array(5) ได้ผลลัพธ์เป็นอาร์เรย์ที่มีความยาว 5 ช่อง

เหตุเพราะ Array(5) ได้ผลลัพธ์เป็นอาร์เรย์จึงเป็น Array-like Object เราจึงสามารถส่งค่านี้เข้าไปยัง Array.from ได้

1Array.from(Array(5), (_, index) => index + 1)

ผลลัพธ์ที่ได้เป็น [1, 2, 3, 4, 5] เช่นเดียวกัน

อีกเทคนิคหนึ่งคือการใช้ Array(n).keys() ที่จะคืนผลลัพธ์เป็น Array Iterator ของ index ของอาร์เรย์ขนาด n เช่น Array(5).keys() จะได้ผลลัพธ์เป็น Array Iterator ที่คืนผลลัพธ์จาก 0 ถึง 4 เราสามารถนำ Array Iterator มาใช้ควบคู่กับ Spread Operator เพื่อสร้างอาร์เรย์ใหม่ได้ เช่น [...Array(5).keys()] ได้ผลลัพธ์เป็น [0, 1, 2, 3, 4]

เมื่อ [...Array(5).keys()] เป็นอาร์เรย์จึงสามารถส่งค่านี้ลงไปยัง Array.from ได้

1Array.from([...Array(5).keys()])

ผลลัพธ์จากการทำงานคือ [0, 1, 2, 3, 4] ไม่ใช่ผลลัพธ์ที่เริ่มต้นจาก 1 เราจึงต้องใช้ slice(1) เพื่อช่วยแก้ปัญหานี้

1Array.from([...Array(5).keys()]).slice(1)

ผลลัพธ์ใหม่คือ [1, 2, 3, 4] ซึ่งก็ยังผิดไปจากผลลัพธ์ที่คาดหวังเพราะขาดเลข 5 ไปจากผลลัพธ์ เราจึงต้องทำการเพิ่มค่าไปอีกหนึ่ง

1Array.from([...Array(6).keys()]).slice(1)

สุดท้ายคือการใช้ map ปกติในการสร้างผลลัพธ์ ดังนี้

1;[...Array(5)].map((_, index) => index + 1)