recherche

Maison  >  Article  >  interface Web  >  Quelles sont les méthodes courantes des tableaux javascript ?

Quelles sont les méthodes courantes des tableaux javascript ?

青灯夜游
青灯夜游original
2021-06-22 14:46:379480parcourir

Méthodes courantes : 1. push(); 2. unshift(); 3. pop(); 4. shift(); 6. slice(); ; 8. concat(); 9. reverse(); 10. join(); 11. forEach(), etc.

Quelles sont les méthodes courantes des tableaux javascript ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Méthodes courantes des tableaux JavaScript

Les tableaux fournissent des méthodes courantes pour ajouter, supprimer, remplacer et trier des éléments de tableau.

1) push(element 1,...,element n)

la méthode push() peut ajouter les éléments spécifiés par les paramètres à la fin du tableau à son tour, et renvoie l'addition Longueur du tableau après les éléments (cette méthode doit avoir au moins un paramètre). Les exemples sont les suivants : 

var arr = [1,2,3];
alert(arr.push(4));//返回最终数组的长度:4
alert(arr);//返回：1,2,3,4
alert(arr.push(5,6,7));//返回最终数组的长度:7
alert(arr);//返回：1,2,3,4,5,6,7

2) unshift(element 1,...,element n)

La méthode unshift() peut ajouter les éléments spécifiés par le paramètres au début du tableau dans séquence et renvoie la longueur du tableau après avoir ajouté des éléments. La méthode doit avoir au moins un paramètre. Remarque : IE6 et IE7 ne prennent pas en charge les valeurs de retour des méthodes. Un exemple est le suivant : 

var arr = [1,2,3];
alert(arr.unshift('a'));//返回最终数组的长度:4
alert(arr);//返回：a,1,2,3
alert(arr.unshift('b','c','d'));//返回最终数组的长度:7
alert(arr);//返回：b,c,d,a,1,2,3

3) pop()

La méthode pop() fait apparaître (supprime) le dernier élément du tableau et renvoie l'élément sauté . Un exemple est le suivant : 

var arr = ['A','B','C','D'];
alert(arr.pop());//返回：D
alert(arr);//返回：A,B,C

4) shift()

la méthode shift() peut supprimer le premier élément du tableau et renvoyer l'élément supprimé. L'exemple est le suivant : 

var arr = ['A','B','C','D'];
alert(arr.shift());//返回：A
alert(arr);//返回：B,C,D

5) splice(index,count[,element 1,...,element n])

la méthode splic() est relativement puissant, il peut implémenter la suppression d'un nombre spécifié d'éléments, le remplacement d'éléments spécifiés et l'ajout d'éléments à une position spécifiée. L'implémentation de ces différentes fonctions doit être déterminée en combinaison avec les paramètres de la méthode :

Lorsque les paramètres n'ont que deux paramètres, index et count, si count n'est pas égal à 0, la méthode splice() implémente la fonction de suppression et renvoie les éléments supprimés en même temps : Supprimez le nombre d'éléments spécifié par le paramètre count à partir de la position spécifiée par le paramètre index

Lorsqu'il y a plus de 3 paramètres et que le paramètre count est ; pas 0, la méthode splice() implémente la fonction de remplacement et renvoie les éléments remplacés en même temps : Utilisez le troisième paramètre et les suivants pour remplacer le nombre d'éléments spécifié par le paramètre count en commençant à la position spécifiée par le paramètre index

Lorsqu'il y a plus de 3 paramètres et que le paramètre count est 0, la méthode splice() Implémentez la fonction d'ajout : utilisez le troisième paramètre et les suivants pour ajouter à la position spécifiée par le paramètre index.

Des exemples de chaque fonction implémentée par la méthode splice() sont les suivants.

① Utilisez splice() pour supprimer le nombre spécifié d'éléments de la position spécifiée : 

var arr = ['A','B','C','D'];
//2个参数，第二个参数不为 0，实现删除功能
alert(arr.splice(0,2));
alert(arr);  //返回C,D

② Utilisez splice() pour remplacer le nombre spécifié d'éléments à partir de la position spécifiée par le spécifié element : 

var arr = ['A','B','C','D'];
//3个参数，第二个参数不为 0，实现替换功能：用 a 替换掉 A，返回：A
alert(arr.splice(0,1,'a'));
alert(arr);  //返回:a,B,C,D
alert(arr.splice(0,2,'a or b'));//用a or b替换掉a和B，返回a,B
alert(arr);  //返回：a or b,C,D

③ Utilisez splice() pour ajouter l'élément spécifié à la position spécifiée : 

