JavaScript Array Iteration

วิธีนี้ทำงานบนแต่ละสมาชิกของแนวทาง:

Array.forEach()

forEach() วิธีนี้เรียกฟังก์ชันเพียงครั้งเดียวสำหรับแต่ละสมาชิกของแนวทาง (ฟังก์ชันคอลบแบค):

ตัวอย่าง

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

ลองด้วยตัวเอง

หมายเหตุ：ฟังก์ชันนี้รับ 3 ตัวแปร:

  • ค่าโครงสร้าง
  • ดัชนีโครงสร้าง
  • ตัวแปรแบบมาตรฐาน

ตัวอย่างดังกล่าวใช้ตัวแปร value แค่เดียว ตัวอย่างนี้สามารถเขียนใหม่ได้:

ตัวอย่าง

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

ลองด้วยตัวเอง

ทุกบราวเซอร์ทุกตัวรุ่นทุกภาษาทุกมีความสามารถ Array.forEach()แต่ไม่รวม Internet Explorer 8 หรือตัวรุ่นเก่ากว่านี้:

Yes 9.0 Yes Yes Yes

Array.map()

map() วิธีนี้ทำงานด้วยฟังก์ชันบนแต่ละสมาชิกของแนวทางเพื่อสร้างแนวทางใหม่:

map() วิธีนี้จะไม่ทำงานบนสมาชิกแนวทางที่ไม่มีค่า:

map() วิธีนี้จะไม่เปลี่ยนแนวทางเดิม:

ตัวอย่างนี้จะเปลี่ยนค่าทุกตัวเลขในแนวทางเป็นค่าเท่ากับสองเท่า:

ตัวอย่าง

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
  return value * 2;
}

ลองด้วยตัวเอง

โปรดระวังว่าฟังก์ชันนี้มี 3 ตัวแปร:

  • ค่าโครงสร้าง
  • ดัชนีโครงสร้าง
  • ตัวแปรแบบมาตรฐาน

เมื่อฟังก์ชันคอลบแบคใช้ตัวแปร value แค่เดียว สามารถละเลยตัวแปร index และ array:

ตัวอย่าง

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

ลองด้วยตัวเอง

ทุกบราวเซอร์ทุกตัวรุ่นทุกภาษาทุกมีความสามารถ Array.map()แต่ไม่รวม Internet Explorer 8 หรือตัวรุ่นเก่ากว่านี้:

Yes 9.0 Yes Yes Yes

Array.filter()

filter() วิธีนี้สร้างแนวทางใหม่ที่มีสมาชิกที่ผ่านการทดสอบ:

ตัวอย่างนี้สร้างแนวทางใหม่ด้วยสมาชิกที่มีค่ามากกว่า 18:

ตัวอย่าง

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

ลองด้วยตัวเอง

โปรดจำได้ว่าฟังก์ชันนี้รับ 3 ตัวอักษรเพิ่มเติม

  • ค่าโครงสร้าง
  • ดัชนีโครงสร้าง
  • ตัวแปรแบบมาตรฐาน

ในตัวอย่างดังกล่าว ฟังก์ชันคอลบแบคไม่ใช้ตัวแปร index และ array ดังนั้นสามารถละเลยไม่ใช้:

ตัวอย่าง

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

ลองด้วยตัวเอง

ทุกบราวเซอร์ทุกตัวรุ่นทุกภาษาทุกมีความสามารถ Array.filter()แต่ไม่รวม Internet Explorer 8 หรือตัวรุ่นเก่ากว่านี้:

Yes 9.0 Yes Yes Yes

Array.reduce()

reduce() วิธีนี้ทำงานบนแต่ละสมาชิกของแนวทางด้วยฟังก์ชันเพื่อสร้างค่าเดียว (ลดมัน):

reduce() วิธีนี้ทำงานในแนวทางจากฝั่งซ้ายไปฝั่งขวา โปรดดู reduceRight() ด้วย:

reduce() วิธีนี้จะไม่ลดลงของแนวทางเดิม:

ตัวอย่างนี้นับรวมค่าทั้งหมดของตัวเลขในแนวทาง:

ตัวอย่าง

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

ลองด้วยตัวเอง

