• การแปล

แอปพลิเคชันส่วนใหญ่ที่พัฒนาขึ้นในปัจจุบันจำเป็นต้องมีการโต้ตอบกับชุดข้อมูลบางประเภท การจัดการองค์ประกอบในคอลเลกชันเป็นการดำเนินการทั่วไปที่คุณอาจพบ ตัวอย่างเช่น เมื่อทำงานกับอาร์เรย์ คุณสามารถใช้ for loop ปกติซึ่งมีลักษณะดังนี้: for (var i=0; i< value.length; i++){} . Однако, лучше, всё-таки, смотреть на вещи шире.

สมมติว่าเราจำเป็นต้องแสดงรายการผลิตภัณฑ์ และหากจำเป็น ให้แบ่งออกเป็นหมวดหมู่ กรอง ทำการค้นหา แก้ไขรายการนี้หรือองค์ประกอบ บางทีคุณอาจต้องดำเนินการคำนวณบางอย่างที่เกี่ยวข้องกับองค์ประกอบของรายการอย่างรวดเร็ว สมมติว่าคุณต้องบวกอะไรสักอย่างด้วยอะไรสักอย่าง คูณอะไรสักอย่างด้วยอะไรสักอย่าง เป็นไปได้หรือไม่ที่จะค้นหาเครื่องมือใน JavaScript ที่ช่วยให้คุณแก้ไขปัญหาดังกล่าวได้เร็วและสะดวกกว่าการใช้ for loop ทั่วไป?

ในความเป็นจริงมีสิ่งอำนวยความสะดวกดังกล่าวใน JavaScript บางส่วนมีการพูดคุยกันในเนื้อหา ซึ่งเป็นการแปลที่เรานำเสนอให้คุณทราบในวันนี้ โดยเฉพาะอย่างยิ่ง เรากำลังพูดถึงตัวดำเนินการสเปรด, for...of loop และเมธอด include(), some(), every(), filter(), map() และ ลด() ส่วนใหญ่เราจะพูดถึงอาร์เรย์ที่นี่ แต่เทคนิคที่กล่าวถึงในที่นี้โดยทั่วไปเหมาะสำหรับการทำงานกับวัตถุประเภทอื่น

ควรสังเกตว่าบทวิจารณ์ แนวทางที่ทันสมัยการพัฒนา JS มักจะมีตัวอย่างที่จัดทำขึ้นโดยใช้ฟังก์ชันลูกศร บางทีคุณอาจไม่ได้ใช้มันบ่อยนัก - อาจเป็นเพราะคุณไม่ชอบมัน อาจเป็นเพราะคุณไม่ต้องการใช้เวลามากเกินไปในการเรียนรู้สิ่งใหม่ ๆ หรือบางทีอาจไม่เหมาะกับคุณ ดังนั้นในสถานการณ์ส่วนใหญ่จะแสดงสองตัวเลือกสำหรับการดำเนินการเดียวกัน: การใช้ ฟังก์ชั่นปกติ(ES5) และการใช้ฟังก์ชันลูกศร (ES6) สำหรับผู้ที่เพิ่งเริ่มใช้ฟังก์ชันลูกศร ฟังก์ชันลูกศรไม่เทียบเท่ากับการประกาศฟังก์ชันและนิพจน์ฟังก์ชัน คุณไม่ควรเปลี่ยนอันหนึ่งด้วยอันอื่น โดยเฉพาะอย่างยิ่งนี่เป็นเพราะความจริงที่ว่าในฟังก์ชั่นปกติและลูกศร คำสำคัญสิ่งนี้มีพฤติกรรมแตกต่างออกไป

1. ตัวดำเนินการขยาย

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

▍จุดแข็งของผู้ดำเนินการขยาย

• มันง่ายและ วิธีที่รวดเร็ว“ดึง” องค์ประกอบแต่ละรายการออกจากอาร์เรย์
• โอเปอเรเตอร์นี้เหมาะสำหรับการทำงานกับอาร์เรย์และอ็อบเจ็กต์ตัวอักษร
• นี่เป็นวิธีการทำงานกับอาร์กิวเมนต์ของฟังก์ชันที่รวดเร็วและใช้งานง่าย
• ตัวดำเนินการส่วนขยายไม่ใช้พื้นที่มากนักในโค้ด - ดูเหมือนว่ามีจุดสามจุด (...)

▍ตัวอย่าง

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

2. วนซ้ำสำหรับ...ของ

คำสั่ง for...of ได้รับการออกแบบมาเพื่อสำรวจวัตถุที่สามารถทำซ้ำได้ มันให้การเข้าถึง แต่ละองค์ประกอบวัตถุดังกล่าว (โดยเฉพาะกับองค์ประกอบอาร์เรย์) ซึ่งอนุญาตให้แก้ไขได้ ก็ถือได้ว่าทดแทนได้ตามปกติ สำหรับวง.

▍จุดแข็งของ for...of loop

• นี่เป็นวิธีง่ายๆ ในการเพิ่มหรืออัปเดตรายการคอลเลกชัน
• for...of loop ช่วยให้คุณสามารถคำนวณต่างๆ ได้โดยใช้องค์ประกอบต่างๆ (การบวก การคูณ และอื่นๆ)
• สะดวกในการใช้งานเมื่อต้องการตรวจสอบเงื่อนไขต่างๆ
• การใช้งานนำไปสู่การเขียนโค้ดที่สะอาดขึ้นและอ่านง่ายขึ้น

▍ตัวอย่าง

สมมติว่าคุณมีโครงสร้างข้อมูลที่อธิบายเนื้อหาของกล่องเครื่องมือ และคุณต้องการแสดงเครื่องมือเหล่านั้น ต่อไปนี้เป็นวิธีดำเนินการโดยใช้ for...of loop:

3. วิธีการรวม ()

วิธีการรวม () ใช้เพื่อตรวจสอบว่ามีองค์ประกอบบางอย่างอยู่ในคอลเลกชันหรือไม่ โดยเฉพาะตัวอย่างเช่น เส้นเฉพาะในอาร์เรย์ที่มีสตริง วิธีนี้จะคืนค่าเป็นจริงหรือเท็จ ขึ้นอยู่กับผลลัพธ์ของการทดสอบ เมื่อใช้งาน ควรพิจารณาว่าคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ตัวอย่างเช่น หากคอลเลกชันมีองค์ประกอบสตริง SCHOOL และรวม () ตรวจสอบการมีอยู่โดยใช้สตริง school เมธอดจะส่งกลับ false

