JavaScript Array Iteration
วิธีการวนซ้ำของอาร์เรย์ทำงานบนทุกรายการอาร์เรย์
JavaScript Array forEach()
เมธอดเรียกใช้ ฟังก์ชันforEach()(ฟังก์ชันเรียกกลับ) หนึ่งครั้งสำหรับแต่ละองค์ประกอบอาร์เรย์
ตัวอย่าง
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
โปรดทราบว่าฟังก์ชันรับ 3 อาร์กิวเมนต์:
- มูลค่ารายการ
- ดัชนีรายการ
- อาร์เรย์ตัวเอง
ตัวอย่างข้างต้นใช้เฉพาะค่าพารามิเตอร์ ตัวอย่างสามารถเขียนใหม่เป็น:
ตัวอย่าง
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
แผนที่อาร์เรย์ JavaScript ()
วิธี การmap()สร้างอาร์เรย์ใหม่โดยดำเนินการกับแต่ละองค์ประกอบอาร์เรย์
เมธอด นี้map()จะไม่เรียกใช้ฟังก์ชันสำหรับองค์ประกอบอาร์เรย์ที่ไม่มีค่า
วิธี การmap()นี้จะไม่เปลี่ยนอาร์เรย์เดิม
ตัวอย่างนี้คูณค่าอาร์เรย์แต่ละค่าด้วย 2:
ตัวอย่าง
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
โปรดทราบว่าฟังก์ชันรับ 3 อาร์กิวเมนต์:
- มูลค่ารายการ
- ดัชนีรายการ
- อาร์เรย์ตัวเอง
เมื่อฟังก์ชันเรียกกลับใช้เฉพาะพารามิเตอร์ค่า พารามิเตอร์ดัชนีและอาร์เรย์สามารถละเว้นได้:
ตัวอย่าง
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
ตัวกรองอาร์เรย์ JavaScript ()
วิธี การfilter()สร้างอาร์เรย์ใหม่ที่มีองค์ประกอบอาร์เรย์ที่ผ่านการทดสอบ
ตัวอย่างนี้สร้างอาร์เรย์ใหม่จากองค์ประกอบที่มีค่ามากกว่า 18:
ตัวอย่าง
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
โปรดทราบว่าฟังก์ชันรับ 3 อาร์กิวเมนต์:
- มูลค่ารายการ
- ดัชนีรายการ
- อาร์เรย์ตัวเอง
ในตัวอย่างข้างต้น ฟังก์ชันเรียกกลับไม่ได้ใช้พารามิเตอร์ดัชนีและอาร์เรย์ จึงสามารถละเว้นได้:
ตัวอย่าง
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
JavaScript Array ลด ()
เมธอดรัน ฟังก์ชันreduce()บนแต่ละอิลิเมนต์อาร์เรย์เพื่อสร้าง (ลดให้เหลือ) ค่าเดียว
วิธี การreduce()ทำงานจากซ้ายไปขวาในอาร์เรย์ ดูเพิ่มเติมreduceRight()ที่
วิธี การreduce()ไม่ลดอาร์เรย์ดั้งเดิม
ตัวอย่างนี้ค้นหาผลรวมของตัวเลขทั้งหมดในอาร์เรย์:
ตัวอย่าง
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
โปรดทราบว่าฟังก์ชันรับ 4 อาร์กิวเมนต์:
- ยอดรวม (ค่าเริ่มต้น / มูลค่าที่ส่งคืนก่อนหน้านี้)
- มูลค่ารายการ
- ดัชนีรายการ
- อาร์เรย์ตัวเอง
ตัวอย่างข้างต้นไม่ได้ใช้พารามิเตอร์ดัชนีและอาร์เรย์ สามารถเขียนใหม่เป็น:
ตัวอย่าง
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
วิธี การreduce()นี้สามารถรับค่าเริ่มต้นได้:
ตัวอย่าง
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
}
JavaScript Array ลดด้านขวา ()
เมธอดรัน ฟังก์ชันreduceRight()บนแต่ละอิลิเมนต์อาร์เรย์เพื่อสร้าง (ลดให้เหลือ) ค่าเดียว
ทำงาน จากreduceRight()ขวาไปซ้ายในอาร์เรย์ ดูเพิ่มเติมreduce()ที่
วิธี การreduceRight()ไม่ลดอาร์เรย์ดั้งเดิม
ตัวอย่างนี้ค้นหาผลรวมของตัวเลขทั้งหมดในอาร์เรย์:
ตัวอย่าง
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
โปรดทราบว่าฟังก์ชันรับ 4 อาร์กิวเมนต์:
- ยอดรวม (ค่าเริ่มต้น / มูลค่าที่ส่งคืนก่อนหน้านี้)
- มูลค่ารายการ
- ดัชนีรายการ
- อาร์เรย์ตัวเอง
ตัวอย่างข้างต้นไม่ได้ใช้พารามิเตอร์ดัชนีและอาร์เรย์ สามารถเขียนใหม่เป็น:
ตัวอย่าง
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
JavaScript Array ทุก ()
วิธี การevery()ตรวจสอบว่าค่าอาร์เรย์ทั้งหมดผ่านการทดสอบหรือไม่
ตัวอย่างนี้ตรวจสอบว่าค่าอาร์เรย์ทั้งหมดมากกว่า 18:
ตัวอย่าง
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
โปรดทราบว่าฟังก์ชันรับ 3 อาร์กิวเมนต์:
- มูลค่ารายการ
- ดัชนีรายการ
- อาร์เรย์ตัวเอง
เมื่อฟังก์ชันเรียกกลับใช้พารามิเตอร์แรกเท่านั้น (ค่า) พารามิเตอร์อื่นสามารถละเว้นได้:
ตัวอย่าง
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
JavaScript Array บาง ()
วิธี การsome()ตรวจสอบว่าค่าอาร์เรย์บางค่าผ่านการทดสอบหรือไม่
ตัวอย่างนี้ตรวจสอบว่าค่าอาร์เรย์บางค่ามากกว่า 18:
ตัวอย่าง
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
โปรดทราบว่าฟังก์ชันรับ 3 อาร์กิวเมนต์:
- มูลค่ารายการ
- ดัชนีรายการ
- อาร์เรย์ตัวเอง
JavaScript Array indexOf()
วิธี การindexOf()ค้นหาค่าองค์ประกอบในอาร์เรย์และส่งกลับตำแหน่ง
หมายเหตุ:รายการแรกมีตำแหน่ง 0 รายการที่สองมีตำแหน่ง 1 และอื่นๆ
ตัวอย่าง
ค้นหาอาร์เรย์สำหรับรายการ "Apple":
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
ไวยากรณ์
array.indexOf(item, start)
| item | Required. The item to search for. |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the end. |
Array.indexOf()ส่งคืน -1 หากไม่พบรายการ
หากรายการมีอยู่มากกว่าหนึ่งครั้ง รายการนั้นจะส่งกลับตำแหน่งที่เกิดครั้งแรก
อาร์เรย์ JavaScript LastIndexOf()
Array.lastIndexOf()เหมือนกับArray.indexOf()แต่ส่งคืนตำแหน่งของการเกิดขึ้นครั้งสุดท้ายขององค์ประกอบที่ระบุ
ตัวอย่าง
ค้นหาอาร์เรย์สำหรับรายการ "Apple":
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
ไวยากรณ์
array.lastIndexOf(item, start)
| item | Required. The item to search for |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the beginning |
ค้นหาอาร์เรย์ JavaScript ()
วิธี การfind()ส่งคืนค่าขององค์ประกอบอาร์เรย์แรกที่ผ่านฟังก์ชันการทดสอบ
ตัวอย่างนี้จะค้นหา (คืนค่าของ) องค์ประกอบแรกที่มากกว่า 18:
ตัวอย่าง
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
โปรดทราบว่าฟังก์ชันรับ 3 อาร์กิวเมนต์:
- มูลค่ารายการ
- ดัชนีรายการ
- อาร์เรย์ตัวเอง
รองรับเบราว์เซอร์
find() เป็นคุณลักษณะ ES6 (JavaScript 2015)
ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยทั้งหมด:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
find() ไม่รองรับใน Internet Explorer
อาร์เรย์ JavaScript findIndex()
เมธอดจะคืน ค่าfindIndex()ดัชนีขององค์ประกอบอาร์เรย์แรกที่ผ่านการทดสอบฟังก์ชัน
ตัวอย่างนี้ค้นหาดัชนีขององค์ประกอบแรกที่มากกว่า 18:
ตัวอย่าง
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
โปรดทราบว่าฟังก์ชันรับ 3 อาร์กิวเมนต์:
- มูลค่ารายการ
- ดัชนีรายการ
- อาร์เรย์ตัวเอง
รองรับเบราว์เซอร์
findIndex() เป็นคุณลักษณะ ES6 (JavaScript 2015)
ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยทั้งหมด:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
findIndex() ไม่รองรับใน Internet Explorer
JavaScript Array.from()
เมธอดส่ง คืนArray.from()อ็อบเจ็กต์ Array จากอ็อบเจ็กต์ใดๆ ที่มีคุณสมบัติ length หรืออ็อบเจกต์ iterable ใดๆ
ตัวอย่าง
สร้างอาร์เรย์จากสตริง:
Array.from("ABCDEFG");
รองรับเบราว์เซอร์
from() เป็นคุณลักษณะ ES6 (JavaScript 2015)
ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยทั้งหมด:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
from() ไม่รองรับใน Internet Explorer
คีย์อาร์เรย์ JavaScript ()
เมธอดส่ง คืนArray.keys()อ็อบเจ็กต์ Array Iterator ด้วยคีย์ของอาร์เรย์
ตัวอย่าง
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
Browser Support
keys() is an ES6 feature (JavaScript 2015).
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
keys() is not supported in Internet Explorer.
JavaScript Array includes()
ECMAScript 2016 introduced Array.includes() to arrays.
This allows us to check if an element is present in an array (including NaN, unlike indexOf).
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is true
Syntax
array.includes(search-item)
Array.includes() allows to check for NaN values. Unlike Array.indexOf().
Array.includes() is not supported in Internet Explorer and Edge 12/13.
The first browser versions with full support are:
Browser Support
includes() is an ECMAScript 2016 feature.
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
includes() is not supported in Internet Explorer.
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.