Tableau JavaScript


Le rôle d'un objet tableau est de stocker une série de valeurs en utilisant des noms de variables distincts.

Instance en ligne

Créez un tableau et attribuez-lui des valeurs :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
var i;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (i=0;i<mycars.length;i++){
	document.write(mycars[i] + "<br>");
}
</script>

</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher les instances en ligne

Vous pouvez trouver plus d'instances en bas de la page.

Qu'est-ce qu'un tableau ?

Un objet tableau utilise des noms de variables distincts pour stocker une série de valeurs.

Si vous disposez d'un ensemble de données (par exemple : nom de la voiture), il existe une variable distincte comme suit :

var car1="Saab";
var car2="Volvo";
var car3="BMW";

Cependant, que se passe-t-il si vous souhaitez trouver une certaine voiture ? Et pas 3 voitures, mais 300 voitures ? Ce ne sera pas une tâche facile !

La meilleure façon est d'utiliser un tableau.

Un tableau peut stocker toutes les valeurs en utilisant un nom de variable, et n'importe quelle valeur est accessible en utilisant le nom de variable.

Chaque élément du tableau a son propre identifiant afin qu'il soit facilement accessible.

Créer un tableau

Il existe trois façons de créer un tableau.

Le code suivant définit un objet tableau nommé myCars :

1 : Méthode conventionnelle :

var myCars=new Array();
myCars[0); ]="Saab"; 
mesCars[1]="Volvo";
myCars[2]="BMW";

2 : Méthode simple :

var myCars=new Array("Saab","Volvo","BMW") ;

3 : Littéral :

var myCars=["Saab","Volvo","BMW"];

Accès aux tableaux

Vous pouvez accéder à un élément spécifique en spécifiant le nom du tableau et le numéro d'index.

L'instance suivante peut accéder à la première valeur du tableau myCars :

var name=myCars[0];

L'exemple suivant modifie le premier élément du tableau myCars :

myCars[0]="Opel";

lamp[0] 是数组的第一个元素。[1] 是数组的第二个元素。

Dans un tableau vous pouvez avoir différents objets

Toutes les variables JavaScript sont des objets. Les éléments du tableau sont des objets. Les fonctions sont des objets.

Ainsi, vous pouvez avoir différents types de variables dans le tableau.

Vous pouvez contenir des éléments d'objet, des fonctions et des tableaux dans un tableau :

myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

Méthodes et propriétés du tableau

Propriétés et méthodes prédéfinies utilisant des objets tableau :

var x=myCars.length // Le nombre d'éléments dans myCars
var y=myCars.indexOf("Volvo") // La valeur d'index de la valeur "Volvo"

Tableau complet Manuel de référence des objets

Vous pouvez vous référer à ce site pour un manuel de référence complet sur toutes les propriétés et méthodes des tableaux.

Le manuel de référence contient des descriptions de toutes les propriétés et méthodes (et plus d'exemples).

Manuel complet de référence des objets tableau

Création de nouvelles méthodes

Le prototype est le constructeur global JavaScript. Il peut construire des propriétés et des méthodes de nouveaux objets Javascript.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮创建一个数组,调用ucase（）方法, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<script>
Array.prototype.myUcase=function(){
	for (i=0;i<this.length;i++){
		this[i]=this[i].toUpperCase();
	}
}
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.myUcase();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

L'exemple ci-dessus crée une nouvelle méthode de tableau pour convertir les caractères minuscules du tableau en caractères majuscules.

Examples

Plus d'exemples

Fusionner deux tableaux - concat()

Instances

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
	
<script>
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
document.write(children);
</script>
	
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Fusionner trois tableaux - concat()

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Utiliser Les éléments du tableau forment une chaîne - join()

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">点击按钮将数组作为字符串输出。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var x=document.getElementById("demo");
	x.innerHTML=fruits.join();
}
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Supprimer le dernier élément du tableau - pop()

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮删除数组的最后一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.pop();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Ajoutez un nouvel élément à la fin du tableau - push( )

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮给数组添加新的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.push("Kiwi")
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

Exécuter l'exemple»

Cliquez sur le bouton "Exécuter l'exemple" pour afficher l'exemple en ligne

Inverser l'ordre des éléments dans un tableau - reverse()

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮将数组反转排序。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.reverse();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Supprimer le premier élément du tableau - shift()

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮删除数组的第一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.shift();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton "Exécuter" Exemple "pour afficher des exemples en ligne

Sélectionner des éléments dans un tableau - slice()

Exemples

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
	var citrus = fruits.slice(1,3);
	var x=document.getElementById("demo");
	x.innerHTML=citrus;
}
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Tri des tableaux (par ordre alphabétique croissant) - sort()

Instance 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.sort();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Trié numériquement (par ordre numérique croissant) - sort()

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return a-b});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Tri numérique (ordre numérique décroissant) - sort()

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮降序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return b-a});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>

</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Ajouter un élément à la 2ème position du tableau - splice ()

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">点击按钮向数组添加元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.splice(2,0,"Lemon","Kiwi");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Convertir le tableau en string-toString()

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">点击按钮将数组转为字符串并返回。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var str = fruits.toString();
	var x=document.getElementById("demo");
	x.innerHTML= str;
}
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Ajouter un nouvel élément au début du tableau - unshift()

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮在数组中插入元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.unshift("Lemon","Pineapple");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
<p><b>注意:</b> unshift()方法不能用于 Internet Explorer 8 之前的版本，插入的值将被返回成<em>undefined</em>。</p>

</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton "Exécuter" Exemple" pour afficher des exemples en ligne