▍จุดแข็งของวิธีการรวม()

• วิธีการรวม () มีประโยชน์ในการสร้างกลไกการดึงข้อมูลอย่างง่าย
• มันทำให้นักพัฒนาเข้าใจได้ง่าย วิธีที่ชัดเจนการพิจารณาการมีอยู่ของข้อมูลบางอย่างในอาร์เรย์
• สะดวกในการใช้ในนิพจน์แบบมีเงื่อนไขเพื่อแก้ไข กรององค์ประกอบ และดำเนินการอื่นๆ
• การใช้งานทำให้สามารถอ่านโค้ดได้ดีขึ้น

▍ตัวอย่าง

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

4. วิธีการบางอย่าง ()

เมธอด some() ช่วยให้คุณตรวจสอบว่ามีองค์ประกอบบางอย่างที่คุณกำลังมองหาอยู่ในอาร์เรย์หรือไม่ จากผลการทดสอบ จะคืนค่า true หรือ false มันคล้ายกับเมธอดรวม () ข้างต้น ยกเว้นว่าอาร์กิวเมนต์ของมันคือฟังก์ชันแทนที่จะเป็นสตริงปกติ เช่น

▍จุดแข็งของเมธอด some()

• เมธอด some() ช่วยให้เราตรวจสอบว่าอาร์เรย์มีองค์ประกอบอย่างน้อยหนึ่งรายการที่เราสนใจหรือไม่
• จะทำการทดสอบเงื่อนไขโดยใช้ฟังก์ชันที่ส่งผ่านไป
• วิธีนี้มีความสะดวกในการใช้งาน

▍ตัวอย่าง

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

อีเอส5

อีเอส6

5. ทุกวิธี ()

เมธอด every() จะวนซ้ำผ่านอาร์เรย์และทดสอบแต่ละองค์ประกอบกับเงื่อนไขที่กำหนด โดยจะส่งคืนค่าเป็นจริงหากองค์ประกอบทั้งหมดของอาร์เรย์ตรงกับเงื่อนไข และคืนค่าเป็นเท็จ หากไม่เป็นเช่นนั้น คุณจะเห็นว่ามันคล้ายกับเมธอด some()

▍จุดแข็งของเมธอด every()

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

▍ตัวอย่าง

กลับไปที่ตัวอย่างก่อนหน้ากัน ที่นั่นคุณอนุญาตให้ผู้เยี่ยมชมอายุต่ำกว่า 18 ปีเข้าไปในคลับได้ แต่มีคนเขียนคำสั่งถึงตำรวจ หลังจากนั้นคุณพบว่าตัวเองตกอยู่ในสถานการณ์ที่ไม่พึงประสงค์ หลังจากจัดการทุกอย่างเรียบร้อยแล้ว คุณตัดสินใจว่าคุณไม่ต้องการทั้งหมดนี้และกระชับกฎเกณฑ์ในการเยี่ยมชมคลับให้เข้มงวดขึ้น ขณะนี้กลุ่มผู้มาเยือนสามารถเข้าคลับได้ก็ต่อเมื่อสมาชิกแต่ละคนในกลุ่มมีอายุไม่ต่ำกว่า 18 ปี คราวที่แล้วเราจะพิจารณาการแก้ปัญหาเป็นสองเวอร์ชัน แต่คราวนี้เราจะใช้เมธอด every()

อีเอส5

อีเอส6

6. วิธีการกรอง ()

เมธอด filter() ช่วยให้คุณสร้างตามอาร์เรย์ อาร์เรย์ใหม่ซึ่งมีเฉพาะองค์ประกอบของอาร์เรย์ต้นทางที่ตรงตามเงื่อนไขที่กำหนด

▍จุดแข็งของเมธอด filter()

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

▍ตัวอย่าง

สมมติว่าคุณต้องเลือกจากรายการราคาเฉพาะราคาที่มากกว่าหรือเท่ากับ 30 ลองใช้เมธอด filter() เพื่อแก้ไขปัญหานี้

อีเอส5

อีเอส6

7. วิธีการแผนที่ ()

เมธอด map() คล้ายกับเมธอด filter() ตรงที่ส่งคืนอาร์เรย์ใหม่ด้วย อย่างไรก็ตาม มันถูกใช้เพื่อแก้ไของค์ประกอบของอาร์เรย์ดั้งเดิม

▍จุดแข็งของเมธอด map()

• เมธอด map() หลีกเลี่ยงความจำเป็นในการเปลี่ยนองค์ประกอบของอาร์เรย์ดั้งเดิม
• สามารถใช้เพื่อแก้ไของค์ประกอบอาร์เรย์ได้อย่างสะดวก
• ช่วยเพิ่มความสามารถในการอ่านโค้ด

▍ตัวอย่าง

สมมติว่าคุณมีรายการสินค้าพร้อมราคา ผู้จัดการของคุณต้องการ รายการใหม่สินค้าที่ราคาลดลง 25% ลองใช้เมธอด map() เพื่อแก้ไขปัญหานี้

อีเอส5

อีเอส6

8. ลด () วิธีการ

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

▍จุดแข็งของวิธีการลด()

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

▍ตัวอย่าง

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

อีเอส5

อีเอส6

เพิ่มแท็ก

ในบทความนี้เราจะดูที่อาร์เรย์ JavaScript และส่วนประกอบต่างๆ JavaScript ได้รับการออกแบบมาอย่างดีเยี่ยมสำหรับการเขียนโปรแกรม อันที่จริงแล้ว มีการใช้ภาษา ECMAScript (มาตรฐาน ECMA-262)

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

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

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

ควรสังเกตว่ามีการลงทะเบียน JavaScript แล้ว เครื่องหมายการค้าข้อกังวลของออราเคิล คอร์ปอเรชั่น

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

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

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

การผลิตอาร์เรย์

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

• var ว่างเปล่า = ; //อาร์เรย์ว่าง;
• ตัวเลข var = ; //อาร์เรย์ที่มีส่วนประกอบดิจิทัลห้าส่วน
• vardiff = ; //อาร์เรย์ที่มีองค์ประกอบ 3 ชนิดที่แตกต่างกัน

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

วิธีที่สองในการสร้างอาร์เรย์คือการเรียกตัวออกแบบ Array() คุณสามารถเชิญเขาได้สามวิธี:

