JavaScript arrays_javascript 기술에 대한 자세한 설명

프로그래밍 언어에서 배열의 중요성은 자명합니다. JavaScript의 배열은 가장 일반적으로 사용되는 객체 중 하나입니다. 배열은 약한 유형으로 인해 매우 유연하고 강력합니다. 동일한 유형 또는 해당 하위 유형의 요소만 저장할 수 있는 Java와 같은 강력한 유형의 고급 언어의 배열과 달리 JavaScript는 여러 유형의 요소를 동일한 배열에 저장할 수 있으며 길이도 동적으로 조정할 수 있습니다. 데이터가 증가함에 따라 또는 배열 길이에 대한 자동 변경을 줄입니다.

배열 생성

JavaScript에서 다양한 방법으로 배열 만들기

생성자

1. 매개변수 없는 생성자, 빈 배열 생성

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

var a1=new Array();

2. 배열의 길이를 지정하고(배열의 길이는 동적으로 조정될 수 있으므로 별로 유용하지 않음) 지정된 길이의 배열을 생성하는 숫자 매개변수 생성자

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

var a2=new Array(5);

3. 초기화 데이터가 있는 생성자, 배열 생성 및 매개변수 데이터 초기화

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

var a3=new Array(4,'hello', 새 날짜( ));

직역

1. 대괄호를 사용하여 빈 배열을 만듭니다. 이는 매개변수 없는 생성자를 호출하는 것과 같습니다.

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

var a4=[];

2. 대괄호를 사용하고 초기화 데이터를 전달합니다. 이는 초기화 데이터로 생성자를 호출하는 것과 같습니다

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

var a5=[10];

참고

1. 생성자를 사용하여 배열을 생성할 때 숫자 매개변수가 전달되면 매개변수 길이만큼 배열이 생성되며, 매개변수가 여러 개 전달되면 매개변수가 생성됩니다. 초기화 데이터로 배열에 추가됩니다

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

var a1=new Array(5);
console.log(a1.length);//5
     console.log(a1); //[], 배열이 비어 있습니다

var a2=new Array(5,6);
console.log(a2.length);//2
console.log(a2) //[5,6]

단, 리터럴 방식을 사용하면 아무리 많은 매개변수를 전달하더라도 해당 매개변수는 초기화 내용으로 처리됩니다

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

var a1=[5];
console.log(a1.length);//1
console.log(a1); //[5]

var a2=[5,6];
console.log(a2.length);//2
console.log(a2) //[5,6]

2. 초기화 매개변수를 사용하여 배열을 생성할 때 끝에 ","를 추가로 포함하지 않는 것이 가장 좋습니다.

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

var a1=[1,2,3 ,];
console.log(a1.length);
console.log(a1);

이 스크립트를 최신 브라우저에서 실행한 결과는 우리가 상상한 것과 같고 길이가 3인데, IE 하위 버전에서는 실제로 길이가 4인 배열이고 마지막 데이터가 정의되지 않았습니다.

배열의 인덱스와 길이

배열의 값은 자연수 인덱스 접근을 통해 읽고 쓸 수 있으며, 첨자는 결과값이 되는 변수나 표현식이 될 수도 있습니다. 음수가 아닌 정수로

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

var a1=[1,2,3 ,4] ;
console.log(a1[0]); //1
var i=1;
console.log(a1[i]) //2
console.log (a1[ i]); //3

배열도 객체입니다. 인덱스를 사용할 수 있는 비결은 배열이 인덱스 값을 객체 속성 이름인 해당 문자열(1=>”1”)로 변환한다는 것입니다.

console.log(1 in a1);//true, 이는 실제로 속성입니다.
인덱스의 특징은 배열이 자동으로 길이 속성을 업데이트한다는 것입니다. 물론 JavaScript 구문에서는 숫자가 업데이트될 수 없다고 규정하기 때문입니다. 변수 이름으로 사용될 수 있으므로 명시적으로 사용할 수 없습니다. 실제로 음수 및 숫자가 아닌 "인덱스"도 허용되지만 이는 인덱스가 아닌 배열의 속성이 됨을 알 수 있습니다.

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

