JavaScript Array:คู่มือสำหรับผู้เริ่มต้น

มาสร้างรายการผลไม้กัน เราจะเรียกรายการของเราว่า "ผลไม้" และเพิ่มค่าต่อไปนี้:กล้วย แตง องุ่น โอ้ฉันรักผลไม้แค่ไหน! แม้ว่านี่อาจดูเหมือนเป็นบทช่วยสอนเกี่ยวกับรายการซื้อของ แต่เราเพิ่งสร้างอาร์เรย์ขึ้นมาเอง

ในคู่มือนี้ เราจะพูดถึงว่าอาร์เรย์คืออะไร ทำงานอย่างไร และเหตุใดคุณจึงควรใช้อาร์เรย์เหล่านี้ในโค้ดของคุณ เราจะมาพูดถึงตัวอย่างการใช้งานอาร์เรย์บางส่วน เพื่อให้คุณได้เป็นนินจาอาเรย์ JavaScript!

อาร์เรย์คืออะไร

อาร์เรย์เป็นวัตถุที่เก็บข้อมูล อาร์เรย์ประกอบด้วยคอลเลกชันที่สั่งซื้อ และสามารถจัดเก็บรายการตั้งแต่ศูนย์ขึ้นไปได้ อาร์เรย์มีประโยชน์ในการเขียนโปรแกรมเพราะช่วยให้คุณสามารถเก็บค่าที่คล้ายคลึงกันไว้ในตัวแปรเดียว

คุณไม่จำเป็นต้องเขียนตัวแปรเดียวสิบตัวเพื่อแสดงรายการผลไม้ที่คุณชื่นชอบ เป็นต้น ด้วยอาร์เรย์ คุณสามารถเพิ่มผลไม้ที่คุณชื่นชอบทั้งหมดลงในตัวแปรเดียวได้

ลองพิจารณาตัวอย่างต่อไปนี้:

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

ที่นี่เราได้สร้างอาร์เรย์ที่เรียกว่า "ผลไม้" โดยเก็บค่าต่างๆ ไว้สามค่า ซึ่งแต่ละค่าสะท้อนถึงผลไม้ที่เราต้องการซื้อที่ร้านขายของชำ ในการประกาศอาร์เรย์ เราได้ล้อมรายการไว้ในวงเล็บเหลี่ยม

การประกาศอาร์เรย์

มีสองวิธีในการประกาศอาร์เรย์ วิธีที่คุณเห็นคนส่วนใหญ่ทำก็คือการล้อมรายการด้วยวงเล็บเหลี่ยมเหมือนที่เราทำก่อนหน้านี้:

let berries = [
	"Strawberry",
	"Blueberry",
	"Gooseberry"
];

เราได้ประกาศอาร์เรย์ที่มีค่าสามค่าในตัวอย่างนี้ นอกจากนี้เรายังสามารถใช้ตัวสร้างอาร์เรย์ซึ่งใช้ new คำสำคัญที่จะประกาศอาร์เรย์:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

let berries = new Array(
	"Strawberry",
	"Blueberry",
	"Gooseberry"
);

ข้อมูลโค้ดเหล่านี้สร้างอาร์เรย์เดียวกัน แต่ใช้วิธีการต่างกัน สังเกตว่าในตัวอย่างที่สองของเรา เราได้ใช้วงเล็บกลมเพื่อประกาศอาร์เรย์ของเรา เรายังต้องใช้ new Array ตัวสร้างเพื่อประกาศอาร์เรย์ ด้วยเหตุผลนั้นเองที่คนส่วนใหญ่ชอบวิธีแรก วงเล็บเหลี่ยมจะจำง่ายกว่ามากและพิมพ์ได้เร็วกว่า

อาร์เรย์ไม่จำเป็นต้องรวมประเภทข้อมูลเดียวกัน อาร์เรย์ของเราสามารถจัดเก็บข้อมูลประเภทต่างๆ ได้หลายประเภท:

let berries = [
	"Strawberry",
	1.50,
	true
];

