👻 DeathGhost

高阶函数替换JavaScript中的循环

这篇文章发布于

DeathGhost 编辑, 归类于JAVASCRIPT » 当前评论0条。

JavaScript新方法代替传统循环方法操作。本篇文章对比介绍实际场景方法运用。

为什么高阶函数替换循环?

使用高阶函数将使您的代码可以使你的代码可读性更强,易于理解,便于调试。

JavaScript高阶函数替换循环
JavaScript高阶函数替换循环

场景示例

一、遍历数组元素,返回一个修改后的新数组。

e.g. 将数组元素转换为大写

循环方式:

const animal = ['dog', 'cat', 'monkey', 'tiger'];
let upperCaseAnimal = [];
for(const item of animal) {
  upperCaseAnimal.push(item.toUpperCase());
}
// 输出
0: "DOG"
1: "CAT"
2: "MONKEY"
3: "TIGER"

不用循环

const animal = ['dog', 'cat', 'monkey', 'tiger'];
let upperCaseAnimal = animal.map(item => item.toUpperCase());

结果也是一样。

二、遍历数组元素,并执行某一方法。

循环:

const animal = ['dog', 'cat', 'monkey', 'tiger'];
function output(name) {
  console.log(name);
}
for (const item of animal) {
  output(item);
}

不用循环:

const animal = ['dog', 'cat', 'monkey', 'tiger'];
function output(name) {
  console.log(name);
}
animal.forEach(name=> output(name));

三、数组元素过滤。

e.g. 返回数组中的奇数。

循环:

const numbers = [1, 2, 3, 4, 5];
const odd = [];
for (const item of numbers) {
  if ( item % 2 ) {
    odd.push(item);
  }
}

不用循环:

const numbers = [1, 2, 3, 4, 5];
const odd = numbers.filter(item => item % 2);
// 输出结果
[1, 3, 5]

四、数组元素求和。

循环:

const numbers = [1, 2, 3, 4, 5];
let result = 0;
for (const item of numbers) {
  result  = item;
}

不用循环:

const numbers = [1, 2, 3, 4, 5];
let result = numbers.reduce((acc, val) => acc + val, 0);
// 输出结果
15

五、检测数组中的元素是否满足指定条件。

循环:

const numbers = [1, 2, 3, 4, 5];
for (const item of numbers) {
  if (item === 3) {
    console.log('Y');
  }
}

不用循环:

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.some(item => item === 3));

补充:

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。

some() 方法会依次执行数组的每个元素:

如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。

如果没有满足条件的元素,则返回false。

注意: some() 不会对空数组进行检测。

注意: some() 不会改变原始数组。

六、检查数组中每个元素是否均满足指定条件。

循环:

const numbers = [1, 2, 3, 4, 5];
for (const item of numbers) {
  if (item > 0) {
    console.log(item);
  }
}

不用循环:

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.every(item => item > 0));

补充:

every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。

every() 方法使用指定函数检测数组中的所有元素:

如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。

如果所有元素都满足条件,则返回 true。

注意: every() 不会对空数组进行检测。

注意: every() 不会改变原始数组。

好了,就到这里,晚安!🌛

在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

当前共获取0条评论。

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