Maison interface Web js tutoriel Apprentissage des tableaux JS : parcourir les tableaux, calculer la somme des éléments et concaténer les valeurs en chaînes

Apprentissage des tableaux JS : parcourir les tableaux, calculer la somme des éléments et concaténer les valeurs en chaînes

Aug 25, 2021 pm 05:01 PM
javascript js数组 遍历数组

Dans l'article précédent "JS Array Learning : Comment épisser tous les éléments et renvoyer une chaîne", nous avons découvert la méthode de conversion d'un tableau en chaîne. Les amis dans le besoin peuvent en apprendre davantage ~

Cet article Parlons-en. sur le fonctionnement itératif des tableaux et introduire deux méthodes de calcul de la somme des éléments et de liaison des valeurs en chaînes.

Méthode 1. Utilisez la méthode forEach()

la méthode forEach() est utilisée pour appeler chaque élément du tableau et transmettre l'élément à la fonction de rappel.

Syntaxe :

array.forEach(funtion callbackfn(value, index, array), thisValue)
Copier après la connexion

funtion callbackfn(value, index, array) : paramètres obligatoires, précisez la fonction de rappel, qui peut recevoir jusqu'à trois paramètres : funtion callbackfn(value, index, array):必需参数,指定回调函数,最多可以接收三个参数:

  • value:数组元素的值。

  • index:数组元素的数字索引。

  • array:包含该元素的数组对象。

thisValue:可省略的参数,回调函数中的 this 可引用的对象。如果省略 thisArg,则 this 的值为 undefined。

下面通过代码示例来具体了解一下:

示例1:输出数组元素

function f(value,index,array) {
    console.log("a[" + index + "] = " + value);
}
var a = ['a', 'b', 'c'];
a.forEach(f);
Copier après la connexion

Apprentissage des tableaux JS : parcourir les tableaux, calculer la somme des éléments et concaténer les valeurs en chaînes

示例2:将数组值进行累加求和

var a = [10, 11, 12], sum = 0;
function f(value) {
	sum += value;
}

a.forEach(f);
console.log(sum);
Copier après la connexion

Apprentissage des tableaux JS : parcourir les tableaux, calculer la somme des éléments et concaténer les valeurs en chaînes

示例3:将数组值连接成字符串

var a = ['ab', 'cd', 'ef'], str = "";
function f(value) {
	// str=str + value;
	str=str.concat(value);
}

a.forEach(f);
console.log(str);
Copier après la connexion

Apprentissage des tableaux JS : parcourir les tableaux, calculer la somme des éléments et concaténer les valeurs en chaînes

方法2、使用reduce() 方法

reduce() 方法可对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。

语法:

array.reduce(function callbackfn(previousValue, currentVaule, currentIndex, array), initialValue)
Copier après la connexion

function callbackfn(previousValue, currentVaule, currentIndex, array):必需参数,指定回调函数,最多可以接收4个参数:

  • previousValue:通过上一次调用回调函数获得的值。如果向 reduce() 方法提供 initialValue,则在首次调用函数时,previousValue 为 initialValue。

  • currentVaule:当前元素数组的值。

  • currentIndex:当前数组元素的数字索引。

  • array:包含该元素的数组对象。

initialValue

  • value : La valeur de l'élément du tableau.

  • index : Index numérique de l'élément du tableau.

  • array : l'objet tableau contenant l'élément.

thisValue : un paramètre omis, un objet qui peut être référencé par this dans la fonction de rappel. Si thisArg est omis, la valeur de this n'est pas définie.

Apprenons-en davantage à travers des exemples de code :

Exemple 1 : éléments du tableau de sortie

var a = [11, 12, 13], sum = 0;
function f(pre,curr) {
	sum=pre+curr;
	return sum;
}

a.reduce(f);
console.log(sum);
Copier après la connexion
Apprentissage des tableaux JS : parcourir les tableaux, calculer la somme des éléments et concaténer les valeurs en chaînesApprentissage des tableaux JS : parcourir les tableaux, calculer la somme des éléments et concaténer les valeurs en chaînes

Exemple 2 : Accumulation et addition des valeurs d'un tableau

Apprentissage des tableaux JS : parcourir les tableaux, calculer la somme des éléments et concaténer les valeurs en chaînes

36
Copier après la connexion

Apprentissage des tableaux JS : parcourir les tableaux, calculer la somme des éléments et concaténer les valeurs en chaînes

Exemple 3 : Concaténer les valeurs d'un tableau en chaîne

🎜
var a = [11, 12, 13], str = '';
function f(pre,curr) {
	str=pre+''+curr;
	return str;
}

