Array 개체는 요소 모음을 나타냅니다. 여러 변수의 혼동을 피하기 위해 많은 데이터 집합을 유지 관리하여 변수를 정렬하는 데 도움이 됩니다. 사용자가 Array 객체에 추가 메서드 및 속성을 적용하려는 경우 각 요소에 새 속성/메소드를 하나씩 적용할 필요가 없습니다. 대신 JavaScript Array '를 사용하여 효과적으로 수행할 수 있습니다. 원기 ” 생성자. 이 생성자는 원하는 Array 개체에 새 메서드와 속성을 적용하는 데 도움이 됩니다.
이 가이드는 JavaScript에서 배열 '프로토타입' 생성자의 사용법을 설명합니다.
JavaScript에서 배열 '프로토타입' 생성자를 사용하는 방법은 무엇입니까?
배열 ' 원기 ” 생성자는 JavaScript 함수의 도움으로 Array 객체에 새로운 메서드와 속성을 추가하는 데 사용됩니다. 모든 배열 값에 대해 구성된 속성을 기본적으로 해당 이름 및 값으로 적용합니다.
통사론
Array.prototype.name = 값
위 구문에서 ' 이름 ”는 새로 추가된 속성을 “ 값 ” 전체 Array 객체에 적용됩니다.
구문의 도움을 받아 위에서 정의한 속성을 실제로 사용해 봅시다.
HTML 코드
먼저 명시된 HTML 코드를 살펴보십시오.
< 피 > 그만큼 '원기' 생성자 도움 ~에 새로운 방법의 추가 / 주어진 배열에 대한 속성 ( ) 물체. 피 >< 단추 온 클릭 = 'js펑크()' > 각 문자열 길이 가져오기 단추 >
< 피 ID = '견본' > 피 >
< 피 ID = '을 위한' > 피 >
위의 코드 라인에서:
- “ ” 태그는 단락 문을 지정합니다.
- “ <버튼> ” 태그는 버튼 클릭 시 지정된 함수 “jsFunc()”를 호출하기 위해 “onclick” 이벤트가 포함된 버튼을 포함합니다.
- 마지막 두 ' ” 태그는 할당된 ID가 각각 'sample' 및 'para'인 빈 단락을 추가합니다.
메모: 이 HTML 코드는 이 가이드의 모든 예제에서 따릅니다.
예 1: '프로토타입' 생성자를 적용하여 새 메서드를 추가하여 배열 객체 길이 계산
이 예제는 'prototype' 생성자를 활용하여 새로 추가된 메서드의 도움으로 Array 객체 내부의 각 문자열 길이를 계산합니다.
자바스크립트 코드
주어진 JavaScript 코드를 따르십시오.
< 스크립트 >Array.prototype.stringLength = 기능 ( ) {
~을 위한 ( 여기서 t = 0 ; 티 < this.길이; 티++ ) {
이것 [ 티 ] = 이 [ 티 ] .길이;
}
} ;
기능 jsFunc ( ) {
변수 str = [ 'HTML' , 'CSS' , '자바스크립트' ] ;
문서.getElementById ( '견본' ) .innerHTML = str;
문자열 길이 ( ) ;
문서.getElementById ( '을 위한' ) .innerHTML = str;
}
스크립트 >
위의 코드 줄에서:
- 배열 '의 기본 구문을 적용합니다. 원기 ' 새로운 메서드를 추가하는 생성자 ' 문자열 길이 ” 함수를 정의합니다.
- 다음으로 함수 정의에서 ' ~을 위한 ” 루프는 Array 객체의 모든 인덱스에 대해 반복되어 “length” 속성을 사용하여 길이를 찾습니다.
- 그 후, “ jsFunc() '는 'str' 변수에 저장된 배열 객체를 정의합니다.
- 그런 다음 ' 문서.getElementById () ” 메서드는 배열 개체 “str”을 표시하기 위해 ID “sample”을 통해 첫 번째 빈 단락에 액세스합니다.
- 마지막으로 'str' 배열 객체를 ' 문자열 길이() ” 메서드를 사용하여 각 배열 인덱스의 문자열 길이를 계산한 다음 id가 “para”인 다음 빈 단락에 추가합니다.
산출
여기서 출력은 Array 'prototype' 생성자를 통해 새로 추가된 'stringLength()' 메서드의 도움으로 대상 Array 객체의 각 문자열 길이를 보여줍니다.
예제 2: 'prototype' 생성자를 적용하여 새 메서드 'myUcase' 생성 및 배열 객체에 적용
이 예제는 'prototype' 생성자를 활용하여 새로운 'myUcase' 메서드를 생성하고 이를 대상 Array 객체에 적용합니다.
자바스크립트 코드
아래 명시된 JavaScript 코드를 살펴보겠습니다.
< 스크립트 >Array.prototype.myUcase = 기능 ( ) {
~을 위한 ( 허락하다 티 = 0 ; 티 < this.길이; 티++ ) {
이것 [ 티 ] = 이 [ 티 ] .toUpperCase ( ) ;
}
} ;
기능 jsFunc ( ) {
const arrObj = [ 'html' , 'css' , '자바스크립트' , '반응' ] ;
arrObj.myUcase ( ) ;
문서.getElementById ( '견본' ) .innerHTML = arrObj;
}
스크립트 >
여기서 'prototype' 생성자는 '라는 이름의 새 메소드를 생성합니다. myUcase ”를 사용하는 대문자 ” 메서드를 함수 정의에서 사용하여 Array 객체의 각 문자열을 “UpperCase”로 변환합니다. 후자의 함수에서 사용자 지정 메서드는 마찬가지로 Array에서 호출됩니다.
산출
보시다시피 Array 객체의 각 문자열은 적용된 'myUcase()' 메서드로 인해 버튼 클릭을 대문자로 만듭니다.
결론
어레이 '를 사용하려면 원기 ” JavaScript의 생성자에서 새 메서드/속성을 연결합니다. 요구 사항에 따라 사용자 지정 방식으로 다른 기능의 기능을 정의하는 기능을 지정합니다. 이 가이드에서는 JavaScript에서 배열 '프로토타입' 생성자의 사용에 대해 간략하게 설명했습니다.