• การเรียกผู้ออกแบบโดยไม่มีข้อโต้แย้ง: var b - new Array() สิ่งนี้มีไว้สำหรับการสร้างอาร์เรย์ว่างซึ่งเทียบเท่ากับตัวอักษรว่าง
• Constructor ระบุค่าของส่วนประกอบ n ของอาร์เรย์อย่างชัดเจน: var b = new Array (1, 3, 5, 8, “string”, true) ในกรณีนี้ ผู้ออกแบบจะได้รับรายการอาร์กิวเมนต์ที่เปลี่ยนเป็นส่วนประกอบของอาร์เรย์ใหม่ อาร์กิวเมนต์จะถูกเขียนลงในอาร์เรย์ในตำแหน่งที่ระบุไว้
• การกำหนดพื้นที่สำหรับการกำหนดค่าในภายหลัง ซึ่งทำได้โดยการระบุตัวเลขเดียวที่อยู่ในวงเล็บเมื่อระบุอาร์เรย์: var b = new Array(5) วิธีการนี้การระบุเกี่ยวข้องกับการจัดสรรจำนวนส่วนประกอบที่ต้องการให้กับอาร์เรย์ (ซึ่งแต่ละรายการระบุว่าไม่ได้กำหนดไว้) โดยมีความเป็นไปได้ในการกำหนดค่าในภายหลังในระหว่างกระบวนการนำเสนอ โดยปกติแบบฟอร์มนี้ใช้เพื่อจัดสรรอาร์เรย์ Javascript ล่วงหน้าซึ่งทราบความยาวล่วงหน้า

การเขียน การอ่าน และการบวกรายละเอียดอาร์เรย์

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

ควรสังเกตว่าอาร์เรย์ JavaScript สามารถจัดเก็บองค์ประกอบจำนวนเท่าใดก็ได้ทุกประเภท

ความยาวอาร์เรย์

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

เพื่อให้องค์ประกอบสุดท้ายของอาร์เรย์ปรากฏขึ้น คุณสามารถใช้คุณสมบัติความยาวได้

ส่วนสุดท้ายมีดัชนีน้อยกว่าขนาดอาร์เรย์หนึ่งรายการ ท้ายที่สุดแล้ว การนับถอยหลังจะเริ่มต้นจากศูนย์เสมอ โอ้จาวาสคริปต์นี้! ความยาวของอาร์เรย์ขึ้นอยู่กับจำนวนองค์ประกอบที่แน่นอน ดังนั้น หากคุณไม่รู้ว่าควรมีจำนวนเท่าใด แต่คุณต้องเข้าถึงองค์ประกอบสุดท้ายของอาร์เรย์ คุณจะต้องใช้สัญลักษณ์: v.length - 1

วนซ้ำรายละเอียดอาร์เรย์

บ่อยครั้งที่คุณสมบัติ length ถูกใช้เพื่อวนซ้ำรายละเอียดของอาร์เรย์ในลูป:

• ผลไม้ var = ["สตรอเบอร์รี่", "พีช", "แอปเปิ้ล", "กล้วย"];
• สำหรับ (var I = 0; i< fruits.lenght; i++);
• document.write(ผลไม้[i] + "...")

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

บางครั้งการวนซ้ำยังใช้เพื่อเริ่มต้นส่วนประกอบต่างๆ

ขยายและตัดทอนอาร์เรย์

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

มันค่อนข้างง่ายที่จะล้างอาร์เรย์เช่นนี้: foo.length = 0

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

การถอดชิ้นส่วนรูปแบบ

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

อาร์เรย์หลายมิติ

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

อาร์เรย์ที่เชื่อมโยง

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

เอาต์พุตอาร์เรย์

เราจะเรียนรู้อะไรเกี่ยวกับ JavaScript ตอนนี้? การแสดงอาร์เรย์ในกล่องโต้ตอบ (บนหน้าจอมอนิเตอร์) รวมถึงการแสดงค่าของส่วนประกอบอาร์เรย์

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

การทำความสะอาด

เพื่อเป็นการกรอง อาร์เรย์จาวาสคริปต์คุณต้องรีเซ็ตความยาว:

• var myArray = ;
• myArray.length = 0