var arr = ['A','B','C','D'];
//4个参数，第二个参数为 0，实现添加功能：在下标为 1 处添加 aaa,bbb，没有返回值
alert(arr.splice(1,0,'aaa','bbb'));
alert(arr);//返回：A,aaa,bbb,B,C,D

[Exemple 1] Utilisez la méthode splice() pour réaliser la déduplication du tableau. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用splice方法实现数组去重</title>
<script>
     var arr = [1,2,2,2,4,2];
     for(var i = 0; i < arr.length; i++){
         for(var j = i + 1; j < arr.length; j++){
              if(arr[i] == arr[j]){
                  arr.splice(j,1);//删除 j 位置处的元素
                  j--;
              }
         }
     }
     alert(arr);//返回1,2,4三个元素
</script>
</head>
<body>
</body>
</html>

Le code ci-dessus utilise splice() avec deux paramètres pour implémenter la fonction de suppression des éléments spécifiés.

6) slice(index1[,index2])

La méthode slice() renvoie une tranche contenant des éléments entre index1~index2-1 dans le tableau d'objets tableau. . Le paramètre index2 peut être omis. S'il est omis, cela signifie renvoyer les éléments à partir de la position index1 jusqu'à la dernière position. Il convient de noter que cette méthode lit uniquement les éléments spécifiés et n'apporte aucune modification au tableau d'origine.

Les exemples sont les suivants : 

var arr = [&#39;A&#39;,&#39;B&#39;,&#39;C&#39;,&#39;D&#39;];
alert(arr.slice(0,3));  //返回：A,B,C
alert(arr);   //返回A,B,C,D
alert(arr.slice(0));   //返回数组全部元素：A,B,C,D
alert(arr);   //返回A,B,C,D

7) sort(), sort(compareFunction)

la méthode sort() est utilisée pour trier les tableaux en fonction à certaines règles : Lorsque le paramètre de la méthode est vide, les éléments du tableau seront triés par ordre lexicographique (c'est-à-dire que l'encodage Unicode des éléments est trié du petit au grand lorsque le paramètre est une fonction anonyme, le tableau) ; les éléments seront triés selon les règles spécifiées par la fonction anonyme. sort() renverra le tableau trié après le tri. L'exemple est le suivant.

① Triez le tableau lexicographiquement. 

var arr = [&#39;c&#39;,&#39;d&#39;,&#39;a&#39;,&#39;e&#39;];
alert(arr.sort());   //返回排序后的数组：a,c,d,e
alert(arr);   //返回排序后的数组：a,c,d,e

D'après le code ci-dessus, nous pouvons voir que sans paramètres, sort() trie les éléments du tableau par ordre lexicographique.

Utilisons le sort() des éléments pour trier plusieurs nombres et voir quel est le résultat : 

var arr = [4,3,5,76,2,0,8];
arr.sort();
alert(arr);  //返回排序后的数组：0,2,3,4,5,76,8

On voit qu'après le tri, le résultat n'est pas celui attendu. Le nombre maximum devrait. soit 76. Au final, 8 est classé en dernier. Il semble que 8 soit le plus grand parmi ces éléments, c'est-à-dire que les éléments ne sont pas triés par taille numérique.

Pourquoi ce résultat se produit-il ? En effet, sort() trie chaque élément par chaîne par défaut. Lors du tri, il compare chaque caractère de l'élément bit par bit de gauche à droite. Plus l'encodage Unicode du bit correspondant est grand, plus l'élément At est grand. cette fois, les caractères suivants ne seront plus comparés ; les caractères aux positions suivantes ne seront comparés que lorsque les caractères correspondants sont identiques. Évidemment, le tableau ci-dessus est trié en utilisant les règles de tri par défaut de sort(). À ce stade, si vous souhaitez que les éléments du tableau soient triés par taille numérique, vous devez modifier les règles de tri via des paramètres de fonction anonymes.

② Triez le tableau selon les règles spécifiées par les paramètres de la fonction anonyme.

Ce qui suit définit une fonction anonyme pour modifier les règles de tri par défaut de sort() afin de trier les éléments numériques ci-dessus par taille numérique : 

var arr = [4,3,5,76,2,0,8];
arr2.sort(function(a,b){
     return a-b;//从小到大排序
     //return b-a;//从大到小排序
});
alert(arr);//返回排序后的数组：0,2,3,4,5,8,76

说明：匿名函数中返回第一个参数减第二个参数的值，此时将按元素数值从小到大的规则排序各个元素：当两个参数的差为正数时，前后比较的两个元素将调换位置排序；否则元素不调换位置。如果返回第二个参数减第一个参数的值，则按元素数值从大到小的规则排序各个元素，元素调换规则和从小到大类似。

当数组元素的前缀为数字而后缀为字符串时，如果希望这些元素能按数字大小进行排序，此时需对匿名函数中的参数作一些变通处理。因为这些参数代表了数组元素，所以它们也是一个包含数字和字符的字符串，因此要按数字大小来排序它们，就需要将参数解析为一个数字，然后再返回这些解析结果的差。

示例如下：

var arrWidth = [&#39;345px&#39;,&#39;23px&#39;,&#39;10px&#39;,&#39;1000px&#39;];
arrWidth.sort(function(a,b){
     return parseInt(a)-parseInt(b);
});
alert(arrWidth);//排序后的结果为：10px,23px,345px,1000px

此外，我们通过匿名函数，还可以实现随机排序数组元素。示例如下：

var arr = [1,2,3,4,5,6,7,8];
arr.sort(function(a,b){
     return Math.random()-0.5;//random()返回：0～1之间的一个值
});
alert(arr);//排序后的结果为：4,3,1,2,6,5,7,8。注意：每次执行的结果可能会不一样

上述代码中的匿名函数并没有返回两个参数的差值，而是返回 Math 对象中的 random() 随机函数和 0.5 的差值，这就使得元素的排序将不是根据元素大小来排序。由于 random() 的值为 0～1 之间的一个随机值，所以它和 0.5 的差时正时负，这就导致数组元素位置的调换很随机，所以排序后的数组是随机排序的。

8) concat(数组1,…,数组n)

concat() 将参数指定的数组和当前数组连成一个新数组。示例如下：

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];
alert(arr1.concat(arr2,arr3));//最终获得连接后的数组：1,2,3,4,5,6,7,8,9

