Heim > Web-Frontend > js-Tutorial > JS-Array-Lernen: Elemente basierend auf Array-Indizes hinzufügen

JS-Array-Lernen: Elemente basierend auf Array-Indizes hinzufügen

青灯夜游
Freigeben: 2021-08-17 15:19:24
Original
7261 Leute haben es durchsucht

Im vorherigen Artikel „JS-Array-Lernen: Wie füge ich Elemente am Kopf oder am Ende ein? 》, wir haben drei Möglichkeiten eingeführt, Elemente am Anfang oder Ende eines Arrays hinzuzufügen. Dieses Mal lernen wir weiterhin die Methode zum Hinzufügen von Array-Elementen kennen und stellen vor, wie man Elemente gemäß dem Array-Index hinzufügt. Interessierte Freunde können mehr darüber erfahren~

Jedes Element im Array hat eine Seriennummer, und diese Seriennummer beginnt bei 0 wird als Index bezeichnet. Der Index des Arrays ist sehr wichtig, um auf die Array-Elemente zuzugreifen. Wir müssen nur den Index in der Form angeben: array name[subscript index]. Beispiel: 数组名[下标索引]。例:

a[0]  //表示第0个元素
a[3]  //表示第3个元素
Nach dem Login kopieren

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

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

var a = [1,2,3];  //定义数组
a[3] = 4;  //为数组添加一个元素
console.log(a);  //返回[1,2,3,4]
Nach dem Login kopieren

看看输出结果:

JS-Array-Lernen: Elemente basierend auf Array-Indizes hinzufügen

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

var a = [1,2,3];  //定义数组
a[4] = 4;  //为数组添加一个元素
console.log(a);
Nach dem Login kopieren

看看输出结果:

JS-Array-Lernen: Elemente basierend auf Array-Indizes hinzufügen

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

var a = [1,2,3];  //定义数组
a[1] = 4;  //为数组添加一个元素
console.log(a);
Nach dem Login kopieren

看看输出结果:

JS-Array-Lernen: Elemente basierend auf Array-Indizes hinzufügen

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

我们可以使用 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);
Nach dem Login kopieren

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

JS-Array-Lernen: Elemente basierend auf Array-Indizes hinzufügen

var a = [1,2,3,4,5];
a.splice(2,0,"hello","hi",8);
console.log(a);
Nach dem Login kopieren

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

JS-Array-Lernen: Elemente basierend auf Array-Indizes hinzufügen

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

var a = [1,2,3,4,5];
a.splice(0,0,"hello");
a.splice(a.length,0,"hi");
console.log(a);
Nach dem Login kopieren

如果想要在数组开头添加元素,就设置该方法第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);
Nach dem Login kopieren

Wir können Elemente auch mithilfe von Indizes einfügen. Wir stellen sie unten im Detail vor.

Wir können die Form array name[subscript value] = element value verwenden, um ein neues Element an der angegebenen tiefgestellten Position des Arrays hinzuzufügen

rrreee

Sehen Sie sich die Ausgabe an: JS-Array-Lernen: Elemente basierend auf Array-Indizes hinzufügen
JS-Array-Lernen: Elemente basierend auf Array-Indizes hinzufügen

Allerdings bei Verwendung dieser Methode , Sie müssen den Indexwert>= die Länge des ursprünglichen Arrays angeben, damit am Ende des ursprünglichen Arrays ein neues Element hinzugefügt wird

rrreee

Sehen Sie sich die Ausgabe an:

JS-Array-Lernen: Elemente basierend auf Array-Indizes hinzufügenJS-Array-Lernen: Elemente basierend auf Array-Indizes hinzufügen

Wenn es kürzer als die Länge des Originals ist Array, es fügt kein neues Element hinzu, es wird zu einem Ersatzelement

rrreeeSehen Sie sich die Ausgabe an:

3. png🎜🎜Unter Verwendung der Form Array-Name [Indexwert] = Elementwert Sie können ein neues Element nur an der angegebenen tiefgestellten Position des Arrays hinzufügen. Dann möchten Sie ein oder mehrere Elemente an einer angegebenen tiefgestellten Position einfügen. 🎜🎜Wir können die splice()-Methode verwenden. splice() ist eine leistungsstarke Methode, die nicht nur Array-Elemente löschen, sondern auch Array-Elemente hinzufügen und Array-Elemente ersetzen kann. 🎜🎜Lassen Sie uns über die Funktion der splice()-Methode zum Hinzufügen von Array-Elementen sprechen. Der erste Parameter index von 🎜🎜array.splice(index,howmany,item1,...,itemX) gibt die Startposition des Index an; >howmany gibt die Anzahl der Elemente an, die gelöscht werden sollen. Wenn der Wert auf 0 gesetzt ist, wird der Löschvorgang nicht auf diese Weise durchgeführt, der dritte und die folgenden Parameter item1,.... .,itemX um ein oder mehrere Elemente einzufügen. 🎜🎜Schauen wir uns das folgende Beispiel genauer an: 🎜rrreee🎜Man sieht Folgendes: Verwenden Sie a.splice(1,0,"hello") an der Position von Index 1 (d. h. der (das erste an der Position des Array-Elements) fügt ein Element „hello“ ein, sodass das Ausgabeergebnis wie folgt lautet: 🎜🎜🎜JS-Array-Lernen: Elemente basierend auf Array-Indizes hinzufügen🎜rrreee🎜Es ist zu sehen: use a.splice(2,0,"hello", „hi“,8) Fügen Sie mehrere Elemente „hello“, „hi“, 8, das Ausgabeergebnis lautet also: 🎜🎜<img src="https://img.php.cn/upload/image/339/868/365/1629184123988638.png" title="1629184123988638.png" alt=" JS-Array-Lernen: Elemente basierend auf Array-Indizes hinzufügen">🎜🎜Mit der splice()-Methode können wir auch Elemente am Anfang oder Ende des Arrays hinzufügen: 🎜rrreee🎜Wenn Sie Elemente am hinzufügen möchten Setzen Sie am Anfang des Arrays den Wert des ersten Parameterindex dieser Methode auf 0. Wenn Sie Elemente am Ende des Arrays hinzufügen möchten, setzen Sie einfach den Wert des ersten Parameterindex dieser Methode auf <code> Array-Länge. Die Array-Länge kann a.length sein. 🎜🎜🎜Sehen wir uns das Ausgabeergebnis an: 🎜🎜🎜🎜🎜🎜Das hinzugefügte Array-Element kann ein einzelner Wert oder ein Array sein: 🎜🎜rrreee🎜Ausgabeergebnis: 🎜🎜🎜🎜🎜Okay, das ist es, wenn Wenn Sie es brauchen, können Sie Folgendes lesen: 🎜Javascript-Tutorial für Fortgeschrittene🎜🎜

Das obige ist der detaillierte Inhalt vonJS-Array-Lernen: Elemente basierend auf Array-Indizes hinzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage