web-dev-qa-db-fra.com

Somme de valeurs dans un tableau utilisant jQuery

J'ai un tableau contenant des valeurs et je veux obtenir leur somme. Voici l'exemple:

var somearray = ["20","40","80","400"];

Je veux résumer ces valeurs en utilisant jQuery. Dans cet exemple, le résultat serait 540.

javascriptjqueryarrays
42
Aman Virk

Vous n'avez pas besoin de jQuery. Vous pouvez le faire en utilisant une boucle for:

var total = 0;
for (var i = 0; i < someArray.length; i++) {
    total += someArray[i] << 0;
}

En relation:

53
Mark Byers

Pour gérer également les nombres à virgule flottante:

  • (Plus ancien) JavaScript:

    var arr = ["20.0","40.1","80.2","400.3"],
    n   = arr.length,
    sum = 0;
while(n--)
   sum += parseFloat(arr[n]) || 0;

  • ECMA 5.1/6:

    var arr = ["20.0","40.1","80.2","400.3"],
    sum = 0;
arr.forEach(function(num){sum+=parseFloat(num) || 0;});

  • ES6:

    var sum = ["20.0","40.1","80.2","400.3"].reduce((pv,cv)=>{
   return pv + (parseFloat(cv)||0);
},0);

    La réduction () est disponible dans les anciennes versions d’ECMAScript, c’est la fonction flèche qui rend cette ES6 spécifique.

    Je passe en 0 la première valeur pv, donc je n'ai pas besoin de parseFloat - cela tiendra toujours la somme précédente, qui sera toujours numérique. Comme la valeur actuelle, cv, peut être non numérique (NaN), nous utilisons ||0 sur elle pour ignorer cette valeur dans le tableau. C'est formidable si vous voulez diviser une phrase et obtenir la somme des nombres qu'elle contient. Voici un exemple plus détaillé:

    let num_of_fruits = `
   This is a sentence where 1.25 values are oranges 
   and 2.5 values are apples. How many fruits are 
   there?
`.split(/\s/g).reduce((p,c)=>p+(parseFloat(c)||0), 0); 

// num_of_fruits == 3.75

  • jQuery:

    var arr = ["20.0","40.1","80.2","400.3"],
    sum = 0;
$.each(arr,function(){sum+=parseFloat(this) || 0;});

Qu'est-ce que ci-dessus vous obtient:

  • possibilité d'entrer n'importe quel type de valeur dans le tableau; nombre ou chaîne numérique (123 ou "123"), chaîne en virgule flottante ou nombre ("123.4" ou 123.4), ou même du texte (abc)
  • ajoute uniquement les nombres et/ou les chaînes numériques valides, en négligeant tout texte brut (par exemple, [1, 'a', '2'] somme à 3)
64
vol7ron

Vous pouvez utiliser reduce qui fonctionne dans tous les navigateurs sauf IE8 et les versions antérieures.

["20","40","80","400"].reduce(function(a, b) {
    return parseInt(a, 10) + parseInt(b, 10);
})
28
Codler

Une autre méthode, si eval est sûre et rapide:

eval(["10","20","30","40","50"].join("+"))
24
Praveen Vijayan

Si vous voulez que ce soit une méthode jQuery, vous pouvez le faire comme ceci:

$.sum = function(arr) {
    var r = 0;
    $.each(arr, function(i, v) {
        r += +v;
    });
    return r;
}

et appelez comme ça:

var sum = $.sum(["20", "40", "80", "400"]);
10
gion_13
 var total = 0; 
 $. each (someArray, function () {
 total + = parseInt (this, 10); 
});
5
Sudhir Bastakoti

Vous pouvez le faire de cette façon.

var somearray = ["20","40","80","400"];

somearray = somearray.map(Number);

var total = somearray.reduce(function(a,b){  return a+b },0)

console.log(total);
4
RIYAJ KHAN

Dans http://bugs.jquery.com/ticket/1886 , il devient évident que les développeurs jQuery ont de graves problèmes mentaux reg. programmation fonctionnelle inspirée additions. En quelque sorte, il est bon d’avoir des éléments fondamentaux (tels que map), mais pas d’autres (tels que réduire), sauf s’ils réduisent la taille de fichier globale de jQuery. Allez comprendre.

Heureusement, quelqu'un a placé du code pour utiliser la fonction de réduction normale pour les tableaux jQuery:

$ .fn.reduce = [] .reduce;

Nous pouvons maintenant utiliser une simple fonction de réduction pour créer une somme:

//where X is a jQuery array
X.reduce(function(a,b){ return a + b; });
// (change "a" into parseFloat("a") if the first a is a string)

Enfin, comme certains navigateurs plus anciens n’avaient pas encore implémenté une réduction, un polyfill peut être pris de [~ # ~] mdn [~ # ~] (c’est gros mais je suppose qu’il a exactement le même comportement, ce qui est souhaitable):

if ( 'function' !== typeof Array.prototype.reduce ) {
    Array.prototype.reduce = function( callback /*, initialValue*/ ) {
        'use strict';
        if ( null === this || 'undefined' === typeof this ) {
          throw new TypeError(
             'Array.prototype.reduce called on null or undefined' );
        }
        if ( 'function' !== typeof callback ) {
          throw new TypeError( callback + ' is not a function' );
        }
        var t = Object( this ), len = t.length >>> 0, k = 0, value;
        if ( arguments.length >= 2 ) {
          value = arguments[1];
        } else {
          while ( k < len && ! k in t ) k++; 
          if ( k >= len )
            throw new TypeError('Reduce of empty array with no initial value');
          value = t[ k++ ];
        }
        for ( ; k < len ; k++ ) {
          if ( k in t ) {
             value = callback( value, t[k], k, t );
          }
        }
        return value;
      };
    }
4
Lodewijk
    var arr = ["20.0","40.1","80.2","400.3"],
    sum = 0;
$.each(arr,function(){sum+=parseFloat(this) || 0; });

A parfaitement fonctionné pour ce dont j'avais besoin. Merci vol7ron

1
Annunaki