forEach不会改变我传入的数组

Question

I've created a simple forEach function and I'm trying to understand why, when I run it with myArray , it doesn't mutate the array even though I run element*2 .

function forEach(array, callback) {
  for (var i = 0; i < array.length; i++) {
    callback(array[i],i,array)
  };
}

var myArray = [1,2,3]
forEach(myArray,function(element){element*2})
console.log(myArray)///[1,2,3]

Answer 1

You have to modify the array in the for loop, like this:

function forEach(array, callback) {
  for (var i = 0; i < array.length; i++) {
    array[i] = callback(array[i],i,array)
  };
}

var myArray = [1,2,3]
forEach(myArray,function(element){return element*2})
console.log(myArray)

As we were discussing in the comments, the best way would be to implement something like the map function: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map

function map(array, callback) {
  var out = [];
  for (var i = 0; i < array.length; i++) {
    out.push(callback(array[i],i,array))
  };

  return out;
}

var myArray = [1,2,3]
var myOtherArray = map(myArray,function(element){return element*2})
console.log(myArray)
console.log(myOtherArray)

This way myArray is not touched, you create a new one. This is usually the best option, but sometimes you may want to modify it in place, because it is huge or for some other (good?) reason. In that case you can use the first option.

Answer 2

You should assign new array element value, because primitive types (like numbers in your case) are immutable, so element * 2 does not modify element .

To do the job, you should not touch you current forEach implementation, because forEach is not supposed to return values from callback (this is not map). In this case you should do something like this:

 function forEach(array, callback) { for (var i = 0; i < array.length; i++) { callback(array[i], i, array); } } var myArray = [1,2,3]; forEach(myArray, function(element, i, arr) { arr[i] = element * 2; }); document.write(JSON.stringify( myArray )); 

Answer 3

Yep, bad answer. This [snippet] would do it though.

Anyway, in modern browsers we have Array.forEach to availability

 function foreach(array, callback) { for (var i = 0; i < array.length; i++) { array[i] = callback(array[i]); // ^ assign the new value (from the callback function) }; } var myArray = [1,2,3] foreach( myArray, function (element){ return element * 2 } ); // ^ return the new value document.querySelector('#result').textContent = myArray; 

 <pre id="result"></pre> 

Answer 4

This should work, explicitly assigning the variable.

function forEach(array, callback) {
  for (var i = 0; i < array.length; i++) {
    array[i] = callback(array[i])
  };
}

var myArray = [1,2,3]
forEach(myArray,function(element){return element*2})
console.log(myArray)///[1,2,3]