JavaScript数组方法:通过实现了解
#javascript #初学者 #arrays #es6

当我开始学习现代JavaScript(或ES6ð)时,阵列方法是我最具挑战性的事情之一。我不知道该如何处理这些mapsfiltersreduce&stuck。现在我了解了它们,我相信正确理解它们的最佳方法是尝试自己实施它们。

要理解这篇文章,您需要了解循环,数组(DUH),功能(也是箭头功能),回调和解释代码ð的功能。顺便说一句,如果您不知道什么是回调,这是我的解释。

回调功能(速成课程)

回调函数只是一个作为参数传递给另一个函数的函数,然后将在需要时 回叫(呼叫,获取它ðä) 。

function cb() {
  console.log("this is my callback function...");
}

function someStuff(cb) {
  // doing some stuff...
  console.log("done with it...");
  // maybe doing some more stuff...
  cb();
  // again doing something...
}

someStuff(cb);
输出:
done with it...
this is my callback function...

或者您可以像:
一样写

someStuff(() => {
  console.log("this is my callback function...");
});

someStuff(function () {
  console.log("this is my callback function...");
});

所有这三种方式都是等效的,并且会产生相同的输出。最终发生的事情是,您只是将功能作为参数传递,并且在需要时被内部称为。就是。

现在来了数组方法,这就是我希望您思考它们的方式:

  • 数组方法将采用回调功能。
  • 现在在内部,此方法将创建一个新的数组。
  • 然后,它将“运行循环”并在此数组的每个元素上进行迭代。
  • 对于每次迭代,当前元素将作为参数传递给回调函数,然后将 用该值进行
  • 然后,通过该方法以某种方式使用回调函数返回的值将当前的新值添加到结果数组中。 (每种方法的细节不同)
  • 完成所有元素后,它将返回新数组。

注意:

  1. 数组方法的最多 不会更改原始数组&将返回一个全新的数组。
  2. 这只是理解该过程的一种一般和非正式的方式。
  3. 回调函数还将获得当前元素的索引作为其第二个参数

现在让我们看一些示例实现ð。

示例1:map()方法

通过在每个元素上调用回调函数,并用其返回值填充结果数组,将数组“转换为新数组”为新数组。我之所以将“转换”封闭在引号中,是因为它 实际上修改了原始值。

function map(arr, callback) {
  const result = [];
  for (let i = 0; i < arr.length; ++i) {
    result.push(callback(arr[i], i));
  }

  return result;
}

const numbers = [2, 4, 9, 10];
const squares1 = numbers.map((num) => num ** 2);
const squares2 = map(numbers, (num) => num ** 2);

console.log(squares1);
console.log(squares2);
输出:
[ 4, 16, 81, 100 ]
[ 4, 16, 81, 100 ]

示例2:filter()方法

该过滤器方法基本上用于过滤一些基于某些测试的元素。过滤器的回调函数应返回布尔值,该布尔值将用于确定所得数组中的哪些元素。如果回调返回当前元素,则仅将其添加到结果数组中。

function filter(arr, callback) {
  const result = [];
  for (let i = 0; i < arr.length; ++i) {
    if (callback(arr[i], i)) {
      result.push(arr[i]);
    }
  }

  return result;
}

const numbers = [0, -1, 4, -10, 5, 10, 100, -22];
const negatives1 = numbers.filter((num) => num < 0);
const negatives2 = filter(numbers, (num) => num < 0);

console.log(negatives1);
console.log(negatives1);
输出:
[ -1, -10, -22 ]
[ -1, -10, -22 ]

感谢您阅读我的帖子。您的诚实反馈(如果有)将不胜感激!