代码解剖 - For循环、数组reduce和方法链

For循环

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);
  }
}

// filePaths = [ '~/cool_app/foo.txt', '~/cool_app/.bar', '~/cool_app/baz.foo']

• 可以使用任何for循环 - 了解更多关于不同JavaScript循环的知识。
• 如今不太常见，因为函数式编程更受欢迎。
• 可以控制迭代，例如跳过元素或提前return。
• 需要事先声明结果数组，在循环外部。
• 使用Array.prototype.push()或扩展运算符（...）添加元素。
• O(N)复杂度，每个元素只会被迭代一次。

数组reduce

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;
}, []);

// filePaths = [ '~/cool_app/foo.txt', '~/cool_app/.bar', '~/cool_app/baz.foo']

• 使用Array.prototype.reduce()和空数组作为初始值。
• 如今更常见，因为函数式编程更受欢迎。
• 对迭代的控制较少，无法跳过元素或提前return。
• 如果需要，可以与其他方法链接。
• 使用Array.prototype.push()或扩展运算符（...）添加元素。
• O(N)复杂度，每个元素只会被迭代一次。

方法链

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

// 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 次迭代每个元素，(c: 链的长度)。