เมธอดการวนซ้ำอาร์เรย์ใน JavaScript

อาร์เรย์ใน JavaScript มีเครื่องมือมากมายสำหรับการจัดการข้อมูล คุณควรทำความรู้จักกับเมธอดเหล่านี้เพื่อเขียนโค้ดที่สะอาดและอ่านง่าย

  • forEach() รันฟังก์ชันสำหรับทุกเอลิเมนต์ let nums = [10, 20, 30]; nums.forEach(num => console.log(num));

  • map() สร้างอาร์เรย์ใหม่โดยการแปลงค่าของทุกเอลิเมนต์ let nums = [1, 2, 3]; let result = nums.map(num => num * 2); // [2, 4, 6]

  • flatMap() ทำการ map แต่ละเอลิเมนต์แล้วจึงทำให้ผลลัพธ์แบนราบ (flatten) let arr = [1, 2, 3]; let result = arr.flatMap(num => [num, num * 2]); // [1, 2, 2, 4, 3, 6]

  • filter() สร้างอาร์เรย์ใหม่ที่มีเฉพาะเอลิเมนต์ที่ผ่านการทดสอบ let nums = [10, 20, 30, 40]; let result = nums.filter(num => num > 20); // [30, 40]

  • reduce() รวมเอลิเมนต์ทั้งหมดเข้าด้วยกันเป็นค่าเดียว let nums = [10, 20, 30]; let result = nums.reduce((total, num) => total + num, 0); // 60

  • reduceRight() ทำงานเหมือน reduce แต่เริ่มจากท้ายอาร์เรย์ let arr = ["A", "B", "C"]; let result = arr.reduceRight((acc, value) => acc + value); // CBA

  • every() คืนค่า true หากเอลิเมนต์ทุกตัวผ่านการทดสอบ let nums = [10, 20, 30]; let result = nums.every(num => num > 5); // true

  • some() คืนค่า true หากมีเอลิเมนต์อย่างน้อยหนึ่งตัวผ่านการทดสอบ let nums = [10, 20, 30]; let result = nums.some(num => num > 25); // true

  • from() สร้างอาร์เรย์จากออบเจกต์ที่วนซ้ำได้ (iterable object) let result = Array.from("Hello"); // ['H', 'e', 'l', 'l', 'o']

  • keys() คืนค่า iterator ที่มีคีย์ของอาร์เรย์ let fruits = ["Apple", "Mango", "Orange"]; let result = fruits.keys(); // 0, 1, 2

  • entries() คืนค่า iterator ที่มีคู่ของคีย์และค่า (key and value pairs) let fruits = ["Apple", "Mango", "Orange"]; let result = fruits.entries(); // [0, 'Apple'], [1, 'Mango']...

  • with() คืนค่าอาร์เรย์ใหม่ที่มีการเปลี่ยนแปลงเอลิเมนต์หนึ่งตัว let fruits = ["Apple", "Mango", "Orange"]; let result = fruits.with(1, "Grapes"); // ['Apple', 'Grapes', 'Orange']

  • Spread (...) กระจายเอลิเมนต์ของอาร์เรย์ออกไป let arr1 = [1, 2]; let arr2 = [3, 4]; let result = [...arr1, ...arr2]; // [1, 2, 3, 4]

  • Rest (...) รวบรวมเอลิเมนต์หลายตัวเข้าเป็นอาร์เรย์เดียว function showNumbers(...nums) { console.log(nums); } showNumbers(10, 20, 30); // [10, 20, 30]

ที่มา: https://dev.to/ezhil_abinayak_e38eec8fb/array-iteration-methods-in-javascript-20mc