วิธีการอาร์เรย์ JavaScript
การแปลงอาร์เรย์เป็นสตริง
วิธี JavaScript toString()แปลงอาร์เรย์เป็นสตริงของค่าอาร์เรย์ (คั่นด้วยเครื่องหมายจุลภาค)
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
ผลลัพธ์:
วิธี การjoin()นี้ยังรวมองค์ประกอบอาร์เรย์ทั้งหมดเป็นสตริง
มันทำงานเหมือนtoString()แต่นอกจากนี้ คุณสามารถระบุตัวคั่น:
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
ผลลัพธ์:
ตอกและผลัก
เมื่อคุณทำงานกับอาร์เรย์ คุณจะลบองค์ประกอบและเพิ่มองค์ประกอบใหม่ได้อย่างง่ายดาย
นี่คือสิ่งที่ป๊อปและผลักคือ:
การดึง รายการออกจากอาร์เรย์ หรือการพุชรายการลงในอาร์เรย์
JavaScript Array ป๊อป ()
วิธี การpop()ลบองค์ประกอบสุดท้ายออกจากอาร์เรย์:
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
วิธี การpop()คืนค่าที่ "โผล่ออกมา":
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();
JavaScript Array พุช ()
วิธี การpush()เพิ่มองค์ประกอบใหม่ให้กับอาร์เรย์ (ในตอนท้าย):
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
วิธี การpush()ส่งคืนความยาวอาร์เรย์ใหม่:
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");
ขยับองค์ประกอบ
Shifting เทียบเท่ากับการ popping แต่ทำงานกับองค์ประกอบแรกแทนที่จะเป็นองค์ประกอบสุดท้าย
JavaScript Array shift()
วิธี นี้shift()จะลบองค์ประกอบอาร์เรย์แรกและ "เปลี่ยน" องค์ประกอบอื่นทั้งหมดเป็นดัชนีที่ต่ำกว่า
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
shift()เมธอดส่งคืนค่าที่ "เลื่อนออก" :
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();
JavaScript Array unshift()
วิธี การunshift()เพิ่มองค์ประกอบใหม่ให้กับอาร์เรย์ (ที่จุดเริ่มต้น) และ "unshifts" องค์ประกอบที่เก่ากว่า:
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
วิธี การunshift()ส่งคืนความยาวอาร์เรย์ใหม่
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
การเปลี่ยนองค์ประกอบ
องค์ประกอบอาร์เรย์สามารถเข้าถึงได้โดยใช้หมายเลขดัชนี :
ดัชนีอาร์เรย์เริ่มต้นด้วย 0:
[0] เป็นองค์ประกอบอาร์เรย์แรก
[1] เป็นองค์ประกอบที่สอง
[2] เป็นองค์ประกอบที่สาม ...
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";
JavaScript Array length
คุณสมบัติlengthนี้มีวิธีง่ายๆ ในการผนวกองค์ประกอบใหม่เข้ากับอาร์เรย์:
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";
JavaScript Array ลบ ()
คำเตือน !
องค์ประกอบอาร์เรย์สามารถลบได้โดยใช้โอเปอเรเตอร์deleteJavaScript
การใช้ รู deleteใบไม้undefinedในอาร์เรย์
ใช้ pop() หรือ shift() แทน
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];
การผสาน (การต่อกัน) อาร์เรย์
วิธี การconcat()สร้างอาร์เรย์ใหม่โดยการรวม (ต่อ) อาร์เรย์ที่มีอยู่:
ตัวอย่าง (การผสานสองอาร์เรย์)
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
วิธี การconcat()นี้จะไม่เปลี่ยนอาร์เรย์ที่มีอยู่ จะส่งกลับอาร์เรย์ใหม่เสมอ
เมธอดสามารถรับ อาร์กิวเมนต์concat()อาร์เรย์จำนวนเท่าใดก็ได้:
ตัวอย่าง (การผสานสามอาร์เรย์)
const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);
วิธี การconcat()นี้ยังสามารถรับสตริงเป็นอาร์กิวเมนต์:
ตัวอย่าง (การรวมอาร์เรย์กับค่า)
const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter");
อาร์เรย์ประกบและสไลซ์
วิธี การsplice()เพิ่มรายการใหม่ให้กับอาร์เรย์
วิธี การslice()แบ่งส่วนของอาร์เรย์ออก
ประกบอาร์เรย์ JavaScript ()
สามารถใช้ วิธีsplice()นี้เพื่อเพิ่มรายการใหม่ในอาร์เรย์:
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
พารามิเตอร์แรก (2) กำหนดตำแหน่งที่ควร เพิ่ม องค์ประกอบใหม่ (ประกบกัน)
พารามิเตอร์ที่สอง (0) กำหนดจำนวน องค์ประกอบ ที่ควร ลบ
พารามิเตอร์ที่เหลือ ("มะนาว", "กีวี") กำหนดองค์ประกอบใหม่ที่ จะเพิ่ม
วิธี การsplice()ส่งคืนอาร์เรย์ที่มีรายการที่ถูกลบ:
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");
ใช้ splice() เพื่อลบองค์ประกอบ
ด้วยการตั้งค่าพารามิเตอร์ที่ชาญฉลาด คุณสามารถใช้splice()เพื่อลบองค์ประกอบโดยไม่ต้องทิ้ง "ช่อง" ในอาร์เรย์:
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);
พารามิเตอร์แรก (0) กำหนดตำแหน่งที่ควร เพิ่ม องค์ประกอบใหม่ (ประกบกัน)
พารามิเตอร์ที่สอง (1) กำหนดจำนวน องค์ประกอบ ที่ควร ลบ
พารามิเตอร์ที่เหลือจะถูกละเว้น จะไม่มีการเพิ่มองค์ประกอบใหม่
JavaScript Array ชิ้น ()
วิธี การslice()แบ่งส่วนของอาร์เรย์ออกเป็นอาร์เรย์ใหม่
ตัวอย่างนี้แบ่งส่วนของอาร์เรย์ที่เริ่มต้นจากองค์ประกอบอาร์เรย์ 1 ("สีส้ม"):
ตัวอย่าง
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
บันทึก
วิธี การslice()สร้างอาร์เรย์ใหม่
เมธอด นี้slice()ไม่ได้ลบองค์ประกอบใดๆ ออกจากอาร์เรย์ต้นทาง
ตัวอย่างนี้แบ่งส่วนของอาร์เรย์โดยเริ่มจากองค์ประกอบอาร์เรย์ 3 ("Apple"):
ตัวอย่าง
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
วิธี การslice()สามารถรับสองอาร์กิวเมนต์เช่นslice(1, 3).
จากนั้นเมธอดจะเลือกองค์ประกอบจากอาร์กิวเมนต์เริ่มต้น ไปจนถึงอาร์กิวเมนต์จุดสิ้นสุด (แต่ไม่รวม)
ตัวอย่าง
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);
หากละเว้นอาร์กิวเมนต์ end เช่นในตัวอย่างแรกslice()
เมธอดจะตัดส่วนที่เหลือของอาร์เรย์ออก
ตัวอย่าง
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
toString อัตโนมัติ ()
JavaScript จะแปลงอาร์เรย์เป็นสตริงที่คั่นด้วยเครื่องหมายจุลภาคโดยอัตโนมัติเมื่อคาดว่าจะมีค่าพื้นฐาน
กรณีนี้จะเกิดขึ้นเสมอเมื่อคุณพยายามส่งออกอาร์เรย์
สองตัวอย่างนี้จะให้ผลลัพธ์เหมือนกัน:
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
ตัวอย่าง
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
บันทึก
ออบเจ็กต์ JavaScript ทั้งหมดมีเมธอด toString()
การหาค่าสูงสุดและต่ำสุดในอาร์เรย์
ไม่มีฟังก์ชันในตัวสำหรับค้นหาค่าสูงสุดหรือต่ำสุดในอาร์เรย์ JavaScript
คุณจะได้เรียนรู้วิธีแก้ไขปัญหานี้ในบทต่อไปของบทช่วยสอนนี้
การเรียงลำดับอาร์เรย์
การเรียงลำดับอาร์เรย์จะกล่าวถึงในบทถัดไปของบทช่วยสอนนี้
การอ้างอิงอาร์เรย์ที่สมบูรณ์
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.