9) reverse()

reverse() 方法可返回当前数组倒序排序形式。示例如下：

var arr = [1,2,3,4,5,6];
alert(arr.reverse());//返回：6,5,4,3,2,1

10) join(分隔符)

join() 方法可将数组内各个元素按参数指定的分隔符连接成一个字符串。参数可以省略，省略参数时，分隔符默认为“逗号”。

11) forEach()

forEach() 方法用于对数组的每个元素执行一次回调函数。

语法如下：

array对象.forEach(function(currentValue[,index[,array]])[,thisArg])

forEach() 方法的第一个参数为 array 对象中每个元素需要调用的函数。

forEach() 方法中的各个参数说明如下：

  • currentValue 参数：必需参数，表示正在处理的数组元素（当前元素）；

  • index 参数：可选参数，表示正在处理的当前元素的索引；

  • array 参数：可选参数，表示方法正在操作的数组；

  • thisArg 参数，可选参数，取值通常为 this，为空时取值为 undefined。

forEach() 函数的返回值为 undefined。示例如下：

var fruit = ["苹果","橙子","梨子"];
fruit.forEach(function(item,index){
    console.log("fruit[" + index + "] = " + item);
});

上述示例的运行后将在控制台中分别显示：fruit[0]=苹果、fruit[1]=橙子和fruit[2]=梨子。

12) filter()

filter() 方法用于创建一个新的数组，其中的元素是指定数组中所有符合指定函数要求的元素。

语法如下：

array对象.filter(function(currentValue[,index[,array]])[,thisArg])

filter() 方法的第一个参数为回调函数，array 对象中每个元素都需要调用该函数，filter() 会返回所有使回调函数返回值为 true 的元素。

filter() 方法中的各个参数说明如下：

  • currentValue 参数：必需参数，表示正在处理的数组元素（当前元素）；

  • index 参数：可选参数，表示正在处理的当前元素的索引；

  • array 参数：可选参数，表示方法正在操作的数组；

  • thisArg 参数，可选参数，取值通常为 this，为空时取值为 undefined。

filter() 函数返回一个新数组，其中包含了指定数组中的所有符合条件的元素。如果没有符合条件的元素则返回空数组。

示例如下：

var names1 = ["张山","张小天","李四","张萌萌","王宁","陈浩"];//原数组
function checkName(name){ //定义回调函数，判断名字是否姓“张”
     if(name.indexOf("张") != -1){
              return true;
         }else{
              return false;
         }
}
var names2 = names1.filter(checkName);//对names1执行回调用函数，返回所有姓张的名字
names2.forEach(function(item,index){//遍历names2数组中的每个元素
          console.log("names2[" + index + "] = " + item);
});

上述示例运行后将在控制台中分别显示：names2[0]=张山、names2[1]=张小天和names2[2]=张萌萌。

13) map()

map() 方法用于创建一个新的数组，其中的每个元素是指定数组的对应元素调用指定函数处理后的值。

语法如下：

array对象.map(function(currentValue[,index[,array]])[,thisArg])

