Question

我能问一下这两个代码有什么区别吗，即使它们给出相同的输出？

代码示例 1：

const veggies = ['broccoli', 'spinach', 'cauliflower', 'broccoflower'];

const politelyDecline = (veg) => {
  console.log('No ' + veg + ' please. I will have pizza with extra cheese.');
}

function declineEverything(arr) {
  arr.forEach(politelyDecline)
}

declineEverything(veggies)

代码示例 2：

const veggies = ['broccoli', 'spinach', 'cauliflower', 'broccoflower'];

const politelyDecline = (veg) => {
  console.log('No ' + veg + ' please. I will have pizza with extra cheese.');
}

function declineEverything(arr) {
  arr.forEach(veggie => {
    politelyDecline(veggie)
  })
}

declineEverything(veggies)

Answer 1

在第一种方法中，politelyDecline 函数获取 two additional arguments。当前元素的索引和被迭代的数组。

const politelyDecline = (veg, i, array) => {
  console.log(veg, i, JSON.stringify(array))
}

// you can see it better with declaration syntax using "arguments"
function politelyDecline(veg) {
  console.log(arguments)
}

const veggies = ['broccoli', 'spinach', 'cauliflower', 'broccoflower'];

const politelyDecline = (veg, i, array) => {
  console.log(veg, i, JSON.stringify(array))
}

function declineEverything(arr) {
  arr.forEach(politelyDecline)
}

declineEverything(veggies)

此外，如果您使用函数声明语法而不是箭头函数表达式创建 politelyDecline，则 this 的行为会在其中发生变化。在以下代码中，broccoliCounter 对象作为第二个参数传递给 forEach。每当在回调中调用 this 时，都会使用此对象。在这里，如果 veg 中包含字符串 "brocc"，它会增加一个属性。

function politelyDecline(veg) {
  if (veg.includes("brocc") )
    this.count++
}

function declineEverything(arr) {
  const broccoliCounter = { count: 0 }
  arr.forEach(politelyDecline, broccoliCounter)
  console.log(broccoliCounter)
}

const veggies = ['broccoli', 'spinach', 'cauliflower', 'broccoflower'];

function politelyDecline(veg) {
  if (veg.includes("brocc") )
    this.count++
}

function declineEverything(arr) {
  const broccoliCounter = { count: 0 }
  arr.forEach(politelyDecline, broccoliCounter)
  console.log(broccoliCounter)
}

declineEverything(veggies)

Answer 2

基本上，两个代码之间没有区别。唯一的区别是在运行第二个 foreach 代码时编写逻辑的范围。

例如

在第一个示例中，您只是在遍历该数组，但在循环时您无法执行任何操作。如果你想在循环时做一些操作，你必须遵循第二个代码示例方法

const veggies = ['broccoli', 'spinach', 'cauliflower', 'broccoflower'];

const politelyDecline = (veg) => {
      console.log('No ' + veg + ' please. I will have pizza with extra cheese.');
}
    
function declineEverything(arr){

arr.forEach(veggie => {
   politelyDecline(veggie)
   // see this console it will run everytime
   console.log('here')
})

}

declineEverything(veggies)

Answer 3

你基本上在两个代码中做同样的事情。但是，第一个是使用对每个项目的直接引用。而且，第二个是在匿名函数内部进行。但是，由于两者都访问同一个数组并且没有以任何方式更改内容，因此输出保持不变。

Answer 4

在第一个示例中，您将 politelyDecline 函数作为回调传递给 .forEach()。在第二个示例中，您将匿名粗箭头函数传递给 .forEach() 并在该匿名函数的主体中调用 politelyDecline！

仅在这种情况下，两种方式编写代码的行为相似。但是资源消耗仍然会略有不同。

需要有关 .forEach() 的帮助

4 个答案: