Một đối tượng Array đại diện cho một tập hợp các phần tử. Nó giúp duy trì một tập hợp dữ liệu lớn để tránh sự nhầm lẫn của nhiều biến, từ đó sắp xếp chúng. Nếu người dùng muốn áp dụng bất kỳ phương thức và thuộc tính bổ sung nào cho đối tượng Array, thì không cần phải áp dụng từng thuộc tính/phương thức mới đó cho từng phần tử. Thay vào đó, nó có thể được thực hiện một cách hiệu quả bằng cách sử dụng Mảng JavaScript “ nguyên mẫu ' người xây dựng. Hàm tạo này giúp áp dụng các phương thức và thuộc tính mới cho đối tượng Array mong muốn.
Hướng dẫn này giải thích việc sử dụng hàm tạo Array “nguyên mẫu” trong JavaScript.
Làm cách nào để sử dụng Trình xây dựng “nguyên mẫu” mảng trong JavaScript?
Mảng “ nguyên mẫu ” hàm tạo được sử dụng để thêm các phương thức và thuộc tính mới vào đối tượng Array với sự trợ giúp của hàm JavaScript. Nó áp dụng thuộc tính được xây dựng cho tất cả các giá trị mảng, như tên và giá trị của nó theo mặc định.
cú pháp
Array.prototype.name = giá trị
Trong cú pháp trên, “ tên ” chỉ định thuộc tính mới được thêm vào với “ giá trị ” áp dụng cho toàn bộ đối tượng Array.
Hãy sử dụng thuộc tính được xác định ở trên một cách thực tế với sự trợ giúp của cú pháp của nó.
Mã HTML
Trước tiên, hãy xem mã HTML đã nêu:
< P > Các 'nguyên mẫu' nhà xây dựng giúp TRONG việc bổ sung các phương pháp mới / thuộc tính cho Mảng đã cho ( ) sự vật. P >< cái nút trong một cái nhấp chuột = 'jsFunc()' > Nhận mỗi chiều dài chuỗi cái nút >
< P nhận dạng = 'vật mẫu' > P >
< P nhận dạng = 'vì' > P >
Trong các dòng mã trên:
- Các ' ” thẻ xác định tuyên bố đoạn văn.
- Các '
” thẻ nhúng một nút có sự kiện “onclick” để gọi hàm “jsFunc()” đã chỉ định khi nhấp vào nút. - Hai cái cuối cùng ' Các thẻ ” thêm các đoạn trống với id được gán tương ứng là “sample” và “para”.
Ghi chú: Mã HTML này được tuân theo trong tất cả các ví dụ đã cho trong hướng dẫn này.
Ví dụ 1: Áp dụng Trình xây dựng “nguyên mẫu” để đếm Độ dài đối tượng mảng bằng cách thêm một phương thức mới
Ví dụ này sử dụng hàm tạo “nguyên mẫu” để đếm độ dài của mỗi chuỗi bên trong một đối tượng Array với sự trợ giúp của một phương thức mới được thêm vào.
Mã JavaScript
Thực hiện theo mã JavaScript đã cho:
< kịch bản >Array.prototype.stringLength = chức năng ( ) {
vì ( trong đó t = 0 ; t < this.length; t++ ) {
cái này [ t ] = cái này [ t ] .chiều dài;
}
} ;
chức năng jsFunc ( ) {
var str = [ 'HTML' , 'CSS' , 'JavaScript' ] ;
tài liệu.getElementById ( 'vật mẫu' ) .innerHTML = str;
str.stringLength ( ) ;
tài liệu.getElementById ( 'vì' ) .innerHTML = str;
}
kịch bản >
Trong các dòng mã trên:
- Áp dụng cú pháp cơ bản của Array “ nguyên mẫu ” hàm tạo thêm một phương thức mới “ chiều dài chuỗi ” xác định một chức năng.
- Tiếp theo, trong phần định nghĩa hàm, phần “ vì ” được lặp lại trên tất cả các chỉ số của một đối tượng Array để tìm độ dài của chúng bằng cách sử dụng thuộc tính “length”.
- Sau đó, “ jsFunc() ” định nghĩa một đối tượng Array được lưu trữ trong biến “str”.
- Sau đó, “ tài liệu.getElementById () ” phương thức truy cập đoạn trống đầu tiên thông qua id “sample” của nó để hiển thị đối tượng Array “str”.
- Cuối cùng, liên kết đối tượng Array “str” với “ chiều dài chuỗi() ” để đếm độ dài chuỗi của từng chỉ mục mảng rồi nối nó vào đoạn trống tiếp theo có id là “para”.
đầu ra
Ở đây, đầu ra hiển thị độ dài của mỗi chuỗi của đối tượng Array đích với sự trợ giúp của phương thức “stringLength()” mới được thêm vào thông qua hàm tạo “nguyên mẫu” của Array.
Ví dụ 2: Áp dụng Trình xây dựng “nguyên mẫu” để tạo Phương thức mới “myUcase” và Áp dụng nó cho Đối tượng mảng
Ví dụ này sử dụng hàm tạo “nguyên mẫu” để tạo một phương thức “myUcase” mới và áp dụng nó cho đối tượng Array đích.
Mã JavaScript
Hãy xem qua mã JavaScript được nêu dưới đây:
< kịch bản >Array.prototype.myUcase = chức năng ( ) {
vì ( cho phép t = 0 ; t < this.length; t++ ) {
cái này [ t ] = cái này [ t ] .Đến trường hợp trên ( ) ;
}
} ;
chức năng jsFunc ( ) {
const mảngObj = [ 'html' , 'css' , 'Javascript' , 'Phản ứng' ] ;
mảngObj.myUcase ( ) ;
tài liệu.getElementById ( 'vật mẫu' ) .innerHTML = arrObj;
}
kịch bản >
Ở đây, hàm tạo “nguyên mẫu” tạo một phương thức mới có tên “ myUcase ” sử dụng “ Chữ hoa ” trong định nghĩa hàm để chuyển đổi từng chuỗi của đối tượng Array thành “UpperCase”. Trong chức năng sau, phương thức tùy chỉnh cũng được gọi trên Mảng.
đầu ra
Như đã thấy, mỗi chuỗi của đối tượng Array viết hoa khi nhấp vào nút do phương thức “myUcase()” được áp dụng.
Phần kết luận
Để sử dụng Array “ nguyên mẫu ” hàm tạo trong JavaScript, hãy liên kết phương thức/thuộc tính mới với nó. Nó chỉ định một chức năng xác định các chức năng cho một chức năng khác theo cách tùy chỉnh theo yêu cầu. Hướng dẫn này giải thích ngắn gọn việc sử dụng hàm tạo Array “nguyên mẫu” trong JavaScript.