var a=new Array(1,2 ,3) ;
a[-10]="a[-10]";
a["sss"]="sss";

이렇게 하면 모든 인덱스가 속성 이름이지만 최대값을 갖는 자연수만 인덱스라는 것을 알 수 있습니다. 일반적으로 배열을 사용할 때 배열 범위를 벗어난 오류가 발생하지 않습니다. 이는 배열의 인덱스가 연속적이지 않을 수 있다는 것입니다. 인덱스가 존재하지 않는 요소에 접근하면 undefine

이 반환됩니다.

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

var a=new Array(1,2 ,3) ;
a[100]=100;
console.log(a.length); //101
console.log(a[3]); //정의되지 않음
console.log log(a [99]); //정의되지 않음
console.log(a[100]) 100

위의 예에서 a[100]에 값을 직접 할당하면 a[4] 또는 a[99]에 영향을 미치지 않지만 배열의 길이는 영향을 받습니다. 배열에서 가장 큰 인덱스 1입니다. 배열의 길이 속성도 쓰기 가능한 속성입니다. 배열의 길이 속성 값이 최대 인덱스 값보다 작거나 같도록 강제로 설정되면 배열이 자동으로 삭제됩니다. indexd가 길이보다 크거나 같은 데이터. 지금 코드에

몇 문장을 추가하세요.

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

a.length=2
console .log( a);//[1,2]

이때, a[2]와 a[100]은 자동으로 삭제되는 것을 볼 수 있습니다. 마찬가지로 length를 최대 인덱스 1보다 큰 값으로 설정하면 배열이 자동으로 확장되지만 추가되지는 않습니다. 새로운 요소는 끝에 빈 공간을 추가하면 됩니다.

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

a.length=5;
console.log (a); //[1,2] //정의되지 않은 항목이 3개 없습니다

요소 추가/제거

기본 방법

위 예시에서는 배열에 요소를 추가하는 방식을 사용하였으며, 인덱스를 직접 사용하면 됩니다(인덱스가 연속일 필요는 없습니다)

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

var a=new Array(1,2 ,3) ;
a[3]=4;
console.log(a);//[1, 2, 3, 4]

앞서 언급했듯이 배열도 객체이고, 인덱스도 그냥 특수 속성이므로 객체 속성을 삭제하는 방법을 사용하고 배열 요소를 삭제하려면 삭제를 사용하면 됩니다

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

delete a[2];
console.log (a[2]); //정의되지 않음

이는 a[2]를 정의되지 않은 상태로 직접 할당하는 것과 비슷합니다. 이는 배열의 길이를 변경하지 않으며 인덱스와 다른 데이터 값 간의 해당 관계도 변경하지 않습니다

스택 방식

일부 학생들은 항상 위의 예, 특히 삭제 방법이 우리가 원하는 방식이 아니라는 사실을 발견했습니다. 중간에 요소를 삭제한 후 다음 요소의 색인이 자동으로 줄어들기를 바라는 경우가 많습니다. 스택에서 하나를 가져오는 것과 마찬가지로 배열의 길이도 동시에 하나씩 줄어들게 됩니다. 배열은 이미 이 작업을 수행하는 데 도움이 되었으며 먼저 배열을 사용할 수 있게 되었습니다. 스택을 사용하는 것처럼 오래 지속됩니다

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

var a=new Array(1,2 ,3) ;
a.push(4);
console.log(a);//[1, 2, 3, 4]
console.log(a.length);//4
console.log(a.pop(a));//4
console.log(a) //[1, 2, 3]
console.log(a.length);/ /3

큐 방식

