การวนซ้ำอาร์เรย์ JavaScript

สารบัญ

วิธีการวนซ้ำแบบอาร์เรย์ทำงานกับทุกรายการอาร์เรย์

อาร์เรย์ JavaScript `forEach()`

forEach() วิธีการเรียกใช้ฟังก์ชัน (ฟังก์ชันเรียกกลับ) หนึ่งครั้งสำหรับแต่ละองค์ประกอบอาร์เรย์

ตัวอย่าง

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
   
txt += value + "<br>";
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>

<p>Call a function once for each array element:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value, index, array) {
  txt += value + "<br>"; 
}
</script>

</body>
</html>

โปรดทราบว่าฟังก์ชันรับ 3 อาร์กิวเมนต์:

มูลค่ารายการ
ดัชนีรายการ
อาร์เรย์นั้นเอง

ตัวอย่างข้างต้นใช้เฉพาะพารามิเตอร์ค่าเท่านั้น ตัวอย่างสามารถเขียนใหม่ได้ ถึง:

ตัวอย่าง

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
   
txt += value + "<br>"; 
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>

<p>Call a function once for each array element:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value) {
  txt += value + "<br>"; 
}
</script>

</body>
</html>

อาร์เรย์ 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;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The map() Method</h2>

<p>Create a new array by performing a function on each array element:</p>

<p id="demo"></p>

<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

function myFunction(value, index, array) {
  return value * 2;
}
</script>

</body>
</html>

โปรดทราบว่าฟังก์ชันรับ 3 อาร์กิวเมนต์:

มูลค่ารายการ
ดัชนีรายการ
อาร์เรย์นั้นเอง

เมื่อฟังก์ชันโทรกลับใช้เฉพาะพารามิเตอร์ค่าดัชนีและอาร์เรย์ สามารถละเว้นพารามิเตอร์ได้:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The map() Method</h2>

<p>Create a new array by performing a function on each array element:</p>

<p id="demo"></p>

<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

function myFunction(value) {
  return value * 2;
}
</script>

</body>
</html>

อาร์เรย์ JavaScript `flatMap()`

ES2019 เพิ่มเมธอด Array flatMap() ให้กับ JavaScript

วิธีการ flatMap() จะจับคู่องค์ประกอบทั้งหมดของอาร์เรย์ก่อน จากนั้นสร้างอาร์เรย์ใหม่โดยทำให้อาร์เรย์เรียบขึ้น

ตัวอย่าง

const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flatMap() Method</h2>

<p id="demo"></p>

<script>
const myArr = [1, 2, 3, 4, 5,6];
const newArr = myArr.flatMap((x) => x * 2);
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

รองรับเบราว์เซอร์

JavaScript Array flatMap() ได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่เดือนมกราคม 2020:


Chrome 69	Edge 79	Firefox 62	Safari 12	Opera 56
Sep 2018	Jan 2020	Sep 2018	Sep 2018	Sep 2018

อาร์เรย์ JavaScript `filter()`

filter() วิธีการสร้างอาร์เรย์ใหม่ที่มีองค์ประกอบอาร์เรย์ที่ผ่านการทดสอบ

ตัวอย่างนี้สร้างอาร์เรย์ใหม่จากองค์ประกอบที่มีค่ามากกว่า 18:

ตัวอย่าง

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The filter() Method</h2>

<p>Create a new array from all array elements that passes a test:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

document.getElementById("demo").innerHTML = over18;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

โปรดทราบว่าฟังก์ชันรับ 3 อาร์กิวเมนต์:

มูลค่ารายการ
ดัชนีรายการ
อาร์เรย์นั้นเอง

ในตัวอย่างข้างต้น ฟังก์ชันการเรียกกลับไม่ได้ใช้ดัชนีและอาร์เรย์ พารามิเตอร์ต่างๆ เพื่อให้สามารถละเว้นได้:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The filter() Method</h2>

<p>Create a new array with all array elements that passes a test.</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

document.getElementById("demo").innerHTML = over18;

function myFunction(value) {
  return value > 18;
}
</script>

</body>
</html>

อาร์เรย์ JavaScript `reduce()`

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;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>

<p>Find the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value, index, array) {
  return total + value;
}
</script>

</body>
</html>

โปรดทราบว่าฟังก์ชันรับ 4 อาร์กิวเมนต์:

ยอดรวม (ค่าเริ่มต้น/มูลค่าที่ส่งคืนก่อนหน้านี้)
มูลค่ารายการ
ดัชนีรายการ
อาร์เรย์นั้นเอง