โปรดระวังว่าฟังก์ชันนี้รับ 4 ตัวแปร:

  • จำนวนทั้งหมด (ค่าเริ่มต้น/ค่าที่กลับค่าก่อนหน้านี้)}
  • ค่าโครงสร้าง
  • ดัชนีโครงสร้าง
  • ตัวแปรแบบมาตรฐาน

ตัวอย่างที่แล้วไม่ได้ใช้ตัวเรียงหรือตัวเรียงในภาษาอื่น สามารถเขียนมันเป็นตัวเรียงต่อไป

ตัวอย่าง

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

ลองด้วยตัวเอง

reduce() วิธีนี้สามารถรับค่าเริ่มต้นหนึ่ง:

ตัวอย่าง

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);
function myFunction(total, value) {
  return total + value;
}

ลองด้วยตัวเอง

ทุกบราวเซอร์ทุกตัวรุ่นทุกภาษาทุกมีความสามารถ Array.reduce()แต่ไม่รวม Internet Explorer 8 หรือตัวรุ่นเก่ากว่านี้:

Yes 9.0 Yes Yes Yes

Array.reduceRight()

reduceRight() วิธีนี้ทำงานบนแต่ละสมาชิกของแนวทางด้วยฟังก์ชันเพื่อสร้างค่าเดียว (ลดมัน):

reduceRight() วิธีนี้ทำงานในแนวทางจากฝั่งขวาไปฝั่งซ้าย โปรดดู reduce() ด้วย:

reduceRight() วิธีนี้จะไม่ลดลงของแนวทางเดิม:

ตัวอย่างนี้นับรวมค่าทั้งหมดของตัวเลขในแนวทาง:

ตัวอย่าง

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

ลองด้วยตัวเอง

โปรดระวังว่าฟังก์ชันนี้รับ 4 ตัวแปร:

  • จำนวนทั้งหมด (ค่าเริ่มต้น/ค่าที่กลับค่าก่อนหน้านี้)}
  • ค่าโครงสร้าง
  • ดัชนีโครงสร้าง
  • ตัวแปรแบบมาตรฐาน

ตัวอย่างที่แล้วไม่ได้ใช้ตัวเรียงหรือตัวเรียงในภาษาอื่น สามารถเขียนมันเป็นตัวเรียงต่อไป

ตัวอย่าง

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

ลองด้วยตัวเอง

ทุกบราวเซอร์ทุกตัวรุ่นทุกภาษาทุกมีความสามารถ Array.reduceRight()แต่ไม่รวม Internet Explorer 8 หรือตัวรุ่นเก่ากว่านี้:

Yes 9.0 Yes Yes Yes

Array.every()

every() ศาสตร์ที่ตรวจสอบค่าในตัวเรียงว่าทุกค่าผ่านการทดสอบหรือไม่

ตัวอย่างนี้ตรวจสอบค่าในตัวเรียงว่าทุกค่าใหญ่กว่า 18 หรือไม่

ตัวอย่าง

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

ลองด้วยตัวเอง

โปรดจำได้ว่าฟังก์ชันนี้รับ 3 ตัวอักษรเพิ่มเติม

  • ค่าโครงสร้าง
  • ดัชนีโครงสร้าง
  • ตัวแปรแบบมาตรฐาน

ถ้าคำรับทางบันทึกหรือฟังก์ชันที่ใช้ค่าหรือตัวเรียงแรกเท่านั้น สามารถละเลยค่าอื่นๆ

ตัวอย่าง

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

ลองด้วยตัวเอง

ทุกบราวเซอร์ทุกตัวรุ่นทุกภาษาทุกมีความสามารถ Array.every()แต่ไม่รวม Internet Explorer 8 หรือตัวรุ่นเก่ากว่านี้:

Yes 9.0 Yes Yes Yes

Array.some()

some() ศาสตร์ที่ตรวจสอบค่าในตัวเรียงว่าผ่านการทดสอบหรือไม่

ตัวอย่างนี้ตรวจสอบค่าในตัวเรียงว่ามีค่าที่ใหญ่กว่า 18 หรือไม่

ตัวอย่าง

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

ลองด้วยตัวเอง

โปรดจำได้ว่าฟังก์ชันนี้รับ 3 ตัวอักษรเพิ่มเติม

  • ค่าโครงสร้าง
  • ดัชนีโครงสร้าง
  • ตัวแปรแบบมาตรฐาน

