Javascript - застосувати функцію обрізки до кожного рядка в масиві

Хочете обрізати кожен рядок у масиві, наприклад, заданий

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

вихід

['aa', 'bb']

Моє перше випробування -

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

Він отримав "TypeError: Function.prototype.apply був викликаний невизначеним, що є невизначеним, а не функцією" в хромі.

Тоді я спробував

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

Це працює. Яка різниця?

String.prototype.trim.applyє Function.prototype.applyметодом без прив'язки trim.mapбуде викликати його за допомогою рядка, індексу та масиву як аргументи та нічого ( undefined) для thisArg - однак, applyочікується , що його будуть викликати функції:

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

Що ви можете зробити, це передати trimфункцію як контекст для call:

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

Що тут відбувається

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

Або це можна вирішити за допомогою функцій стрілок:

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

Якщо ви використовуєте JQuery, то кращий спосіб зробити це, оскільки він буде працювати і з IE8 (мені потрібно підтримати IE8), це:

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

Простий варіант без залежностей:

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

Варіант ES6:

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

Варіант функції ES6:

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

По-перше, зробіть це просто:

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

Тоді, причина, по якій перший не працює, полягає в тому, що рядок передається як аргумент зворотного виклику, а не як контекст. Коли ви не передаєте жодного аргументу apply, ви отримуєте те саме повідомлення, що і з вами

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

Тепер, в основному для розваги, припустимо, ви не задоволені тим, що mapвикористовуєте зворотний виклик таким чином, і ви хочете мати можливість передавати функцію, використовуючи контекст, а не аргумент.

Тоді ви можете зробити це:

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

Я сказав "в основному для розваги", оскільки модифікація об'єктів, якими ви не володієте (прототип Array тут), широко розглядається як погана практика. Але ви також можете зробити утилітарну функцію, приймаючи як аргумент як масив, так і зворотний виклик.

Я щойно порівняв деякі способи обрізки масиву рядків, щоб отримати найкоротший і швидкий метод. Кому цікаво, ось тест продуктивності на 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);

Примітка: jQuery тут, щоб порівняти кількість символів, що вводиться;)

Будьте простими та дурними:

Код

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

Вихідні дані

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

Впливаючи на ідеальну відповідь Бергі, я хотів би лише додати, що для тих методів, які не беруть thisаргументів, ви можете виконати таку ж роботу, як показано нижче;

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

Всі основні браузери підтримують forEach(), але зверніть увагу, що IEвін підтримує лише починаючи з версії 9.

Ще одна альтернатива ES6

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