制作我自己的 ForEach() javascript - 元素未定义

Question

我正在用 javascript 实现自己的 forEach，唯一的目的是更好地理解该语言。更具体地说，临时目标是更好地理解回调。

这就是我在被卡住之前走了多远。

function myForEach(array, callback) {
  for (let i = 0; i < this.length; i++) {
    callback(array[i]);
  }
}

function callback(element) {
  console.log(element); //insert logic
}

const array = [2, 4, 6, 8, 10];
arr.myForEach(array, callback(element));

在节点中运行时出现以下错误：

ReferenceError: element is not defined
    at Object.<anonymous> (C:\Users\Jonas\Desktop\FLEXBOX\test.js:54:31)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Function.Module.runMain (module.js:694:10)
    at startup (bootstrap_node.js:204:16)
    at bootstrap_node.js:625:3

我怀疑这是因为调用函数时，未创建回调函数中作为参数给出的元素。这是有道理的，但是真正的 forEach 循环在调用时并没有传入创建的值？

arr.forEach((element /*does not exist yet?*/) => {
    console.log(element);
});

我也尝试过使用 lambda 调用该方法，但也没有得到正确的结果。但有一个不同的错误

arr.myForEach(array, (element) => {
    console.log(element);
});

然后它给出错误：

TypeError: arr.myForEach is not a function
    at Object.<anonymous> (C:\Users\Jonas\Desktop\FLEXBOX\test.js:58:5)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Function.Module.runMain (module.js:694:10)
    at startup (bootstrap_node.js:204:16)
    at bootstrap_node.js:625:3

Answer 1

这就是你实现它的方法

    Array.prototype.myForEach = function(callback) {
      for (let i = 0; i < this.length; i++) {
        callback(this[i]);
      }
    };
    
    function callback(element) {
      console.log(element); //insert logic
    }
    
    var array = [2, 4, 6, 8, 10];
    array.myForEach( callback);

错误

element not defined is because in last line you use 'callback(element)'

，该行元素未定义

并且能够在像

array.myForEach

这样的数组上调用方法，你必须将其附加到原型

注意：不建议更改内置原型。谢谢各位的评论

Answer 2

您有几个错误，请检查：

function myForEach(array, callback) {
    for (let i = 0; i < array.length; i++) { 
        callback(array[i]);
    }
}

function callback(element) {
    console.log(element); //insert logic
}

const array = [2, 4, 6, 8, 10];
myForEach(array, callback); 

错误是（见评论）：

function myForEach(array, callback) {
  for (let i = 0; i < this.length; i++) { // what is this? You need array.length
    callback(array[i]);
  }
}

function callback(element) {
  console.log(element); //insert logic
}

const array = [2, 4, 6, 8, 10];
arr.myForEach(array, callback(element)); 
// arr.myForEach is not possible, because myForEach is not a method of JS arrays 
// callback(element) this invokes a function, you just need to pass it like callback (without parentheses)

Answer 3

元素未定义

你得到这个是因为

element

在遇到这一行时未定义：

arr.myForEach(array, callback(element));`

该代码表示立即调用

callback

，传入名为

element

的变量（该变量不存在），然后获取回调结果并将其传递给 myForEach

arr.myForEach 不是函数

你得到这个是因为你没有修改 Array.prototype 来拥有 myForEach 函数，所以

arr.myForEach

是未定义的。按照您编写 myForEach 的方式，您应该像这样调用它：

myForEach(array, (element) => console.log(element))

或

myForEach(array, callback);

Answer 4

const arr = [2, 4, 6, 8, 10];
myForEach(arr, callback); 

您编写的函数应该以上述方式调用。

Answer 5

有几种方法可以解决这个问题。我认为您想要修改数组本身以具有您的功能，在这种情况下，下面的代码可以做到这一点。请注意，我将该函数分配为数组的 instance 的属性。您也可以修改

Array.prototype

...但这通常被认为是一个危险且不明智的想法。 （旁注，在您的代码中，您没有将回调传递到函数中，而是调用

callback(element)

并将结果（未定义）传递到函数中。

function myForEach(callback) {
    for (let i = 0; i < this.length; i++) {
        callback(this[i]);
    }
}

function callback(element) {
    console.log(element); //insert logic
}

const arr = [2, 4, 6, 8, 10];
arr.myForEach = myForEach;
arr.myForEach(callback);

您可以这样做的另一种方法是将数组和回调传递给一个函数，在这种情况下您不想使用

this

。

function myForEach(array, callback) {
    for (let i = 0; i < array.length; i++) {
        callback(array[i]);
    }
}

function callback(element) {
    console.log(element); //insert logic
}

const array = [2, 4, 6, 8, 10];
//myForEach(array, callback(element));
myForEach(array, callback); 

Answer 6

您收到此错误的原因是“元素”在此实例中没有引用任何内容。您需要循环遍历数组，然后向每个元素添加逻辑，假设您想要添加两个来教导数组的元素，您的回调函数可能如下所示：

function specificAFunction( arr ) {
let arrayResult = [];
arr.forEach( element => arrayResult.push(element + 2) );
return arrayResult;
};

然后您可以使用该函数和值数组调用您的第一个函数：

const values = myFilter(myArray, specificAFunction);

Answer 7

在这里您可以创建自己的调用打印函数接受条件函数

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Array.prototype.arrayPrint = function (calback)
{
    for (let index = 0; index < this.length; index++) {
        if (calback(this[index], index))
        {
            console.log(this[index]);                
        }
    }
}

function ifOdd(elem, index)
{
    return elem % 2 == 0;    
}

array.arrayPrint(ifOdd);

Answer 8

如果您正在 JavaScript 中寻找自己的

forEach()

之类的方法，您可以使用

Array.prototype

静态方法将其附加到

Object.defineProperty

。

代码片段 -

Object.defineProperty(Array.prototype, 'myForEach', {
  value: function(callback) {
    for(let i=0; i< this.length; i++) {
      callback(this[i]);
    }
  }
})

function callback(element) {
  console.log(element);
}

const array = [2, 4, 6, 8, 10];
array.myForEach(callback);
console.log(`***** ***** *****`)
array.forEach(callback);

Answer 9

这里是如何实现你自己的 forEach 的代码

const array = [2, 4, 6, 8, 10];

function callback(element){
  console.log(element);
}


function myForEach(array, callbackfn, thisArg){
  for(let i = 0;  i < array.length; i++){
    callbackfn.call(thisArg, array[i], i, array):
  }
}


myForEach(array, callback);