3 สิ่งที่คุณไม่รู้เกี่ยวกับอาร์เรย์ของ JavaScript
อาร์เรย์ เป็นคุณสมบัติที่ใช้กันอย่างแพร่หลายของภาษาการเขียนโปรแกรม; พวกเขาเป็น ตัวแปรพิเศษ ที่สามารถใช้เพื่อเก็บค่าหลายค่าในเวลาเดียวกัน อย่างไรก็ตามเมื่อพูดถึง JavaScript ก็ง่ายเหมือนการเรียนรู้มีการสำรวจอยู่เสมอ.
ในโพสต์นี้เราจะมาดูคุณสมบัติที่สำคัญน้อยกว่าสามประการที่รู้จักกันดีของอาร์เรย์ JavaScript ที่คุณอาจไม่เคยรู้จักมาก่อน.
1. เพิ่มคุณสมบัติแบบกำหนดเองไปยังอาร์เรย์
หากคุณต้องกัดเซาะอินเทอร์เน็ตเพื่อค้นหาคำจำกัดความของอาร์เรย์ JavaScript อย่างละเอียดคุณจะพบว่าเกือบทุกแหล่งที่มาโดยไม่ล้มเหลวจะแสดงรายการอาร์เรย์ตามที่มันเป็น จริงๆ คือ, วัตถุ.
ในความเป็นจริงเกือบทุกสิ่งที่เราจัดการใน JavaScript จะ กลายเป็นวัตถุ. JavaScript มีข้อมูลสองชนิด, วิทยาการ และ วัตถุ, แต่ ดึกดำบรรพ์จะถูกห่อหุ้มอยู่ภายในวัตถุ.
Array, Function, Date, เป็นต้น วัตถุ JavaScript ที่กำหนดไว้ล่วงหน้า ที่มีวิธีการในตัวคุณสมบัติและไวยากรณ์มาตรฐานของตนเอง.
อาร์เรย์ JavaScript สามารถมีได้ คุณสมบัติที่แตกต่างกันสามประเภท:
- ดัชนีของอาร์เรย์ นอกจากนี้ยังมีคุณสมบัติ
- คุณสมบัติในตัว
- คุณสมบัติที่กำหนดเอง คุณสามารถเพิ่มได้ด้วยตัวเอง
สองคนแรกเป็นที่รู้จักมากขึ้นคุณอาจใช้มันทุกวัน แต่เรามาดูกันอย่างรวดเร็วก่อนที่จะกระโดดลงไปว่าคุณสามารถเพิ่มคุณสมบัติที่กำหนดเองของคุณไปยังอาร์เรย์ได้อย่างไร.
ดัชนีเป็นคุณสมบัติ
อาร์เรย์ JavaScript ใช้ ไวยากรณ์ของวงเล็บเหลี่ยม, เช่น var ary = ["ส้ม", "แอปเปิ้ล", "ลิ้นจี่"];.
ดัชนีขององค์ประกอบอาร์เรย์นั้นเป็นพื้น คุณสมบัติ ที่ไหน ชื่อคุณสมบัติ เป็น จำนวนเต็มไม่ใช่ลบเสมอ.
คู่ดัชนีองค์ประกอบ ของอาเรย์นั้นคล้ายกับ คู่ของคีย์ - ค่า ของวัตถุ.
ดัชนีเป็นคุณลักษณะเฉพาะของวัตถุ Array และไม่เหมือนกับคุณสมบัติในตัวอื่น ๆ กำหนดด้วยไวยากรณ์ของวงเล็บเท่านั้น, เช่น ary [3] = "พีช";.
คุณสมบัติในตัว
อาร์เรย์ยังมี คุณสมบัติในตัว, เช่น array.length. ความยาว property มีค่าจำนวนเต็มที่ หมายถึงความยาวของอาร์เรย์.
โดยทั่วไปคุณสมบัติในตัวสามารถพบได้บ่อยในวัตถุ JavaScript ที่กำหนดไว้ล่วงหน้าเช่นอาร์เรย์ พร้อมกับวิธีการในตัวพวกเขาช่วย ปรับแต่งวัตถุทั่วไปเพื่อให้เหมาะกับความต้องการที่แตกต่างกัน.
คุณสมบัติในตัวสามารถเข้าถึงได้ด้วย object.key หรือ วัตถุ [ "สำคัญ"] วากยสัมพันธ์ ดังนั้นคุณสามารถเขียน Ary [ "ความยาว"] เพื่อเข้าถึงความยาวของอาร์เรย์.
สร้างคุณสมบัติที่กำหนดเองสำหรับวัตถุอาร์เรย์
ตอนนี้มาพูดถึงกัน เพิ่มคุณสมบัติของคุณเองเพื่ออาร์เรย์. อาร์เรย์เป็นวัตถุที่กำหนดไว้ล่วงหน้าซึ่งเก็บค่าชนิดต่าง ๆ ที่ดัชนีต่าง ๆ.
โดยปกติไม่จำเป็นต้องเพิ่มคุณสมบัติที่กำหนดเองในอาร์เรย์ นี่คือหนึ่งในเหตุผลที่ผู้เริ่มต้นมักจะไม่ได้สอนเกี่ยวกับคุณลักษณะนี้ ในความเป็นจริงถ้าคุณต้องการที่จะปฏิบัติต่ออาร์เรย์เหมือนวัตถุปกติโดยการเพิ่มคู่คีย์ - ค่าลงไปคุณก็อาจทำได้เช่นกัน ใช้วัตถุปกติสำหรับวัตถุประสงค์ของคุณ. แต่นี่ไม่ได้หมายความว่าไม่มี กรณีพิเศษ ซึ่งคุณสามารถใช้ประโยชน์จากความจริงที่ว่าอาเรย์เป็นวัตถุโดยการเพิ่มคุณสมบัติที่กำหนดเองหนึ่งรายการขึ้นไป.
ตัวอย่างเช่นคุณสามารถเพิ่มคุณสมบัติที่กำหนดเองไปยังอาร์เรย์ที่ ระบุ "ชนิด" หรือ "คลาส" ขององค์ประกอบ, เหมือนที่คุณเห็นในตัวอย่างด้านล่าง.
var ary = ["ส้ม", "แอปเปิ้ล", "ลิ้นจี่"]; ary.itemClass = "fruits"; console.log (ary + "คือ" + ary.itemClass); // "ส้ม, แอปเปิ้ล, ลิ้นจี่เป็นผลไม้"
โปรดทราบว่าคุณสมบัติที่กำหนดเองที่คุณเพิ่มลงในอาเรย์คือ นับ, ซึ่งหมายความว่ามันจะหยิบขึ้นมาโดยลูปเช่น สำหรับใน คำแถลง.
2. วนผ่านองค์ประกอบของแถวลำดับ
คุณอาจพูดว่า "ฉันรู้แล้ว" ซึ่งเป็นไปได้มากที่สุดคุณก็รู้วิธีผ่านองค์ประกอบต่างๆ แต่มันก็เป็นความจริงเช่นกันว่าการพูดว่า "วนลูปผ่านองค์ประกอบอาเรย์" นั้นเป็นนามธรรมเล็กน้อย ดัชนีของอาร์เรย์.
เนื่องจากดัชนีอาเรย์นั้นทำขึ้นเท่านั้น จำนวนเต็มไม่เป็นลบ, เราวนค่าจำนวนเต็มซ้ำโดยทั่วไปเริ่มจากศูนย์และสิ้นสุดที่ความยาวเต็มของอาร์เรย์จากนั้นใช้ค่าที่วนซ้ำเพื่อเข้าถึงองค์ประกอบอาร์เรย์ที่ดัชนีที่กำหนด.
อย่างไรก็ตามตั้งแต่ ECMAScript6 มีวิธีการ วนซ้ำโดยตรงผ่านค่าอาร์เรย์ โดยไม่รบกวนดัชนีและสามารถทำได้โดยใช้ สำหรับ ... จาก ห่วง.
ในอาเรย์ สำหรับ ... จาก วงจะวนซ้ำผ่านองค์ประกอบอาร์เรย์ ตามลำดับดัชนี, กล่าวอีกนัยหนึ่งมันจะจัดการกับการวนซ้ำดัชนีและการ ค่าอาร์เรย์ที่มีอยู่ ที่ดัชนีที่กำหนด ลูปนี้เหมาะอย่างยิ่งหากคุณต้องการวนลูปผ่านองค์ประกอบอาร์เรย์ทั้งหมดและทำงานกับมัน.
var ary = ["ส้ม", "แอปเปิ้ล", "ลิ้นจี่"]; สำหรับ (ปล่อยรายการของ ary) console.log (รายการ); // "ส้ม", "แอปเปิ้ล", "ลิ้นจี่"
สำหรับการเปรียบเทียบกับรุ่นปกติ สำหรับ วนเราได้รับดัชนีแทนค่าเป็นเอาท์พุท.
var ary = ["ส้ม", "แอปเปิ้ล", "ลิ้นจี่"]; สำหรับ (รายการ var = 0; รายการ < ary.length; item++) console.log(item); // 0, 1, 2
3. จำนวนองค์ประกอบไม่มีความยาว
โดยปกติแล้วเมื่อเราพูดถึง ความยาวของอาร์เรย์, เราคิดว่ามันเป็นจำนวนของค่าที่อาร์เรย์เก็บไว้หรือความยาวที่เรากำหนดให้กับอาร์เรย์ด้วยตนเอง อย่างไรก็ตามในความเป็นจริงความยาวของอาร์เรย์จะขึ้นอยู่กับ ดัชนีที่ใหญ่ที่สุดที่มีอยู่ ภายในของมัน.
ความยาวคือ คุณสมบัติที่ยืดหยุ่นมาก. ไม่ว่าคุณจะกำหนดความยาวของอาร์เรย์ไว้ล่วงหน้าหรือไม่ถ้าคุณเพิ่มค่าลงในอาร์เรย์ความยาวของอาร์เรย์ เพิ่มขึ้นเรื่อย ๆ.
var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6
ในตัวอย่างข้างต้นคุณจะเห็นว่าฉันให้อาร์เรย์เพียงหนึ่งค่าที่ดัชนี 5 และความยาวกลายเป็น 6 ตอนนี้ถ้าคุณคิดว่าโดยการเพิ่มค่าที่ดัชนี 5 อาร์เรย์จะสร้างดัชนี 0 ถึง 4 โดยอัตโนมัติ จากนั้น สมมติฐานของคุณไม่ถูกต้อง. มีจริงๆ ไม่มีดัชนีที่มีอยู่จาก 0 ถึง 4 ในอาร์เรย์นั้น คุณสามารถตรวจสอบได้โดยใช้ ใน ผู้ประกอบการ.
var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6 console.log (0 ใน ary); // false
อาเรย์ Ary คือสิ่งที่เราเรียกว่า "sparse" array, อาร์เรย์ที่มีดัชนี ไม่ได้สร้างอย่างต่อเนื่อง, และ มีช่องว่าง. ตรงกันข้ามของอาร์เรย์ "เบาบาง" คือ อาร์เรย์ "หนาแน่น" โดยที่ดัชนีมีอยู่อย่างต่อเนื่องในอาเรย์และจำนวนขององค์ประกอบนั้นเหมือนกันกับ ความยาว.
ความยาว สถานที่ให้บริการยังมีความสามารถใน ตัดทอนอาร์เรย์, ตรวจสอบให้แน่ใจว่ามีดัชนีสูงสุดในอาร์เรย์อยู่เสมอ น้อยกว่าตัวมันเอง, เช่น ความยาว มักจะเป็นตัวเลขที่มากกว่าดัชนีสูงสุดตามค่าเริ่มต้นเสมอ.
ในตัวอย่างด้านล่างคุณสามารถดูว่าเราสูญเสียองค์ประกอบที่ดัชนี 5 โดยการลด ความยาว ของ Ary แถว.
var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6 ary.length = 2; console.log (ary.length); // 2 console.log (ary [5]); // ไม่ได้กำหนด
อ่านเพิ่มเติม
- 10 คำศัพท์จาวาสคริปต์ที่คุณควรรู้
- คำสั่ง Javascript ที่ไม่ธรรมดา แต่มีประโยชน์ที่คุณควรทราบ
- การปรับแต่งโค้ดด้วย JS Hint - เครื่องมือสำหรับการใช้จาวาสคริปต์
