Maison > interface Web > js tutoriel > Introduction aux tableaux JavaScript de base et avancés

Introduction aux tableaux JavaScript de base et avancés

巴扎黑
Libérer: 2017-09-05 09:37:16
original
1545 Les gens l'ont consulté

L'éditeur suivant vous apportera un résumé des méthodes de tableau de base et avancées en JavaScript (recommandé). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un coup d'œil.

Résumé des méthodes de tableau courantes :

Ci-dessous, je résume uniquement les méthodes de tableau couramment utilisées dans es3. . Au total, il y en a 11. Les 9 nouvelles méthodes de tableau dans es5 seront résumées séparément plus tard.

1 méthode pour connecter des tableaux : concat()

2 méthodes pour convertir des tableaux en chaînes : join(), toString()

6 façons d'ajouter et de supprimer des éléments de tableau Méthodes : pop(), push(), shift(), unshift(), slice(), splice()

2 méthodes de tri de tableaux : reverse(), sort()

Méthodes pour connecter des tableaux :

1. concat()

Fonction : connexion Deux tableaux , fusionné dans un nouveau tableau.

Utilisation : arr1.concat(arr2, arr2...)

Exemple :


<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

var arr2 = new Array(3)

arr2[0] = "James"

arr2[1] = "Adrew"

arr2[2] = "Martin"

document.write(arr.concat(arr2))

</script>
Copier après la connexion

Sortie :

George,John,Thomas,James,Adrew,Martin

Méthode pour convertir un tableau en chaîne :

1. join()

Fonction : Utilisé pour mettre tous les éléments du tableau dans une chaîne. et séparés par le délimiteur spécifié.

Utilisation : arrayObject.join(separator)

Exemple :


<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr.join("."))

</script>
Copier après la connexion

Sortie :

George. John.Thomas

Remarque : La valeur de retour est une chaîne. S'il n'y a pas de séparateur, la séparation par défaut est une virgule.

2. toString()

Fonction : convertit le tableau en chaîne et renvoie le résultat.

Utilisation : arrayObject.toString()

Exemple :


<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

document.write(arr.toString());

</script>
Copier après la connexion

Sortie :

George, John ,Thomas

La valeur de retour est la même que la chaîne renvoyée par la méthode join() sans paramètres. Les éléments du tableau sont séparés par des virgules.

Méthodes pour ajouter et supprimer des éléments du tableau :

pop()

Fonction : Utilisée pour supprimer et renvoyer le dernier élément du tableau.

Utilisation : arrayObject.pop()

La méthode pop() supprimera le dernier élément de arrayObject, décrémentera la longueur du tableau de 1 et renverra la valeur de l'élément qu'elle supprime. Si le tableau est déjà vide, pop() ne modifie pas le tableau et renvoie une valeur non définie.

Exemple :


<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr)

document.write("<br />")

document.write(arr.pop())

document.write("<br />")

document.write(arr)

</script>
Copier après la connexion

Sortie :


George,John,Thomas
Thomas
George,John
Copier après la connexion

2. push()

Fonction : Ajoutez un ou plusieurs éléments à la fin du tableau et renvoie la nouvelle longueur.

Utilisation : arrayObject.push(newelement1,newelement2,....,newelementX)

Il modifie directement arrayObject au lieu de créer un nouveau tableau. Les méthodes push() et pop() utilisent la fonction first-in-last-pop fournie par le tableau.

Exemple :


<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.push("James") + "<br />")

document.write(arr)

</script>
Copier après la connexion

Sortie :


George,John,Thomas
4
George,John,Thomas,James
Copier après la connexion

3. shift()

Fonction : Utilisé pour supprimer le premier élément du tableau et renvoyer la valeur du premier élément.

Utilisation : arrayObject.shift()

Si le tableau est vide, la méthode shift() ne fera rien et retournera une valeur non définie. Veuillez noter que cette méthode ne crée pas de nouveau tableau, mais modifie directement le arrayObject d'origine.

Exemple :


<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.shift() + "<br />")

document.write(arr)

</script>
Copier après la connexion

Sortie :


George,John,Thomas
George
John,Thomas
Copier après la connexion

4, unshift()

Fonction : Vous pouvez ajouter un ou plusieurs éléments au début du tableau et renvoyer la nouvelle longueur.

Utilisation : arrayObject.unshift(newelement1,newelement2,....,newelementX)

La méthode unshift() insérera ses paramètres dans la tête de arrayObject et remplacera les éléments existants Déplacer séquentiellement aux indices supérieurs pour faire de la place. Le premier argument de la méthode deviendra le nouvel élément 0 du tableau, s'il y a un deuxième argument, il deviendra le nouvel élément 1, et ainsi de suite.