• ชัดเจน: ฟังก์ชั่น() (;
• นี่.ความยาว = 0;
• คืนสิ่งนี้;

การเพิ่มและการลบส่วนประกอบ

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

• เมื่อเพิ่มคุณสมบัติดิจิทัลที่ไม่รู้จัก i หากความยาวเท่ากับหรือน้อยกว่า i ความยาวจะถูกกำหนดให้เป็น i+1
• เมื่อคุณภาพเปลี่ยนความยาว การกระทำต่อไปนี้: หากค่าที่กำหนดน้อยกว่าศูนย์ แสดงว่า RangeError ถูกส่งออกไป คุณสมบัติที่เป็นตัวเลขและดัชนีทั้งหมดที่เท่ากับความยาวใหม่และที่มากกว่าจะถูกตัดออก

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

วิธีการไม่เปลี่ยน, เปลี่ยน, ป๊อปและพุช

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

วิธีการ push จะย้ายส่วนที่ส่งผ่านไปยังจุดสิ้นสุดของอาร์เรย์ วิธีการป๊อปคืนองค์ประกอบต่อท้ายและลบออก

โดยทั่วไปแล้วใน อินเทอร์เน็ตเอ็กซ์พลอเรอร์ก่อนหน้าเวอร์ชันที่แปด unshift อาจส่งคืนค่าความยาวใหม่ ดังนั้นจึงเป็นการดีกว่าที่จะไม่พึ่งพาค่าที่ส่งคืนจากการไม่เปลี่ยน

การเพิ่มและกำจัดส่วนที่อยู่ตรงกลางอาร์เรย์

หากฉันต้องการลบอาร์เรย์ JavaScript ฉันควรทำอย่างไร? วิธีการประกบกันเป็นที่รู้กันว่ามีลายเซ็นต์ Array.prototype.splice

โดยจะลบส่วนประกอบ DeleteCount ออกจากอาร์เรย์ โดยเริ่มจากตัวบ่งชี้เริ่มต้น หากมีการส่งผ่านอาร์กิวเมนต์มากกว่าสองอาร์กิวเมนต์ อาร์กิวเมนต์ที่ตามมาทั้งหมดในอาร์เรย์จะถูกวางแทนอาร์กิวเมนต์ที่ถูกตัดออก หากการเริ่มต้นเป็นลบ ดัชนีที่การถอนจะดำเนินการต่อจะเท่ากับความยาว + เริ่มต้น อาร์เรย์จะถูกส่งกลับจากองค์ประกอบที่ถูกลบออก

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

ในเวอร์ชันที่ง่ายที่สุด หากคุณต้องการลบส่วนประกอบที่มีดัชนี i คุณจะต้องขอวิธีประกบกันจากอาร์เรย์ด้วยพารามิเตอร์ i และ 1

ตามหลักการแล้ว พารามิเตอร์ที่สองของวิธี splice เป็นทางเลือก แต่พฤติกรรมของฟังก์ชันที่มีหนึ่งอาร์กิวเมนต์จะแตกต่างกันในแต่ละเบราว์เซอร์

ตัวอย่างเช่น ใน Firefox ใน Opera เวอร์ชันล่าสุด ใน Safari และใน Chrome รายละเอียดทั้งหมดจนถึงจุดสิ้นสุดของอาร์เรย์จะถูกลบออก

ไม่มีส่วนประกอบใดจะถูกกำจัดใน IE ในรูปแบบแรกของ Opera เป็นไปไม่ได้ที่จะคาดเดาพฤติกรรม - ส่วนหนึ่งที่มีดัชนีเริ่มต้น - 1 จะถูกลบออก ดังนั้นจึงจำเป็นต้องลบออกเสมอ วิธีนี้ผ่านอย่างน้อยสององค์ประกอบ

กุญแจ

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

ค้นหา (กุญแจ)

INSERT (ค่า, คีย์)

ลบ (คีย์)

สันนิษฐานว่าสองคู่ที่มีคีย์คล้ายกันไม่สามารถจัดเก็บไว้ในอาร์เรย์ที่เชื่อมโยงได้ ในคู่ k + v นั้น v เรียกว่าค่าที่เกี่ยวข้องกับคีย์ k ความหมายและชื่อของการดำเนินการข้างต้นอาจแตกต่างกันในการใช้งานที่แตกต่างกันของอาร์เรย์ดังกล่าว

ดังนั้น การดำเนินการ FIND (คีย์) จะส่งกลับค่าที่เกี่ยวข้องกับคีย์ที่กำหนด หรืออ็อบเจ็กต์ UNDEF เฉพาะบางรายการที่บ่งชี้ว่าไม่มีค่าที่เกี่ยวข้องกับคีย์ที่กำหนด การดำเนินการอีกสองรายการจะไม่ส่งคืนสิ่งใดเลย (ยกเว้นว่าการดำเนินการสำเร็จหรือไม่)

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

อย่างไรก็ตามการรองรับอาร์เรย์ดังกล่าวนั้นมีการตีความหลายอย่าง ภาษาโปรแกรม ระดับสูงเช่น PHP, Perl, Ruby, Python, Tcl, JavaScript และอื่นๆ สำหรับภาษาที่ไม่มีเครื่องมือในตัวสำหรับการทำงานกับอาเรย์แบบเชื่อมโยงได้มีการสร้างการใช้งานจำนวนมหาศาลในรูปแบบของไลบรารี

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

ส่วนขยายที่เชื่อมโยง

ควรสังเกตว่าส่วนใหญ่ ส่วนขยายที่รู้จักรวมถึงการดำเนินการต่อไปนี้:

• แต่ละ - “ผ่าน” คู่ที่บันทึกไว้ทั้งหมด
• CLEAR - ลบบันทึกทั้งหมด
• MIN - ค้นหาคู่ที่มีค่าคีย์น้อยที่สุด
• MAX - ค้นหาคู่ที่มีค่าคีย์มากที่สุด

สองตัวเลือกสุดท้ายต้องการให้คีย์ระบุการดำเนินการเปรียบเทียบ

การใช้งานอาเรย์แบบเชื่อมโยง

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

การใช้งานที่รู้จักกันดีที่สุดคือการใช้งานที่อิงตามแผนผังการค้นหาต่างๆ ตัวอย่างเช่น ในโปรแกรมอ่าน C++ STL ทั่วไป คอนเทนเนอร์แผนที่จะถูกนำมาใช้โดยอิงจากต้นมะฮอกกานีสีดำ สไตล์ Ruby, Tcl, Python ใช้ตารางแฮชประเภทเดียว มีการใช้งานอื่น ๆ

โดยทั่วไปแล้ว การใช้งานแต่ละครั้งจะมีข้อเสียและข้อดีของตัวเอง สิ่งสำคัญคือต้องดำเนินการทั้งสามการกระทำโดยเฉลี่ยและแตกต่างกันนิดหน่อยที่แย่ที่สุดในช่วงเวลา O(log n) โดยที่ n คือจำนวนคู่ปัจจุบันที่ถูกบันทึกไว้ สำหรับแผนผังการค้นหาที่ตรงกัน (รวมถึงต้นไม้สีดำ-แดง) จะต้องเป็นไปตามเงื่อนไขนี้

การใช้งานตามตารางแฮชเป็นที่ทราบกันว่ามีเวลาเฉลี่ย O(1) ซึ่งดีกว่าการใช้งานตามแผนผังการค้นหา แน่นอนว่า นี่ไม่ได้รับประกันการดำเนินการแต่ละรายการด้วยความเร็วสูง: เวลา INSERT ที่แย่ที่สุดจะแสดงเป็น O(n) กระบวนการ INSERT ทำงานอยู่ เวลานานเมื่อปัจจัยการเติมถึงจุดสูงสุดและจำเป็นต้องสร้างดัชนีตารางแฮชใหม่

อย่างไรก็ตาม รายการแฮชเหล่านี้ไม่ดีเนื่องจากไม่สามารถใช้เพื่อดำเนินการอย่างรวดเร็วได้ การดำเนินการเพิ่มเติม MAX, MIN และอัลกอริธึมสำหรับการสำรวจคู่ที่บันทึกไว้ทั้งหมดตามลำดับคีย์จากมากไปหาน้อย

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

ในบทความนี้ เราจะดูเทคนิคที่ไม่ค่อยมีใครรู้จักสามเทคนิคที่สามารถนำมาใช้เมื่อทำงานกับอาร์เรย์

1. การเพิ่มคุณสมบัติที่กำหนดเองให้กับอาร์เรย์

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

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

2. การเข้าถึงองค์ประกอบอาร์เรย์ภายในลูป

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

ECMAScript6 แนะนำวิธีการเลื่อนดูอาร์เรย์โดยไม่ต้องใช้ดัชนี แต่ใช้ for...of loop ใหม่

for...of loop ได้รับการออกแบบมาเพื่อวนซ้ำองค์ประกอบของอาร์เรย์โดยไม่ส่งผลกระทบต่อดัชนีขององค์ประกอบ

Var ary = ["ส้ม", "แอปเปิ้ล", "ลิ้นจี่"]; for (let item of ary)( console.log(item); ) // "orange", "apple", "lychee" สำหรับการเปรียบเทียบ: ส่งออกดัชนีรายการใน for loop var ary = ["ส้ม", "แอปเปิ้ล", "ลิ้นจี่"]; สำหรับ (var item = 0; item< ary.length; item++){ console.log(item); } // 0, 1, 2

3. จำนวนองค์ประกอบไม่ใช่ขนาดของอาร์เรย์

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

คุณสมบัติความยาวมีความคลุมเครือมาก หากต้องการตรวจสอบสิ่งนี้เพียงดูที่การจัดการต่อไปนี้:

วาร์อารี่ = ; ary.ความยาว = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6

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

วาร์อารี่ = ; ary.ความยาว = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 console.log (0 ใน ary); // เท็จ

ในกรณีนี้ มันจะยุติธรรมที่จะเรียกอาร์เรย์อารีว่า "เบาบาง"

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

วาร์อารี่ = ; ary.ความยาว = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 ary.length = 2; console.log(ary.length); // 2 console.log(ary); // ไม่ได้กำหนด

• การแปล

• I. การวนซ้ำอาร์เรย์จริง
  1. สำหรับแต่ละวิธีและวิธีการที่เกี่ยวข้อง
  2. สำหรับวง
  3. การใช้งานที่เหมาะสมเพื่อ...ในวง
  4. for...of loop (การใช้ตัววนซ้ำโดยนัย)
  5. การใช้ตัววนซ้ำอย่างชัดเจน
• 1. การใช้เมธอดเพื่อวนซ้ำอาร์เรย์จริง
  2. แปลงเป็นอาร์เรย์จริง
  3. หมายเหตุเกี่ยวกับออบเจ็กต์รันไทม์

I. การวนซ้ำอาร์เรย์จริง

บน ช่วงเวลานี้มีสามวิธีในการวนซ้ำองค์ประกอบของอาร์เรย์จริง:

1. วิธีการ Array.prototype.forEach ;
2. คลาสสิกสำหรับวง
3. สร้าง "อย่างถูกต้อง" สำหรับ...ในลูป

นอกจากนี้ เร็วๆ นี้ ด้วยการถือกำเนิดของมาตรฐาน ECMAScript 6 (ES 6) ใหม่ คาดว่าจะมีอีกสองวิธี:

1. for...of loop (การใช้ตัววนซ้ำโดยนัย);
2. การใช้ตัววนซ้ำอย่างชัดเจน

1. วิธี forEach และวิธีการที่เกี่ยวข้อง

หากโครงการของคุณได้รับการออกแบบมาเพื่อรองรับคุณสมบัติของมาตรฐาน ECMAScript 5 (ES5) คุณสามารถใช้นวัตกรรมอย่างใดอย่างหนึ่ง - วิธี forEach

ตัวอย่างการใช้งาน:
วาร์ = ["a", "b", "c"]; a.forEach(ฟังก์ชั่น(รายการ) ( console.log(รายการ); ));
โดยทั่วไป การใช้ forEach จำเป็นต้องเชื่อมต่อไลบรารีการจำลอง es5-shim สำหรับเบราว์เซอร์ที่ไม่มี การสนับสนุนพื้นเมืองวิธีนี้ ซึ่งรวมถึง IE 8 ขึ้นไป รุ่นแรกๆซึ่งยังคงใช้อยู่ที่นี่และที่นั่น

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

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

ForEach ได้รับการออกแบบมาเพื่อวนซ้ำองค์ประกอบทั้งหมดของอาร์เรย์ แต่นอกจากนั้น ES5 ยังมีวิธีที่มีประโยชน์อีกมากมายสำหรับการวนซ้ำองค์ประกอบทั้งหมดหรือบางส่วน พร้อมทั้งดำเนินการบางอย่างกับองค์ประกอบเหล่านั้น:

• every - ส่งคืน true หากแต่ละองค์ประกอบของอาร์เรย์ callback ส่งคืนค่าที่สามารถแปลงเป็น true ได้
• some - คืนค่าจริงหากองค์ประกอบอย่างน้อยหนึ่งรายการในอาร์เรย์ที่เรียกกลับจะส่งกลับค่าที่สามารถแปลงเป็นจริงได้
• ตัวกรอง - สร้างอาร์เรย์ใหม่ที่มีองค์ประกอบของอาร์เรย์เดิมซึ่งการเรียกกลับส่งคืน true
• map - สร้างอาร์เรย์ใหม่ซึ่งประกอบด้วยค่าที่ส่งคืนโดยการเรียกกลับ
• ลด - ลดอาร์เรย์ให้เป็นค่าเดียว โดยใช้การเรียกกลับไปยังแต่ละองค์ประกอบของอาร์เรย์ตามลำดับ โดยเริ่มจากค่าแรก (มีประโยชน์สำหรับการคำนวณผลรวมขององค์ประกอบอาร์เรย์และฟังก์ชันสรุปอื่นๆ)
• ลดขวา - ทำงานคล้ายกับการลด แต่วนซ้ำผ่านองค์ประกอบในลำดับย้อนกลับ

2. สำหรับวง

เก่าดีสำหรับกฎเกณฑ์:

วาร์ = ["a", "b", "c"]; ดัชนี var; สำหรับ (ดัชนี = 0; ดัชนี< a.length; ++index) { console.log(a); }
หากความยาวของอาร์เรย์คงที่ตลอดทั้งลูป และตัวลูปนั้นอยู่ในส่วนที่มีความสำคัญต่อประสิทธิภาพการทำงานของโค้ด (ซึ่งไม่น่าจะเป็นไปได้) คุณสามารถใช้ฟังก์ชัน "เหมาะสมกว่า" ได้ รุ่นสำหรับด้วยการจัดเก็บความยาวของอาเรย์:

วาร์ = ["a", "b", "c"]; ดัชนี var, len; สำหรับ (ดัชนี = 0, len = a.length; ดัชนี< len; ++index) { console.log(a); }
ตามทฤษฎีแล้ว โค้ดนี้ควรจะทำงานเร็วกว่าโค้ดก่อนหน้าเล็กน้อย

หากลำดับขององค์ประกอบไม่สำคัญคุณสามารถไปไกลกว่านี้ในแง่ของการปรับให้เหมาะสมและกำจัดตัวแปรสำหรับจัดเก็บความยาวของอาเรย์โดยเปลี่ยนลำดับการค้นหาเป็นแบบย้อนกลับ:

วาร์ = ["a", "b", "c"]; ดัชนี var; สำหรับ (ดัชนี = a.length - 1; ดัชนี >= 0; --index) ( console.log(a); )
อย่างไรก็ตาม ในเอ็นจิ้น JavaScript สมัยใหม่ เกมการปรับให้เหมาะสมนั้นมักจะไม่มีความหมายอะไรเลย

3. การใช้ for...in loop อย่างถูกต้อง

หากคุณได้รับการแนะนำให้ใช้ for...in ลูป โปรดจำไว้ว่าการวนซ้ำอาร์เรย์ไม่ใช่สิ่งที่ตั้งใจไว้ ตรงกันข้ามกับความเข้าใจผิดทั่วไป for...in loop จะไม่วนซ้ำดัชนีอาร์เรย์ แต่จะวนซ้ำผ่านคุณสมบัติที่นับได้ของอ็อบเจ็กต์

อย่างไรก็ตาม ในบางกรณี เช่น การวนซ้ำอาร์เรย์แบบกระจาย for...in อาจมีประโยชน์ได้ ตราบใดที่คุณใช้ความระมัดระวัง ดังที่แสดงในตัวอย่างด้านล่าง:

// a - อาร์เรย์กระจัดกระจาย var a = ; เป็น = "เป็น"; ก = "ข"; มี = "ค"; สำหรับ (คีย์ var ใน a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key<= 4294967294) { console.log(a); } }
ในตัวอย่างนี้ มีการดำเนินการตรวจสอบสองครั้งในการวนซ้ำแต่ละครั้ง:

1. ว่าอาร์เรย์มีคุณสมบัติของตัวเองที่เรียกว่าคีย์ (ไม่ได้สืบทอดมาจากต้นแบบ)
2. คีย์นั้นเป็นสตริงที่มีการแทนทศนิยมของจำนวนเต็มที่มีค่าน้อยกว่า 4294967294 เลขท้ายมาจากไหน? จากคำจำกัดความของดัชนีอาร์เรย์ใน ES5 ซึ่งแสดงให้เห็นว่าดัชนีสูงสุดที่องค์ประกอบในอาร์เรย์สามารถมีได้คือ: (2^32 - 2) = 4294967294

แน่นอนว่าการตรวจสอบดังกล่าวจะใช้เวลาโดยไม่จำเป็นเมื่อดำเนินการวนซ้ำ แต่ในกรณีของอาร์เรย์แบบกระจาย วิธีการนี้จะมีประสิทธิภาพมากกว่าการวนซ้ำ เนื่องจากในกรณีนี้เฉพาะองค์ประกอบที่กำหนดไว้อย่างชัดเจนในอาร์เรย์เท่านั้นที่จะถูกวนซ้ำ ดังนั้น ในตัวอย่างข้างต้น จะมีการดำเนินการวนซ้ำเพียง 3 ครั้งเท่านั้น (สำหรับดัชนี 0, 10 และ 10,000) เทียบกับ 10,001 ในลูป for

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

ฟังก์ชั่น arrayHasOwnIndex(array, key) ( return array.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key<= 4294967294; }
จากนั้นเนื้อความของลูปจากตัวอย่างจะลดลงอย่างมาก:

สำหรับ (ป้อน a) ( if (arrayHasOwnIndex(a, key)) ( console.log(a); ) )
รหัสตรวจสอบที่กล่าวถึงข้างต้นเป็นแบบสากลเหมาะสำหรับทุกกรณี แต่คุณสามารถใช้เวอร์ชันที่สั้นกว่าได้ แม้ว่าจะไม่ถูกต้องอย่างเป็นทางการทั้งหมด แต่ก็เหมาะสำหรับกรณีส่วนใหญ่:

สำหรับ (ป้อน a) ( if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) ( console.log(a); ) )

