Résumé JavaScript de 18 méthodes de tableau couramment utilisées

Comme nous le savons tous, demander des données au backend et traiter les données sont des compétences essentielles pour les ingénieurs front-end. Les données demandées au backend sont souvent renvoyées au frontend sous la forme d'un tableau, d'où l'importance des méthodes de traitement des tableaux. imaginé ; méthodes de traitement de tableau Il existe de nombreux documents MDN. De nombreux amis ne parviennent souvent pas à comprendre les points clés lors de l'apprentissage, ce qui entraîne la moitié du résultat avec le double du résultat. Mais ne vous inquiétez pas, j'ai résumé 18 méthodes de traitement de tableau couramment utilisées. au travail.La

forEach()

ne changera pas le tableau d'origine.Le

est une fonction.Le premier paramètre formel de la fonction transmise en interne est la valeur de chaque élément du tableau d'éléments. le second est l'index du numéro d'index. Sa valeur de retour n'est pas définie ;
L'exemple courant est le suivant :

Sortie console

Méthode filter()

La méthode filter() est une méthode de filtrage des tableaux. Les paramètres transmis sont les mêmes que la méthode forEach, mais la valeur de retour est un tableau. L'application réelle consiste à filtrer les tableaux qui remplissent les conditions. les données acquises ;
L'exemple courant est le suivant :

La sortie de la console est la suivante :

Méthode map()

Les paramètres transmis par la méthode map() sont également les mêmes que ci-dessus, et sa valeur de retour est également un nouveau tableau, la méthode map() peut effectuer le même traitement sur chaque élément du tableau en cours d'exécution ; l'exemple est le suivant :

Sortie de la console :

Méthode findIndex()

La méthode findIndex(), comme son nom l'indique, renvoie le numéro d'index du premier élément du tableau qui remplit les conditions. S'il ne peut pas être trouvé, il renvoie -1. Les paramètres transmis sont les mêmes que ci-dessus et l'exemple en cours est le suivant :

let arr = [1, 3, 3, 4, 5, 6, 7]
// Méthode findIndex, renvoie le numéro d'index du premier élément qui remplit les conditions, s'il n'est pas trouvé, renvoie -1
const res = arr.findIndex((élément) => élément > 5)

console.log(res)

 :

Méthode find() La

méthode find() renvoie le premier élément trouvé qui remplit les conditions. Les paramètres transmis sont les mêmes que ci-dessus. L'exemple courant est le suivant :

let arr = [1, 3, 3, 4, 5, 6, 7]
//find() recherche un élément et renvoie le premier élément qui remplit les conditions. S'il est trouvé, il renvoie un élément non défini.
const res2 = arr.find((élément) => {
  article retourné > 5
})

console.log(res2)

sont les suivants :

Méthode some()

Les paramètres transmis par la méthode some() sont les mêmes que ci-dessus et la valeur de retour est une valeur booléenne. Tant qu'un élément remplissant les conditions est trouvé, il retournera vrai. L'exemple est le suivant : :

soit arr = [1, 3, 3, 4, 5, 6, 7]
//une méthode renvoie une valeur booléenne const bl = arr.some((item) => {
  article retourné > 5
})
console.log(bl)

Méthode Every()

Les paramètres transmis par la méthode Every() sont les mêmes que ci-dessus et la valeur de retour est une valeur booléenne, mais chaque élément doit remplir les conditions pour renvoyer true. L'exemple est le suivant :

let arr = [1 ; , 3, 3, 4, 5, 6, 7]
//every() renvoie une valeur booléenne qui doit passer les conditions de filtrage avant de renvoyer true
const bl2 = arr.every((currentValue) => {
  retourner la valeur actuelle < 10
})
console.log(bl2)

Fonction d'induction réduire()

