js遍历数组 map和forEach

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方法里,你可以传递一个回调函数,这个函数可以接受最多三个参数:

  1. item: 当前正在处理的数组元素的值。
  2. index: 当前正在处理的数组元素的索引。
  3. 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],这是新的数组
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值