Résumé de 7 méthodes de traitement itératif couramment utilisées pour les tableaux en JavaScript

Cet article vous apporte des connaissances pertinentes sur javascript. Il présente principalement des problèmes liés aux 7 méthodes de traitement itératif des tableaux couramment utilisées en JavaScript. Examinons-les ensemble. J'espère que cela sera utile à tout le monde.

【Recommandations associées : Tutoriel vidéo javascript, front-end web】

Méthode 1.map()

1.1 Scénario d'application : Utiliser une certaine règle pour mapper un nouveau tableau (parcourir chaque élément dans le tableau, et effectuez le traitement correspondant sur chaque élément et renvoie un nouveau tableau)

Par exemple : +1 pour chaque élément du tableau

 let arr = [10, 20, 30, 40, 50]
 //item数组每一项的值,index数组的下标
 let newArr = arr.map((item, index) => {
      return item + 1
    })
    console.log(newArr)//[11, 21, 31, 41, 51]

1.2 Remarque :

(1). au tableau Longueur

(2). La longueur du nouveau tableau renvoyé par la fonction map est égale à la longueur du tableau d'origine

(3). Vous devez renvoyer dans la fonction de rappel. de l'élément actuellement parcouru. S'il n'est pas renvoyé, chaque élément du nouveau tableau Tous sont indéfinis

2. Méthode forEach()

2.1 Scénario d'application : utilisé pour parcourir un tableau, équivalent à une autre façon d'écrire une boucle for

 let arr = [10, 20, 30, 40, 50]
    arr.forEach((item, index) => {
      console.log(`下标为${index}的元素是${item}`)
    })
 //控制台打印结果
 //下标为0的元素是10
 //下标为1的元素是20
 //下标为2的元素是30
 //下标为3的元素是40
 //下标为4的元素是50

.

2.2 Notes :

(1). Le nombre d'exécutions de la fonction de rappel est égal à la longueur du tableau

(2). La fonction forEach n'a pas de valeur de retour

(3). , même s'il est renvoyé manuellement, cela ne mettra pas fin à la boucle

Méthode 3.filter()

3.1 Scénario d'application : utilisé Filtrer les éléments du tableau qui remplissent les conditions et renvoyer le nouveau tableau filtré

Par exemple : trouver les nombres pairs dans le tableau

 let arr = [1, 2, 3, 4, 5, 6, 7, 8]
 let newArr = arr.filter((item, index) => {
 	//return一个布尔值
      return item % 2 == 0
    })
    console.log(newArr)//[2,4,6,8]

3.2 Notes :

(1). Le nombre d'exécutions de la fonction de rappel est égal à la longueur du tableau

(2) La longueur du nouveau tableau renvoyé par le filtre. La fonction n'est pas égale à la longueur du tableau d'origine

(3). La fonction de rappel doit renvoyer une valeur booléenne si la valeur de retour est vraie, les éléments actuellement parcourus seront ajoutés au nouveau tableau. la valeur est fausse, elle ne sera pas ajoutée au nouveau tableau

Méthode 4.some()

4.1 Scénario d'application : utilisé pour déterminer s'il y a des éléments qui remplissent les conditions dans le tableau

Par exemple : déterminer s'il y a est un nombre supérieur à 100 dans le tableau (Existe, la valeur de retour est vraie, n'existe pas, la valeur de retour est fausse)

let arr = [10, 50, 150, 200, 60, 30]
let bol = arr.some((item, index) => {
      return item > 100
    })
    console.log(bol)//true

4.2 Notes :

(1). égale à la longueur du tableau

(2). La valeur de retour de certaines fonctions est une valeur booléenne

(3). La fonction de rappel renvoie une valeur de type booléen pour terminer le parcours. se termine et la valeur de retour de certaines fonctions est fausse. Si la valeur de return est fausse, le parcours continue et la valeur de retour de certaines fonctions est fausse

5.every() méthode

5.1 Scénario d'application : utilisé. pour déterminer si tous les éléments du tableau remplissent les conditions (idée de changement), ont des fonctions similaires à la méthode some() et peuvent être comparés et compris