ทุกบราวเซอร์ทุกตัวรุ่นทุกภาษาทุกมีความสามารถ Array.some()แต่ไม่รวม Internet Explorer 8 หรือตัวรุ่นเก่ากว่านี้:

Yes 9.0 Yes Yes Yes

Array.indexOf()

indexOf() ศาสตร์ที่ค้นหาค่าหรือตัวเรียงในตัวเรียงและกลับค่าตำแหน่งของมัน

หมายเหตุ：ตำแหน่งของสิ่งที่ต้องการแรกคือ 0 ตำแหน่งของสิ่งที่ต้องการที่สองคือ 1 และอย่างนั้นต่อไป

ตัวอย่าง

ค้นหาสิ่งที่ต้องการในตัวเรียง array "Apple"：

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

ลองด้วยตัวเอง

ทุกบราวเซอร์ทุกตัวรุ่นทุกภาษาทุกมีความสามารถ Array.indexOf()แต่ไม่รวม Internet Explorer 8 หรือตัวรุ่นเก่ากว่านี้:

Yes 9.0 Yes Yes Yes

ภาษาบัญญัติ

array.indexOf(item, เริ่มต้น)
item สำคัญ สำหรับการค้นหาสิ่งที่ต้องการ
เริ่มต้น ตัวเลือก จากที่ไหนเริ่มค้นหา ค่าลบจะทำการค้นหาจากทางด้านท้ายของตัวเรียงจนถึงทางด้านหน้า

ถ้าไม่พบสิ่งที่ต้องการArray.indexOf() กลับค่า -1

ถ้าสิ่งที่ต้องการมีการปรากฏหลายครั้ง ก็จะทำการกลับค่าตำแหน่งที่ปรากฏครั้งแรก

Array.lastIndexOf()

Array.lastIndexOf() เช่นเดียวกัน Array.indexOf() คล้ายกัน แต่ค้นหาจากทางด้านท้ายของตัวเรียง

ตัวอย่าง

ค้นหาสิ่งที่ต้องการในตัวเรียง array "Apple"：

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

ลองด้วยตัวเอง

ทุกบราวเซอร์ทุกตัวรุ่นทุกภาษาทุกมีความสามารถ Array.lastIndexOf()แต่ไม่รวม Internet Explorer 8 หรือตัวรุ่นเก่ากว่านี้:

Yes 9.0 Yes Yes Yes

ภาษาบัญญัติ

array.lastIndexOf(item, เริ่มต้น)
item สำคัญ สำหรับการค้นหาสิ่งที่ต้องการ
เริ่มต้น ที่มีความเลือกได้ จากที่ไหนเริ่มค้นหา ค่าลบจะเริ่มจากท้ายและค้นหาไปจนถึงต้น

Array.find()

find() วิธีนี้กลับค่าขององค์ประกอบแรกที่ผ่านการทดสอบฟังก์ชัน

ตัวอย่างนี้หาค่าขององค์ประกอบแรกที่มีค่ามากกว่า 18 (กลับค่า):

ตัวอย่าง

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

ลองด้วยตัวเอง

โปรดจำได้ว่าฟังก์ชันนี้รับ 3 ตัวอักษรเพิ่มเติม

  • ค่าโครงสร้าง
  • ดัชนีโครงสร้าง
  • ตัวแปรแบบมาตรฐาน

เบราเรอร์ที่เก่าแก่ไม่สนับสนุน Array.find()ด้านล่างนี้คือรุ่นเบราเรอร์แรกที่สนับสนุนวิธีนี้ทั้งหมด:

45 12 25 8 32

Array.findIndex()

findIndex() วิธีนี้กลับค่าดัชนีขององค์ประกอบแรกที่ผ่านการทดสอบฟังก์ชัน

ตัวอย่างนี้หาดัชนีขององค์ประกอบแรกที่มีค่ามากกว่า 18:

ตัวอย่าง

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

ลองด้วยตัวเอง

โปรดจำได้ว่าฟังก์ชันนี้รับ 3 ตัวอักษรเพิ่มเติม

  • ค่าโครงสร้าง
  • ดัชนีโครงสร้าง
  • ตัวแปรแบบมาตรฐาน

เบราเรอร์ที่เก่าแก่ไม่สนับสนุน Array.findIndex()ด้านล่างนี้คือรุ่นเบราเรอร์แรกที่สนับสนุนวิธีนี้ทั้งหมด:

45 12 25 8 32