Javascript - Wenden Sie die Trimmfunktion auf jede Zeichenfolge in einem Array an

Möchten Sie jede Zeichenfolge in einem Array zuschneiden, z

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

Ausgabe

['aa', 'bb']

Mein erster Versuch ist

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

Es wurde "TypeError: Function.prototype.apply wurde auf undefined aufgerufen, was eine undefinierte und keine Funktion ist" in Chrom.

Dann habe ich es versucht

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

Es klappt. Was ist der Unterschied?

String.prototype.trim.applyist die Function.prototype.applyMethode, ohne daran gebunden zu sein trim. mapruft es mit der Zeichenfolge, dem Index und dem Array als Argumente und nichts ( undefined) für das thisArg auf - applyerwartet jedoch, dass es für Funktionen aufgerufen wird:

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

Sie können die trimFunktion als Kontext für Folgendes übergeben call:

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

Was hier passiert ist

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); // the arguments don't matter to trim

Oder dies kann mit Pfeilfunktionen gelöst werden:

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

Wenn Sie JQuery verwenden, ist dies ein besserer Weg, da dies auch mit IE8 funktioniert (ich muss IE8 unterstützen):

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

Die einfache Variante ohne Abhängigkeiten:

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

ES6-Variante:

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

ES6-Funktionsvariante:

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

Machen Sie es einfach:

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

Der Grund, warum der erste nicht funktioniert, ist, dass die Zeichenfolge als Argument an den Rückruf und nicht als Kontext übergeben wird. Wenn Sie kein Argument an übergeben apply, erhalten Sie dieselbe Nachricht, die Sie erhalten hätten

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

Nehmen wir an, Sie sind hauptsächlich zum Spaß nicht zufrieden mit der Tatsache, dass Sie mapden Rückruf auf diese Weise verwenden, und möchten eine Funktion über den Kontext und nicht über das Argument übergeben können.

Dann könnten Sie dies tun:

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"]

Ich sagte "hauptsächlich zum Spaß", weil das Ändern von Objekten, die Sie nicht besitzen (Arrays Prototyp hier), allgemein als schlechte Praxis angesehen wird. Sie können aber auch eine nützliche Funktion ausführen, indem Sie sowohl das Array als auch den Rückruf als Argumente verwenden.

Ich habe nur einige Möglichkeiten verglichen, um eine Reihe von Zeichenfolgen zu kürzen, um die kürzeste und schnellste Methode zu erhalten. Wer interessiert ist, hier ist ein Leistungstest auf jsperf: http://jsperf.com/trim-array-of-strings

var chunks = "  .root  ,  .parent  >  .child  ".split(',')
var trimmed1 = chunks.map(Function.prototype.call, String.prototype.trim);
var trimmed2 = chunks.map(function (str) { return str.trim(); });
var trimmed3 = chunks.map(str => str.trim());
var trimmed4 = $.map(chunks, $.trim);

Hinweis: jQuery ist nur hier, um die Anzahl der einzugebenden Zeichen zu vergleichen;)

Halten Sie es einfach und dumm:

Code

[' aa ', ' b b ', '   c c '].map(i=>i.trim());

Ausgabe

["aa", "b b", "c c"]

Ausgehend von Bergis perfekter Antwort möchte ich nur hinzufügen, dass Sie für jene Methoden, die kein thisArgument enthalten, möglicherweise den gleichen Job wie folgt erreichen:

var x = [' aa ', ' bb '],
    y = x.map(Function.prototype.call.bind(String.prototype.trim))

var x = [" aa ", " bb "];
console.log(x); // => [" aa ", " bb "]

// remove whitespaces from both sides of each value in the array
x.forEach(function(value, index){
  x[index] = value.trim();
});

console.log(x); // => ["aa", "bb"]

Alle gängigen Browser unterstützen dies forEach(), beachten IESie jedoch, dass dies erst ab Version 9 unterstützt wird.

Eine weitere ES6-Alternative

const row_arr = ['a ', ' b' , ' c ', 'd'];
const trimed_arr = row_arr.map(str => str.trim());
console.log(trimed_arr); // <== ['a', 'b', 'c', 'd']

    ### Code
    <!-- language: lang-js -->

     var x=  [' aa ', ' b b ', '   c c ']
var x = x.split(",");
            x = x.map(function (el) {
                return el.trim();
                console.log(x)

    ### Output
    <!-- language: lang-none -->
        ["aa", "b b", "c c"]