将这些嵌套函数从箭头转换为旧样式以及变量会发生什么

Question

我正在尝试从一个列表中查找不在第二个列表中的项目。几乎是运气不好，我让它工作了，但只有箭头功能。对我来说普通函数更容易阅读所以我尝试转换它但结果不是我期望的。

数据：

const arr1 = [
    {
        "key": 1,
        "val": "one"
    },
    {
        "key": 2,
        "val": "two"
    },
    {
        "key": 3,
        "val": "three"
    }
]

const arr2 = [
    {
        "key": 3,
        "val": "three"
    },
    {
        "key": 4,
        "val": "four"
    },
    {
        "key": 1,
        "val": "one"
    }
]

版本 1

arr1.filter((element) => arr2.findIndex((innerElement) => element.key === innerElement.key) === -1); 
// produces object with key 2

版本 2

arr1.filter(function(element) { 
    return arr2.findIndex(function(innerElement) { 
      element.key === innerElement.key === -1
    })
}) // produces all three objects in arr1

为了使正确的更简洁，我删除了多余的括号，它仍然有效：

arr1.filter(element => arr2.findIndex(innerElement => element.key === innerElement.key) === -1);

我在这里遗漏了一个关键方面。我知道 arr1 中的每个项目都传递给一个函数，而内部函数又将其结果传递给另一个函数，并且表达式可以访问两组参数并被执行。但是我想我对订单或其他东西的心理模型是错误的。

有人可以解释一下每一步发生了什么以及如何思考吗？我如何将其变成普通函数？

我将处理很多嵌套结构，我觉得这是一个薄弱的领域，我想在这方面做得更好。

谢谢

Answer 1

你需要return比较值。 === -1 测试必须使用 findIndex() 的结果，而不是在其回调中。

arr1.filter(function(element) { 
    return arr2.findIndex(function(innerElement) { 
      return element.key === innerElement.key;
    }) === -1;
});

这可以用 some() 方法简化。

arr1.filter(function(element) {
  return !arr2.some(function(innerElement) {
    return element.key === innerElement.key
  })
})

将这些嵌套函数从箭头转换为旧样式以及变量会发生什么

Convert these nested functions from arrow to old style and what happens with variables

javascript

arrays

nested-lists

nested-function