JavaScript - 数组 for 循环,reduce 及方法链剖析

本贴最后更新于 1354 天前,其中的信息可能已经渤澥桑田

2020-07-13

描述

对数组的 for 循环,reduce 和方法链进行不同纬度的比对。

循环

说明

  • for 循环中 for...in、for...of 和 forEach 的不同点
  • 由于函数式编程的流行,目前使用率有所下降
  • 可以对迭代进行控制,如跳过元素或提前 return
  • 返回的结果数组需要在循环外预先声明
  • 使用 Array.prototype.push() 或扩展运算符 ... 来进行元素的添加
  • O(N) 复杂度,每一个元素只能迭代一次

代码

const files = [ 'foo.txt ', '.bar', '   ', 'baz.foo' ];
let filePaths = [];

for (let file of files) {
  const fileName = file.trim();
  if(fileName) {
    const filePath = `~/cool_app/${fileName}`;
    filePaths.push(filePath);
  }
}

console.log(filePaths); // ["~/cool_app/foo.txt", "~/cool_app/.bar", "~/cool_app/baz.foo"]

reduce

说明

  • Array.prototype.reduce() 中,将空数组做为初始值的
  • 随着函数式编程的流行,如今也有更多的开发者开始使用
  • 对迭代的控制较弱,不能跳过元素或提前 return
  • 如果需要的话,可以和其他方法形成链
  • 使用 Array.prototype.push() 或扩展运算符 ... 来进行元素的添加
  • O(N) 复杂度,每一个元素只能迭代一次

代码

const files = [ 'foo.txt ', '.bar', '   ', 'baz.foo' ];
const filePaths = files.reduce((acc, file) => {
  const fileName = file.trim();
  if(fileName) {
    const filePath = `~/cool_app/${fileName}`;
    acc.push(filePath);
  }
  return acc;
}, []);

console.log(filePaths); // ["~/cool_app/foo.txt", "~/cool_app/.bar", "~/cool_app/baz.foo"]

方法链

说明

  • 使用 Array.prototype.map()Array.prototype.filter()
  • 随着函数式编程的流行,如今也有更多的开发者开始使用
  • 对迭代的控制较弱,不能跳过元素或提前 return
  • 声明式,更加容易阅读和重构,链可以根据需要不断添加
  • 不需要使用 Array.prototype.push() 或扩展运算符 ...
  • O(cN) 复杂度, c 表示每个元素迭代的次数,也就是链的长度

代码

const files = [ 'foo.txt ', '.bar', '   ', 'baz.foo' ];
const filePaths = files
  .map(file => file.trim())
  .filter(Boolean)
  .map(fileName => `~/cool_app/${fileName}`);

console.log(filePaths); // ["~/cool_app/foo.txt", "~/cool_app/.bar", "~/cool_app/baz.foo"]

返回总目录

每天 30 秒系列之 JavaScript 代码

  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    710 引用 • 1173 回帖 • 192 关注
  • 代码
    459 引用 • 591 回帖 • 8 关注
  • 循环
    2 引用

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...