JavaScript를 사용하여 특정 배열 위치에 항목을 추가하는 방법

JavaScript에서 특정 배열 위치(색인)에 항목을 추가하는 방법을 알아보세요.

배열에 항목을 추가하고 싶지만 추가(마지막에 추가)하거나 앞에 추가(처음에 추가)하고 싶지 않다고 가정해 보겠습니다. 배열의 특정 위치/위치에 항목을 추가하고 싶습니다.

참고:특정 위치/장소에서 데이터를 조작할 때 종종 이를 색인이라고 부릅니다. 배열 색인 사용 0에서 계산을 시작합니다. , 즉:

0 1입니다.
1 2입니다.
등

따라서 5개의 항목이 있는 배열이 있고 세 번째 항목에 액세스하려면 2로 주소를 지정합니다. .

자, 여기 온 목적을 합시다.

splice() 메소드 입력

배열의 특정 인덱스 위치에 항목을 추가하려면 강력한 JavaScript array.splice()를 사용할 수 있습니다. 방법. splice() 메소드는 배열에서 항목을 추가하거나 제거할 수 있습니다.

splice() 구문은 다음과 같습니다.

array.splice(startIndex)
array.splice(startIndex, deleteCount)
array.splice(startIndex, deleteCount, value1)

splice() 메서드는 3개 이상의 인수를 사용합니다:

인수 1:startIndex 추가하려는 위치(위치)입니다.
인수 2:선택 사항 deleteCount 삭제할 항목 수를 지정할 수 있는 인수(startIndex에서 위치).
인수 3:배열에 추가하려는 새 항목 값.

실용적인 splice() 예제

"나중에 질문하기"라는 액션으로 가득 찬 가상의 영화에 출연한 배우 목록이 있다고 가정해 보겠습니다. 배우들은 영화에서 자신의 역할 규모에 따라 순서대로 나열됩니다.

출연진 중 한 배우는 자신의 이름이 주 출연진 목록에 표시되지 않아 화를 내기로 결정합니다.

const mainCastList = [
  "Michael Jai White",
  "Jean-Claude Van Damme",
  "Sigourney Weaver",
  "Jason Statham",
  "Uma Thurman"
  "The Rock",
  "Wesley Snipes"
]

그리고 당황한 배우는 다름 아닌 바로 전능한 스티븐 시걸(!!) 이 영화에 등장하는 누군지 정확히 7초, 무의미한 적 10명을 무찌르기에 충분한 시간. Seagal 씨는 이 시간이 그를 주요 출연진 목록에 올리기에 충분한 상영 시간이라고 생각합니다.

그리고 누가 Steven Seagal과 논쟁을 벌이겠습니까?

자, splice()를 사용하여 그를 메인 캐스트 목록에 추가해 보겠습니다. 방금 배운 메서드 및 인수 구문입니다.

우리는 메인 캐스트 목록에 Michael Jai White 바로 다음에 Steven Seagal을 두 번째 배우로 추가할 것입니다(이유는 잠시 후에 설명하겠습니다).

const mainCastList = [
  "Michael Jai White",
  "Jean-Claude Van Damme",
  "Sigourney Weaver",
  "Jason Statham",
  "Uma Thurman",
  "The Rock",
  "Wesley Snipes",
]

mainCastList.splice(1, 0, "Steven Seagal")

console.log(mainCastList)
// ["Michael Jai White", "Steven Seagal", "Jean-Claude Van Damme", "Sigourney Weaver", "Jason Statham", "Uma Thurman", "The Rock", "Wesley Snipes"]

스티븐, 이제 행복하길 바랍니다!

그리고 반복이 학습의 중요한 부분이기 때문에 위의 코드에서 다음과 같은 일이 발생합니다.

splice()를 첨부합니다. mainCastList 메소드 변수
그런 다음 splice()에 3개의 인수를 적용합니다. , startIndex 위치(1 ), deleteCount (0 =아무것도 삭제되지 않음), 마지막으로 해당 인덱스 위치에 추가하려는 항목("Steven Seagal" ).

아 그리고 우리가 Mr. Seagal을 목록의 1순위로 추가할 수 없는 이유는 Michael Jai White가 분명히 그의 엉덩이를 걷어차기 때문입니다.

splice() 메서드에 대해 알아두면 좋은 정보

한 번에 더 많은 항목 추가

한 번에 더 많은 항목을 추가하려면 다음과 같이 쉼표로 구분합니다.

mainCastList.splice(1, 0, "Steven Seagal", "Sylvester Stallone")

startIndex에서 모든 항목 삭제

두 번째 인수를 전달하지 않으면(이 예에서는 0 ) 그런 다음 모두 startIndex의 항목 위치는 기본적으로 제거됩니다. 따라서 splice()를 사용할 때 주의하십시오. 실제 프로젝트에서.

배열의 끝에서 시작

배열의 시작이 아닌 끝에서 항목을 추가/삭제하려는 위치를 지정하려면 음수 값을 사용하세요. 첫 번째 splice()에서 다음과 같은 인수:

mainCastList.splice(-1, 0, "Steven Seagal")
console.log(mainCastList)
// ["Michael Jai White", "Jean-Claude Van Damme", "Sigourney Weaver", "Jason Statham", "Uma Thurman", "The Rock", "Steven Seagal", "Wesley Snipes"]

이제 Seagal 씨는 주요 출연진 목록에서 마지막 두 번째로, 자신의 책임하에 내리는 과감한 결정입니다.