map() 方法的第一个参数为回调函数，array 对象中每个元素都需要调用该函数。

map() 方法中的各个参数说明如下：

  • currentValue 参数：必需参数，表示正在处理的数组元素（当前元素）；

  • index 参数：可选参数，表示正在处理的当前元素的索引；

  • array 参数：可选参数，表示方法正在操作的数组；

  • thisArg 参数，可选参数，取值通常为 this，为空时取值为 undefined。

map() 函数返回一个新数组，其中的元素为原始数组元素调用回调函数处理后的值。示例如下：

var number = [1,2,3];//原数组
var num=number.map(function(item){//对原数组中的每个元素*2，将值分别存储在num数组中
          return item * 2;
});
num.forEach(function(item,index){//遍历num中的每个元素
          console.log("num[" + index + "]=" + item);
});

上述示例运行后将在控制台中分别显示：num[0]=2、num[1]=4和num[2]=6。

14) reduce()

reduce() 用于使用回调函数对数组中的每个元素进行处理，并将处理进行汇总返回。语法如下：

array对象.reduce(function(result,currentValue[,index[,array]])[,initialValue])

reduce() 方法的第一个参数为回调函数。

reduce() 方法中的各个参数说明如下。

  • result 参数：必需参数，表示初始值或回调函数执行后的返回值。在第一次调用回调函数前，result 参数表示初始值；在调用回调函数之后，result 参数表示回调函数执行后的返回值。

    需要注意的是，如果指定了 initialValue 参数，则初始值就是 initialValue 参数值，否则初始值为数组的第一个元素。

  • currentValue 参数：必需参数，表示正在处理的数组元素（当前元素）。

    需要注意的是，如果指定了 initialValue 参数，则第一次执行回调函数时的 currentValue 为数组的第一个元素，否则为第二个元素。

  • index 参数：可选参数，表示正在处理的当前元素的索引。

  • array 参数：可选参数，表示方法正在操作的数组。

  • initialValue 参数，可选参数，作为第一次调用回调函数时的第一个参数的值。如果没有提供该参数，第一次调用回调函数时的第一个参数将使用数组中的第一个元素。

    需要注意的是：对一个空数组调用 reduce() 方法时，如果没有指定 initialValue 参数此时将会报错。

reduce() 的使用示例如下：

var num1 = [1,3,6,9];
//reduce()没有initialValue参数
var num2 = num1.reduce(function(v1,v2){ //①
     return v1 + 2 * v2;//将当前元素值*2后和初始值或函数的前一次执行结果进行相加
});
console.log("num2=" + num2);//输出：num2=37
//reduce()提供了initialValue参数
var num3 = num1.reduce(function(v1,v2){ //②
     return v1 + 2 * v2;//将当前元素值*2后和初始值或函数的前一次执行结果进行相加
},2);
console.log("num3=" + num3); //输出：num3=40

上述示例中，① 处调用的 reduce() 没有指定 initialValue 参数，因而初始值为数组的第一个元素，即 1，此时 reduce() 的执行过程等效于：1+2*3+2*6+2*9 运算表达式的执行，结果返回 37。② 处调用的 reduce() 指定了值为 2 的 initialValue 参数，因而初始值为 2，此时 reduce() 的执行过程等效于：2+2*1+2*3+2*6+2*9 运算表达式的执行，结果返回 40。

15) find()

find() 用于获取使回调函数值为 true 的第一个数组元素。如果没有符合条件的元素，将返回 undefined。

语法如下：

array对象.find(function(currentValue[,index[,array]])[,thisArg])

filter() 方法的第一个参数为回调函数，array 对象中每个元素都需要调用该函数，filter() 会返回所有使回调函数返回值为 true 的元素。

filter() 方法中的各个参数说明如下：

  • currentValue 参数：必需参数，表示正在处理的数组元素（当前元素）；

  • index 参数：可选参数，表示正在处理的当前元素的索引；

  • array 参数：可选参数，表示方法正在操作的数组；

  • thisArg 参数，可选参数，取值通常为 this，为空时取值为 undefined。

find() 函数使用示例如下：

var names = ["Tom","Jane","Marry","John","Marissa"];
//定义回调函数
function checkLength(item){
     return item.length >= 4;
}
var name = names.find(checkLength);//返回名字数组中名字长度大于或等于4的第一个名字
console.log("name: " + name);

上述示例运行后将在控制台中输出 name:Jane。

【相关推荐：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!

JavaScript Array count sort foreach Filter math 回调函数 字符串 map undefined 对象 this
Déclaration：
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
Article précédent：Par quoi peut se terminer la balise p en HTML ?Article suivant：Par quoi peut se terminer la balise p en HTML ?

Articles Liés

Voir plus