【问题标题】:Strange behavior of filter and map in javascriptjavascript中过滤器和映射的奇怪行为
【发布时间】:2016-02-11 09:34:56
【问题描述】:

我需要编写一个代码来获取一个整数数组并返回一个数组,如果它是偶数则元素增加,如果是奇数则减少。 我尝试使用过滤器和映射 JavaScript 函数。这是代码:

var test=[2,5,8,13];
var my_function = (some_array) => some_array.filter((num,index,array) => num % 2 == 0 ? array[index]=num+1 : array[index]=num-1 );
console.log(my_function(test));
console.log(test);

此代码打印 [2, 5, 8, 13] [3, 4, 9, 12] 使用地图时,您拥有

var test=[2,5,8,13];

var my_function = (some_array) => some_array.map((num,index,array) => num % 2 == 0 ? array[index]=num+1 : array[index]=num-1 );
console.log(my_function(test));
console.log(test);

此代码打印 [3, 4, 9, 12] [3, 4, 9, 12]

正如您所见,使用 filter 克隆对象,而使用 map 更改对象。 MDN 上的文档说:

map() 方法创建一个新数组,其结果是对该数组中的每个元素调用提供的函数。

我是否以错误的方式使用地图和过滤器或文档有误? 我在 chrome 和 firefox 上测试了这种行为。

其实我用错了地图功能。这是固定的地图代码

var my_function = (some_array) => some_array.map((num) => num % 2 == 0 ? num+1 : num-1 );

【问题讨论】:

    标签: javascript arrays dictionary filter arrow-functions


    【解决方案1】:

    您既要通过作为 lambda 中的第三个参数(“array”)传递的引用来改变数组,又要通过 lambda 的返回值返回一个新数组。 Map 和 filter 通常用于函数式风格,其中数组不会发生变异,而是会创建一个新数组并从函数中返回。

    您想在这里使用地图而不是过滤器。虽然您当前的过滤器实现可以满足您的需求,但使用过滤器的惯用方式是输入一个数组,并返回一个新数组,其中包含第一个数组中元素的子集,即满足传递的谓词所表示的元素功能。

    使用 map 的惯用方式是输入一个数组,并返回一个与第一个数组长度相同的新数组,但对每个原始元素都有一些功能。这就是你想要的,你的函数应该简单地测试奇数/偶数,然后分别返回 n-1 或 n+1。

    【讨论】:

    • 过滤结果很好,而地图结果据我了解有点争议
    【解决方案2】:

    你用错了。过滤器获取一个返回布尔值的函数,并且只留下数组中该函数返回 true 的元素。这里发生的情况是,当您使用 arr[i] = something 时,您都修改了原始数组并返回了计算结果为 true 的值“something”。这就是为什么原始数组被修改并且函数返回原始数组而不修改的原因。 map 函数返回从数组到函数结果的映射。由于您都修改了数组并返回了与修改它的值相同的值,因此您得到了 2 个具有相同值的不同数组。

    【讨论】:

    • 其实行为是相反的。第一个日志是我想要的,而第二个是原始数组
    【解决方案3】:

    要做你想做的事,你可以像这样使用map

    var result = test.map(function(m){ return m % 2 === 0 ? m+1 : m-1 });
    console.log(result);
    

    过滤器也是可以的,但就个人而言,我更喜欢地图。请记住,map 会返回一个带有结果的 new 数组。注意不要改变你原来的数组。

    【讨论】:

      猜你喜欢
      • 2023-03-17
      • 1970-01-01
      • 2014-04-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多