4. For...of loop (การใช้ตัววนซ้ำโดยนัย)

ES6 ซึ่งยังอยู่ในสถานะแบบร่าง ควรแนะนำตัววนซ้ำกับ JavaScript

ตัววนซ้ำ เป็นโปรโตคอลที่ดำเนินการโดยวัตถุที่กำหนดวิธีมาตรฐานในการรับลำดับของค่า (จำกัด หรือไม่มีที่สิ้นสุด)
ตัววนซ้ำเป็นวัตถุที่กำหนดวิธีการถัดไป () - ฟังก์ชันไม่มีอาร์กิวเมนต์ที่ส่งคืนวัตถุที่มีคุณสมบัติสองประการ:

1. เสร็จสิ้น (บูลีน) - เป็นจริงหากตัววนซ้ำถึงจุดสิ้นสุดของลำดับที่สามารถวนซ้ำได้ มิฉะนั้นค่าจะเป็นเท็จ
2. ค่า - กำหนดค่าที่ส่งคืนโดยตัววนซ้ำ อาจไม่ได้กำหนด (หายไป) หากคุณสมบัติที่ทำเสร็จแล้วเป็นจริง

วัตถุในตัวมากมายรวมถึง อาร์เรย์จริงจะมีตัววนซ้ำตามค่าเริ่มต้น วิธีที่ง่ายที่สุดในการใช้ตัววนซ้ำบนอาร์เรย์จริงคือการใช้ new for...of build

