JavaScript Arrays
อาร์เรย์เป็นตัวแปรพิเศษ ซึ่งสามารถเก็บค่าได้มากกว่าหนึ่งค่า:
const cars = ["Saab", "Volvo", "BMW"];
ทำไมต้องใช้อาร์เรย์?
หากคุณมีรายการสิ่งของ (เช่น รายชื่อรถ) การจัดเก็บรถยนต์ในตัวแปรเดียวอาจมีลักษณะดังนี้:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
อย่างไรก็ตาม ถ้าคุณต้องการวนรอบรถและหารถเฉพาะล่ะ แล้วถ้าคุณมีรถไม่ถึง 3 คัน แต่มี 300 คันล่ะ?
วิธีแก้ปัญหาคืออาร์เรย์!
อาร์เรย์สามารถเก็บค่าได้หลายค่าภายใต้ชื่อเดียว และคุณสามารถเข้าถึงค่าต่างๆ ได้โดยอ้างอิงจากหมายเลขดัชนี
การสร้างอาร์เรย์
การใช้ตัวอักษรอาร์เรย์เป็นวิธีที่ง่ายที่สุดในการสร้าง JavaScript Array
ไวยากรณ์:
const array_name = [item1, item2, ...];
เป็นเรื่องปกติที่จะประกาศอาร์เรย์ด้วยคำสำคัญconst
เรียนรู้เพิ่มเติมเกี่ยวกับconstกับอาร์เรย์ในบท: JS Array Const
ตัวอย่าง
const cars = ["Saab", "Volvo", "BMW"];
การเว้นวรรคและการขึ้นบรรทัดใหม่ไม่สำคัญ การประกาศสามารถขยายได้หลายบรรทัด:
ตัวอย่าง
const cars = [
"Saab",
"Volvo",
"BMW"
];
คุณยังสามารถสร้างอาร์เรย์ แล้วจัดเตรียมองค์ประกอบ:
ตัวอย่าง
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
การใช้คำสำคัญ JavaScript ใหม่
ตัวอย่างต่อไปนี้ยังสร้าง Array และกำหนดค่าให้กับมัน:
ตัวอย่าง
const cars = new Array("Saab", "Volvo", "BMW");
ตัวอย่างสองตัวอย่างข้างต้นทำเช่นเดียวกันทุกประการ
ไม่จำเป็นต้องnew Array()
ใช้
เพื่อความเรียบง่าย ความอ่านง่าย และความเร็วในการดำเนินการ ให้ใช้วิธีการตามตัวอักษรของอาร์เรย์
การเข้าถึงองค์ประกอบอาร์เรย์
คุณเข้าถึงองค์ประกอบอาร์เรย์โดยอ้างถึงหมายเลขดัชนี :
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
หมายเหตุ:ดัชนีอาร์เรย์เริ่มต้นด้วย 0
[0] เป็นองค์ประกอบแรก [1] เป็นองค์ประกอบที่สอง
การเปลี่ยนองค์ประกอบอาร์เรย์
คำสั่งนี้เปลี่ยนค่าขององค์ประกอบแรกในcars
:
cars[0] = "Opel";
ตัวอย่าง
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
เข้าถึงอาร์เรย์แบบเต็ม
ด้วย JavaScript อาร์เรย์แบบเต็มสามารถเข้าถึงได้โดยอ้างถึงชื่ออาร์เรย์:
ตัวอย่าง
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
อาร์เรย์เป็นวัตถุ
อาร์เรย์เป็นอ็อบเจ็กต์ชนิดพิเศษ โอtypeof
เปอเรเตอร์ใน JavaScript ส่งคืน "วัตถุ" สำหรับอาร์เรย์
แต่อาร์เรย์ JavaScript นั้นอธิบายได้ดีที่สุดว่าเป็นอาร์เรย์
อาร์เรย์ใช้ตัวเลขเพื่อเข้าถึง "องค์ประกอบ" ในตัวอย่างนี้person[0]
ส่งคืน John:
อาร์เรย์:
const person = ["John", "Doe", 46];
ออบเจ็กต์ใช้ชื่อเพื่อเข้าถึง "สมาชิก" ในตัวอย่างนี้
person.firstName
ส่งคืน John:
วัตถุ:
const person = {firstName:"John", lastName:"Doe", age:46};
องค์ประกอบอาร์เรย์สามารถเป็นวัตถุได้
ตัวแปร JavaScript สามารถเป็นวัตถุได้ อาร์เรย์เป็นอ็อบเจ็กต์ชนิดพิเศษ
ด้วยเหตุนี้ คุณจึงสามารถมีตัวแปรประเภทต่างๆ ใน Array เดียวกันได้
คุณสามารถมีวัตถุในอาร์เรย์ได้ คุณสามารถมีฟังก์ชันในอาร์เรย์ได้ คุณสามารถมีอาร์เรย์ในอาร์เรย์ได้:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
คุณสมบัติและเมธอดของอาร์เรย์
จุดแข็งที่แท้จริงของอาร์เรย์ JavaScript คือคุณสมบัติและเมธอดของอาร์เรย์ในตัว:
cars.length // Returns the number of elements
cars.sort() // Sorts the array
วิธีการอาร์เรย์จะครอบคลุมในบทต่อไป
ความยาวทรัพย์สิน
คุณสมบัติlength
ของอาร์เรย์จะคืนค่าความยาวของอาร์เรย์ (จำนวนองค์ประกอบอาร์เรย์)
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
คุณสมบัติlength
นี้มีค่ามากกว่าดัชนีอาร์เรย์สูงสุดหนึ่งรายการเสมอ
การเข้าถึงองค์ประกอบอาร์เรย์แรก
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
การเข้าถึงองค์ประกอบอาร์เรย์สุดท้าย
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
องค์ประกอบอาร์เรย์วนรอบ
วิธีหนึ่งในการวนซ้ำผ่านอาร์เรย์คือการใช้การfor
วนซ้ำ:
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text
+= "</ul>";
คุณยังสามารถใช้Array.forEach()
ฟังก์ชัน:
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function
myFunction(value) {
text += "<li>" + value + "</li>";
}
การเพิ่มองค์ประกอบอาร์เรย์
วิธีที่ง่ายที่สุดในการเพิ่มองค์ประกอบใหม่ให้กับอาร์เรย์คือการใช้push()
วิธีการ:
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Adds a new element (Lemon) to fruits
สามารถเพิ่มองค์ประกอบใหม่ลงในอาร์เรย์โดยใช้length
คุณสมบัติ:
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
คำเตือน !
การเพิ่มองค์ประกอบที่มีดัชนีสูงสามารถสร้าง "ช่อง" ที่ไม่ได้กำหนดไว้ในอาร์เรย์ได้:
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Creates undefined "holes" in fruits
แอสโซซิเอทีฟอาเรย์
ภาษาโปรแกรมหลายภาษารองรับอาร์เรย์ที่มีดัชนีที่มีชื่อ
อาร์เรย์ที่มีดัชนีที่มีชื่อเรียกว่า associative arrays (หรือ hashes)
JavaScript ไม่สนับสนุนอาร์เรย์ที่มีดัชนีที่มีชื่อ
ใน JavaScript อาร์เรย์จะใช้ดัชนีที่มีหมายเลขเสมอ
ตัวอย่าง
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Will return 3
person[0]; // Will return "John"
คำเตือน !!
หากคุณใช้ดัชนีที่มีชื่อ JavaScript จะกำหนดอาร์เรย์ใหม่ให้กับวัตถุ
หลังจากนั้น เมธอดและคุณสมบัติของอาร์เรย์บางอย่างจะให้ ผลลัพธ์ ที่ไม่ถูกต้อง
ตัวอย่าง:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Will return 0
person[0]; // Will return undefined
ความแตกต่างระหว่างอาร์เรย์และวัตถุ
ใน JavaScript อาร์เรย์ใช้ดัชนีที่มีตัวเลข
ใน JavaScript ออบเจ็ กต์ ใช้ดัชนีที่ มีชื่อ
อาร์เรย์เป็นอ็อบเจ็กต์ชนิดพิเศษที่มีดัชนีเป็นตัวเลข
เมื่อใดควรใช้อาร์เรย์ เมื่อใดจึงจะใช้วัตถุ
- JavaScript ไม่สนับสนุนอาร์เรย์ที่เชื่อมโยง
- คุณควรใช้วัตถุเมื่อคุณต้องการให้ชื่อองค์ประกอบเป็น สตริง (ข้อความ )
- คุณควรใช้อาร์เรย์เมื่อต้องการให้ชื่อองค์ประกอบ เป็นตัวเลข
JavaScript อาร์เรย์ใหม่ ()
JavaScript มีตัวสร้างอาร์เรย์ในnew Array()
ตัว
แต่คุณสามารถใช้[]
แทน ได้อย่างปลอดภัย
คำสั่งที่แตกต่างกันทั้งสองนี้สร้างอาร์เรย์ว่างใหม่ที่มีชื่อจุด:
const points = new Array();
const points = [];
คำสั่งที่แตกต่างกันทั้งสองนี้สร้างอาร์เรย์ใหม่ที่มีตัวเลข 6 ตัว:
const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
คำnew
หลักสามารถสร้างผลลัพธ์ที่ไม่คาดคิดได้:
// Create an array with three elements:
const points = new Array(40, 100, 1);
// Create an array with two elements:
const points = new Array(40, 100);
// Create an array with one element ???
const points = new Array(40);
ข้อผิดพลาดทั่วไป
const points = [40];
ไม่เหมือนกับ:
const points = new Array(40);
// Create an array with one element:
const points = [40];
// Create an array with 40 undefined elements:
const points = new Array(40);
วิธีการรับรู้อาร์เรย์
คำถามทั่วไปคือ ฉันจะรู้ได้อย่างไรว่าตัวแปรเป็นอาร์เรย์
The problem is that the JavaScript operator typeof
returns
"object
":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
The typeof operator returns object because a JavaScript array is an object.
Solution 1:
To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray()
:
Array.isArray(fruits);
Solution 2:
The instanceof
operator returns true if an object is created
by a given constructor:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
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.