JavaScript로 특정 배열 인덱스에 요소를 삽입하는 방법

이 기사에서는 JavaScript 배열에 요소를 추가하면서 특정 위치로 설정하는 방법을 알려드리겠습니다.

무대를 설정합시다. 몇 가지 항목이 포함된 사이드바 메뉴가 있습니다.

const sidebarMenu = ['home', 'about', 'contact'];

하지만 프리미엄 사용자를 위해 코스 메뉴를 추가하고 싶습니다. 연락처 항목 바로 앞에 표시되어야 합니다.

JavaScript를 사용하여 특정 인덱스의 배열에 요소 추가

이 항목을 추가하려면 splice method 을 사용할 수 있습니다. 이 방법에는 여러 권한이 있으며 항목을 삭제하는 데에도 사용할 수 있습니다.
따라서 매개 변수를 설정할 때 매우 주의하십시오.

항목을 설정하기 위해 첫 번째 매개변수를 사용하여 위치를 정의할 수 있으며 그 이후의 모든 항목은 우리가 푸시하는 항목입니다.

if (premiumUser) {
  sidebarMenu.splice(2, 0, 'courses');
}

이제 sidebarMenu에 다음 내용이 있습니다. [ 'home', 'about', 'courses', 'contact' ] .

숫자가 무엇을 의미하는지 봅시다:

첫 번째 것 ( 2 ): 시작 위치

두 번째 것( 0 ): 삭제 횟수

나머지: 추가할 항목

JavaScript 배열은 0에서 시작하므로 시작 위치를 정의할 때 이 점을 염두에 두어야 합니다.

우리 배열은 다음과 같이 계산됩니다.

0: 홈

1: 약

2: 연락처

스플라이스 방법을 사용하면 기술적으로 다음과 같이 말할 수 있습니다.
위치 2에 항목을 추가하고 기존 요소를 제거하지 않으며 추가할 요소는 'courses'입니다.

여러 요소 추가

splice의 매우 멋진 점은 추가할 수 있는 항목 수에 제한이 없다는 것입니다.
따라서 여러 항목을 추가할 수도 있습니다.

if (premiumUser) {
  sidebarMenu.splice(2, 0, 'courses', 'profile');
}

// [ 'home', 'about', 'courses', 'profile', 'contact' ]

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나