Javascript-对数组中的每个字符串应用修剪函数

想要修剪数组中的每个字符串,例如:

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

输出

['aa', 'bb']

我的第一个案子是

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

它得到了“ TypeError: Function.Prototype.application 在未定义的情况下被调用,这是一个未定义的函数,而不是一个函数”。

然后我试了

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

成功了,有什么区别吗?

110359 次浏览

First, do it simply :

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

Then, the reason why the first one doesn't work is that the string is passed as argument to the callback, not as context. As you pass no argument to apply, you get the same message you would have got with

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

Now, mostly for fun, let's suppose you're not happy with the fact that map use the callback this way and you'd want to be able to pass a function using the context, not the argument.

Then you could do this :

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

I said "mostly for fun" because modifying objects you don't own (Array's prototype here) is widely seen as a bad practice. But you could also make a utilitarian function taking both the array and the callback as arguments.

String.prototype.trim.apply is the Function.prototype.apply method without being bound to trim. map will invoke it with the string, the index and the array as arguments and nothing (undefined) for the thisArg - however, apply expects to be called on functions:

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

What you can do is passing the trim function as the context for call:

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

What happens here is

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

If you are using JQuery, then a better way to do this, as it will work with IE8 as well (I need to support IE8) is this:

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

The simple variant without dependencies:

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

ES6 variant:

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

ES6 function variant:

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

I just compared some ways to trim an array of strings to get the shortest and fastest method. Who is interested in, here is a performance test on 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);

Note: jQuery is just here to compare the number of characters to type ;)

Influencing from Bergi's perfect answer, i just would like to add, for those methods which won't take a this argument, you may achieve the same job as follows;

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

All major browsers support forEach(), but note that IE supports it only beginning from version 9.

Or this can be solved with arrow functions:

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

Keep it simple and stupid:

Code

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

Output

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

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

x = [' aa ', ' bb ', 'cccc '].toString().replace(/\s*\,\s*/g, ",").trim().split(",");


console.log(x)