Par exemple : Déterminez si tous les éléments du tableau sont supérieurs à 100 (tous sont supérieurs à 100, la valeur de retour est vraie, tant qu'un élément est inférieur à 100, la valeur de retour est fausse)

let arr = [10, 50, 150, 200, 60, 30]
let bol = arr.every((item, index) => {
      return item > 100
    })
    console.log(bol)//false

5.2 Remarque :

(1) Rappel Le nombre d'exécutions de la fonction n'est pas égal. à la longueur du tableau

(2). La valeur de retour de chaque fonction est une valeur booléenne

(3). La fonction de rappel renvoie une valeur de type booléen pour terminer le parcours. et la valeur de retour de chaque fonction est vraie. Si la valeur de retour est fausse, elle continuera à se terminer et la valeur de retour de chaque fonction est fausse

6.Méthode findIndex()

6.1 Scénario d'application : adapté aux objets dans le tableau où les éléments sont Type, plus efficace que la boucle for traditionnelle

6.2 Fonction : Obtenez la position (indice) du premier élément qui remplit les conditions

let arr = [
            { name: '张三', age: 20 },
            { name: '李四', age: 30 },
            { name: '王五', age: 25 },
            { name: '赵六', age: 33 },
            { name: '小七', age: 10 },
        ];
 let i=arr.findIndex((item,index)=>{
	return item.age>30
})
//打印的i为符合条件的第一个元素下标
console.log(i)//3

6.2 Notes :

(1). return est vrai, le parcours se termine, la valeur de retour de la méthode findIndex est la valeur d'index actuelle ; si la valeur de retour est fausse, le parcours continue. Si true n'est pas renvoyé une fois tous les parcours du tableau terminés, la valeur de retour du. La méthode findIndex est la méthode -1

7.reduce()

7.1 Scénario d'application : somme de tableau/moyenne/valeur maximale/minimale

7.2 Fonction : parcourez les éléments du tableau et exécutez une fonction de rappel pour chaque élément

//数组求和
let arr = [10, 20, 30, 40]
//sum:初始值,默认为数组的第一个元素
//item:数组的每一个元素,默认为数组的第二个元素
let getSum = arr.reduce((sum, item) => {
 //这里必须要return，相当于把本次计算得结果赋值给下一次得sum : sum = sum + item;
      return sum + item
    })
    console.log(getSum)//100

7.2 Notes :

(1). Il est préférable de donner une valeur initiale pour éviter les erreurs de tableau vide

//数组求和
let arr = [10, 20, 30, 40]
//加了初始值0之后,此时sum开始默认为0,item则默认为数组的第一个元素
let getSum = arr.reduce((sum, item) => {
 //这里必须要return，相当于把本次计算得结果赋值给下一次得sum : sum = sum + item;
      return sum + item
    },0)
    console.log(getSum)//100

//数组求最大值
 let max = arr.reduce((sum, item) => {
      return Math.max(sum, item)
    }, 0)
    console.log(max)//40

Une attention particulière ici est que la valeur de somme de chaque tour est la valeur de retour du tour précédent

Résumé

.

Exemple étendu :

arr.reduce( function(sum,value,index,arr){}) méthode

reduce() reçoit une fonction comme accumulateur, et chaque valeur du tableau (de gauche à à droite) commence à être réduit et finalement calculé à une valeur.

reduce() peut être utilisée comme fonction d'ordre supérieur pour composer des fonctions.

Remarque : réduire() n'exécutera pas la fonction de rappel pour les tableaux vides.

参数	详情
sum第一个参数	第一次为数组的第一个数组元素的值（下标为0），依次往后是返回计算结果的值
value 第二个参数	开始为数组元素第二个的值（下标为1），依次往后循环
index第三个参数	依次为数组元素的下标
arr第四个参数	为数组的整体
initialValue	为第一参数的默认值，设置的话，第一个参数的默认值为initialValue的值，则 第二个参数则将使用数组第一个元素（下标为0 ），没有设置的话，第一个参数将使用数组第一个元素，而 第二个参数 将使用数组第二个元素。

function sum(arr){
    return arr.reduce(function(sum,value,index,arr){
    	console.log(sum);
        console.log(value);
        console.log(index);
        console.log("~~")
        console.log(arr)
        return sum+y    },initialValue)}console.log(sum([1,2,3,4,5]))

arr.every(function(value,index,arr){})

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组。

参数	详情
value	数组元素
index	数组下标
arr	当前数组的整体

function sum(arr){
    return arr.every(function(value,index,arr){
        console.log(value);
        console.log(index);
        console.log("~~")
        return value>=1
    })}console.log(sum([1,2,3,4,5]))

arr.some(function(value,index,arr){})

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。

参数	详情
value	数组元素
index	数组下标
arr	当前数组的整体

function sum(arr){
    return arr.some(function(value,index,arr){
        console.log(value);
        console.log(index);
        console.log("~~")
        return value>=1
    })}console.log(sum([1,2,3,4,5]))

arr.filter(function(value,index,arr){})

filter()方法过滤查找全部，对数组元素进行判断，满足条件的会组成一个新的数组返回
注意:如果都不符合条件，会得到一个空数组
注意：如果所有元素都符合条件，会得到一个包含所有元素的新数组它与原数组进行===或==比较会得到false

参数	详情
value	数组元素
index	数组下标
arr	当前数组的整体

function sum(arr){
    return arr.filter(function(value,index,arr){
        console.log(value);
        console.log(index);
        console.log("~~")
        return value>=5
    })}console.log(sum([1,2,3,4,5]))

arr.map(function(value,index,arr){})

map对数组元素进行循环，有返回值，返回值会组成一个新的数组
注意：map可以处理一对一的元素映射

参数	详情
value	数组元素
index	数组下标
arr	当前数组的整体

const source = [1,2,3,4]const target = source.map(n=>({id:n,label:`label${n}`}))console.log(target)

function sum(arr){
    return arr.map(function(value,index,arr){
        console.log(value);
        console.log(index);
        console.log("~~")
        return value>=1
    })}console.log(sum([1,2,3,4,5]))

arr.forEach(function(value,index,arr){})

forEach()方法对数组元素进行循环，没有返回值和for循环的功能一样，但是不能使用break和countinue
注意：map和forEach的区别：map有返回值，forEach没有返回值

参数	详情
value	数组元素
index	数组下标
arr	当前数组的整体

function sum(arr){
    return arr.forEach(function(value,index,arr){
        console.log(value);
        console.log(index);
        console.log("~~")
        return value>=1
    })}console.log(sum([1,2,3,4,5]))

【相关推荐：javascript视频教程、web前端】

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!