อาร์เรย์นี้จัดเก็บข้อมูลสามประเภทที่แตกต่างกัน:สตริง ตัวเลข และบูลีน เมื่อคุณคุ้นเคยกับวิธีการประกาศอาร์เรย์แล้ว คุณก็พร้อมที่จะเริ่มเข้าถึงเนื้อหาแล้ว

การอ่านอาร์เรย์

อาร์เรย์จะไม่มีประโยชน์มากหากเราไม่สามารถอ่านค่าของอาร์เรย์ได้ นั่นเป็นสาเหตุที่การจัดทำดัชนีมีอยู่ การสร้างดัชนีเป็นวิธีการเข้าถึงแต่ละรายการในวัตถุที่ทำซ้ำได้ เช่น รายการ

ทุกองค์ประกอบของอาร์เรย์ในอาร์เรย์จะได้รับหมายเลขดัชนีของตัวเอง ตัวเลขเหล่านี้ขึ้นต้นด้วย 0 และสามารถใช้เพื่อเข้าถึงแต่ละรายการในอาร์เรย์ได้ จำอาร์เรย์ "ผลไม้" ของเราได้ไหม

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

นี่คือค่าดัชนีที่กำหนดให้กับอาร์เรย์นี้:

0:กล้วย
1:องุ่น
2:แตงโม

โดยใช้ตัวเลขเหล่านี้ เราสามารถเข้าถึงแต่ละรายการในรายการของเราได้ สมมติว่าคุณต้องการระบุว่าผลไม้ใดอยู่ในตำแหน่งดัชนี 1 ในอาร์เรย์ของคุณ คุณสามารถทำได้โดยระบุค่าดัชนีในวงเล็บเหลี่ยมหลังชื่อของอาร์เรย์:

fruits[1];

รหัสของเราส่งคืน:องุ่น เรากำลังหมายถึงตำแหน่งดัชนี 1 ซึ่งเก็บค่า "องุ่น" หากคุณผ่านค่า 0 “กล้วย” จะถูกส่งกลับ หากคุณพยายามเข้าถึงรายการที่ไม่มีอยู่ ระบบจะส่งคืน "undefined":

fruits[10];

เอาต์พุต:ไม่ได้กำหนด โดยที่การจัดทำดัชนีมีประโยชน์อย่างยิ่งคือเมื่อคุณต้องการวนซ้ำรายการในอาร์เรย์ สมมติว่าคุณต้องการพิมพ์ทุกผลไม้ในอาร์เรย์ของคุณไปยังคอนโซล คุณสามารถทำได้โดยใช้ for loop ดังนี้:

for (var i = 0; i < fruits.length; i++) {
	console.log(fruits[i]);
}

รหัสนี้ส่งคืน:

Banana
Grapes
Melon

รหัสของเราจะวนซ้ำทุกรายการในรายการของเรา จากนั้นพิมพ์แต่ละรายการไปยังคอนโซล คุณจะสังเกตเห็นว่าเราใช้ length คุณสมบัติ. ส่งคืนความยาวของรายการของเรา

เพิ่มรายการลงในอาร์เรย์

โดยส่วนใหญ่ คุณจะต้องเพิ่มค่าใหม่ให้กับอาร์เรย์หลังจากที่คุณได้ประกาศอาร์เรย์ของคุณในตอนแรก คุณสามารถทำได้โดยใช้ push() วิธีการอาร์เรย์

เราลืมเพิ่ม “สตรอเบอร์รี่” ในรายการผลไม้ของเรา ไม่นะ! ไม่ต้องกังวล เราสามารถเพิ่มได้เสมอโดยใช้ push() วิธีการ:

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.push("Strawberry");
console.log(fruits);

เมื่อเรารันโค้ดนี้แล้ว อาร์เรย์ของเรามีลักษณะดังนี้:

กล้วย	องุ่น	เมล่อน	สตรอเบอร์รี่
	1	2	3

คุณเพิ่มข้อมูลไปที่จุดเริ่มต้นของอาร์เรย์ได้โดยใช้ unshift() . สตรอเบอร์รี่มีความสำคัญมากในรายการซื้อของที่เราต้องการให้ปรากฏเป็นอันดับแรก:

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.push("Strawberry");
console.log(fruits);

