JS 배열 학습: 배열 첨자를 기반으로 요소 추가

青灯夜游
풀어 주다: 2021-08-17 15:19:24
원래의
7222명이 탐색했습니다.

이전 글에서 "JS 배열 학습: 헤드 또는 테일에 요소를 삽입하는 방법은 무엇입니까? 》에서는 배열의 시작이나 끝 부분에 요소를 추가하는 세 가지 방법을 소개했습니다. 이번에는 계속해서 배열 요소를 추가하는 방법에 대해 알아보고 배열 첨자에 따라 요소를 추가하는 방법을 소개하겠습니다. 관심 있는 친구들은 배워보세요~

배열의 각 요소에는 일련번호가 있는데, 이 일련번호는 0 을 인덱스라고 합니다. 배열의 첨자는 매우 중요합니다. 첨자를 사용하여 배열 요소에 액세스할 수 있습니다. 배열 이름[subscript index] 형식으로 첨자를 지정하기만 하면 됩니다. 예: 数组名[下标索引]。例:

a[0]  //表示第0个元素
a[3]  //表示第3个元素
로그인 후 복사

利用下标我们也可以插入元素,下面就来具体介绍一下。

我们可以使用 数组名[下标值] = 元素值 的形式在数组指定下标位置添加新元素

var a = [1,2,3];  //定义数组
a[3] = 4;  //为数组添加一个元素
console.log(a);  //返回[1,2,3,4]
로그인 후 복사

看看输出结果:

JS 배열 학습: 배열 첨자를 기반으로 요소 추가

不过使用这种方法时,需要 指定的下标值 >= 原数组的长度,这样就会在原数组的尾部添加新元素

var a = [1,2,3];  //定义数组
a[4] = 4;  //为数组添加一个元素
console.log(a);
로그인 후 복사

看看输出结果:

JS 배열 학습: 배열 첨자를 기반으로 요소 추가

如果小于原数组的长度,那就不是添加新元素了,会变成替换元素

var a = [1,2,3];  //定义数组
a[1] = 4;  //为数组添加一个元素
console.log(a);
로그인 후 복사

看看输出结果:

JS 배열 학습: 배열 첨자를 기반으로 요소 추가

使用 数组名[下标值] = 元素值 的形式只能在数组指定下标位置添加一个新元素;那么想要在指定下标位置插入一个或多个元素要怎么做呢?

我们可以使用 splice() 方法。splice()是一个强大的方法,不仅可以删除数组元素,还可以添加数组元素,也可以替换数组元素。

下面我们就来聊聊 splice() 方法添加数组元素的功能。

array.splice(index,howmany,item1,.....,itemX)的第1个参数index为指定起始下标位置;第2个参数howmany指定应该删除的元素数目,当值设置为0时,就会不执行删除操作;这样就可以通过第3个及后面参数item1,.....,itemX来插入一个或多个元素。

我们通过下面的例子来具体看看:

var a = [1,2,3,4,5];
a.splice(1,0,"hello");
console.log(a);
로그인 후 복사

可以看出:使用a.splice(1,0,"hello")在下标1的位置(即数组第1个元素位置后)插入一个元素"hello",因此输出结果为:

JS 배열 학습: 배열 첨자를 기반으로 요소 추가

var a = [1,2,3,4,5];
a.splice(2,0,"hello","hi",8);
console.log(a);
로그인 후 복사

可以看出:使用a.splice(2,0,"hello","hi",8)在下标2的位置(即数组第2个元素位置后)插入多个元素"hello"、"hi"、8,因此输出结果为:

JS 배열 학습: 배열 첨자를 기반으로 요소 추가

使用splice() 方法我们也可以实现在数组开头或者结尾添加元素:

var a = [1,2,3,4,5];
a.splice(0,0,"hello");
a.splice(a.length,0,"hi");
console.log(a);
로그인 후 복사

如果想要在数组开头添加元素,就设置该方法第1个参数index的值为0即可;如果想要在数组末尾添加元素,就设置该方法第1个参数index的值为 数组长度 即可,数组长度可以使用a.length