ตัวอย่างการใช้ for...of:

วาร์วาล; วาร์ = ["a", "b", "c"]; สำหรับ (val ของ a) ( console.log(val); )
ในตัวอย่างด้านบน for...of loop จะเรียกตัววนซ้ำของอ็อบเจ็กต์ Array โดยปริยายเพื่อรับค่าแต่ละค่าของอาร์เรย์

5. การใช้ตัววนซ้ำอย่างชัดเจน

ตัววนซ้ำสามารถใช้งานได้อย่างชัดเจน แต่ในกรณีนี้โค้ดจะซับซ้อนกว่ามากเมื่อเทียบกับ for...of loop มีลักษณะดังนี้:

วาร์ = ["a", "b", "c"]; var มัน = a.รายการ (); รายการ var; ในขณะที่ (!(entry = it.next()).done) ( console.log(entry.value); )
ในตัวอย่างนี้ เมธอด Array.prototype.entries ส่งคืนตัววนซ้ำที่ใช้เพื่อแสดงค่าของอาร์เรย์ ในการวนซ้ำแต่ละครั้ง entry.value จะมีอาร์เรย์ของรูปแบบ [key, value]

ครั้งที่สอง วนซ้ำวัตถุที่มีลักษณะคล้ายอาเรย์

นอกจากอาร์เรย์จริงแล้ว ใน JavaScript ยังมีอีกด้วย วัตถุที่มีลักษณะคล้ายอาร์เรย์ - สิ่งที่เหมือนกันกับอาร์เรย์จริงคือมีคุณสมบัติความยาวและคุณสมบัติที่ตั้งชื่อเป็นตัวเลขที่สอดคล้องกับองค์ประกอบของอาร์เรย์ ตัวอย่างได้แก่ DOM ของคอลเลกชัน NodeList และอาร์กิวเมนต์ pseudo-array ที่พร้อมใช้งานภายในฟังก์ชัน/วิธีการใดๆ

