Maison> interface Web> js tutoriel> le corps du texte

Apprentissage des tableaux JS : ajout d'éléments basés sur les indices du tableau

青灯夜游
Libérer: 2021-08-17 15:19:24
original
7139 Les gens l'ont consulté

Dans l'article précédent «Apprentissage des tableaux JS : Comment insérer des éléments en tête ou en queue ?》, nous avons introduit trois façons d'ajouter des éléments au début ou à la fin d'un tableau. Cette fois, nous continuons à découvrir la méthode d'ajout d'éléments du tableau et à présenter comment ajouter des éléments en fonction de l'indice du tableau. Les amis intéressés peuvent en apprendre davantage ~

Chaque élément du tableau a un numéro de série, et ce numéro de série commence à partir de. 0 , est appelé l'index. L'indice du tableau est très important. Nous pouvons utiliser l'indice pour accéder aux éléments du tableau. Il suffit de spécifier l'indice, sous la forme :nom du tableau[index de l'indice]. Exemple :数组名[下标索引]。例:

a[0] //表示第0个元素 a[3] //表示第3个元素
Copier après la connexion

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

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

var a = [1,2,3]; //定义数组 a[3] = 4; //为数组添加一个元素 console.log(a); //返回[1,2,3,4]
Copier après la connexion

看看输出结果:

Apprentissage des tableaux JS : ajout déléments basés sur les indices du tableau

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

var a = [1,2,3]; //定义数组 a[4] = 4; //为数组添加一个元素 console.log(a);
Copier après la connexion

看看输出结果:

Apprentissage des tableaux JS : ajout déléments basés sur les indices du tableau

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

var a = [1,2,3]; //定义数组 a[1] = 4; //为数组添加一个元素 console.log(a);
Copier après la connexion

看看输出结果:

Apprentissage des tableaux JS : ajout déléments basés sur les indices du tableau

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

我们可以使用 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);
Copier après la connexion

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

Apprentissage des tableaux JS : ajout déléments basés sur les indices du tableau

var a = [1,2,3,4,5]; a.splice(2,0,"hello","hi",8); console.log(a);
Copier après la connexion

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

Apprentissage des tableaux JS : ajout déléments basés sur les indices du tableau

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

var a = [1,2,3,4,5]; a.splice(0,0,"hello"); a.splice(a.length,0,"hi"); console.log(a);
Copier après la connexion

如果想要在数组开头添加元素,就设置该方法第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);
Copier après la connexion

Nous pouvons également insérer des éléments à l'aide d'indices. Présentons-les en détail ci-dessous.

Nous pouvons utiliser la formenom du tableau[valeur de l'indice] = valeur de l'élémentpour ajouter un nouvel élément à la position d'indice spécifiée du tableau

rrreee

Regardez le résultat :Apprentissage des tableaux JS : ajout déléments basés sur les indices du tableau
Apprentissage des tableaux JS : ajout déléments basés sur les indices du tableau

Cependant, lorsque vous utilisez cette méthode , vous devez spécifier La valeur de l'indice>= la longueur du tableau d'origine, afin qu'un nouvel élément soit ajouté à la fin du tableau d'origine

rrreee

Regardez le résultat :

Apprentissage des tableaux JS : ajout déléments basés sur les indices du tableauApprentissage des tableaux JS : ajout déléments basés sur les indices du tableau

S'il est inférieur à la longueur de l'original tableau, il n'ajoute pas de nouvel élément, il deviendra un élément de remplacement

rrreeeRegardez le résultat :

3. pngEn utilisant la forme de nom du tableau [valeur de l'indice] = valeur de l'élémentVous ne pouvez ajouter un nouvel élément qu'à la position d'indice spécifiée du tableau ; alors vous souhaitez comment insérer un ou plusieurs éléments à une position d'indice spécifiée ? Nous pouvons utiliser la méthode splice().splice() est une méthode puissante qui peut non seulement supprimer des éléments de tableau, mais également ajouter des éléments de tableau et remplacer des éléments de tableau. Parlons de la fonction de la méthode splice() consistant à ajouter des éléments de tableau. array.splice(index,howmany,item1,...,itemX)Le premier paramètre indexspécifie la position de l'indice de départ, le deuxième Le premier paramètre ; howmanyspécifie le nombre d'éléments qui doivent être supprimés Lorsque la valeur est définie sur 0, l'opération de suppression ne sera pas effectuée de cette manière, le troisième paramètre et les suivants item1,.... . ,itemXpour insérer un ou plusieurs éléments. Regardons de plus près l'exemple suivant : rrreeeOn peut voir que : utilisez a.splice(1,0,"hello")à la position de l'indice 1 (c'est-à-dire le premier à la position de l'élément du tableau), insérez un élément " hello", donc le résultat de sortie est : Apprentissage des tableaux JS : ajout déléments basés sur les indices du tableaurrreeeOn peut le voir : utilisez a.splice(2,0,"hello", "hi",8)Insérer plusieurs éléments " hello", " hi", 8, donc le résultat de sortie est :  Apprentissage des tableaux JS : ajout déléments basés sur les indices du tableauEn utilisant la méthode splice(), nous pouvons également ajouter des éléments au début ou à la fin du tableau : rrreeeSi vous souhaitez ajouter des éléments au début du tableau, définissez la valeur du premier paramètre index de cette méthode sur 0. Voilà, si vous souhaitez ajouter des éléments à la fin du tableau, définissez simplement la valeur du premier paramètre index de cette méthode sur . longueur du tableau. La longueur du tableau peut être a.lengthà obtenir. Jetons un coup d'œil au résultat de sortie : L'élément de tableau ajouté peut être une valeur unique ou un tableau : rrreeeRésultat de sortie : D'accord, c'est tout, si. vous en avez besoin, vous pouvez lire : tutoriel avancé javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!