ตัวอย่างข้างต้นไม่ได้ใช้พารามิเตอร์ดัชนีและอาร์เรย์ มันสามารถเป็นได้ เขียนใหม่เป็น:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>

<p>Find the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
  return total + value;
}
</script>

</body>
</html>

reduce() วิธีการสามารถยอมรับค่าเริ่มต้น:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>

<p>Find the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
  return total + value;
}
</script>

</body>
</html>

อาร์เรย์ JavaScript `reduceRight()`

reduceRight() วิธีการเรียกใช้ฟังก์ชันในแต่ละองค์ประกอบอาร์เรย์เพื่อสร้าง (ลดเป็น) ค่าเดียว

reduceRight() ทำงานจากขวาไปซ้ายในอาร์เรย์ ดูเพิ่มเติมที่ reduce()

วิธีการ reduceRight() ไม่ลดอาร์เรย์ดั้งเดิม

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduceRight() Method</h2>

<p>Find the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value, index, array) {
  return total + value;
}
</script>

</body>
</html>

โปรดทราบว่าฟังก์ชันรับ 4 อาร์กิวเมนต์:

ยอดรวม (ค่าเริ่มต้น/มูลค่าที่ส่งคืนก่อนหน้านี้)
มูลค่ารายการ
ดัชนีรายการ
อาร์เรย์นั้นเอง

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduceRight() Method</h2>

<p>Find the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
  return total + value;
}
</script>

</body>
</html>

อาร์เรย์ JavaScript `ทุก ๆ()`

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

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The every() Method</h2>

<p>The every() method checks if all array values pass a test.</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);

document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

โปรดทราบว่าฟังก์ชันรับ 3 อาร์กิวเมนต์:

มูลค่ารายการ
ดัชนีรายการ
อาร์เรย์นั้นเอง

เมื่อฟังก์ชันโทรกลับใช้พารามิเตอร์ตัวแรกเท่านั้น (ค่า) พารามิเตอร์ตัวอื่น สามารถละเว้นพารามิเตอร์ได้:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The every() Method</h2>

<p>The every() method checks if all array values pass a test.</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);

document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;

function myFunction(value) {
  return value > 18;
}
</script>

</body>
</html>

อาร์เรย์ JavaScript `some()`

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

ตัวอย่างนี้จะตรวจสอบว่าค่าอาร์เรย์บางค่ามากกว่า 18 หรือไม่:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The some() Method</h2>

<p>The some() method checks if some array values pass a test:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);

document.getElementById("demo").innerHTML = "Some over 18 is " + someOver18;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

โปรดทราบว่าฟังก์ชันรับ 3 อาร์กิวเมนต์:

มูลค่ารายการ
ดัชนีรายการ
อาร์เรย์นั้นเอง

อาร์เรย์ JavaScript `indexOf()`

indexOf() วิธีการค้นหาอาร์เรย์สำหรับค่าองค์ประกอบและส่งกลับตำแหน่ง

หมายเหตุ: รายการแรกมีตำแหน่ง 0 รายการที่สองมีตำแหน่ง 1 และอื่นๆ

ตัวอย่าง

ค้นหาอาร์เรย์สำหรับรายการ "Apple":

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The indexOf() Method</h2>

<p id="demo"></p>

<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;

document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>

</body>
</html>

ไวยากรณ์

array.indexOf(item, start)

item: ที่จำเป็น. รายการที่จะค้นหา
start: ไม่จำเป็น. จะเริ่มค้นหาได้ที่ไหน ค่าลบจะเริ่มต้นที่ตำแหน่งที่กำหนดนับจากจุดสิ้นสุด และค้นหาไปยังจุดสิ้นสุด

Array.indexOf() ส่งคืน -1 หากไม่พบรายการ

หากมีรายการนั้นมากกว่าหนึ่งครั้ง ก็จะส่งกลับตำแหน่งของรายการแรก การเกิดขึ้น

อาร์เรย์ JavaScript `lastIndexOf()`

Array.lastIndexOf() เหมือนกับ Array.indexOf() แต่ ส่งกลับตำแหน่งของการเกิดขึ้นครั้งสุดท้ายขององค์ประกอบที่ระบุ

ตัวอย่าง

ค้นหาอาร์เรย์สำหรับรายการ "Apple":

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The lastIndexOf() Method</h2>

<p id="demo"></p>

<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;

document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>

</body>
</html>

ไวยากรณ์

array.lastIndexOf(item, start)

item: ที่จำเป็น. รายการที่จะค้นหา
start: ไม่จำเป็น. จะเริ่มค้นหาได้ที่ไหน ค่าลบจะเริ่มต้นที่ตำแหน่งที่กำหนดนับจากจุดสิ้นสุด และค้นหาไปยังจุดเริ่มต้น

อาร์เรย์ JavaScript `find()`

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

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The find() Method</h2>

<p id="demo"></p>

<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

document.getElementById("demo").innerHTML = "First number over 18 is " + first;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

โปรดทราบว่าฟังก์ชันรับ 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;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The findIndex() Method</h2>

<p id="demo"></p>

<script>
const numbers = [4, 9, 16, 25, 29];

document.getElementById("demo").innerHTML = "First number over 18 has index " + numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

โปรดทราบว่าฟังก์ชันรับ 3 อาร์กิวเมนต์:

มูลค่ารายการ
ดัชนีรายการ
อาร์เรย์นั้นเอง

รองรับเบราว์เซอร์

findIndex() เป็นคุณลักษณะ ES6 (JavaScript 2015)

รองรับเบราว์เซอร์สมัยใหม่ทั้งหมด:


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

findIndex() ไม่ได้รับการสนับสนุนใน Internet Explorer

จาวาสคริปต์ `Array.from()`

Array.from() วิธีการส่งกลับวัตถุ Array จากวัตถุใด ๆ ที่มีความยาว ทรัพย์สินหรือวัตถุที่สามารถทำซ้ำได้

ตัวอย่าง

สร้างอาร์เรย์จากสตริง:

Array.from("ABCDEFG");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The from() Method</h2>

<p>Return an array object from any object with a length property or any iterable object.</p>

<p id="demo"></p>

<script>
const myArr = Array.from("ABCDEFG");
document.getElementById("demo").innerHTML = myArr;
</script>

<p>The Array.from() method is not supported in Internet Explorer.</p>

</body>
</html>

รองรับเบราว์เซอร์

from() เป็นคุณลักษณะ ES6 (JavaScript 2015)

รองรับเบราว์เซอร์สมัยใหม่ทั้งหมด:


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

from() ไม่ได้รับการสนับสนุนใน Internet Explorer

อาร์เรย์ JavaScript `Keys()`

Array.keys() วิธีการส่งกลับวัตถุ Array Iterator ด้วยคีย์ของอาร์เรย์

ตัวอย่าง

สร้างวัตถุ Array Iterator ซึ่งมีคีย์ของอาร์เรย์:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

for (let x of keys) {
  text += x + "<br>";
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The keys() Method</h2>

<p>Return an Array Iterator object with the keys of the array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

<p>Array.keys() is not supported in Internet Explorer.</p>

</body>
</html>

รองรับเบราว์เซอร์

keys() เป็นคุณลักษณะ ES6 (JavaScript 2015)

รองรับเบราว์เซอร์สมัยใหม่ทั้งหมด:


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

keys() ไม่ได้รับการสนับสนุนใน Internet Explorer

อาร์เรย์ JavaScript `รายการ()`

ตัวอย่าง

สร้าง Array Iterator แล้ววนซ้ำคู่คีย์/ค่า:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
  document.getElementById("demo").innerHTML += x;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arrays</h1>
<h2>The entries() method</h2>

<p>entries() returns an Array Iterator object with key/value pairs:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();

for (let x of f) {
  document.getElementById("demo").innerHTML += x + "<br>";
}
</script>

<p>The entries() method is not supported in Internet Explorer 11 (or earlier).</p>

</body>
</html>

entries() วิธีการส่งกลับวัตถุ Array Iterator ด้วยคู่คีย์/ค่า:

[0, "กล้วย"]
[1, "ส้ม"]
[2, "แอปเปิ้ล"]
[3, "มะม่วง"]

วิธีการ entries() ไม่เปลี่ยนอาร์เรย์เดิม

รองรับเบราว์เซอร์

entries() เป็นคุณลักษณะ ES6 (JavaScript 2015)

รองรับเบราว์เซอร์สมัยใหม่ทั้งหมด:


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

entries() ไม่ได้รับการสนับสนุนใน Internet Explorer

อาร์เรย์ JavaScript `includes()`

ECMAScript 2016 เปิดตัว Array.includes() ให้กับอาร์เรย์ สิ่งนี้ช่วยให้เราสามารถตรวจสอบได้ว่ามีองค์ประกอบอยู่ในอาร์เรย์หรือไม่ (รวมถึง NaN ซึ่งแตกต่างจาก indexOf)

ตัวอย่าง

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.includes("Mango"); // is true

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The includes() Method</h2>

<p>Check if the fruit array contains "Mango":</p>

<p id="demo"></p>

<p><strong>Note:</strong> The includes method is not supported in Edge 13 (and earlier versions).</p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.includes("Mango");
</script>

</body>
</html>

ไวยากรณ์

array.includes(search-item)

Array.includes() อนุญาตให้ตรวจสอบค่า NaN ต่างจาก Array.indexOf()

รองรับเบราว์เซอร์

includes() เป็นคุณลักษณะ ECMAScript 2016

รองรับเบราว์เซอร์สมัยใหม่ทั้งหมด:


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

includes() ไม่ได้รับการสนับสนุนใน Internet Explorer

การแพร่กระจายอาร์เรย์ JavaScript (...)

ตัวดำเนินการ ... จะขยายการทำซ้ำได้ (เช่น อาเรย์) ออกเป็นองค์ประกอบเพิ่มเติม:

ตัวอย่าง

const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>

<p>The "spread" operator spreads elements of iterable objects:</p>

<p id="demo"></p>

<script>
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];
document.getElementById("demo").innerHTML = year; 
</script>