스택 방식이 구현되었으니 어떻게 선입선출 대기열을 줄일 수 있을까요? 시프트 방식은 배열 인덱스의 가장 작은 요소를 삭제하고 후속 요소의 인덱스를 1씩 줄일 수 있으며, 길이도 1씩 감소합니다. 이는 Shift/Push Queue를 사용하여 시뮬레이션할 수 있습니다. 물론 배열의 헤드에 요소를 추가하는 데 사용되는 Shift 메서드에 해당하는 unshift 메서드가 있습니다.

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

var a=new Array(1,2 ,3) ;
a.unshift(4);
console.log(a);//[4, 1, 2, 3]
console.log(a.length);//4
console.log(a.shift(a));//4
console.log(a) //[1, 2, 3]
console.log(a.length);/ /3

궁극의 유물

1. 색인 생성 시작

2. 요소의 변위 삭제

3. 물론 여러 개의 새 요소를 작성하여 삽입할 수도 있습니다

splice 메소드는 삭제된 요소로 구성된 새 배열을 반환하거나 삭제가 없는 경우 빈 배열을 반환합니다

코드 복사 코드는 다음과 같습니다.var a=new Array(1,2,3, 4,5 );

삭제

처음 두 매개변수를 지정하면 splice를 사용하여 배열 요소를 삭제할 수 있으며, 이로 인해 인덱스 조정 및 길이 조정도 수행됩니다

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

var a=new Array(1,2 ,3, 4,5);

console.log(a.splice(1,3));//[2, 3, 4]
console.log(a.length);//2
콘솔 .log(a);//[1,5]

배열 인덱스가 0부터 시작하지 않으면 결과가 매우 흥미로울 것입니다

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

var a=new Array();
a[2]=2;
a[3]=3;
a[7]=4;
a[8 ]=5;

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

console.log(a.splice(3 ,4) ); //[3]
console.log(a.length); //5
console.log(a);

위의 예에서 볼 수 있듯이 splice의 첫 번째 매개변수는 배열 인덱스에 대한 상대 인덱스 값이 아닌 절대 인덱스 값입니다. 두 번째 매개변수는 삭제된 요소의 개수가 아니라 삭제 작업이 수행된 횟수입니다. 배열은 실제로 인덱스 방향으로 이동하지만 지속적으로 이동됩니다. 동시에 다음 요소의 인덱스가 조정되고 이전 인덱스는 무시됩니다

삽입 및 교체

메서드의 두 번째 매개변수, 즉 삭제 동작의 실행 횟수를 0으로 설정하고, 세 번째 매개변수 이후에는 삽입할 내용을 채워넣기만 하면 스플라이스가 삽입을 수행할 수 있다. 연산을 수행하며 두 번째 매개변수가 0이 아니면 해당 위치에 삭제했다가 삽입하게 되는데 이것이 대체 효과입니다

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

var a=new Array(1,2 ,3, 4,5);
a.splice(1,0,9,99,999);
console.log(a.length); //8
console.log(a);/ /[1 , 9, 99, 999, 2, 3, 4, 5]
a.splice(1,3,8,88,888);
console.log(a.length);//8
console .log(a);//[1, 8, 88, 888, 2, 3, 4, 5]

일반적인 방법

조인(문자)

이 메서드는 C#과 같은 언어에서도 사용할 수 있습니다. 이 메서드의 기능은 매개 변수를 커넥터로 사용하여 배열 요소(객체가 해당 toString() 메서드를 호출함)를 문자열에 연결하는 것입니다.

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

var a=new Array(1,2 ,3, 4,5);
console.log(a.join(',')) //1,2,3,4,5
console.log(a.join(' ') ) / /1 2 3 4 5
슬라이스(시작, 끝)

스플라이스 방식과 혼동하지 마세요, 슬라이스

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

var a=new Array(1,2 ,3, 4,5);
console.log(a); //[1, 2, 3, 4, 5]
console.log(a.slice(1,2));//
console.log(a.slice(1,-1));//[2, 3, 4]
     console.log(a.slice(3,2));//[]
     console.log(a); //[1, 2, 3, 4, 5]