var a = [1,2,3,4,5];
a.splice(5,0,[6,7,8,9]);
console.log(a);
로그인 후 복사

아래 첨자를 사용하여 요소를 삽입할 수도 있습니다.

배열 이름[아래 첨자 값] = 요소 값 형식을 사용하여 배열의 지정된 아래 첨자 위치에 새 요소를 추가할 수 있습니다.

rrreee

출력을 살펴보세요: JS 배열 학습: 배열 첨자를 기반으로 요소 추가
JS 배열 학습: 배열 첨자를 기반으로 요소 추가

단, 이 방법을 사용하는 경우 , 아래 첨자 값>= 원래 배열의 길이를 지정해야 새 요소가 원래 배열의 끝에 추가됩니다

rrreee

출력을 살펴보세요.

JS 배열 학습: 배열 첨자를 기반으로 요소 추가JS 배열 학습: 배열 첨자를 기반으로 요소 추가

원본 길이보다 짧은 경우 배열, 새 요소를 추가하는 것이 아니라 대체 요소가 됩니다

rrreee출력을 보세요:

JS 배열 학습: 배열 첨자를 기반으로 요소 추가🎜🎜 배열 이름 [아래 첨자 값] = 요소 값 형식 사용 배열의 지정된 아래 첨자 위치에만 새 요소를 추가할 수 있습니다. 그러면 지정된 아래 첨자 위치에 하나 이상의 요소를 삽입하는 방법은 무엇입니까? 🎜🎜splice() 메소드를 사용할 수 있습니다. splice()는 배열 요소를 삭제할 수 있을 뿐만 아니라 배열 요소를 추가하고 배열 요소를 바꿀 수도 있는 강력한 메서드입니다. 🎜🎜배열 요소를 추가하는 splice() 메서드의 기능에 대해 이야기해 보겠습니다. 🎜🎜array.splice(index,howmany,item1,...,itemX)첫 번째 매개변수 index는 시작 첨자 위치를 지정합니다. 두 번째 매개변수는 입니다. Howmany는 삭제해야 하는 요소의 수를 지정합니다. 값이 0으로 설정되면 삭제 작업이 수행되지 않으며 세 번째 및 후속 매개변수 item1,... . ,itemX 하나 이상의 요소를 삽입합니다. 🎜🎜다음 예를 자세히 살펴보겠습니다. 🎜rrreee🎜아래 첨자 1의 위치에 a.splice(1,0,"hello")를 사용하는 것을 볼 수 있습니다(예: 배열 요소 위치의 첫 번째 요소) "hello" 요소를 삽입하면 출력 결과는 다음과 같습니다. 🎜🎜🎜JS 배열 학습: 배열 첨자를 기반으로 요소 추가🎜rrreee🎜볼 수 있습니다: a.splice(2,0,"hello", "hi",8) 아래 첨자 2 위치에 "hello", "hi", 8이므로 출력 결과는 다음과 같습니다. 🎜🎜<img.php.cn title="1629184123988638.png" alt=" JS 배열 학습: 배열 첨자를 기반으로 요소 추가"></img.php.cn>🎜🎜splice() 메서드를 사용하면 배열의 시작이나 끝 부분에 요소를 추가할 수도 있습니다. 🎜rrreee🎜 요소를 추가하려는 경우 배열의 시작 부분에서 이 메서드의 첫 번째 매개 변수 인덱스 값을 0으로 설정합니다. 배열의 끝에 요소를 추가하려면 이 메서드의 첫 번째 매개 변수 인덱스 값을 <code>로 설정하면 됩니다. 배열 길이. 배열 길이는 a.length일 수 있습니다. 🎜🎜🎜출력 결과를 살펴보겠습니다. 🎜🎜🎜🎜🎜🎜추가된 배열 요소는 단일 값 또는 배열일 수 있습니다. 🎜🎜rrreee🎜출력 결과: 🎜🎜🎜🎜🎜그렇습니다. 필요하다면 다음 내용을 읽어보세요: 🎜javascript 고급 튜토리얼🎜🎜

위 내용은 JS 배열 학습: 배열 첨자를 기반으로 요소 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