</body>
</html>

รองรับเบราว์เซอร์

... เป็นคุณลักษณะ ES6 (JavaScript 2015)

รองรับเบราว์เซอร์สมัยใหม่ทั้งหมด:


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

... ไม่ได้รับการสนับสนุนใน Internet Explorer

การอ้างอิงอาร์เรย์ที่สมบูรณ์

หากต้องการข้อมูลอ้างอิง Array ฉบับสมบูรณ์ โปรดไปที่:

การอ้างอิงอาร์เรย์ JavaScript ที่สมบูรณ์

ข้อมูลอ้างอิงประกอบด้วยคำอธิบายและตัวอย่างของ Array ทั้งหมด คุณสมบัติและวิธีการ

การวนซ้ำอาร์เรย์ JavaScript

สารบัญ

อาร์เรย์ JavaScript forEach()

ตัวอย่าง

ตัวอย่าง

อาร์เรย์ JavaScript แผนที่()

ตัวอย่าง

ตัวอย่าง

อาร์เรย์ JavaScript flatMap()

ตัวอย่าง

รองรับเบราว์เซอร์

อาร์เรย์ JavaScript filter()

ตัวอย่าง

ตัวอย่าง

อาร์เรย์ JavaScript reduce()

ตัวอย่าง

ตัวอย่าง

ตัวอย่าง

อาร์เรย์ JavaScript reduceRight()

ตัวอย่าง

ตัวอย่าง

อาร์เรย์ JavaScript ทุก ๆ()

ตัวอย่าง

ตัวอย่าง

อาร์เรย์ JavaScript some()

ตัวอย่าง

อาร์เรย์ JavaScript indexOf()

ตัวอย่าง

ไวยากรณ์

อาร์เรย์ JavaScript lastIndexOf()

ตัวอย่าง

ไวยากรณ์

อาร์เรย์ JavaScript find()

ตัวอย่าง

รองรับเบราว์เซอร์

อาร์เรย์ JavaScript findIndex()

ตัวอย่าง

รองรับเบราว์เซอร์

จาวาสคริปต์ Array.from()

ตัวอย่าง

รองรับเบราว์เซอร์

อาร์เรย์ JavaScript Keys()

ตัวอย่าง

รองรับเบราว์เซอร์

อาร์เรย์ JavaScript รายการ()

ตัวอย่าง

รองรับเบราว์เซอร์

อาร์เรย์ JavaScript includes()

ตัวอย่าง

ไวยากรณ์

รองรับเบราว์เซอร์

การแพร่กระจายอาร์เรย์ JavaScript (...)

ตัวอย่าง

รองรับเบราว์เซอร์

การอ้างอิงอาร์เรย์ที่สมบูรณ์

อาร์เรย์ JavaScript `forEach()`

อาร์เรย์ JavaScript `แผนที่()`

อาร์เรย์ JavaScript `flatMap()`

อาร์เรย์ JavaScript `filter()`

อาร์เรย์ JavaScript `reduce()`

อาร์เรย์ JavaScript `reduceRight()`

อาร์เรย์ JavaScript `ทุก ๆ()`

อาร์เรย์ JavaScript `some()`

อาร์เรย์ JavaScript `indexOf()`

อาร์เรย์ JavaScript `lastIndexOf()`

อาร์เรย์ JavaScript `find()`

อาร์เรย์ JavaScript `findIndex()`

จาวาสคริปต์ `Array.from()`

อาร์เรย์ JavaScript `Keys()`

อาร์เรย์ JavaScript `รายการ()`

อาร์เรย์ JavaScript `includes()`