JavaScript 배열 객체에 대한 간략한 토론_기본 지식

배열 배열

1. 소개

배열은 순서가 지정된 값의 모음입니다. 각 값을 요소라고 하며, 각 요소는 배열에서 인덱스라고 하는 숫자로 표시되는 위치를 갖습니다. JavaScript 배열은 유형이 지정되지 않습니다. 배열 요소는 모든 유형이 될 수 있으며 동일한 배열의 다른 요소는 다른 유형을 가질 수 있습니다. --"JavaScript에 대한 최종 가이드(6판)"

2. 정의

코드 복사 코드는 다음과 같습니다.

var names = new Array("Zhang San", "Li Si", "Wang Wu");
//또는
var 이름 = ["Zhang San", "Li Si", "Wang Wu"];

3.속성

길이: 배열 요소의 길이를 나타냅니다.

4. 인스턴스 메소드

일반적인 방법:

1) unshift(): 배열의 선두에 요소를 삽입합니다

2) Shift(): 배열의 첫 번째 요소를 제거하고 반환합니다

3) push(): 배열 끝에 요소를 삽입합니다

4) pop(): 배열의 마지막 요소를 제거하고 반환합니다

4.1 concat(): 요소를 배열에 연결합니다. 원래 배열은 수정되지 않고 새 배열이 반환됩니다.
매개변수:

①값1,값2....값N: 값의 개수

반환 값:

{Array} 원본 배열과 새로 추가된 요소를 포함하는 새 배열입니다.

예:

코드 복사 코드는 다음과 같습니다.

var decoArray = ['a', 'b', 'c'];
var decoArray2 = decoArray.concat('e');
console.log(demoArray); // => decoArray:['a','b','c'] 원래 배열은 변경되지 않습니다
console.log(demoArray2); // => ['a','b','c','e']

4.2 Every(): 요소를 순서대로 탐색하고 각 요소가 참인지 확인
매개변수:

①함수(value,index,self){}: 각 요소는 이 함수를 사용하여 true인지 확인합니다. false로 판단되면 순회가 즉시 종료됩니다.

값: 배열 순회 요소

색인: 요소 번호

Self: 배열 그 자체

반환 값:

{Boolean}: 모든 요소가 true인 경우에만 true를 반환하고, 한 요소가 false이면 false를 반환합니다.

예:

코드 복사 코드는 다음과 같습니다.

var 데모Array = [1, 2, 3];
var rs = decoArray.every(함수 (값, 인덱스, 자체) {
반환 값 >0;
});
console.log(rs); // =>

4.3 filter(): 요소를 순서대로 순회하고 조건을 충족하는 요소가 포함된 새 배열을 반환합니다.

매개변수:

①function(value,index,self){}: 각 요소에 대해 이 함수를 차례로 호출하고 조건을 충족하는 요소가 포함된 새 배열을 반환합니다.

값: 배열 순회 요소

색인: 요소 번호

Self: 배열 그 자체

반환 값:

{Array} 기준을 충족하는 요소가 포함된 새 배열

예:

코드 복사 코드는 다음과 같습니다.

var 데모Array = [1, 2, 3];
var rs = decoArray.filter(함수 (값, 인덱스, 자체) {
반환 값 >0;
});
console.log(rs); // => [1, 2, 3]

4.4 forEach(): 요소를 순서대로 탐색하고 반환 값 없이 지정된 함수를 실행합니다.

매개변수:

①함수(value,index,self){}: 각 요소에 대해 이 함수를 차례로 호출합니다

값: 배열 순회 요소

색인: 요소 번호

Self: 배열 그 자체

반환값: 없음

예:

코드 복사 코드는 다음과 같습니다.

var 데모Array = [1, 2, 3];
decoArray.forEach(함수(값, 인덱스, 자체) {
Console.log(value); // => 순서대로 출력: 1 2 3
});

4.5 indexOf(): 배열에서 일치하는 요소를 찾습니다. 일치하는 요소가 없으면 -1이 반환됩니다. 검색시 "===" 연산자를 사용하므로 1과 '1'을 구분해야 합니다
매개변수:

①값: 배열에서 찾을 값입니다.

②start : 검색을 시작할 일련번호 위치를 생략하면 0이 됩니다.

반환 값:

{Int}: 배열에서 일치하는 첫 번째 값의 일련 번호를 반환합니다. 존재하지 않는 경우 -1을 반환합니다.

예:

코드 복사 코드는 다음과 같습니다.

['a', 'b', 'c'].indexOf('a') // =>0
['a', 'b', 'c'].indexOf('a', 1) // =>-1
['a', 'b', 'c'].indexOf('d') // =>-1
[1, 2, 3].indexOf('1'); // => -1: '===' 매칭 방법 사용

4.6 Join(): 구분 기호를 사용하여 배열의 모든 요소를 ​​문자열로 연결합니다.
매개변수:

①sparator {String}: 각 요소 사이의 구분 기호입니다. 생략할 경우 기본적으로 영어 쉼표 ','로 구분됩니다.

반환 값:

{String}: 각 요소는 분리 기호를 구분 기호로 사용하여 문자열로 연결됩니다.

예:

코드 복사 코드는 다음과 같습니다.

['a', 'b', 'c'].join() // => 'a,b,c'
['a', 'b', 'c'].join('-') // => 'a-b-c'

4.7 lastIndexOf: 역방향 배열에서 일치하는 요소를 찾습니다. 일치하는 요소가 없으면 -1이 반환됩니다. 검색시 "===" 연산자를 사용하므로 1과 '1'을 구분해야 합니다
매개변수:

①값: 배열에서 찾을 값입니다.

②start : 검색을 시작할 일련번호 위치입니다. 생략할 경우 마지막 요소부터 검색을 시작합니다.

반환 값:

{Int}: 배열에서 오른쪽에서 왼쪽으로 일치하는 첫 번째 값의 시퀀스 번호를 찾습니다. 존재하지 않으면 -1을 반환합니다.

예:

코드 복사 코드는 다음과 같습니다.

['a', 'b', 'c'].lastIndexOf('a') // => ['a', 'b', 'c'].lastIndexOf('a', 1) // => ['a', 'b', 'c'].lastIndexOf('d') // => [1, 2, 3].lastIndexOf('1'); // => -1: '===' 매칭 방법 사용



4.8 map(): 각 요소를 순서대로 탐색 및 계산하고 계산된 요소의 배열을 반환합니다

매개변수:

①함수(value,index,self){}: 각 요소가 이 함수를 차례로 호출하고 계산된 요소를 반환합니다

값: 배열 순회 요소

색인: 요소 번호

Self: 배열 그 자체

반환 값:

{Array} 좋은 요소를 포함하는 새로운 배열

예:

코드 복사 코드는 다음과 같습니다. [1, 2, 3].map(함수(값, 인덱스, 자체) {

반환값 * 2;

}); // => [2, 4, 6]



4.9 pop(): 배열의 마지막 요소를 제거하고 반환

매개변수: 없음

반환 값:

{Object} 배열의 마지막 요소입니다. 배열이 비어 있으면 정의되지 않은

이 반환됩니다.

예:

코드 복사 코드는 다음과 같습니다. var decoArray = ['a', 'b', 'c'];

데모Array.pop(); // => 데모Array.pop(); // => 데모Array.pop(); // => 데모Array.pop(); // =>

4.10 push(): 배열 끝에 요소를 추가합니다
매개변수:

①value1,value2....valueN: 배열 끝에 원하는 수의 값을 추가합니다

반환 값:

{int} 배열의 새로운 길이

예:

코드 복사

코드는 다음과 같습니다.

var decoArray = ['a', 'b', 'c']; decoArray.push('d'); // => 4, 데모Array: ['a', 'b', 'c', 'd'] decoArray.push('e', 'f'); // => 6, 데모Array: ['a', 'b', 'c', 'd', 'e', ​​​​'f'] console.log(demoArray); // => ['a', 'b', 'c', 'd', 'e', ​​​​'f']

4.11 reverse(): 배열 요소의 순서를 반대로 바꿉니다.
매개변수: 없음

반환 값: 없음(원래 배열의 요소 순서를 반대로 바꿈)

예:

코드 복사 코드는 다음과 같습니다.

var decoArray = ['a', 'b', 'c', 'd', 'e'];
데모Array.reverse();
console.log(demoArray); // => ["e", "d", "c", "b", "a"]

4.12 Shift(): 배열의 첫 번째 요소를 제거하고 반환
매개변수: 없음

반환 값:

{Object} 배열의 첫 번째 요소입니다. 배열이 비어 있으면 정의되지 않은 값이 반환됩니다.

예:

코드 복사 코드는 다음과 같습니다.

var decoArray = ['a', 'b', 'c'];
데모Array.shift(); // => 데모Array.shift(); // => 데모Array.shift(); // => 데모Array.shift(); // =>


4.13 Slice(startIndex,endIndex): 배열의 일부를 반환합니다.
매개변수:

①startIndex: 시작 부분의 일련 번호입니다. 음수인 경우 끝부터 계산한다는 의미이며, -1은 마지막 요소를 나타내고 -2는 두 번째에서 마지막 요소를 나타냅니다.