메서드는 배열의 조각 또는 하위 배열을 반환하는 데 사용됩니다. 기록되면 매개변수는 배열의 끝으로 반환됩니다. 매개변수가 음수인 경우 배열의 끝에서부터 계산됩니다. (-3은 배열의 맨 아래에서 세 번째를 의미하므로 대부분의 사람들은 이를 수행하지 않습니다. , 그러나 배열의 길이를 모르고 마지막 n을 버리고 싶을 때 유용하지만 배열 길이는 좋습니다. 알아두세요... , 매우 혼란스러운 사용법), 시작이 끝보다 크면 주목할 가치가 있습니다. 해당 조각은 원래 배열을 변경하지 않지만 새 배열을 반환합니다.

연결(배열)

절단처럼 보이지만 실제로는 발음 기호가 아닙니다. concat 메소드는 배열을 연결하는 데 사용됩니다. a.concat(b)는 a와 b로 구성된 새 배열을 반환합니다. 원본 배열도 배열 내에서 배열을 재귀적으로 연결하지 않습니다

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

var a=new Array(1,2,3,4,5);
var b=new Array(6,7,8,9);
console.log(a. concat(b));//[1, 2, 3, 4, 5, 6, 7, 8, 9]
        console.log(a) //[1, 2, 3, 4, 5]
console.log(b); //[6, 7, 8, 9]
reverse()

메서드는 배열의 순서를 바꾸는 데 사용됩니다. 이전 방법과 다른 점은 원래 배열을 수정한다는 것입니다

.

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

var a=new Array(1,2 ,3, 4,5);
a.reverse();
console.log(a) //[5, 4, 3, 2, 1]

마찬가지로 배열 인덱스가 연속적이지 않거나 0으로 시작하는 경우에도 결과를 주목해야 합니다

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

var a=new Array();
a [2]=2;
a[3]=3;
a[7]=4;
a[8]=5;

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

a.reverse();

정렬

정렬 방법은 배열을 정렬하는 데 사용됩니다. 매개변수가 없으면 알파벳의 오름차순으로 정렬됩니다. 정의되지 않은 경우 개체 요소는 해당 toString을 호출합니다. 자신만의 정의에 따라 정렬하려면 매우 일반적인 전략 패턴인 정렬 메서드를 전달하면 됩니다.

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

var a=new Array(5,4 ,3, 2,1);
a.sort();
console.log(a);//[1, 2, 3, 4, 5]

하지만. . .

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

var a=new Array(7,8 ,9, 10,11);
a.sort();
console.log(a);//[10, 11, 7, 8, 9]

알파벳순으로 7은 10보다 크기 때문입니다. 이때 사용자 정의 정렬 기능을 전달해야 합니다

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

var a=new Array(7,8 ,9, 10,11);
a.sort(function(v1,v2){
return v1-v2;
console.log(a);//[7, 8, 9, 10 , 11]

원칙은 메서드를 직접 전달할 수 있다는 점을 제외하면 C#의 정렬(.NET Framework의 디자인 패턴 - 목록 정렬에 전략 패턴 적용)과 유사합니다.

sort는 내부적으로 두 요소의 크기를 비교할 때마다 매개변수가 없으면 알파벳이 직접 결정됩니다. 매개변수가 있는 경우 비교되는 두 매개변수가 사용자 정의 메소드에 전달되고 ( 비교 두 숫자는 사용자 지정 메서드의 v1과 v2에 전달됩니다. 반환 값이 0보다 크면 v1>v2를 의미합니다. 0과 같으면 v1=v2보다 작다는 의미입니다. 0이면 v1

드디어

이런 점을 이해하고 나면 배열은 정말 놀랍습니다. 강력하고 유연하지만, 요소를 순회하고 요소 위치를 얻는 데 있어서 불편한 점도 ECMAScript에서 해결되었으므로 능숙하게 사용할 수 있습니다. 이는 JavaScript를 우아하고 효율적으로 만들 수 있습니다.