ซึ่งจะทำให้รายการ "ผลไม้" เดิมของเราปรากฏดังนี้:

สตรอเบอร์รี่	กล้วย	องุ่น	เมล่อน
	1	2	3

ลบรายการออกจากอาร์เรย์

ปรากฎว่าที่บ้านมีเมล่อนอยู่แล้ว ไม่ต้องไปซื้อกิน มันจะมีประโยชน์อะไรในการซื้อแตงอีกอันใช่ไหม? เนื่องจากแตงอยู่ท้ายรายการ เราจึงมีทางเลือกสองทางที่จะลบออก:

splice() :ลบองค์ประกอบตามหมายเลขดัชนี
pop() :ลบองค์ประกอบออกจากส่วนท้ายของอาร์เรย์

มาใช้ splice() . กันเถอะ เป็นตัวอย่าง:

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.splice(3, 1);
console.log(fruits);

รหัสของเราส่งคืน:

Strawberry
Banana
Grapes

splice() ยอมรับสองพารามิเตอร์ อันดับแรกคือหมายเลขดัชนีที่จะลบออกจากอาร์เรย์ และอันดับที่สองคือจำนวนรายการที่จะลบ ในกรณีนี้ เราต้องการลบรายการที่มีค่าดัชนี 3 ดังนั้นเราจึงระบุ “3, 1” เป็นพารามิเตอร์ของเรา

pop() ไม่ยอมรับพารามิเตอร์ใด ๆ มันเพิ่งลบรายการสุดท้ายของรายการ:

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.pop();
console.log(fruits);

รหัสของเราส่งคืน:

Banana
Grapes

คุณยังสามารถใช้ shift() เพื่อลบรายการออกจากจุดเริ่มต้นของรายการ:

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.shift();
console.log(fruits);

รหัสของเราส่งคืน:

Grapes
Melon

push() และ unshift() เพิ่มรายการในรายการ pop() และ shift() ลบรายการออกจากรายการ วิธีการต่อสามารถใช้เพื่อลบรายการออกจากรายการตามค่าดัชนีได้

การเปลี่ยนรายการในอาร์เรย์

แม้ว่ากล้วยเป็นผลไม้ที่อร่อย แต่มักมีขนาดใหญ่มากจนคุณไม่สามารถกินได้เช่นเดียวกับของว่างเมื่อคุณรู้สึกหิวเล็กน้อย กล้วยเด็กกินง่ายกว่า

สมมติว่าเราต้องการเปลี่ยนรายการ "ผลไม้" เพื่อเลือกซื้อกล้วยทารกแทนกล้วยธรรมดา เราสามารถทำได้โดยใช้ตัวดำเนินการมอบหมายเช่นเดียวกับที่เราทำกับตัวแปรใดๆ:

fruits[0] = "Baby bananas";
console.log(fruits);

รหัสของเราส่งคืน:

Baby bananas
Grapes
Melon

เราได้แก้ไขรายการที่ตำแหน่งดัชนี 0 เพื่อเก็บค่า “Baby Bananas” คุณไม่จำเป็นต้องใช้วิธีพิเศษใดๆ ในการเปลี่ยนแปลงนี้ ตัวดำเนินการกำหนดใช้เพื่อเปลี่ยนค่าในอาร์เรย์

บทสรุป

นั่นคือพื้นฐานของสิ่งที่คุณต้องรู้เกี่ยวกับอาร์เรย์ JavaScript มีอะไรให้คุณเรียนรู้อีกมากมาย แต่นั่นคือสิ่งที่ทำให้การเขียนโปรแกรมเป็นเรื่องสนุก:มีความท้าทายใหม่ๆ ให้คุณจัดการอยู่เสมอ ถ้าไม่มีอะไร คุณได้เรียนรู้เกี่ยวกับผลไม้โปรดของฉันแล้ว แม้ว่าฉันจะบอกว่าฉันรักแบล็คเคอแรนท์ ซึ่งฉันไม่ได้พูดถึงในบทช่วยสอนนี้

ตอนนี้คุณพร้อมที่จะเริ่มทำงานกับอาร์เรย์ JavaScript อย่างผู้เชี่ยวชาญแล้ว!