②endIndex: 마지막 요소 뒤의 일련번호입니다. 지정하지 않으면 끝입니다. 차단된 요소는 여기에서 일련번호가 있는 요소를 포함하지 않고, 여기에서 일련번호 앞의 요소로 끝납니다.

반환 값:

{Array} startIndex부터 endIndex의 이전 요소까지 모든 요소를 ​​포함하는 새 배열입니다.

예:

코드 복사

코드는 다음과 같습니다. [1, 2, 3, 4, 5, 6].slice(); // => [1, 2, 3, 4, 5, 6].slice(1); // => [2, 3, 4, 5, 6]: 시퀀스 번호 1부터 시작 [1, 2, 3, 4, 5, 6].slice(0, 4); // => [1, 2, 3, 4]: 시퀀스 번호 0부터 시퀀스 번호 3까지(시퀀스 번호 앞의 것) 4) 요소

[1, 2, 3, 4, 5, 6].slice(-2); // => [5, 6]: 다음 2개 요소 가로채기

4.14 sort(opt_orderFunc): 특정 규칙에 따라 정렬
매개변수:

①opt_orderFunc(v1,v2) {Function}: 선택적 정렬 기능입니다. 생략하면 요소는 작은 것부터 큰 것 순으로 알파벳순으로 정렬됩니다.

v1: 순회할 때 이전 요소.

v2: 순회 시 다음 요소.

정렬:

v1과 v2를 비교하고 v1과 v2의 정렬 규칙을 나타내는 숫자를 반환합니다.

0보다 작음: v1이 v2보다 작고, v1이 v2보다 앞에 위치합니다.

0과 같음: v1이 v2와 같고, v1이 v2보다 앞에 위치합니다.

0보다 큼: v1이 v2보다 크고 v1이 v2보다 뒤쳐집니다.

반환 값: 없음(원래 배열의 정렬 작업)

예:

코드 복사

코드는 다음과 같습니다. [1, 3, 5, 2, 4, 11, 22].sort(); // => [1, 11, 2, 22, 3, 4, 5]: 여기의 모든 요소는 문자로 변환됩니다. 11이라는 문자가 2 앞에 옵니다 [1, 3, 5, 2, 4, 11, 22].sort(함수 (v1, v2) { v1 - v2 반환;

}); // => [1, 2, 3, 4, 5, 11, 22]: 작은 것부터 큰 것 순으로 정렬

[1, 3, 5, 2, 4, 11, 22].sort(함수 (v1, v2) {
Return -(v1 - v2); //부정하면 큰 것에서 작은 것으로 변환할 수 있습니다
}); // => [22, 11, 5, 4, 3, 2, 1]



4.15 splice(): 배열 요소 삽입 및 삭제
매개변수:

①start {int}: 삽입, 삭제 또는 교체를 시작할 시작 시퀀스 번호입니다.

②deleteCount {int}: 삭제할 요소 수(처음부터 계산).

③value1,value2 ... valueN {Object}: 처음부터 삽입할 요소를 나타내는 선택적 매개변수입니다. ② 매개변수가 0이 아닌 경우에는 삭제 작업을 먼저 수행한 후 삽입 작업을 수행합니다.

반환 값:

{Array} 삭제된 요소가 포함된 새 배열을 반환합니다. ② 매개변수가 0이면 요소가 삭제되지 않고 빈 배열이 반환된다는 의미입니다.

예:

코드 복사

코드는 다음과 같습니다.

// 1. 삭제
var decoArray = ['a', 'b', 'c', 'd', 'e'];
var decoArray2 = decoArray.splice(0, 2); // 0부터 시작하는 2개의 요소를 삭제하고 삭제된 요소가 포함된 배열을 반환합니다: ['a', 'b']
console.log(demoArray2); // => ['a', 'b']
console.log(demoArray); // => ['c', 'd', 'e']
// 2. 삽입
var decoArray = ['a', 'b', 'c', 'd', 'e'];
var decoArray2 = decoArray.splice(0, 0, '1', '2', '3'); // ②파라미터가 0이고 빈 배열이 반환됩니다
console.log(demoArray2); // => [ ]
console.log(demoArray); // => ['1', '2', '3', 'a', 'b', 'c', 'd', 'e']
// 3. 먼저 삭제한 후 삽입
var decoArray = ['a', 'b', 'c', 'd', 'e'];
// ② 매개변수가 0이 아닌 경우 먼저 삭제 연산을 수행(0부터 시작하여 4개 요소를 삭제하고 삭제된 요소가 포함된 배열을 반환)한 후 삽입 연산을 수행
var decoArray2 = decoArray.splice(0, 4, '1', '2', '3');
console.log(demoArray2); // => ['a', 'b', 'c', 'd']
console.log(demoArray); // => ['1', '2', '3', 'a', 'b', 'c', 'd', 'e']

