a présenté les concepts de base des tableaux et quelques fonctions simples de fonctionnement des éléments de tableau. En fait, les tableaux fournissent beaucoup plus de fonctions.
push , pop , shift et unshift sont des fonctions qui opèrent aux deux extrémités du tableau. Elles ont été mentionnées ci-dessus et ne seront pas répétées dans cet article.
a été brièvement présentée dans l'article précédent. Un tableau est un objet spécial, nous pouvons donc essayer d'utiliser la méthode de suppression d'attributs de l'objet : delete .
Par exemple :
let arr = [1,2,3,4,5];delete arr[2];console.log(arr);
Les résultats de l'exécution du code sont les suivants :
Faites attention à la position jaune dans l'image. Bien que l'élément ait été supprimé, la longueur du tableau est toujours 5 et il y a un空supplémentaire à la position supprimée. Si nous accédons à l'élément d'index 2 , nous obtiendrons le résultat suivant :
La raison de ce phénomène est que delete obj.key supprime la valeur correspondante via key , c'est-à-dire que delete arr[2] supprime la paire clé-valeur 2:3 dans le tableau. Lorsque nous accédons à l'indice 2 , il undefined .
Dans un tableau, on espère souvent qu'après la suppression d'un élément, la position de l'élément sera remplie par les éléments suivants et que la longueur du tableau deviendra plus courte.
Pour le moment, nous avons besoin splice() .
doit être noté à l'avance que splice() est assez polyvalente et ne supprime pas uniquement des éléments. Voici la syntaxe :
arr.splice(start[,deleteCount,e1,e2,...,eN] )
méthode splice À partir de la position start , supprimez les éléments deleteCount , puis insérez e1,e2,e3 et d'autres éléments en place.
L'exemple suivant peut supprimer un élément du tableau :
let arr = [1,2,3,4,5]arr.splice(0,1);//Supprimer le premier élément 1console.log(arr)
Le Le code ci-dessus supprime 1 élément à la première position du tableau. Les résultats de l'exécution sont les suivants :
revient à supprimer un seul élément. Il vous suffit de modifier le deuxième paramètre par le nombre spécifié. Par exemple :
let arr = [1,2,3,4,5];arr splice(0,3) ;//Supprimez les trois premiers éléments console.log(arr);//[4,5]
Les résultats de l'exécution du code sont les suivants :
Si nous fournissons un seul paramètre start , alors tous les éléments après start du tableau seront supprimés. Par exemple :
let arr = [1,2,3,4,5]arr.splice(2); //Supprimer Console.log(arr);//[1,2]:résultats de l'exécution du code
de l'indice 2 et de tous les éléments suivants
Si nous fournissons plus de deux paramètres, nous pouvons remplacer des éléments de tableau, par exemple :
let arr = [1,2,3,4,5];arr.splice(0,2,'itm1',' itm2', 'itm3');console.log(arr);//['itm1','itm2','itm3',3,4,5]
Les résultats de l'exécution du code sont les suivants :
Le code ci-dessus effectue en fait une opération en deux étapes, supprimant d'abord 2 éléments à partir de 0 , puis en insérant trois nouveaux éléments à la position 0 .
Si nous changeons le deuxième paramètre (le nombre de suppressions) en 0 , alors nous ne pouvons insérer que des éléments sans supprimer d'éléments. Par exemple :
let arr = [1,2,3,4,5]arr.splice( 0, 0,'x','y','z')console.log(arr);//['x','y','z'1,2,3,4,5]
La fonction splice() renverra le tableau d'éléments supprimés, par exemple :
let arr = [1,2,3,4,5]let res = arr.splice(0,3,'x','y' ) console.log(arr)//['x','y',4,5]console.log(res)//[1,2,3]
Résultats de l'exécution du code :
Nous pouvons utiliser des nombres négatifs pour indiquer la position où commencer les éléments opérationnels, par exemple :
let arr = [1,2,3,4,5]arr.splice(-1,1,'x','y' ,'z ')console.log(arr)//[1,2,3,4,'x','y','z']
Les résultats de l'exécution du code sont les suivants :
slice() peut intercepter un tableau dans une plage spécifiée. La syntaxe est la suivante :
arr.slice([start],[end])
renvoie un nouveau tableau. Le nouveau tableau commence au start et se termine à end , mais n'inclut pas end .
Exemple :
let arr = [1,2,3,4,5]console.log(arr.slice(2,5))//[3,4,5]console.log(arr.slice(1,3) )//[2,3]
Résultat de l'exécution du code :
slice() peut également utiliser des indices négatifs :
let arr = [1,2,3,4,5]console.log(arr.slice(-3))//[3,4,5]console.log(arr . slice(-5,-1))//[1,2,3,4]
Les résultats de l'exécution du code sont les suivants :
Si vous ne fournissez qu'un seul paramètre à la méthode slice() , il sera tronqué à la fin du tableau, tout comme splice() .
La fonction concat() peut concaténer plusieurs tableaux ou d'autres types de valeurs dans un long tableau. La syntaxe est la suivante :
arr.concat(e1, e2, e3)
Le code ci-dessus renverra un nouveau tableau, et le nouveau tableau est concaténé par arr Il est formé de e1 , e2 et e3 .
Exemple :
let arr = [1,2,3]console.log(arr.concat([4,5],6,7,[8,9]))
Le résultat de l'exécution du code est le suivant :
Les objets ordinaires, même s'ils ressemblent à des objets, sont toujours insérés dans le tableau dans son ensemble, par exemple :
let arr = [1,2]let obj = {1:'1',2:2}console.log (arr.concat(obj)) résultats de l'exécution du code :
Cependant, si l'objet possède la propriété Symbol.isConcatSpreadable , il sera traité comme un tableau :
let arr = [1,2]let obj = {0:'x',
1: 'oui',
[Symbol.isConcatSpreadable] : vrai,
length:2 }console.log(arr.concat(obj)) résultats de l'exécution du code :
parcourt l'intégralité du tableau et fournit une fonction d'opération pour chaque élément du tableau Syntaxe :
let arr = [1,2]arr.forEach((itm,idx,array)=>{
...}) Exemple d'application :
let arr = [1,2,3,4,5]arr.forEach((itm)=>{
console.log(itm)}) résultats de l'exécution du code :
laissez arr = [1,2,3,4,5]arr.forEach((itm,idx,array)=>{
console.log(`arr[${idx}] in [${array}] is ${itm}`)}) résultats de l'exécution du code :
sont similaires aux chaînes indexOf , lastIndexOf et includes peuvent être utilisés avec l'indice de l'élément spécifié dans le tableau de requête :
arr.indexOf(itm,start) : recherchez itm à partir de start . S'il est trouvé, renvoie l'indice, sinon renvoie -1 ;arr.lastIndexOf(itm,start) : recherche dans l'ensemble du tableau dans l'ordre inverse jusqu'à start et renvoie le premier indice trouvé (c'est-à-dire le dernier élément correspondant dans le tableau). S'il n'est pas trouvé, renvoie -1 ;arr.includes(itm,start) : recherchez itm à partir de start , renvoie true s'il est trouvé, sinon renvoie falseexemple :
let arr = [1,2,3,4,5, 6,"7", "8", "9" ,0,0,true,false]console.log(arr.indexOf(0))//9console.log(arr.lastIndexOf(0))//10console. log(arr.includes(10))//falseconsole. log(arr.includes(9))//false
Ces méthodes utilisent === lors de la comparaison des éléments du tableau, donc false et 0 sont différents.
Gestion de NaN
NaN est un nombre spécial, et il existe des différences subtiles entre les trois dans la gestion NaN :
let arr = [NaN,1,2,3,NaN]console.log(arr.includes(NaN))//trueconsole. log( arr.indexOf(NaN))//-1console.log(arr.lastIndexOf(NaN))//-1La
raison de ce résultat est liée aux caractéristiques de NaN lui-même, c'est-à-dire que NaN n'est égal à aucun nombre , y compris lui-même.
Ces contenus ont été abordés dans les chapitres précédents. Pour les chaussures pour enfants oubliées, pensez à revoir le passé et à apprendre le nouveau.
rencontrent souvent des tableaux d'objets pendant le processus de programmation, et les objets ne peuvent pas être directement comparés à l'aide === . Comment trouver des objets qui remplissent les conditions du tableau ?
À ce stade, vous devez utiliser find et findIndex . La syntaxe est la suivante :
let result = arr.find(function(itm,idx,array){
//élément de tableau itm //indice d'élément idx //le tableau de tableau lui-même //passe une fonction de jugement, si la fonction renvoie vrai, renvoie l'objet actuel itm}) Par exemple, nous recherchons des objets dont l'attribut name est égal à xiaoming :
laissez arr =[
{id:1,nom:'xiaoming'},
{id:2,nom:'xiaohong'},
{id:3,name:'xiaojunn'},]let xiaoming = arr.find(function(itm,idx,array){
if(itm.name == 'xiaoming')return true;})console.log(xiaoming) résultat de l'exécution du code :
Si aucun objet ne remplit les conditions, undefined sera renvoyé.
Le code ci-dessus peut également être simplifié en :
let xiaoming = arr.find((itm)=> itm.name == 'xiaoming').
L'effet d'exécution est exactement le même.
Le but de arr.findIndex(func) est presque le même que celui arr.find(func) La seule différence est que arr.findIndex renvoie l'indice de l'objet qualifié au lieu de l'objet lui-même. S'il n'est pas trouvé, il renvoie. -1 .
find et findIndex ne peuvent trouver qu'un seul objet qui répond aux exigences. S'il existe plusieurs objets qui répondent aux exigences dans un tableau, vous devez utiliser filter . La syntaxe est la suivante :
let results = arr.filter(function(. itm,idx,tableau){
//Même utilisation que find, mais renverra un tableau d'objets qui répondent aux exigences //S'il n'est pas trouvé, un tableau vide sera renvoyé}) Par exemple :
let arr =[
{id:1,nom:'xiaoming'},
{id:2,nom:'xiaohong'},
{id:3,name:'xiaojunn'},]let res = arr.filter(function(itm,idx,array){
if(itm.name == 'xiaoming' || itm.name == 'xiaohong')return true;})console.log(res) résultat de l'exécution du code :
arr.map peut appeler une fonction sur chaque objet du tableau puis renvoyer le tableau traité. C'est l'une des méthodes de tableaux les plus utiles et les plus importantes.
Syntaxe :
let arrNew = arr.map(function(itm,idx,array){
//Renvoyer un nouveau résultat}) Par exemple, renvoyer le tableau de longueur correspondant au tableau de chaînes :
let arr = ['I','am','a','student']let arrNew = arr.map((itm) = >itm.length)//return itm.lengthconsole.log(arrNew)//[1,2,1,7]
résultat de l'exécution du code :
arr.sort trie le tableau sur place et renvoie le tableau trié. Cependant, puisque le tableau d'origine a été modifié, la valeur de retour n'a en réalité aucun sens.
Le tri dit sur place signifie trier dans l'espace du tableau d'origine au lieu de créer un nouveau tableau
let arr = ['a','c','b']arr.sort()console.log(arr)
exécution de code résultat:
Notez que par défaut, la méthode
sorttrie par ordre alphabétique , ce qui convient au tri de chaînes. Si vous souhaitez trier d'autres types de tableaux, vous devez personnaliser la méthode de comparaison
pour les tableaux numériques
let arr = [1,3,2] arr. trier(fonction(a,b){
si (a > b) renvoie 1 ;
si (a < b) renvoie -1 ;
return 0;}) Résultat de l'exécution du code :
sort utilise l'algorithme de tri rapide en interne, ou il peut s'agir de l'algorithme timsort , mais nous n'avons pas besoin de nous en soucier, nous devons seulement faire attention à la fonction de comparaison.
La fonction de comparaison peut renvoyer n'importe quelle valeur numérique, un nombre positif signifie > , un nombre négatif signifie < et 0 signifie égal, nous pouvons donc simplifier la méthode de comparaison numérique :
soit arr = [1,3,2]arr.sort(( a,b)=> a - b)
Si vous souhaitez trier dans l'ordre inverse, échangez simplement les positions de a et b :
let arr = [1,3,2]arr.sort((a,b)=> b - a)Tri
des chaînes
Vous avez oublié d'utiliser str.localeCompare(str1) pour la comparaison des chaînes ?
let arr = ['asdfas','success','failures']arr.sort((a,b)=>a.localeCompare (b))
code Résultat de l'exécution :
arr.reverse est utilisé pour les tableaux inversés
let arr = [1,2,3]arr.reverse()console.log(arr)//[3,2,1]
Il n'y a rien à dire à ce sujet.
Vous vous souvenez de la fonction de fractionnement de chaîne ? La fonction de fractionnement de chaîne peut diviser la chaîne en un tableau de caractères :
let str = 'xiaoming,xiaohong,xiaoli'let arr = str.split(',')//['xiaoming','xiaohong','xiali'] Impopulaire connaissance, la fonction
splita un deuxième paramètre, qui peut limiter la longueur du tableau générélet str = 'xiaoming,xiaohong,xiaoli'let arr = str.split(',',2)//['xiaoming',' xiaohong' ]
La méthode arr.join() est l'opposé de la méthode split . Elle peut combiner un tableau en une chaîne.
Par exemple :
let arr = [1,2,3]let str = arr.join(';')console.log(str) résultat de l'exécution du code :
arr.reduce est similaire à la méthode arr.map . Elles transmettent toutes deux une méthode puis appellent cette méthode sur les éléments du tableau dans l'ordre. La différence est que lorsque app.map traite les éléments du tableau, chacun. L'appel d'élément est indépendant et arr.reduce transmettra le résultat de l'appel de l'élément précédent à la méthode de traitement de l'élément actuelle.
Syntaxe :
let res = arr.reduce(function(prev,itm,idx,array){
//prev est le résultat renvoyé par l'appel d'élément précédent //init servira de résultat de l'appel d'élément précédent lorsque le premier élément est exécuté}, [init]) Imaginez simplement comment implémenter la somme des éléments d'un tableau composé de Nombres? Il n'y a aucun moyen d'implémenter map pour le moment, vous devez utiliser arr.reduce :
let arr = [1,2,3,4,5]let res = arr.reduce((sum,itm)=>sum+. itm,0) console.log(res)//15
Le processus d'exécution du code est le suivant :
arr.reduceRight a le même objectif que arr.reduce , sauf que les méthodes sont appelées sur les éléments de droite à gauche.
Le tableau est un cas particulier d'objet.L'utilisation de typeof ne permet pas de distinguer avec précision la différence entre les deux :
console.log(typeof {})//objectconsole.log(typeof [])//object Les deux sont des objets,Nous vous devez utiliser Array.isArray() pour porter des jugements supplémentaires :
console.log(Array.isArray({}))//falseconsole.log(Array.isArray([]))//true arr.some(func) Les méthodes arr.some(func) et arr.every(func) sont utilisées pour vérifier les nombres, et le mécanisme d'exécution est similaire à map .
some
exécute la méthode passée sur chaque élément du tableau. Si la méthode renvoie true , elle renvoie true immédiatement. Si tous les éléments ne renvoient pas true , elle renvoie false .
each
exécute la méthode transmise sur chaque élément du tableau, renvoyant true si tous les éléments renvoient true , sinon il renvoie false .
Par exemple :
let arr = [1,2,3,4,5]//Détermine s'il y a des éléments supérieurs à 2 dans le tableau console.log(arr.some((itm)=>{
if(itm > 2)return true;}))//true//Détermine si tous les éléments sont supérieurs à 2console.log(arr.every((itm)=>{
if(itm > 2)return true;}))//false Dans toutes les méthodes de tableau, à l'exception sort , il existe un paramètre fixe rare thisArg La syntaxe est la suivante :
arr.find(func,thisArg)arr.filter(. func,thisArg)arr.map(func,thisArg)
Si nous passons thisArg , alors cela deviendra this dans func .
Ce paramètre est peu utile dans des circonstances normales, mais si func est une méthode membre (méthode d'un objet) et this est utilisée dans la méthode, alors thisArg sera très significatif.
Par exemple :
laissez obj = {
numéro : 3,
fonction(itm){
console.log(ce)
return itm > this.num;//Trouver des nombres supérieurs à 3}}let arr = [1,2,3,4,5,6,7]let newArr = arr.filter(obj.func,obj)console.log (newArr) résultat de l'exécution du code :
Ici, nous pouvons voir que this dans func est la valeur thisArg que nous avons transmise.
Si nous utilisons des méthodes membres d'objet sans spécifier la valeur de thisArg , this sera undefined , ce qui entraînera une erreur de programme.