วัตถุ Array แสดงถึงชุดขององค์ประกอบ ช่วยในการรักษาชุดข้อมูลขนาดใหญ่เพื่อหลีกเลี่ยงความสับสนของตัวแปรหลายตัว ดังนั้นการเรียงลำดับจึง หากผู้ใช้ต้องการใช้เมธอดและคุณสมบัติเพิ่มเติมใดๆ กับออบเจกต์ Array ก็ไม่จำเป็นต้องใช้คุณสมบัติ/เมธอดใหม่นั้นทีละองค์ประกอบกับแต่ละองค์ประกอบ แต่สามารถทำได้อย่างมีประสิทธิภาพโดยใช้ JavaScript Array “ ต้นแบบ ” ตัวสร้าง ตัวสร้างนี้ช่วยในการใช้วิธีการและคุณสมบัติใหม่กับวัตถุ Array ที่ต้องการ
คู่มือนี้อธิบายการใช้ตัวสร้าง 'ต้นแบบ' ของ Array ใน JavaScript
วิธีการใช้ตัวสร้าง 'ต้นแบบ' อาร์เรย์ใน JavaScript?
อาร์เรย์ “ ต้นแบบ ” ตัวสร้างใช้เพื่อเพิ่มวิธีการและคุณสมบัติใหม่ให้กับวัตถุ Array ด้วยความช่วยเหลือของฟังก์ชัน JavaScript ใช้คุณสมบัติที่สร้างขึ้นสำหรับค่าอาร์เรย์ทั้งหมด เป็นชื่อและค่าตามค่าเริ่มต้น
ไวยากรณ์
Array.prototype.name = ค่า
ในไวยากรณ์ข้างต้น “ ชื่อ ” ระบุคุณสมบัติที่เพิ่มใหม่ด้วย “ ค่า ” ที่ใช้กับวัตถุ Array ทั้งหมด
มาใช้พร็อพเพอร์ตี้ที่กำหนดไว้ข้างต้นในทางปฏิบัติด้วยความช่วยเหลือของไวยากรณ์ของมัน
รหัส HTML
ขั้นแรก ดูรหัส HTML ที่ระบุไว้:
< หน้า > เดอะ 'ต้นแบบ' ตัวสร้างช่วย ใน การเพิ่มวิธีการใหม่ๆ / คุณสมบัติของ Array ที่กำหนด ( ) วัตถุ. หน้า >< ปุ่ม เมื่อคลิก = 'jsFunc()' > รับความยาวสตริงแต่ละอัน ปุ่ม >
< หน้า รหัส = 'ตัวอย่าง' > หน้า >
< หน้า รหัส = 'สำหรับ' > หน้า >
ในบรรทัดรหัสด้านบน:
- “ ” แท็กระบุคำสั่งย่อหน้า
- “ <ปุ่ม> ” แท็กฝังปุ่มด้วยเหตุการณ์ “onclick” เพื่อเรียกใช้ฟังก์ชันที่ระบุ “jsFunc()” เมื่อคลิกปุ่ม
- สองคนสุดท้าย” ” แท็กเพิ่มย่อหน้าว่างด้วยรหัสที่กำหนด 'ตัวอย่าง' และ 'ย่อหน้า' ตามลำดับ
บันทึก: โค้ด HTML นี้เป็นไปตามตัวอย่างทั้งหมดในคู่มือนี้
ตัวอย่างที่ 1: การใช้ตัวสร้าง 'ต้นแบบ' เพื่อนับความยาวของวัตถุอาร์เรย์โดยการเพิ่มเมธอดใหม่
ตัวอย่างนี้ใช้ตัวสร้าง 'ต้นแบบ' เพื่อนับความยาวของแต่ละสตริงภายในวัตถุ Array ด้วยความช่วยเหลือของวิธีการที่เพิ่มเข้ามาใหม่
รหัสจาวาสคริปต์
ทำตามรหัส JavaScript ที่กำหนด:
< สคริปต์ >Array.prototype.stringLength = การทำงาน ( ) {
สำหรับ ( โดยที่เสื้อ = 0 ; ที < ความยาวนี้; เสื้อ++ ) {
นี้ [ ที ] = นี่ [ ที ] .ความยาว;
}
} ;
การทำงาน jsFunc ( ) {
วาร์ str = [ 'เอชทีเอ็มแอล' , 'ซีเอสเอส' , 'จาวาสคริปต์' ] ;
document.getElementById ( 'ตัวอย่าง' ) .innerHTML = str;
str.stringLength ( ) ;
document.getElementById ( 'สำหรับ' ) .innerHTML = str;
}
สคริปต์ >
ในบรรทัดโค้ดด้านบน:
- ใช้ไวยากรณ์พื้นฐานของ Array “ ต้นแบบ ” ตัวสร้างที่เพิ่มวิธีการใหม่ “ ความยาวสตริง ” การกำหนดฟังก์ชัน
- ถัดไป ในนิยามของฟังก์ชัน คำว่า “ สำหรับ วนซ้ำ ” วนซ้ำดัชนีทั้งหมดของวัตถุอาร์เรย์เพื่อค้นหาความยาวโดยใช้คุณสมบัติ “ความยาว”
- หลังจากนั้น “ jsFunc() ” กำหนดวัตถุ Array ที่เก็บไว้ในตัวแปร “str”
- จากนั้น “ document.getElementById () ” วิธีการเข้าถึงย่อหน้าแรกที่ว่างเปล่าผ่าน id “sample” เพื่อแสดง Array object “str”
- สุดท้าย เชื่อมโยงวัตถุ Array “str” กับ “ ความยาวสตริง () ” วิธีนับความยาวสตริงของดัชนีอาร์เรย์แต่ละตัวแล้วผนวกลงในย่อหน้าว่างถัดไปซึ่งมีรหัสเป็น “พารา”
เอาต์พุต
ที่นี่ เอาต์พุตแสดงความยาวของแต่ละสตริงของออบเจกต์ Array เป้าหมายด้วยความช่วยเหลือของเมธอด “stringLength()” ที่เพิ่มเข้ามาใหม่ผ่านตัวสร้าง “ต้นแบบ” ของ Array
ตัวอย่างที่ 2: การใช้ตัวสร้าง 'ต้นแบบ' เพื่อสร้างวิธีการใหม่ 'myUcase' และนำไปใช้กับวัตถุอาร์เรย์
ตัวอย่างนี้ใช้ตัวสร้าง 'ต้นแบบ' เพื่อสร้างเมธอด 'myUcase' ใหม่และนำไปใช้กับวัตถุ Array เป้าหมาย
รหัสจาวาสคริปต์
มาดูรหัส JavaScript ที่ระบุไว้ด้านล่าง:
< สคริปต์ >Array.prototype.myUcase = การทำงาน ( ) {
สำหรับ ( อนุญาต เสื้อ = 0 ; ที < ความยาวนี้; เสื้อ++ ) {
นี้ [ ที ] = นี่ [ ที ] .toUpperCase ( ) ;
}
} ;
การทำงาน jsFunc ( ) {
Const arrObj = [ 'เอชทีเอ็มแอล' , 'ซีเอสเอส' , 'จาวาสคริปต์' , 'ปฏิกิริยา' ] ;
arrObj.myUcase ( ) ;
document.getElementById ( 'ตัวอย่าง' ) .innerHTML = arrObj;
}
สคริปต์ >
ที่นี่ ตัวสร้าง 'ต้นแบบ' สร้างวิธีการใหม่ชื่อ ' มายยูเคส ” ที่ใช้ “ ตัวพิมพ์ใหญ่ วิธีการ ” ในนิยามของฟังก์ชันเพื่อแปลงแต่ละสตริงของวัตถุ Array เป็น “ตัวพิมพ์ใหญ่” ในฟังก์ชันหลัง เมธอดแบบกำหนดเองจะถูกเรียกใช้ใน Array เช่นเดียวกัน
เอาต์พุต
ดังที่เห็น แต่ละสตริงของออบเจกต์ Array จะใช้ตัวพิมพ์ใหญ่เมื่อคลิกปุ่มเนื่องจากเมธอด “myUcase()” ที่นำไปใช้
บทสรุป
เมื่อต้องการใช้ Array “ ต้นแบบ ” ตัวสร้างใน JavaScript เชื่อมโยงเมธอด/คุณสมบัติใหม่กับมัน มันระบุฟังก์ชันที่กำหนดฟังก์ชันสำหรับฟังก์ชันอื่นในลักษณะที่กำหนดเองตามความต้องการ คู่มือนี้อธิบายโดยสังเขปเกี่ยวกับการใช้ตัวสร้าง 'ต้นแบบ' ของ Array ใน JavaScript