Veuillez noter que la méthode unshift() ne crée pas de nouvelle création, mais modifie directement le tableau d'origine. La méthode unshift() ne fonctionne pas correctement dans Internet Explorer !

Exemple :


<script type="text/javascript">

var arr = new Array()

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.unshift("William") + "<br />")

document.write(arr)

</script>
Copier après la connexion

Sortie :


George,John,Thomas
4
William,George,John,Thomas
Copier après la connexion

5, slice()

Fonction : renvoie les éléments sélectionnés dans un tableau existant.

Utilisation : arrayObject.slice(start,end)

start

Obligatoire. Spécifie où commencer la sélection. S'il est négatif, il spécifie la position à partir de la fin du tableau. Autrement dit, -1 fait référence au dernier élément, -2 fait référence à l'avant-dernier élément, et ainsi de suite.

end

可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()。


<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.slice(1) + "<br />")

document.write(arr)

</script>
Copier après la connexion

输出:


George,John,Thomas
John,Thomas
George,John,Thomas
Copier après la connexion

6,splice()

作用:向/从数组中添加/删除项目,然后返回被删除的项目。

用法:arrayObject.splice(index,howmany,item1,.....,itemX)

index

必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

howmany

必需。要删除的项目数量。如果设置为 0,则不会删除项目。

item1, ..., itemX

可选。向数组添加的新项目。

该方法会改变原始数组。

示例:


<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")arr.splice(2,0,"William")
document.write(arr + "<br />")

</script>
Copier après la connexion

输出:


George,John,Thomas,James,Adrew,Martin

George,John,William,Thomas,James,Adrew,Martin
Copier après la connexion

数组元素排序:

1、reverse()

作用:用于颠倒数组中元素的顺序。

用法:arrayObject.reverse()

该方法会改变原来的数组,而不会创建新的数组。

示例:


<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.reverse())

</script>
Copier après la connexion

输出:


George,John,Thomas
Thomas,John,George
Copier après la connexion

2,sort()

作用:用于对数组的元素进行排序。

用法:arrayObject.sort(sortby)

Sortby:可选,按规定是顺序排序。必须是函数。

相对于其他方法来说复杂了一点。

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。

若 a 等于 b,则返回 0。

若 a 大于 b,则返回一个大于 0 的值。


<script type="text/javascript">

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)

arr[0] = "10"

arr[1] = "5"

arr[2] = "40"

arr[3] = "25"

arr[4] = "1000"

arr[5] = "1"

document.write(arr + "<br />")

document.write(arr.sort(sortNumber))

</script>
Copier après la connexion

输出:


10,5,40,25,1000,1
1,5,10,25,40,1000
Copier après la connexion

上面这个例子是让数组元素从小到大排序,如果想实现从大到小排序,只需要将sortNumber函数中的a-b改为b-a即可。


<script type="text/javascript">

function sortNumber(a,b)

{

return b - a;

}

var arr = new Array(6)

arr[0] = "10"

arr[1] = "5"

arr[2] = "40"

arr[3] = "25"

arr[4] = "1000"

arr[5] = "1"

document.write(arr + "<br />")

document.write(arr.sort(sortNumber))

</script>
Copier après la connexion

输出:


10,5,40,25,1000,1
1000,40,25,10,5,1
Copier après la connexion

补充:

数组对象的属性:

属性

描述

constructor

返回对创建此对象的数组函数的引用。

length

设置或返回数组中元素的数目。

prototype

使您有能力向对象添加属性和方法。

以下这个例子展示了如何使用constructor属性


<script type="text/javascript">

var test=new Array();

if (test.constructor==Array)

{

document.write("This is an Array");

}

if (test.constructor==Boolean)

{

document.write("This is a Boolean");

}

if (test.constructor==Date)

{

document.write("This is a Date");

}

if (test.constructor==String)

{

document.write("This is a String");

}

</script>
Copier après la connexion

输出:


This is an Array
Copier après la connexion

length 属性可设置或返回数组中元素的数目。数组的 length 属性总是比数组中定义的最后一个元素的下标大 1。对于那些具有连续元素,而且以元素 0 开始的常规数组而言,属性 length 声明了数组中的元素的个数。设置 length 属性可改变数组的大小。如果设置的值比其当前值小,数组将被截断,其尾部的元素将丢失。如果设置的值比它的当前值大,数组将增大,新的元素被添加到数组的尾部,它们的值为 undefined。

获取数组的长度:arrayObject.length

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal