JavaScript에서 Arraylist 구현

Nithin Krishnan 2023년10월12일
  1. JavaScript에서 배열 요소 만들기
  2. JavaScript에서 배열 요소 액세스
  3. JavaScript에서 배열에 요소 추가하기
  4. 배열에서 요소 제거
JavaScript에서 Arraylist 구현

우리는 배열의 크기를 지정하지 않고 배열에 요소를 추가할 수 있는 Java의 Arraylist에 매우 익숙합니다. 좋은 기능이지만 JavaScript에 비슷한 기능이 있습니까? 각 언어에는 고유한 데이터 구조 집합이 있습니다. JavaScript에는 동종 값과 이종 값을 저장할 수 있는 배열이 있습니다. 이기종은 값이 문자열, 숫자, 부울 등과 같은 다양한 데이터 유형이 될 수 있으며 모두 단일 배열에 결합될 수 있음을 의미합니다. Java의 ArrayList에 비해 독특하고 더 나은 기능입니다.

JavaScript에서 배열 요소 만들기

JavaScript에서 array를 만드는 것은 쉽습니다. var 키워드를 사용하여 배열을 만듭니다. Java에서 ArrayList를 사용하여 Array를 생성하는 방식과 유사합니다. Java는 ArrayList의 데이터 유형 지정을 주장합니다. 그러나 JavaScript에서는 Array의 데이터 유형을 명시적으로 선언하지 않습니다. JavaScript 인터프리터가 Array에 할당된 값을 기반으로 결정하도록 합니다. 어떤 경우이든 JavaScript의 경우 Array의 유형은 object입니다. Array를 생성하려면 다음 코드를 참조하십시오.

var a = [1, 6, 3, 5];
console.log(a.length);
console.log(typeof a);
console.log(typeof a[2]);

출력:

4
object
number
  • length: JavaScript에는 배열의 크기를 반환하는 length 속성이 있습니다.
  • typeof: typeof는 단항 연산자입니다. 그리고 JavaScript에서 피연산자의 유형을 찾는 데 사용됩니다. 위의 코드는 Array의 데이터 유형을 typeof 연산자를 사용하여 object로 반환합니다.

JavaScript에서 배열 요소 액세스

Java의 Arraylist와 마찬가지로 루프, for 루프 및 while 루프를 사용하여 JavaScript 배열을 반복할 수 있습니다. JavaScript에는 배열의 요소를 반복하기 위한 .foreach() 함수도 있습니다. foreach()를 사용하여 각 Array 요소에서 특정 코드 줄을 실행할 수 있습니다. foreach 함수는 함수를 매개변수로 받아들입니다. 이 함수를 인라인 함수로 작성할 수 있습니다. 더 잘 이해하려면 아래 코드 스니펫을 확인하세요.

var a = ['hello', 1, false];
a.forEach((i) => {
  console.log(typeof i);
})

출력:

string
number
boolean

여기에서 Array의 각 요소에 typeof 연산을 적용합니다. 코드는 웹 브라우저 콘솔에 출력을 추가로 기록합니다. JavaScript에는 Array에서 요소의 위치를 ​​바꾸는 또 다른 함수인 .reverse()가 있습니다. 다음 코드를 참조하십시오.

var a = ['hello', 1, false];
console.log(a.reverse());

출력:

[false, 1, "hello"]

위의 로그는 Google Chrome 웹 브라우저 콘솔에서 가져온 것입니다.

JavaScript에서 배열에 요소 추가하기

Java에서 .add() 함수를 사용하여 ArrayList에 요소를 추가할 수 있습니다. 마찬가지로 JavaScript에는 배열의 다양한 위치에 요소를 추가하는 데 사용할 수 있는 몇 가지 함수가 있습니다.

  • .push(): 이름에서 알 수 있듯이 push() 함수를 사용하여 배열에 요소를 추가할 수 있습니다. 함수에 매개변수로 전달된 요소를 배열 끝에 추가합니다. push() 함수는 원래 배열을 변경합니다. 따라서 코드에서 사용하는 동안 알고 있어야 합니다. 새 요소를 추가한 후 Array의 수정된 크기를 반환합니다.
  • .unshift(): 배열의 시작 부분에 요소를 추가해야 하는 경우 인덱스로 배열의 모든 내용을 재배치해야 하므로 바쁜 작업이 될 것입니다. JavaScript의 .unshift() 함수를 사용하여 이 작업을 수행할 수 있습니다. unshift()를 사용하여 배열의 시작 부분에 하나 이상의 요소를 추가할 수 있습니다. 배열에 추가하려는 요소를 unshift 함수의 매개변수로 전달합니다.
var a = ['hello', 1, false];
a.push(2.15);
console.log(a);
a.unshift(123);
console.log(a);

출력:

["hello", 1, false, 2.15]
[123, "hello", 1, false, 2.15]

출력은 google chrome 웹 브라우저에서 얻은 것과 같습니다. 이 작업은 할당 연산자를 사용하지 않고도 원래 배열을 변경한다는 점에 유의하십시오.

배열에서 요소 제거

마찬가지로 다음 JavaScript 함수를 사용하여 배열에서 요소를 제거할 수 있습니다. Java의 ArrayListremove() 함수와 유사합니다.

  • .pop() array 뒤에서 요소를 제거하려면 .pop() 함수를 사용할 수 있습니다. 이 함수는 원래 Array를 변경하고 방금 꺼낸 마지막 요소를 반환한다는 점에 유의하십시오.
  • .shift() 배열의 시작 부분에서 요소를 제거해야 하는 경우 .shift() 함수를 사용할 수 있습니다. .pop()과 마찬가지로 .shift()도 원래 배열을 변경합니다. 따라서 .shift() 함수를 사용하는 동안 주의하십시오.
var a = [123, 'hello', 1, false, 2.15];
a.pop();
console.log(a);
a.shift();
console.log(a);

출력:

[123, "hello", 1, false]
["hello", 1, false]

여기서 몇 가지 주의할 점이 있습니다.

  1. pop()shift() 함수는 매개변수를 허용하지 않습니다. 그리고 주어진 시간에 배열에서 하나의 요소를 제거하는 데 사용됩니다.
  2. 할당 연산자 없이 원래 배열을 변경합니다. 그러므로 우리는 그것들을 현명하게 사용해야 합니다. 그렇지 않으면 디버그하기 어려울 알려지지 않은 부작용에 갇힐 수 있습니다.

배열에서 여러 요소 추가 및 제거

JavaScript에는 splice() 함수라는 또 다른 메소드가 있습니다. 배열에서 하나 이상의 요소를 추가하거나 제거하는 데 사용할 수 있습니다. splice() 함수는 다음과 같이 몇 가지 매개변수를 사용합니다.

  • startIndex: startIndex 매개변수를 사용하여 배열 인덱스를 지정합니다.
  • count: 이 매개변수는 배열에서 삭제하려는 요소의 수를 지정합니다. 개수가 지정되지 않은 경우 splice()startIndex에서 배열 끝까지 모든 요소를 삭제합니다.
  • elements: 마지막 매개변수는 startIndex에서 Array에 추가하려는 요소 목록입니다. splice() 함수에 요소가 지정되지 않으면 배열에서 요소가 제거됩니다.

더 많은 이해를 위해 다음 코드를 살펴보겠습니다.

var a = [123, 'hello', 1, false, 2.15];
a.splice(2, 1, 'there');
console.log(a);
a.splice(2, 2);
console.log(a);
a.splice(2);
console.log(a);

출력:

[123, "hello", "there", false, 2.15]
[123, "hello", 2.15]
[123, "hello"]

관련 문장 - JavaScript Array