Le premier paramètre de la fonction réduire() est la fonction, le deuxième paramètre est le type de somme des variables temporaires, la fonction du premier paramètre a quatre paramètres, mais le premier paramètre couramment utilisé est Accumuler des variables temporaires (retour est cette valeur), le deuxième élément de paramètre. Le troisième est l'index et le quatrième est le tableau lui-même ; l'exemple de code est le suivant :

let arr = [1, 3, 3, 4, 5, 6, 7]
//reduce() fonction d'induction const previousValue = 0
const arrSum = arr.reduce((previousValue, currentValue) => {
  retourner la valeur précédente + la valeur actuelle
}, 0)
Les résultats de sortie de la console console.log(arrSum)

sont les suivants :

concat() Épissage de tableaux

concat() épisse deux tableaux et renvoie le nouveau tableau épissé. Les tableaux multidimensionnels (tableaux dans les tableaux) ne peuvent pas être épissés ;
L'exemple de code est le suivant :

let arr = [1, 3, 3, 4, 5, 6, 7]
 //concat concatène deux tableaux et renvoie un nouveau tableau
 const newArr3 = [2, 5, 5, 6, 6, 8]
 const concatArr = arr.concat(newArr3)
 console.log(concatArr)

Méthodes pour modifier le tableau d'origine

push()/unshift()

La méthode push()/unshift() consiste à ajouter un élément à la fin et à l'avant du tableau respectivement, et la valeur de retour est la longueur du nouveau tableau

//

La méthode de traitement du tableau changera. Tableau d'origine const Arr = [1, 3, 5, 6, 7, 8, 9]
Arr.push(1)
console.log(Arr)
console.log(Arr)
const a = Arr.unshift(1)

console.log(a)

sont les suivants :

pop()/shift()

Ces deux méthodes pop() supprime la dernière valeur du tableau et shift() supprime la valeur du premier élément du tableau ; la valeur de retour est l'élément supprimé

arr.pop(1) ;
console.log(arr)
arr.shift(1)
Les résultats de sortie de la console console.log(arr)

sont les suivants :

sort()/reverse()

La méthode sort() trie. Le paramètre interne est une fonction, function(a, b){ return a - b }. Grâce à cette fonction, vous pouvez contrôler l'ordre de tri par ordre décroissant. la fonction est par ordre croissant. Si le paramètre interne return a - b est par ordre décroissant, return a + b est par ordre croissant ;
reverse() est un retournement de tableau, c'est-à-dire organiser les éléments du tableau dans l'ordre inverse ; l'exemple de code est le suivant :

let arr = [1, 3, 3, 4, 5, 6, 7]arr.sort( (une, b) => {
  return a - b})console.log(arr)arr.reverse()console.log(arr)

splice()

La méthode splice() modifie le tableau d'origine et renvoie un nouveau tableau avec les éléments supprimés, le nombre négatif est le numéro d'index de l'arrière vers l'avant ; le deuxième paramètre est le nombre d'éléments supprimés ;

soit arr = [1, 3, 3, 4, 5, 6, 7]arr.splice(1, 3)console.log(arr)

Autre

flat()

flat() est utilisé pour aplatir les tableaux multidimensionnels. Le paramètre transmis est la profondeur du tableau, qui peut également être infinie, ce qui signifie que la profondeur du tableau est infinie. L'exemple de code est le suivant. :

const Arr2 = [
  [1, 2],
  [vingt-trois],
  [4, 5],
  [5, 6],]console.log(Arr2.flat(Infinity))

résultats de sortie de la console :

fill()

peut remplir un tableau : Méthode d'écriture : Array.fill(1, 2, 4) remplit le tableau avec 1, en commençant par l'élément de valeur d'index 2, en commençant par le numéro d'index de l'élément en commençant par 4, en excluant le la valeur de l'index est 4 éléments ; l'élément rempli écrasera l'élément d'origine correspondant au numéro d'index ;
L'exemple de code est le suivant :

const Arr2 = [
  [1, 2],
  [vingt-trois],
  [4, 5],
  [5, 6],]console.log(Arr2.fill(1, 0, 4))

résultats de sortie de la console :