จาวาอาร์เรย์ ส่วนที่ 6 หลักสูตร JavaScript จาก Beginner ถึง Advanced ใน 10 บล็อกโพสต์

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

อาร์เรย์ Java – สารบัญ:

1. อาร์เรย์ – ข้อมูลพื้นฐาน
2. การเพิ่มรายการไปยังอาร์เรย์ java
3. การลบรายการออกจากอาร์เรย์
4. การหาความยาวในอาร์เรย์
5. การเรียงลำดับอาร์เรย์
6. การกลับองค์ประกอบในอาร์เรย์
7. แต่ละ
8. รวมในอาร์เรย์

บทช่วยสอนนี้อนุมานว่าคุณมีสภาพแวดล้อมการเข้ารหัสที่ตั้งค่าไว้แล้ว หากคุณได้ติดตามบทช่วยสอนก่อนหน้านี้ คุณควรเปิดไว้แล้ว หากคุณปิดการตั้งค่าด้วยเหตุผลบางประการ คุณสามารถดูคำแนะนำการตั้งค่าฉบับสมบูรณ์ได้ที่ส่วนที่ 4 ของชุดข้อมูลเหล่านี้ ในบทช่วยสอนนั้น เราจะอธิบายวิธีตั้งค่าสภาพแวดล้อม Google Chrome Snippets สำหรับการเข้ารหัส

หากคุณค่อนข้างสบายใจในการใช้ Google Chrome นี่เป็นวิธีที่รวดเร็วในการตั้งค่าสำหรับบทช่วยสอนนี้ มิฉะนั้น คุณสามารถดูส่วนที่ 4 สำหรับชุดคำแนะนำทีละขั้นตอนทั้งหมดเกี่ยวกับวิธีตั้งค่าสภาพแวดล้อมการเขียนโค้ดของคุณ

หากคุณใช้ Mac แป้นพิมพ์ลัดเพื่อเปิดคอนโซลคือกด "Option + Command + J" หลังจากที่คุณเปิด Chrome หากคุณใช้อุปกรณ์ Windows คุณสามารถใช้แป้นพิมพ์ลัดของ “Control + Shift + J” เพื่อเปิดคอนโซล JavaScript เมื่อคุณเปิด Chrome หรือคุณสามารถไปที่เมนูด้านบนและไปที่ View -> Developer -> JavaScript Console เมื่อคุณเปิด Console แล้ว คุณสามารถคลิกที่แท็บ "แหล่งที่มา" ซึ่งอยู่ถัดจาก "คอนโซล" ตอนนี้คุณแสดงว่ากำลังเห็นตัวอย่างข้อมูล คุณสามารถเขียนโค้ดต่อใน snippet ที่คุณเคยใช้ไปแล้วก่อนหน้านี้ หรือคุณสามารถสร้าง Snipped ใหม่ได้โดยคลิกที่ปุ่ม "+ New snippet" ตราบใดที่คุณมีการเข้ารหัสสำหรับบทช่วยสอนนี้ซึ่งคุณสามารถฝึกฝนได้ คุณก็พร้อมที่จะไป

Java array- ข้อมูลพื้นฐาน

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

const numbersUntilTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const testAnswers = [true, true, false, false, true];
const pets = ["dogs", "cats", "birds", "fishes"];

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

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

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

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

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

alert(pets[0]);

ในทำนองเดียวกัน การใส่ตัวเลขที่สูงขึ้นจะทำให้แสดงองค์ประกอบอื่นๆ ในช่องแจ้งเตือนที่เรากำลังแสดง

alert(pets[1]);
alert(pets[2]);
alert(pets[3]);

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

การเพิ่มรายการไปยังอาร์เรย์ java

มีหลายวิธีที่เราสามารถเพิ่มรายการต่างๆ ลงในอาร์เรย์ได้ หากเรารู้ว่าเราต้องการเพิ่มรายการใหม่ต่อท้ายอาร์เรย์ เราก็สามารถใช้วิธี "พุช" ได้ สิ่งนี้เรียกว่าการผลักรายการใหม่เข้าไปในอาร์เรย์ โปรดทราบว่ารายการที่พุชจะมาที่ส่วนท้ายของอาร์เรย์ ตัวอย่างเช่น:

pets.push("snakes");
// lets verify that we have snakes as the last item
// by displaying the array contents
alert(pets);

หากเรารู้ว่าเราต้องการเพิ่มรายการลงในอาร์เรย์ java โดยเฉพาะเป็นองค์ประกอบแรก เราสามารถใช้คำหลัก "unshift" ได้ ลองดูด้วยตัวอย่าง:

//running this code will shift all the values
// to one side and will add the first pet of dragon
pets.unshift(“dragons”); 
//lets verify this by displaying the contents of the array
alert(pets);

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

pets[2] = "turtles";
// lets verify that we have turtles as the third item
// by displaying the contents of the array
alert(pets);

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

ณ จุดนี้คุณอาจสงสัยว่าจะลบรายการออกจากอาร์เรย์ได้อย่างไร มีหลายวิธีสำหรับสิ่งนั้นเช่นกัน วิธีที่โด่งดังที่สุดคือการใช้วิธีการ "ป๊อป" วิธีนี้จะทำให้รายการสุดท้ายของคุณหลุดออกจากอาร์เรย์ // สิ่งนี้จะลบรายการสุดท้ายในอาร์เรย์ pets.pop(); // มาตรวจสอบผลลัพธ์โดยการแสดงเนื้อหาอาร์เรย์ alert(pets);

