【问题标题】:Javascript array.prototype.map when/why use third argument [duplicate]Javascript array.prototype.map何时/为什么使用第三个参数[重复]
【发布时间】:2020-02-07 19:43:24
【问题描述】:

我最近注意到,当使用array.prototype.map() 时,我的回调函数可能会接受第三个参数,即我正在映射的数组。我想知道这个参数是否有任何用例,因为在回调函数内部,无论如何都可以访问数组。

如果我访问我在回调函数中映射的数组,为什么/何时应该使用第三个参数而不是只访问数组?

example

尽管这两种方法在我能想象到的每个用例中都可以正常工作,但我想知道推荐的方法以及原因。

【问题讨论】:

  • 简而言之,您可能无权访问该数组,或者您可能不想引用它。 Case 1 myArr.filter(x => x % 2 == 1).map((x, i, arr) => x+arr.length) - 这是一个链式操作,所以在第一个链之后,你不能引用myArr作为你的工作数据。您可以停止链,分配给一个变量并使用它,但这有点浪费。情况 2:您的回调在另一个范围内指向您在某个地方拥有 callback = (x, i, arr) => x+arr.length 的数组,而您在另一个地方执行 myArr.map(callback),因此您无法在回调中引用原始数组。

标签: javascript arrays array.prototype.map


【解决方案1】:

编辑:这个答案已经(巧合地)在标记的欺骗中给出。看看over there


您可能希望以通用方式引用原始数组。例如,回调可能是一个单独的函数,而不仅仅是通常看到的匿名函数:

function arrayMapper(val, idx, arr) {
  // Some operations which use arr
}

myArray.map(arrayMapper);
myOtherArray.map(arrayMapper);

注意每个在arrayMapper 的执行中,arr 参数是如何引用外部作用域中的不同数组的。

【讨论】:

  • 这里仍然与示例相同的结果是在全局上下文中。在这里,我仍然可以访问原始 myArray 而无需第三个参数。请参阅我的回答,该回答描述了它更可能用于使用函数的面向对象编程:
  • @vipulpatel 更新是否让我的意图更清晰?
  • 是的,我可以在这里查看是否为两个不同的数组使用单独的函数。在面向对象编程中也可以看到我的示例,因为现在没有人使用 ES6 或 Typescript 在全局范围内编写代码,而许多其他提供 class 风格的编程
【解决方案2】:

当您链接多个数组方法并需要访问数组的中间状态(上一个操作的结果)时,第三个参数可能很有用:

const source = [-3,-2,-1,0,1,2,3,4,5];
source
  .filter(n => n >= 0)
  .map((n, index, arr) => {
     // arr contains only non-negative numbers
     // here you may have some logic that rely on it
     return n;
  })

【讨论】:

    【解决方案3】:

    您正在使用不需要的普通全局上下文。请参阅下面的示例,您使用面向对象的 arrow 函数(保留当前上下文)函数编程。那时,它作为第三属性有所帮助。在第一个示例中,我无法在匿名函数中访问 this.numbers,因为匿名乐趣有其自己的上下文。当您想访问原始数组以进行操作时,这很有用

    工作示例:

    function Demo (numbers){
       this.numbers = numbers;
    }
    
    Demo.prototype.doMap = function () {
     return this.numbers.map(function(num, index, array) {
         return array[num]
      });
    }
    
    var obj  = new Demo([1, 2, 4, 2, 3]);
    
    console.log(obj.doMap()); // will work

    非工作示例如果我不传递数组,它会抛出错误。

    function Demo (numbers){
       this.numbers = numbers;
    }
    
    Demo.prototype.doMap = function () {
     return this.numbers.map(function(num, index, array) {
         return this.numbers[num] // cant access original number array using this (this refers to context of anonymous function)
      });
    }
    
    var obj  = new Demo([1, 2, 4, 2, 3]);
    
    console.log(obj.doMap()); // throw error

    【讨论】:

    • 这是 mapsecond 参数。 OP 正在谈论给回调的第三个参数 - 数组本身 arr.map(function (item, index, array) {}, thisArg)
    • 对不起!!我刚收到问题,我更新了答案:)
    • @VLAZ 嗨,现在有意义了吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多