如何让 map function 返回一个大于第一个的数组？

Question

from the Array.prototype.map doucmentation , it mentions that it should be possible to mutate the array, from which map was called upon, from within the map callback, which takes three parameters, #1 value, #2 index, #3 the original array, in addition to the following:

thisArgOptional Value to use as this when executing callback. ... Parameters in Detail

callback is invoked with three arguments: the value of the element, the index of the element, and the array object being mapped.

If a thisArg parameter is provided, it will be used as callback's this value. Otherwise, the value undefined will be used as its this value. The this value ultimately observable by callback is determined according to the usual rules for determining the this seen by a function.

map does not mutate the array on which it is called (although callback, if invoked, may do so).

The range of elements processed by map is set before the first invocation of callback. Elements which are appended to the array after the call to map begins will not be visited by callback.

So it seems to say that although values "added to the original array" will not be traversed by map, but that implies that it is indeed possible to append to the original array, from within map. However, I'm not sure how to do this, as simply using the third array parameter and appending to it seems to do nothing (and if I'm storing it to an array I can't just use the original array variable name because map returns a brand new array):

 var myArr = [ 1, 2, 3, 4, 5 ].map(function(x, i, arr) { this.push(i); //references old array so does nothing arr.push(i); //seemingly it should adjust return x; }, myArr /* attempting to use "this" arg to see if it will work, although seemingly its not recognized */ ); console.log(myArr); //only returns original value

Answer 1

Update

To answer your comment, .map() is not the right tool for appending values to your array. You should use it when you need to modify each element of the input array, for example by doubling each value:

var input = [1,2,3,4,5];
var myArr = input.map(function (x) {
  return x * 2;
});

myArr.push(6,7); // Append your values in a separate statement.

console.log(myArr); // [2,4,6,8,10,6,7]

Then you append the new values in a separate step before or after the map, depending on what you want to achieve.

Explanation

Your code is not behaving the way you expect. console.log(myArr) seems like it's printing the original array but in fact it's not. As an example, if you remove all the other code you'll have this remaining:

var myArr = [1,2,3,4,5].map(function (x) {
  return x;
});

console.log(myArr); // [1,2,3,4,5]

You can see we are just returning x without making any changes. x will resolve to 1 , then 2 , etc in turn. The output of .map() will therefore be [1,2,3,4,5] which contains identical values to your input array but is not the exact same array, it's a copy.

You can prove this by moving your input array into a new variable and then comparing myArr === input at the end:

var input = [1,2,3,4,5];
var myArr = input.map(function (x) {
  return x;
});

console.log(input); // [1,2,3,4,5]
console.log(myArr); // [1,2,3,4,5]
console.log(myArr === input); // false

To take this one step further if we take the 3rd parameter of .map() and replace each element with double its value,, we'll see that the original input array does get modified, and the return value from .map() , myArr stays the same.

var input = [1,2,3,4,5];
var myArr = input.map(function (x, i, arr) {
  arr[i] = x * 2;
  return x;
});

console.log(input); // [2,4,6,8,10]
console.log(myArr); // [1,2,3,4,5]
console.log(myArr === input); // false

Bonus points

Just because you can modify the original array using the 3rd parameter of .map() doesn't mean that you should. Doing this is likely to introduce unexpected behaviour and makes it harder for future developers to reason about what the code is doing.

It's far better for your functions to return a new variable rather than mutating the input parameters.