map
不会改变原始数组,会返回一个新数组,必须写return
list.value = list.value.map(item => ({ ...item, active: true }));
完整写法
let list =[1,2,3]
let list2 = list.map((item) => {
return item *=2
})
console.log('list',list);
console.log('list2',list2);
简写(箭头函数
只有一个参数,那就括号可省;
只有一句话,就可以不写return,但是省略return的同时,花括号也要省略,不然报错
正确的简写
let list =[1,2,3]
let list2 = list.map(item => item *=2)
console.log('list',list);
console.log('list2',list2);
forEach
会改变原始数组!!!
list.value.forEach(item => {
item.active = true;
});
问题
var list=[1,2,3,4,5,6];list.forEach((item, index) => {
item *= 2;
});为什么不会修改原始数组中的元素
forEach
方法不会修改原始数组中的元素,因为它在每次迭代中都会将数组元素的值传递给回调函数,而不是直接传递数组元素的引用。在回调函数中对元素进行修改只会修改回调函数内部的变量,而不会影响原始数组中的元素。因此,即使在回调函数中对元素进行修改,原始数组中的元素也不会被修改。
补充完善
如果你想要修改原始数组中的元素,代码应该是这样的:
var list = [1, 2, 3, 4, 5, 6];
list.forEach((item, index, array) => {
array[index] = item * 2; // 直接使用索引修改原数组
});
在这个修改后的版本中,通过使用索引直接访问并修改数组 list,原数组中的元素会被更新。所以执行完 forEach 后 list 的内容将会是 [2, 4, 6, 8, 10, 12]。
在JavaScript数组的forEach方法里,你可以传递一个回调函数,这个函数可以接受最多三个参数:
- item: 当前正在处理的数组元素的值。
- index: 当前正在处理的数组元素的索引。
- array: 正在被遍历的数组本身(即forEach调用所在的数组对象)。
这里是一个带有详细注释的例子,解释了这三个参数如何在forEach方法里被使用:
var list = [1, 2, 3, 4, 5, 6];
// 为数组 list 的每个元素执行这个回调函数
list.forEach(
(item, index, array) => {
// item: 当前元素的值,在这个例子中首先是 1,然后是 2,依次类推至 6
// index: 当前元素的索引,在这个例子中首先是 0(因为数组索引从0开始),然后是 1,以此类推至 5
// array: 就是数组 list 本身,即 [1, 2, 3, 4, 5, 6]
array[index] = item * 2; // 使用索引直接修改原数组中当前索引的元素值
// 此操作实际上是将当前元素的值乘以 2,然后重新赋值给当前索引下的数组元素
}
);
在这段代码执行后,原来的list数组会被更新,所有的元素都会翻倍,变成 [2, 4, 6, 8, 10, 12]。
使用forEach循环直接操作和修改数组的元素不是一种常见做法,因为有其他更具表现力的函数式方法可以生成新的数组而不改变原数组,如map
方法。但是,如果你的目标是对现有数组进行就地修改,forEach可以胜任这个工作。
如果想要修改原始数组中的元素,可以使用 map
方法,它会返回一个新的数组,新数组中的元素是原始数组中的元素经过回调函数处理后的结果。例如:
var list = [1, 2, 3, 4, 5, 6];
list = list.map((item) => {
return item * 2;
});
console.log(list); // [2, 4, 6, 8, 10, 12]
在这个例子中,map
方法会将原始数组中的每个元素传递给回调函数,并将回调函数返回的结果存储在新数组中,最后返回新数组。因此,通过 map
方法可以修改原始数组中的元素。
不常规方法
let numbers = [1, 2, 3];
let doubled = numbers.map(function(number, index, array) {
array[index] = number * 2; // 这里直接修改了原始数组的元素
return number * 2; // 返回新值,构成一个新的数组
});
console.log(numbers); // 输出 [2, 4, 6],原始数组被修改了
console.log(doubled); // 输出 [2, 4, 6],这是新的数组