4.16 toString(): 배열의 모든 요소를 ​​영어 쉼표 ','를 통해 문자열로 연결합니다.
매개변수: 없음

반환 값:

{String} 배열의 모든 요소는 영어 쉼표 ','를 통해 문자열로 연결되어 반환됩니다. 매개변수 없이 Join() 메서드를 호출하는 것과 같습니다.

예:

코드 복사 코드는 다음과 같습니다.

[1, 2, 3, 4, 5].toString() // => '1,2,3,4,5'
['a', 'b', 'c', 'd', 'e'].toString() // => 'a,b,c,d,e'

4.17 unshift(): 배열의 선두에 요소를 삽입합니다
매개변수:

①value1,value2....valueN: 배열의 헤드에 원하는 수의 값을 추가합니다

반환 값:

{int} 배열의 새로운 길이

예:

코드 복사 코드는 다음과 같습니다.

var 데모Array = [];
decoArray.unshift('a'); // => 데모Array:['a']
decoArray.unshift('b'); // => 데모Array:['b', 'a']
decoArray.unshift('c'); // => 데모Array:['c', 'b', 'a']
decoArray.unshift('d'); // => 데모Array:['d', 'c', 'b', 'a']
decoArray.unshift('e'); // => 데모Array:['e', 'd', 'c', 'b', 'a']

5. 정적 방법

5.1 Array.isArray(): 객체가 배열인지 확인
매개변수:

①값 {객체}: 모든 객체

반환 값:

{Boolean} 판정 결과를 반환합니다. true이면 객체가 배열이라는 뜻이고, false이면 객체가 배열이 아니라는 뜻입니다

예:

코드 복사 코드는 다음과 같습니다.

Array.isArray([]); // => Array.isArray(['a', 'b', 'c']) // => Array.isArray('a'); // => Array.isArray('[1, 2, 3]') // =>



6. 실무

6.1 지수 설명: 각 요소에는 인덱스라고 하는 숫자로 표시되는 배열 내 위치가 있습니다. 인덱스는 0부터 시작합니다. 즉, 첫 번째 요소의 인덱스는 0이고 두 번째 요소의 인덱스는 1입니다.

배열에 존재하지 않는 인덱스를 얻으면 undefound가 반환됩니다.

예:

코드 복사

코드는 다음과 같습니다. var decoArray = ['a', 'b', 'c', 'd', 'e']; decoArray[0]; // => 첫 번째 요소 가져오기: 'a'

decoArray[0] = 1; // 첫 번째 요소를 1로 설정

console.log(demoArray); // => 데모Array:[1, 'b', 'c', 'd', 'e']
console.log(demoArray[9]); // => 정의되지 않음: 획득한 인덱스가 존재하지 않는 경우 정의되지 않음



6.2 명령문
참고: for 문

을 통해 배열을 하나씩 탐색할 수 있습니다. 예:

코드 복사

코드는 다음과 같습니다. var decoArray = ['a', 'b', 'c', 'd', 'e']; for (var i = 0, length = decoArray.length; i < length; i ) {

console.log(demoArray[i]); // => 배열의 요소를 하나씩 출력합니다

}

6.3 얕은 사본
참고: 배열 유형은 참조 유형입니다. 배열 a가 배열 b에 복사될 때 배열 b의 요소가 수정되면 배열 a도 수정됩니다.

예:

코드 복사 코드는 다음과 같습니다.

var decoArrayA = ['a', 'b', 'c', 'd', 'e'];
var decoArrayB = decoArrayA; // 배열 A를 배열 B에 할당
decoArrayB[0] = 1; // 배열 B의 요소 수정
console.log(demoArrayA); // => [1, 'b', 'c', 'd', 'e']: 배열 A의 요소도 변경되었습니다

6.4 딥 카피
설명: 얕은 복사를 방지하기 위해 concat() 메서드를 사용하여 새 배열을 반환하고 배열 b의 요소를 수정하면 배열 a가 변경되지 않습니다.

예:

코드 복사 코드는 다음과 같습니다.

var decoArrayA = ['a', 'b', 'c', 'd', 'e'];
var decoArrayB = decoArrayA.concat(); // concat() 메서드를 사용하여 새 배열을 반환합니다
decoArrayB[0] = 1; // 배열 B의 요소 수정
console.log(demoArrayA); // => ['a', 'b', 'c', 'd', 'e']: 배열 A의 요소는 변경되지 않았습니다.
console.log(demoArrayB); // => [ 1, 'b', 'c', 'd', 'e']: 배열 B의 요소가 변경되었습니다