web-dev-qa-db-fra.com

Angular équivalent de jQuery $ .map?

Je passe de la dépendance à jQuery à la création d'applications dans AngularJS. Il est recommandé dans un nombre de places à pas mélangez jQuery et Angular code.

Une chose qui me manque cependant est la fonction jQuery $ .map pour les tableaux. Je sais que cela pourrait être réécrit en utilisant le Javascript natif fonction de carte , mais cela n'est pas implémenté dans tous les navigateurs (notamment, IE <v9).

Alors, existe-t-il un Angular équivalent, ou devrais-je recommencer à écrire for (var x = 0; x < foo; x += 1) {...} pour que je puisse arrêter d'inclure jQuery?

[~ # ~] mise à jour [~ # ~] Parfois, il suffit de savoir quoi rechercher. Bergie dit "cherchez des polyfills". Voici un guide de référence (de l'équipe Modernizr) pour un tas de ressources pour faire fonctionner le code moderne sur des navigateurs plus anciens: HTML5 Cross Browser Polyfills

javascriptjqueryangularjsecmascript-5
36
Benmj

Vérifiez ici: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/map

Mozilla a fourni un polyfill Array.map pour les navigateurs non pris en charge

if (!Array.prototype.map) {
  Array.prototype.map = function(callback, thisArg) {

    var T, A, k;

    if (this == null) {
      throw new TypeError(" this is null or not defined");
    }

    // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
    // 3. Let len be ToUint32(lenValue).
    var len = O.length >>> 0;

    // 4. If IsCallable(callback) is false, throw a TypeError exception.
    // See: http://es5.github.com/#x9.11
    if (typeof callback !== "function") {
      throw new TypeError(callback + " is not a function");
    }

    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
    if (thisArg) {
      T = thisArg;
    }

    // 6. Let A be a new array created as if by the expression new Array(len) where Array is
    // the standard built-in constructor with that name and len is the value of len.
    A = new Array(len);

    // 7. Let k be 0
    k = 0;

    // 8. Repeat, while k < len
    while(k < len) {

      var kValue, mappedValue;

      // a. Let Pk be ToString(k).
      //   This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
      //   This step can be combined with c
      // c. If kPresent is true, then
      if (k in O) {

        // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
        kValue = O[ k ];

        // ii. Let mappedValue be the result of calling the Call internal method of callback
        // with T as the this value and argument list containing kValue, k, and O.
        mappedValue = callback.call(T, kValue, k, O);

        // iii. Call the DefineOwnProperty internal method of A with arguments
        // Pk, Property Descriptor {Value: mappedValue, : true, Enumerable: true, Configurable: true},
        // and false.

        // In browsers that support Object.defineProperty, use the following:
        // Object.defineProperty(A, Pk, { value: mappedValue, writable: true, enumerable: true, configurable: true });

        // For best browser support, use the following:
        A[ k ] = mappedValue;
      }
      // d. Increase k by 1.
      k++;
    }

    // 9. return A
    return A;
  };      
}
26
Rob M.

Non, il n'y a pas d'équivalent en angulaire. Et comme vous l'avez découvert, non, vous n'avez pas besoin de vous replier sur l'écriture de code impératif.

À la place, utilisez simplement la fonction map qui est directement intégrée à JavaScript. Si vous devez prendre en charge IE8, insérez le polyfill au début de vos scripts.

13
Edward Brey