Javascript - Appliquer la fonction trim à chaque chaîne dans un tableau

Question

Voulez-vous découper chaque chaîne dans un tableau, par exemple, étant donné

x = [' aa ', ' bb '];

la sortie

['aa', 'bb']

Mon premier essai est

x.map(String.prototype.trim.apply)

J'ai eu une "TypeError: Function.prototype.apply was called on undefined, which is a undefined and not a function" dans chromium.

Ensuite, j'ai essayé

x.map(function(s) { return String.prototype.trim.apply(s); });

Cela fonctionne. Quelle est la différence?

Answer 1

Ou cela peut être résolu avec des fonctions fléchées :

trimmed_x = x.map(s => s.trim());

Answer 2

String.prototype.trim.apply est la méthode Function.prototype.apply sans être liée à trim. map l'invoquera avec la chaîne de caractères, l'index et le tableau comme arguments et rien (undefined) pour le thisArg - cependant, apply attend d'être appelé sur des fonctions:

var apply = String.prototype.trim.apply;
apply.call(undefined, x[0], 0, x) // TypeError

Ce que vous pouvez faire est de passer la fonction trim en tant que contexte pour call:

[' aa ', ' bb '].map(Function.prototype.call, String.prototype.trim)
// ['aa', 'bb']

Ce qui se passe ici est

var call = Function.prototype.call,
    trim = String.prototype.trim;
call.call(trim, x[0], 0, x) ≡
      trim.call(x[0], 0, x) ≡
            x[0].trim(0, x); // les arguments n'ont pas d'importance pour trim

Answer 3

La variante simple sans dépendances :

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

La variante ES6 :

const newArray = oldArray.map(string => string.trim())

La variante de fonction ES6 :

const trimmedArray = array => array.map(string => string.trim())

Answer 4

Si vous utilisez JQuery, alors une meilleure façon de faire cela, car cela fonctionnera également avec IE8 (je dois prendre en charge IE8) est la suivante :

$.map([' aa ', ' bb ', '   cc '], $.trim);

Answer 5

Tout d'abord, faites-le simplement :

x.map(function(s) { return s.trim() });

Ensuite, la raison pour laquelle le premier ne fonctionne pas est que la chaîne est passée en argument à la fonction de rappel, pas en tant que contexte. Comme vous ne passez aucun argument à apply, vous obtenez le même message que celui que vous auriez obtenu avec

var f = String.prototype.trim.apply; f.call();

---

Maintenant, principalement pour s'amuser, supposons que vous n'êtes pas satisfait du fait que map utilise la fonction de rappel de cette manière et que vous aimeriez pouvoir passer une fonction en utilisant le contexte, et non l'argument.

Alors vous pourriez faire ceci :

Object.defineProperty(Array.prototype, "maprec", {
  value: function(cb){
      return this.map(function(v){ return cb.call(v) })
  }
});
console.log([' aa ', ' bb '].maprec(String.prototype.trim)); // logs ["aa", "bb"]

J'ai dit "principalement pour s'amuser" car modifier des objets que vous ne possédez pas (ici le prototype de Array) est largement considéré comme une mauvaise pratique. Mais vous pourriez également créer une fonction utilitaire prenant à la fois le tableau et la fonction de rappel en tant qu'arguments.