a.reduce(f);
console.log(str);
Copier après la connexion
🎜Apprentissage des tableaux JS : parcourir les tableaux, calculer la somme des éléments et concaténer les valeurs en chaînes🎜🎜🎜🎜Méthode 2. Utilisez la Méthode réduire()🎜🎜🎜🎜Méthode reduce() pour appeler la fonction de rappel spécifiée sur tous les éléments du tableau. La valeur de retour de cette fonction de rappel est le résultat cumulé, et cette valeur de retour est fournie en paramètre la prochaine fois que la fonction de rappel est appelée. 🎜🎜🎜Syntaxe : 🎜
🎜
var a = [11, 12, 13], str = '';
function f(pre,curr) {
	str=pre+'-'+curr;
	return str;
}

a.reduce(f);
console.log(str);
Copier après la connexion
🎜function callbackfn(previousValue, currentVaule, currentIndex, array) : paramètres obligatoires, précisez la fonction de rappel, qui peut recevoir jusqu'à 4 paramètres : 🎜
  • 🎜previousValue : La valeur obtenue en appelant la fonction de rappel la dernière fois. Si initialValue est fourni à la méthode réduire(), la valeur précédente est initialValue lorsque la fonction est appelée pour la première fois. 🎜
  • 🎜currentValue : La valeur du tableau d'éléments actuel. 🎜
  • 🎜currentIndex : L'index numérique de l'élément actuel du tableau. 🎜
  • 🎜array : l'objet tableau contenant l'élément. 🎜
  • 🎜initialValue : un paramètre omis, la valeur initiale passée à la fonction. 🎜🎜 Apprenons-en davantage à travers des exemples de code : 🎜🎜🎜Exemple 1 : Accumuler et additionner les valeurs du tableau 🎜🎜rrreee🎜Résultat de sortie : 🎜rrreee🎜🎜Exemple 2 : Concaténer les valeurs du tableau dans une chaîne 🎜🎜 rrreee🎜🎜 🎜🎜Si vous souhaitez utiliser un délimiteur pour séparer chaque élément du tableau, vous pouvez remplacer la chaîne vide entre les deux opérateurs "+" dans la fonction de rappel par le délimiteur spécifié : 🎜rrreee🎜🎜🎜🎜D'accord, c'est tout Le voici, vous pouvez le lire si vous en avez besoin : 🎜Tutoriel avancé 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!

    Déclaration de ce site Web
    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

    Outils d'IA chauds

    Undresser.AI Undress

    Undresser.AI Undress

    Application basée sur l'IA pour créer des photos de nu réalistes

    AI Clothes Remover

    AI Clothes Remover

    Outil d'IA en ligne pour supprimer les vêtements des photos.

    Undress AI Tool

    Undress AI Tool

    Images de déshabillage gratuites

    Clothoff.io

    Clothoff.io

    Dissolvant de vêtements AI

    AI Hentai Generator

    AI Hentai Generator

    Générez AI Hentai gratuitement.

    Article chaud

    R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Meilleurs paramètres graphiques
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Comment réparer l'audio si vous n'entendez personne
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25: Comment déverrouiller tout dans Myrise
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

    Outils chauds

    Bloc-notes++7.3.1

    Bloc-notes++7.3.1

    Éditeur de code facile à utiliser et gratuit

    SublimeText3 version chinoise

    SublimeText3 version chinoise

    Version chinoise, très simple à utiliser

    Envoyer Studio 13.0.1

    Envoyer Studio 13.0.1

    Puissant environnement de développement intégré PHP

    Dreamweaver CS6

    Dreamweaver CS6

    Outils de développement Web visuel

    SublimeText3 version Mac

    SublimeText3 version Mac

    Logiciel d'édition de code au niveau de Dieu (SublimeText3)

    Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 pm 02:54 PM

    Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.

    WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel Dec 17, 2023 pm 05:30 PM

    WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

    Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 am 09:39 AM

    Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de réservation en ligne. À l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ? WebSocket est une méthode full-duplex sur une seule connexion TCP.

    Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Dec 17, 2023 pm 12:09 PM

    Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande

    JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel Dec 17, 2023 pm 05:13 PM

    JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous

    Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

    Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

    Comment utiliser insertBefore en javascript Comment utiliser insertBefore en javascript Nov 24, 2023 am 11:56 AM

    Utilisation : En JavaScript, la méthode insertBefore() est utilisée pour insérer un nouveau nœud dans l'arborescence DOM. Cette méthode nécessite deux paramètres : le nouveau nœud à insérer et le nœud de référence (c'est-à-dire le nœud où le nouveau nœud sera inséré).

    Comment obtenir facilement le code d'état HTTP en JavaScript Comment obtenir facilement le code d'état HTTP en JavaScript Jan 05, 2024 pm 01:37 PM

    Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service

    See all articles