JavaScript 如何在foreach循环中更改数组的值

JavaScript中的forEach循环是迭代数组的几种方法之一。forEach方法与所有其他循环方法不同，它为数组中的每个元素传递一个回调函数。

因此，当使用forEach方法在JavaScript中更改数组的值时，该方法不会直接更改调用它的对象，但是该对象可能会被回调函数更改。换句话说，在每次迭代期间，您可以通过访问和分配新值来更改数组中的值。

语法:

array.forEach(function(element, index, arr), thisValue)

forEach方法会为数组的每个元素传递一个回调函数，同时传递以下参数：

• function(element, index, arr)： 用于对数组中的每个元素运行的函数。
  • element： 当前元素的值。必需参数。
  • index： 当前元素的索引。可选参数。
  • arr： 调用forEach()方法的数组。可选参数。
• thisValue： 作为this值传递给函数的值。

方法： 如果数组包含基本数据类型：

示例： 在这个例子中，回调函数接收两个参数，元素和索引，其中元素指当前处理的元素，索引指当前的索引。foreach会为数组中的每个元素传递一个回调函数。通过索引访问当前元素，并直接在回调函数中修改其值，可以在循环数组时改变数组中的值。

Javascript

let arr = [1, 2, 3]; 
arr.forEach((element, index) => {  
    arr[index] = element + 10;  
}); 
console.log(arr);

回调函数将当前元素（即 element）加上10，然后将加法结果设置为数组中当前元素的值。

输出:

[ 11, 12, 13 ]

如果数组包含引用数据类型：

1）改变整个对象： 如果数组包含引用数据类型，我们需要进行一些修改。然而，逻辑仍然相同，我们将通过索引访问当前元素，并直接在回调函数中修改其值。

示例： 在这个例子中，回调函数接受当前元素和索引。我们现在将数组中当前元素的值设置为具有名称为GFG和年龄为4的新对象。

Javascript

let arr = [ 
      {"name": "Geeks", "roll": 1}, 
      {"name": "For", "roll": 2}, 
      {"name": "Geeks", "roll": 3} 
]; 
  
arr.forEach((element, index) => {  
    arr[index] = {"name": "GFG", "age": 4};  
}); 
  
console.log(arr);

输出:

[
     { name: 'GFG', age: 4 },
     { name: 'GFG', age: 4 },
     { name: 'GFG', age: 4 }
]

2) 仅更改对象中的一个键： 在这个例子中，我们做的和上面的例子一样，但是在这个例子中，我们只是更改了对象中的一个键（即name），而不是在迭代过程中更改整个对象。在这里，我们将键的值（即name）更改为GFG。

示例：

JavaScript

let arr = [ 
    {"name": "Geeks", "roll": 1}, 
    {"name": "For", "roll": 2}, 
    {"name": "Geeks", "roll": 3} 
]; 
  
arr.forEach(function(item, index) {  
    arr[index].name = "GFG";  
}); 
  
console.log(arr);

输出：

[
     { name: 'GFG', roll: 1 },
     { name: 'GFG', roll: 2 },
     { name: 'GFG', roll: 3 }
]

通过这种方式，我们可以在JavaScript的foreach循环中修改数组中的值。