자바스크립트 배열

컴퓨터 과학에서 배열은 0부터 시작하는 인덱싱된 데이터 구조입니다.

기본 정의 데이터 구조에서 데이터가 컴퓨터 메모리에 저장되는 방식을 결정합니다. 기술적으로 말하면 데이터 구조는 다음과 같이 정의됩니다.

... a data organization, management, and storage format that enables efficient access and modification.
— Wikipedia

애플리케이션에서 적시에 올바른 데이터 구조를 사용하면 최상의 성능을 얻을 수 있습니다. JavaScript 성능은 그 자체로 전체 주제이며 이 게시물이나 이 시리즈에서는 다루지 않습니다.

JavaScript 배열은 조용하게 시작하기 쉽지만 나중에 알게 되겠지만 JavaScript에서 배열을 조작하는 방법이 많이 있습니다.

모든 스크린샷은 Firefox 71.0 및 개발자 도구에서 가져온 것입니다. 언급할 가치가 있는 Firefox 71.0의 특정 기능 중 하나는 콘솔의 여러 줄 코드 편집기입니다.


JavaScript에서 배열을 만드는 방법에는 두 가지가 있습니다. 그들은:

대괄호 표기 → []

new Array() 구문 → new Array()

두 번째 구문은 객체 지향 형식이며 위협적일 수 있는 반면 대괄호 표기법은 초보자에게 친숙하므로 코드 예제에서 사용할 것입니다.

브라우저로 전환하고 여러 줄 코드 편집기를 켰는지 확인하십시오.

다음 코드를 입력합니다.

// create an empty array
var a = [];

// check the array
a;

그런 다음 실행 버튼을 클릭하여 코드를 실행합니다.



이제 0부터 시작하는 색인 ​​번호를 사용하여 일부 요소를 추가해 보겠습니다.

// Add the elements
a[0] = "Linux";
a[1] = "macOS";
a[2] = "Microsoft Windows";

// check if there are elements in the array
a;

콘솔 편집기로 전환하고 코드를 실행합니다.



인덱스 번호를 사용하여 이러한 요소를 검색할 수 있습니다.



존재하지 않는 요소를 검색하려고 하면 undefined 가 표시됩니다.




모든 배열에는 배열의 요소 수인 길이 속성이 있습니다.

형식은 다음과 같습니다.

array.length

이전 예제 사용:

a.length;

// Expected output: 3

코드가 콘솔에서 실행될 때 동일한 출력이 표시됩니다.



내부적으로 JavaScript 배열은 개체이므로 delete 연산자를 사용하여 배열에서 요소를 제거할 수 있습니다.

delete a[1]; // delete element at index 1

// Expected output: true

콘솔에서 이것은 또한 true를 반환합니다:



이제 어레이를 확인하면 삭제된 어레이 위치에 undefined가 표시됩니다.



배열에서 요소를 삭제하면 바람직하지 않은 undefined로 이어지는 배열에 구멍이 생겼습니다.
splice() 방법을 사용하면 이 문제를 해결할 수 있습니다. splice() 메서드는 시작 인덱스와 배열에서 제거할 요소 수를 사용합니다. 제거 후 모든 요소가 재정렬되고 해당 인덱스가 각각 변경됩니다.

이를 실제로 확인하는 가장 좋은 방법은 배열에 더 많은 요소를 추가한 다음 splice() 메서드를 사용하여 일부를 삭제하는 것입니다. 그런 다음 배열의 요소를 나열하면 해당 인덱스가 변경된 것을 볼 수 있습니다.

먼저 배열을 비웁니다. 빈 배열( [] )을 변수a에 할당하여 이를 수행할 수 있습니다.



다음으로 일부 요소를 추가합니다.

// seven elements will be added to
// the array

a[0] = "Linus Torvalds";
a[1] = "Dennis Ritchie";
a[2] = "William H. Gates";
a[3] = "Time Berners-Lee";
a[4] = "Stephen Hawking";
a[5] = "Lawrence Page";
a[6] = "Paul Allen";

콘솔에서:



다음으로 인덱스 2와 인덱스 4 사이의 세 요소를 제거합니다.

// This will remove three elements

a.splice(2, 3);

// the removed element 
// Array(3) [ "William H. Gates", "Time Berners-Lee", "Stephen Hawking"]

콘솔에서:



배열을 확인하면 요소가 재정렬되었음을 알 수 있습니다.




여기에서 논의한 것보다 JavaScript 배열에 더 많은 것이 있지만 시작하기에 충분합니다.

다음은 개체입니다.