มาสร้างรายการผลไม้กัน เราจะเรียกรายการของเราว่า "ผลไม้" และเพิ่มค่าต่อไปนี้:กล้วย แตง องุ่น โอ้ฉันรักผลไม้แค่ไหน! แม้ว่านี่อาจดูเหมือนเป็นบทช่วยสอนเกี่ยวกับรายการซื้อของ แต่เราเพิ่งสร้างอาร์เรย์ขึ้นมาเอง
ในคู่มือนี้ เราจะพูดถึงว่าอาร์เรย์คืออะไร ทำงานอย่างไร และเหตุใดคุณจึงควรใช้อาร์เรย์เหล่านี้ในโค้ดของคุณ เราจะมาพูดถึงตัวอย่างการใช้งานอาร์เรย์บางส่วน เพื่อให้คุณได้เป็นนินจาอาเรย์ 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 อย่างผู้เชี่ยวชาญแล้ว!