Obiekt Array reprezentuje zbiór elementów. Pomaga w utrzymaniu dużego zestawu danych, aby uniknąć pomieszania wielu zmiennych, a tym samym ich sortowania. Jeśli użytkownik chce zastosować jakąkolwiek dodatkową metodę i właściwość do obiektu Array, nie musi stosować tej nowej właściwości/metody pojedynczo do każdego elementu. Zamiast tego można to zrobić skutecznie, używając tablicy JavaScript „ prototyp ” konstruktor. Ten konstruktor pomaga w zastosowaniu nowych metod i właściwości do żądanego obiektu Array.
Ten przewodnik wyjaśnia użycie konstruktora „prototypu” Array w JavaScript.
Jak używać konstruktora „prototypu” tablicy w JavaScript?
Tablica „ prototyp ” służy do dodawania nowych metod i właściwości do obiektu Array za pomocą funkcji JavaScript. Stosuje skonstruowaną właściwość dla wszystkich wartości tablicy, domyślnie jako jej nazwę i wartość.
Składnia
Tablica.prototyp.nazwa = wartość
W powyższej składni „ nazwa ” określa nowo dodaną właściwość z jej „ wartość ”, która dotyczy całego obiektu Array.
Wykorzystajmy wyżej zdefiniowaną właściwość praktycznie za pomocą jej składni.
Kod HTML
Najpierw spójrz na podany kod HTML:
< P > The 'prototyp' Konstruktor pomaga W dodanie nowych metod / właściwości do podanej tablicy ( ) obiekt. P >< przycisk na kliknięcie = 'jsFunc()' > Uzyskaj każdą długość łańcucha przycisk >
< P ID = 'próbka' > P >
< P ID = 'Do' > P >
W powyższych liniach kodu:
- „ Znacznik ” określa instrukcję akapitu.
- „
” osadza przycisk ze zdarzeniem „onclick” w celu wywołania określonej funkcji „jsFunc()” po kliknięciu przycisku. - Ostatnie dwa ' Tagi ” dodają puste akapity z przypisanymi im identyfikatorami odpowiednio „sample” i „para”.
Notatka: Ten kod HTML jest stosowany we wszystkich podanych przykładach w tym przewodniku.
Przykład 1: Zastosowanie konstruktora „prototypu” do obliczenia długości obiektu tablicy poprzez dodanie nowej metody
Ten przykład wykorzystuje konstruktora „prototypu” do zliczania długości każdego łańcucha wewnątrz obiektu Array za pomocą nowo dodanej metody.
Kod JavaScript
Postępuj zgodnie z podanym kodem JavaScript:
< scenariusz >Array.prototype.stringLength = funkcjonować ( ) {
Do ( gdzie t = 0 ; T < ta.długość; t++ ) {
Ten [ T ] = to [ T ] .długość;
}
} ;
funkcjonować jsFunc ( ) {
var str = [ „HTML” , „CSS” , „JavaScript” ] ;
document.getElementById ( 'próbka' ) .innerHTML = str;
długość ciągu ( ) ;
document.getElementById ( 'Do' ) .innerHTML = str;
}
scenariusz >
W powyższych liniach kodu:
- Zastosuj podstawową składnię tablicy „ prototyp „konstruktor dodający nową metodę” Długość łańcucha ” definiowanie funkcji.
- Następnie w definicji funkcji „ Do ” jest iterowana po wszystkich indeksach obiektu Array, aby znaleźć ich długość za pomocą właściwości „length”.
- Następnie „ jsFunc() ” definiuje obiekt Array przechowywany w zmiennej „str”.
- A później ' document.getElementById () ” uzyskuje dostęp do pierwszego pustego akapitu poprzez swój identyfikator „sample”, aby wyświetlić obiekt Array „str”.
- Na koniec powiąż obiekt Array „str” z obiektem „ Długość łańcucha() ”, aby policzyć długość łańcucha każdego indeksu tablicy, a następnie dołączyć go do następnego pustego akapitu, którego identyfikatorem jest „para”.
Wyjście
Tutaj dane wyjściowe pokazują długość każdego łańcucha docelowego obiektu Array za pomocą nowo dodanej metody „stringLength()” za pośrednictwem konstruktora „prototypu” Array.
Przykład 2: Zastosowanie konstruktora „prototypu” w celu utworzenia nowej metody „myUcase” i zastosowanie jej do obiektu tablicy
Ten przykład wykorzystuje konstruktora „prototype” do stworzenia nowej metody „myUcase” i zastosowania jej do docelowego obiektu Array.
Kod JavaScript
Przeanalizujmy poniższy kod JavaScript:
< scenariusz >Array.prototype.myUcase = funkcjonować ( ) {
Do ( pozwalać t = 0 ; T < ta.długość; t++ ) {
Ten [ T ] = to [ T ] .toUpperCase ( ) ;
}
} ;
funkcjonować jsFunc ( ) {
const arrObj = [ 'html' , 'css' , „JavaScript” , 'Reagować' ] ;
arrObj.myUcase ( ) ;
document.getElementById ( 'próbka' ) .innerHTML = arrObj;
}
scenariusz >
Tutaj konstruktor „prototypu” tworzy nową metodę o nazwie „ mójUcase ”, który używa „ Duże litery ” w definicji funkcji, aby przekonwertować każdy ciąg obiektu Array na „wielkie litery”. W tej ostatniej funkcji metoda niestandardowa jest również wywoływana na tablicy.
Wyjście
Jak widać, każdy ciąg znaków obiektu Array wykorzystuje kliknięcie przycisku dzięki zastosowanej metodzie „myUcase()”.
Wniosek
Aby użyć tablicy „ prototyp ” w JavaScript, powiąż z nim nową metodę/właściwość. Określa funkcję, która definiuje funkcjonalności dla innej funkcji w sposób niestandardowy, zgodnie z wymaganiami. W tym przewodniku pokrótce wyjaśniono użycie konstruktora „prototypu” Array w JavaScript.