อย่างที่คุณเห็น ด้วยวิธีการป๊อป เราได้ลบรายการสัตว์เลี้ยงตัวสุดท้ายที่เป็นงูออกจากสัตว์เลี้ยงของเรา

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

// this will delete the first item
// and will shift the other items into their new index values
// which will be one lower than the previous index values
pets.shift();
// let's also verify this by displaying the array
alert(pets);

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

การหาความยาวในอาร์เรย์

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

alert(pets.length);

การเรียงลำดับอาร์เรย์

การเรียงลำดับอาร์เรย์เป็นการดำเนินการทั่วไปใน JavaScript มีการใช้งานเฉพาะที่แตกต่างกันในการจัดเรียงรายการใน JavaScript การใช้งานเฉพาะเหล่านี้โดยทั่วไปเรียกว่าอัลกอริธึมการเรียงลำดับ อัลกอริธึมการเรียงลำดับที่แตกต่างกันสามารถนำมาซึ่งข้อดีและข้อเสียที่แตกต่างกัน ตัวอย่างเช่น อาจเลือกใช้อัลกอริธึมการเรียงลำดับแทนอัลกอริทึมอื่น เนื่องจากง่ายต่อการติดตั้งในโค้ด เมื่อเทียบกับอัลกอริธึมอื่น แม้ว่าอัลกอริธึมอาจแสดงประสิทธิภาพที่ดีขึ้นเล็กน้อย คุณอาจเคยได้ยินเกี่ยวกับอัลกอริธึมการจัดเรียงต่างๆ เพื่อประสิทธิภาพสูงสุด ในบทช่วยสอนนี้ เราจะใช้วิธีการจัดเรียงที่มีอยู่แล้วใน JavaScript การเรียงลำดับเป็นปัญหาที่พบบ่อยมากโดยเฉพาะในการพัฒนาเว็บ ตัวอย่างเช่น หากคุณกำลังสร้างเว็บไซต์อีคอมเมิร์ซ คุณต้องใช้สถานการณ์การเรียงลำดับที่แตกต่างกันเพื่อให้ผู้ใช้ของคุณเลือก แม้ว่าจะไม่มีกฎเกณฑ์ที่เข้มงวดเกี่ยวกับตัวเลือกและความสามารถที่คุณควรมอบให้แก่ผู้ชมของคุณ แต่ก็มีมาตรฐานทั่วไปที่คาดหวังจากคุณในฐานะผู้สร้างเว็บไซต์ ตัวอย่างเช่น ในฐานะผู้ใช้ มีโอกาสสูงที่คุณอาจต้องการแสดงรายการร้านค้าบางรายการทั้งราคาจากน้อยไปมากและราคาจากมากไปน้อย เมื่อใช้งานการเรียงลำดับสำหรับงานเหล่านั้น คุณควรจำไว้เสมอว่าจะใช้งานอย่างไร เนื่องจากผู้ใช้ยังสามารถจำกัดผลการค้นหาให้อยู่ในหมวดหมู่อื่นๆ บางประเภทได้เช่นกัน เช่น เสื้อยืด หมวก กระเป๋า และอื่นๆ เราสามารถจัดเรียงอาร์เรย์โดยเพิ่ม “.sort()” ต่อท้ายอาร์เรย์

pets.sort();
alert(pets);

การกลับองค์ประกอบในอาร์เรย์

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

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

แต่ละ

เมื่อเราทำงานกับอาร์เรย์ JavaScript ให้วิธีที่สะดวกในการวนรอบรายการอาร์เรย์ด้วย “.forEach()” หากเราต้องการจริงๆ เรายังคงสามารถใช้ for loop แบบปกติเพื่อวนรอบอาร์เรย์ได้ อันที่จริง มาดูวิธีสร้าง for loop เพื่อวนรอบอาร์เรย์ก่อน จากนั้นเราจะเห็นการใช้ forEach()

// this will alert us 4 times to feed our pet
for (let a = 0; a < pets.length; a++) {
    alert("Time to feed my pet");
}

เรายังสามารถบรรลุผลลัพธ์เดียวกันได้โดยใช้ forEach

pets.forEach(alert("Time to feed my pet"));

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

รวมในอาร์เรย์

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

alert(pets.includes("dogs"));

หากเราพยายามทำสิ่งเดียวกันกับรายการที่เรารู้ว่าไม่มีอยู่ในอาร์เรย์ java เราคาดว่าจะได้รับคำตอบที่เป็นเท็จ ลองดูกรณีนั้นด้วยตัวอย่าง:

alert(pets.includes("puppy"));

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

หลักสูตร JavaScript จากระดับเริ่มต้นถึงระดับสูงใน 10 บล็อกโพสต์:

1. จะเริ่มเขียนโค้ดใน JavaScript ได้อย่างไร?
2. พื้นฐาน JavaScript
3. ตัวแปรและประเภทข้อมูลต่างๆ ใน ​​JavaScript
4. ตัวอย่างและโครงสร้างการควบคุม
5. ในขณะที่ลูปและสำหรับลูป
6. Java array
7. ฟังก์ชันจาวาสคริปต์
8. วัตถุ JavaScript
9. เมธอด JavaScript และอื่นๆ
10. สรุปหลักสูตรจาวาสคริปต์