1. การใช้วิธีการวนซ้ำอาร์เรย์จริง

อย่างน้อยที่สุด ส่วนใหญ่ หรือทั้งหมด ถ้าไม่ใช่ทั้งหมด วิธีการวนซ้ำบนอาร์เรย์จริงสามารถใช้เพื่อวนซ้ำบนวัตถุที่มีลักษณะคล้ายอาร์เรย์

โครงสร้าง for และ for...in สามารถนำไปใช้กับวัตถุที่มีลักษณะคล้ายอาร์เรย์ในลักษณะเดียวกับอาร์เรย์จริงทุกประการ

ForEach และเมธอด Array.prototype อื่นๆ ยังใช้กับอ็อบเจ็กต์ที่มีลักษณะคล้ายอาร์เรย์ด้วย ในการดำเนินการนี้ คุณต้องใช้ Function.call หรือ Function.apply

ตัวอย่างเช่น หากคุณต้องการใช้ forEach กับคุณสมบัติ childNodes ของออบเจ็กต์ Node คุณจะทำดังนี้:

Array.prototype.forEach.call(node.childNodes, function(child) ( // ทำบางสิ่งกับวัตถุลูก));
เพื่อให้เคล็ดลับนี้ง่ายต่อการนำมาใช้ซ้ำ คุณสามารถประกาศการอ้างอิงถึงเมธอด Array.prototype.forEach ในตัวแปรแยกต่างหากและใช้เป็นทางลัดได้:

// (สมมติว่าโค้ดด้านล่างทั้งหมดอยู่ในขอบเขตเดียวกัน) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // ทำบางสิ่งกับวัตถุลูก));
หากวัตถุที่มีลักษณะคล้ายอาร์เรย์มีตัววนซ้ำ ก็สามารถนำมาใช้โดยตรงหรือโดยปริยายเพื่อวนซ้ำวัตถุในลักษณะเดียวกับอาร์เรย์จริง

2. แปลงเป็นอาร์เรย์จริง

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

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
ตัวอย่างเช่น หากคุณต้องการแปลงคอลเลกชัน NodeList เป็นอาร์เรย์จริง คุณจะต้องมีโค้ดดังนี้:

Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
อัปเดต: ตามที่ระบุไว้ในความคิดเห็น

มาเรียนรู้วิธีสร้างดัชนีอาร์เรย์ใน js ลบและเพิ่มองค์ประกอบต่างๆ กัน

อาร์เรย์ใน JavaScript เป็นวัตถุส่วนกลางที่ออกแบบมาเพื่อจัดเก็บรายการค่า

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

อาร์เรย์คือชุดของค่าที่เรียงลำดับกัน แต่ละค่าเรียกว่าองค์ประกอบและมีหมายเลขของตัวเองเรียกว่าดัชนี

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

ลำดับขององค์ประกอบอาร์เรย์เริ่มต้นจาก 0 ปรากฎว่าอาร์เรย์จะมีดัชนีชดเชยหนึ่งเสมอ: องค์ประกอบแรกจะมีดัชนี 0, 1 ตัวที่สอง ฯลฯ

นี่คือตัวอย่างของอาร์เรย์ที่มีองค์ประกอบประเภทต่างๆ:

การสร้าง (ประกาศ) อาร์เรย์

อาร์เรย์มีความสะดวกมากเนื่องจากสามารถจัดเก็บข้อมูลได้มากเท่าที่คุณต้องการ ขนาดสูงสุดที่เป็นไปได้ของอาร์เรย์ js คือ 2 32 องค์ประกอบ

เราจำเป็นต้องบอก JavaScript ว่าเราต้องการสร้างอาร์เรย์ มีสองตัวเลือกสำหรับสิ่งนี้: ค่าในวงเล็บเหลี่ยมหรือคำหลักใหม่

สัญกรณ์สั้นๆ: การใช้วงเล็บเหลี่ยม

รายการค่าที่คั่นด้วยเครื่องหมายจุลภาคซึ่งอยู่ในวงเล็บเหลี่ยม

var myArray = [ "แจ็ค", "ซอว์เยอร์", "จอห์น", "เดสมอนด์" ];

เนื้อหาของอาร์เรย์ถูกกำหนดโดยสิ่งที่อยู่ระหว่างวงเล็บเหลี่ยม แต่ละค่าจะถูกคั่นด้วยเครื่องหมายจุลภาค

ค่าจะถูกระบุในลักษณะเดียวกับตัวแปรง่ายๆ นั่นคือ สตริงต้องถูกประกาศไว้ในเครื่องหมายคำพูด เป็นต้น

หากต้องการประกาศอาร์เรย์ว่าง ให้เว้นวงเล็บว่างไว้:

var myArray = ;

รายการแบบยาว: ใช้ตัวสร้าง Array()

var LostArray = อาร์เรย์ใหม่ ("แจ็ค", "ซอว์เยอร์", "จอห์น", "เดสมอนด์"); var twinPeaksArray = อาร์เรย์ใหม่ ("ลอร่า", 2, ["บ๊อบ", "Leland", "เดล"]);

คีย์เวิร์ดใหม่บอกให้ JavaScript สร้างอาร์เรย์ใหม่ที่มีค่าถูกส่งเป็นพารามิเตอร์

หากคุณทราบล่วงหน้าว่าจะมีองค์ประกอบจำนวนเท่าใดในอาร์เรย์ของคุณ คุณสามารถส่งค่านี้ไปยัง Constructor ได้ทันที

var myArray = อาร์เรย์ใหม่ (80);

นิพจน์ด้านบนจะสร้างอาร์เรย์ว่างซึ่งประกอบด้วยช่อง 80 ช่องที่มีค่าที่ไม่ได้กำหนด

ประกาศอาร์เรย์ว่าง:

var myArray = อาร์เรย์ใหม่ ();

การเข้าถึงองค์ประกอบอาร์เรย์

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

var myArray = ["แจ็ค", "ซอว์เยอร์", "จอห์น", "เดสมอนด์"]; console.log(myArray); // พิมพ์ "Jack" console.log(myArray); // พิมพ์ “เดสมอนด์”

อาร์เรย์สามารถมีได้หลายระดับ กล่าวคือ แต่ละองค์ประกอบสามารถเป็นอาร์เรย์ได้ ผลลัพธ์จะเป็นอาร์เรย์ js สองมิติ เราจะเข้าถึงอาร์เรย์เหล่านี้ซึ่งอยู่ภายในอาร์เรย์อื่นได้อย่างไร - “ อาร์เรย์หลายมิติ»?

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

var familyArray = ["มาร์จ", "โฮเมอร์", ["บาร์ต", "ลิซ่า", "แม็กกี้"]];

คุณสามารถจินตนาการได้ดังนี้:

วิธีอ้างอิงถึงค่า "ลิซ่า":

var lisa = ครอบครัวอาร์เรย์; console.log(ลิซ่า); // พิมพ์ "ลิซ่า"

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

การเพิ่มองค์ประกอบให้กับอาร์เรย์

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

var myArray = ["เคท", "ดวงอาทิตย์"]; myArray = "จูเลียต"; console.log(myArray); // พิมพ์ "เคท ซัน จูเลียต"

จะเกิดอะไรขึ้นถ้าฉันประกาศองค์ประกอบด้วยดัชนีที่ไม่มีองค์ประกอบอื่นก่อนหน้านั้น อาร์เรย์จะสร้างองค์ประกอบที่ขาดหายไปทั้งหมดและกำหนดค่า undef ให้กับพวกเขา:

var myArray = ["เคท", "ดวงอาทิตย์"]; myArray = "จูเลียต"; console.log(myArray.length); // พิมพ์ "6" console.log(myArray); // พิมพ์ ["Kate", "Sung", ไม่ได้กำหนด, ไม่ได้กำหนด, ไม่ได้กำหนด, "Juliet"]

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

วิธีการกด ()

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

var myArray = ["เคท", "สุด"]; myArray.push("จูเลียต"); // เพิ่มองค์ประกอบ "Juliet" ที่ส่วนท้ายของอาร์เรย์ myArray.push("Libby", "Shannon"); // เพิ่มองค์ประกอบ "Libby" และ "Shannon" ที่ส่วนท้ายของ array console.log(myaArray ); // พิมพ์ ["Kate", "Soon", "Juliet", "Libby", "Shannon"]

วิธีการยกเลิกการเปลี่ยน ()

unshift() วิธีการทำงานเหมือนกับ push() ยกเว้นว่าจะเพิ่มองค์ประกอบที่จุดเริ่มต้นของอาร์เรย์

var myArray = ["เคท", "ดวงอาทิตย์"]; myArray.unshift("จูเลียต"); // เพิ่มองค์ประกอบ "Juliet" ที่จุดเริ่มต้นของอาร์เรย์ myArray.unshift("Libby", "Shannon"); // เพิ่มองค์ประกอบ "Libby" และ "Shannon" ที่จุดเริ่มต้นของอาร์เรย์ console.log(myArray); // เอาต์พุต ["ลิบบี้", "แชนนอน", "จูเลียต", "เคท", "เร็ว ๆ นี้"]

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

วิธีการ pop() และ shift()

pop() และ shift() วิธีการลบองค์ประกอบสุดท้ายและองค์ประกอบแรกของอาร์เรย์ตามลำดับ:

var myArray = ["แจ็ค", "ซอว์เยอร์", "จอห์น", "เดสมอนด์", "เคท"]; myArray.pop(); // ลบองค์ประกอบ "Kate" myArray.shift(); // ลบองค์ประกอบ "Jack" console.log(myArray); // พิมพ์ ["ซอว์เยอร์", "จอห์น", "เดสมอนด์"]

วิธีการประกบกัน ()

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

ในตัวอย่างต่อไปนี้ splice() วิธีการเพิ่มสององค์ประกอบเริ่มต้นที่ดัชนี 2 ( นั่นคือจากองค์ประกอบที่สาม):

var FruitArray = ["แอปเปิ้ล", "พีช", "ส้ม", "มะนาว", "มะนาว", "เชอร์รี่"]; FruitArray.splice(2, 0, "แตงโม", "กล้วย"); console.log(ผลไม้อาร์เรย์); // เอาต์พุต ["แอปเปิ้ล", "พีช", "แตงโม", "กล้วย", "ส้ม", "มะนาว", "มะนาว", "เชอร์รี่"]

พารามิเตอร์แรกของ splice() วิธีการคือดัชนี โดยจะระบุว่าองค์ประกอบตำแหน่งใดที่ควรเพิ่ม/ลบ ในตัวอย่างของเรา เราเลือกดัชนี 2 ( แปลว่า “สีส้ม”).

พารามิเตอร์ที่สองคือจำนวนองค์ประกอบที่ต้องลบออก เราระบุค่าเป็น 0 ดังนั้นจึงไม่มีอะไรถูกลบ

พารามิเตอร์ต่อไปนี้เป็นทางเลือก พวกเขาเพิ่มค่าใหม่ให้กับอาร์เรย์ ในกรณีของเรา เราต้องเพิ่ม "แตง" และ "กล้วย" โดยเริ่มจากดัชนี 2