关于javascript:比较三种非破坏性处理数组的方法

43次阅读

共计 9300 个字符，预计需要花费 24 分钟才能阅读完成。

在这篇文章中，咱们将会摸索解决数组的三种办法：

  • for…of循环
  • 数组办法.reduce()
  • 数组办法.flatMap()

目标是帮忙你在须要解决数组的时候在这些个性之间做出抉择。如果你还不晓得 .reduce() 和.flatMap()，这里将向你解释它们。

为了更好地感触这三个个性是如何工作的，咱们别离应用它们来实现以下性能：

  • 过滤一个输出数组以产生一个输入数组
  • 将每个输出数组元素映射为一个输入数组元素
  • 将每个输出数组元素扩大为零个或多个输入数组元素
  • 过滤 - 映射（过滤和映射在一个步骤中）
  • 计算一个数组的摘要
  • 查找一个数组元素
  • 查看所有数组元素的条件

咱们所做的一切都是 非破坏性的：输出的数组永远不会被扭转。如果输入是一个数组，它永远是新建的。

for-of 循环

上面是数组如何通过 for-of 进行非破坏性的转换：

  • 首先申明变量result，并用一个空数组初始化它。

  • 对于输出数组的每个元素elem：

    • 如果一个值应该被增加到 result 中：

      • 对 elem 进行必要的转换并将其推入result。

应用 for-of 过滤

让咱们来感受一下通过 for-of 解决数组，并实现（简易版的）数组办法.filter()：

function filterArray(arr, callback) {const result = [];
  for (const elem of arr) {if (callback(elem)) {result.push(elem);
    }
  }
  return result;
}

assert.deepEqual(filterArray(['','a','', 'b'], str => str.length > 0),
  ['a', 'b']
);

应用 for-of 映射

咱们也能够应用 for-of 来实现数组办法.map()。

function mapArray(arr, callback) {const result = [];
  for (const elem of arr) {result.push(callback(elem));
  }
  return result;
}

assert.deepEqual(mapArray(['a', 'b', 'c'], str => str + str),
  ['aa', 'bb', 'cc']
);

应用 for-of 扩大

collectFruits()返回数组中所有人的所有水果：

function collectFruits(persons) {const result = [];
  for (const person of persons) {result.push(...person.fruits);
  }
  return result;
}

const PERSONS = [
  {
    name: 'Jane',
    fruits: ['strawberry', 'raspberry'],
  },
  {
    name: 'John',
    fruits: ['apple', 'banana', 'orange'],
  },
  {
    name: 'Rex',
    fruits: ['melon'],
  },
];
assert.deepEqual(collectFruits(PERSONS),
  ['strawberry', 'raspberry', 'apple', 'banana', 'orange', 'melon']
);

应用 for-of 过滤 & 映射

下列代码在一步中进行过滤以及映射：

/**
 * What are the titles of movies whose rating is at least `minRating`?
 */
function getTitles(movies, minRating) {const result = [];
  for (const movie of movies) {if (movie.rating >= minRating) {// (A)
      result.push(movie.title); // (B)
    }
  }
  return result;
}

const MOVIES = [{ title: 'Inception', rating: 8.8},
  {title: 'Arrival', rating: 7.9},
  {title: 'Groundhog Day', rating: 8.1},
  {title: 'Back to the Future', rating: 8.5},
  {title: 'Being John Malkovich', rating: 7.8},
];

assert.deepEqual(getTitles(MOVIES, 8),
  ['Inception', 'Groundhog Day', 'Back to the Future']
);
  • 过滤是通过 A 行的 if 语句和 B 行的 .push() 办法实现的。
  • 映射是通过推送movie.title（而不是元素movie）实现的。

应用 for-of 计算摘要

getAverageGrade()计算了学生数组的均匀等级：

function getAverageGrade(students) {
  let sumOfGrades = 0;
  for (const student of students) {sumOfGrades += student.grade;}
  return sumOfGrades / students.length;
}

const STUDENTS = [
  {
    id: 'qk4k4yif4a',
    grade: 4.0,
  },
  {
    id: 'r6vczv0ds3',
    grade: 0.25,
  },
  {
    id: '9s53dn6pbk',
    grade: 1,
  },
];
assert.equal(getAverageGrade(STUDENTS),
  1.75
);

注意事项：用小数点后的分数计算可能会导致四舍五入的谬误。

应用 for-of 查找

for-of也善于在未排序的数组中查找元素：

function findInArray(arr, callback) {for (const [index, value] of arr.entries()) {if (callback(value)) {return {index, value}; // (A)
    }
  }
  return undefined;
}

assert.deepEqual(findInArray(['','a','', 'b'], str => str.length > 0),
  {index: 1, value: 'a'}
);
assert.deepEqual(findInArray(['','a','', 'b'], str => str.length > 1),
  undefined
);

这里，一旦咱们找到了什么，咱们就能够通过 return 来提前来到循环（A 行）。

应用 for-of 查看条件

当实现数组办法 .every() 时，咱们再次从提前终止循环中获益（A 行）：

function everyArrayElement(arr, condition) {for (const elem of arr) {if (!condition(elem)) {return false; // (A)
    }
  }
  return true;
}

assert.equal(everyArrayElement(['a', '','b'], str => str.length > 0),
  false
);
assert.equal(everyArrayElement(['a', 'b'], str => str.length > 0),
  true
);

何时应用

在解决数组时，for-of是一个十分罕用的工具：

  • 通过推送创立输入数组很容易了解。
  • 当后果不是数组时，咱们能够通过 return 或break来提前结束循环，这通常很有用。

for-of的其余益处包含：

  • 它能够与同步迭代一起工作。而且咱们能够通过切换到 for-await-of 循环来反对异步迭代。
  • 咱们能够在容许应用 await 和yield操作的函数中应用它们。

for-of的毛病是，它可能比其余办法更简短。这取决于咱们试图解决什么问题。

生成器和 for-of

上一节曾经提到了yield，但我还想指出，生成器对于解决和生产同步和异步迭代来说是如许的不便。

举例来说，上面通过同步生成器来实现 .filter() 和.map()：

function* filterIterable(iterable, callback) {for (const item of iterable) {if (callback(item)) {yield item;}
  }
}
const iterable1 = filterIterable(['','a','', 'b'],
  str => str.length > 0
);
assert.deepEqual(Array.from(iterable1),
  ['a', 'b']
);

function* mapIterable(iterable, callback) {for (const item of iterable) {yield callback(item);
  }
}
const iterable2 = mapIterable(['a', 'b', 'c'], str => str + str);
assert.deepEqual(Array.from(iterable2),
  ['aa', 'bb', 'cc']
);

数组办法.reduce()

数组办法 .reduce() 让咱们计算数组的摘要。它是基于以下算法的：

  • [初始化摘要] 咱们用一个实用于空数组的值初始化摘要。

  • 咱们在数组上循环。每个数组元素：

    • [更新摘要] 咱们通过将旧的摘要与以后元素联合起来计算一个新的摘要。

在咱们理解 .reduce() 之前，让咱们通过 for-of 来实现它的算法。咱们将用串联一个字符串数组作为一个例子：

function concatElements(arr) {
  let summary = ''; // initializing
  for (const element of arr) {summary = summary + element; // updating}
  return summary;
}
assert.equal(concatElements(['a', 'b', 'c']),
  'abc'
);

数组办法 .reduce() 循环数组，并继续为咱们跟踪数组的摘要，因而能够聚焦于初始化和更新值。它应用 ” 累加器 ” 这一名称作为 ” 摘要 ” 的粗略同义词。.reduce()有两个参数：

  1. 回调：

    1. 输出：旧的累加器和以后元素
    2. 输入：新的累加器
  2. 累加器的初始值。

在上面代码中，咱们应用 .reduce() 来实现concatElements():

const concatElements = (arr) => arr.reduce((accumulator, element) => accumulator + element, // updating
  '' // initializing
);

应用.reduce()过滤

.reduce()是相当通用的。让咱们用它来实现过滤：

const filterArray = (arr, callback) => arr.reduce((acc, elem) => callback(elem) ? [...acc, elem] : acc,
  []);
assert.deepEqual(filterArray(['','a','', 'b'], str => str.length > 0),
  ['a', 'b']
);

不过，当波及到以非破坏性的形式向数组增加元素时，JavaScript 数组的效率并不高（与许多函数式编程语言中的链接列表相比）。因而，渐变累加器的效率更高：

const filterArray = (arr, callback) => arr.reduce((acc, elem) => {if (callback(elem)) {acc.push(elem);
    }
    return acc;
  },
  []);

应用.reduce()映射

咱们能够通过 .reduce() 来实现map：

const mapArray = (arr, callback) => arr.reduce((acc, elem) => [...acc, callback(elem)],
  []);
assert.deepEqual(mapArray(['a', 'b', 'c'], str => str + str),
  ['aa', 'bb', 'cc']
);

上面是效率更高的渐变版本：

const mapArray = (arr, callback) => arr.reduce((acc, elem) => {acc.push(callback(elem));
    return acc;
  },
  []);

应用.reduce()扩大

应用 .reduce() 进行扩大：

const collectFruits = (persons) => persons.reduce((acc, person) => [...acc, ...person.fruits],
  []);

const PERSONS = [
  {
    name: 'Jane',
    fruits: ['strawberry', 'raspberry'],
  },
  {
    name: 'John',
    fruits: ['apple', 'banana', 'orange'],
  },
  {
    name: 'Rex',
    fruits: ['melon'],
  },
];
assert.deepEqual(collectFruits(PERSONS),
  ['strawberry', 'raspberry', 'apple', 'banana', 'orange', 'melon']
);

渐变版本：

const collectFruits = (persons) => persons.reduce((acc, person) => {acc.push(...person.fruits);
    return acc;
  },
  []);

应用.reduce()过滤 & 映射

应用 .reduce() 在一步中进行过滤和映射：

const getTitles = (movies, minRating) => movies.reduce((acc, movie) => (movie.rating >= minRating)
    ? [...acc, movie.title]
    : acc,
  []);

const MOVIES = [{ title: 'Inception', rating: 8.8},
  {title: 'Arrival', rating: 7.9},
  {title: 'Groundhog Day', rating: 8.1},
  {title: 'Back to the Future', rating: 8.5},
  {title: 'Being John Malkovich', rating: 7.8},
];
assert.deepEqual(getTitles(MOVIES, 8),
  ['Inception', 'Groundhog Day', 'Back to the Future']
);

效率更高的渐变版本：

const getTitles = (movies, minRating) => movies.reduce((acc, movie) => {if (movie.rating >= minRating) {acc.push(movie.title);
    }
    return acc;
  },
  []);

应用.reduce()计算摘要

如果咱们能在不扭转累加器的状况下无效地计算出一个摘要，那么 .reduce() 就很杰出：

const getAverageGrade = (students) => {
  const sumOfGrades = students.reduce((acc, student) => acc + student.grade,
    0
  );
  return sumOfGrades  / students.length;
};

const STUDENTS = [
  {
    id: 'qk4k4yif4a',
    grade: 4.0,
  },
  {
    id: 'r6vczv0ds3',
    grade: 0.25,
  },
  {
    id: '9s53dn6pbk',
    grade: 1,
  },
];
assert.equal(getAverageGrade(STUDENTS),
  1.75
);

应用.reduce()查找

上面是应用 .reduce() 实现的简易版的数组办法.find()：

const findInArray = (arr, callback) => arr.reduce((acc, value, index) => (acc === undefined && callback(value))
    ? {index, value}
    : acc,
  undefined
);

assert.deepEqual(findInArray(['','a','', 'b'], str => str.length > 0),
  {index: 1, value: 'a'}
);
assert.deepEqual(findInArray(['','a','', 'b'], str => str.length > 1),
  undefined
);

这里 .reduce() 有一个限度：一旦咱们找到一个值，咱们依然要拜访其余的元素，因为咱们不能提前退出。不过 for-of 没有这个限度。

应用.reduce()查看条件

上面是应用 .reduce() 实现的简易版的数组办法.every()：

const everyArrayElement = (arr, condition) => arr.reduce((acc, elem) => !acc ? acc : condition(elem),
  true
);

assert.equal(everyArrayElement(['a', '','b'], str => str.length > 0),
  false
);
assert.equal(everyArrayElement(['a', 'b'], str => str.length > 0),
  true
);

同样的，如果咱们能提前从 .reduce() 中退出，这个实现会更有效率。

何时应用

.reduce()的一个长处是简洁。毛病是它可能难以了解 – 特地是如果你不习惯于函数式编程的话。

以下状况我会应用.reduce()：

  • 我不须要对累加器进行变异。
  • 我不须要提前退出。

  • 我不须要对同步或异步迭代器的反对。

    • 然而，为迭代器实现 reduce 是绝对容易的。

只有能在不渐变的状况下计算出一个摘要（比方所有元素的总和），.reduce()就是一个好工具。

不过，JavaScript 并不善于以非破坏性的形式增量创立数组。这就是为什么我在 JavaScript 中较少应用.reduce()，而在那些有内置不可变列表的语言中则较少应用相应的操作。

数组办法.flatMap()

一般的 .map() 办法将每个输出元素准确地翻译成一个输入元素。

相比之下，.flatMap()能够将每个输出元素翻译成零个或多个输入元素。为了达到这个目标，回调并不返回值，而是返回值的数组。它等价于在调用 map()办法后再调用深度为 1 的 flat() 办法（arr.map(...args).flat()），但比别离调用这两个办法略微更高效一些。

assert.equal([0, 1, 2, 3].flatMap(num => new Array(num).fill(String(num))),
  ['1', '2', '2', '3', '3', '3']
);

应用.flatMap()过滤

上面展现如何应用 .flatMap() 进行过滤：

const filterArray = (arr, callback) => arr.flatMap(elem => callback(elem) ? [elem] : []);

assert.deepEqual(filterArray(['','a','', 'b'], str => str.length > 0),
  ['a', 'b']
);

应用.flatMap()映射

上面展现如何应用 .flatMap() 进行映射：

const mapArray = (arr, callback) => arr.flatMap(elem => [callback(elem)]
);

assert.deepEqual(mapArray(['a', 'b', 'c'], str => str + str),
  ['aa', 'bb', 'cc']
);

应用.flatMap()过滤 & 映射

一步到位的过滤和映射是 .flatMap() 的劣势之一：

const getTitles = (movies, minRating) => movies.flatMap((movie) => (movie.rating >= minRating) ? [movie.title] : []);

const MOVIES = [{ title: 'Inception', rating: 8.8},
  {title: 'Arrival', rating: 7.9},
  {title: 'Groundhog Day', rating: 8.1},
  {title: 'Back to the Future', rating: 8.5},
  {title: 'Being John Malkovich', rating: 7.8},
];

assert.deepEqual(getTitles(MOVIES, 8),
  ['Inception', 'Groundhog Day', 'Back to the Future']
);

应用.flatMap()扩大

将输出元素扩大为零或更多的输入元素是 .flatMap() 的另一个劣势：

const collectFruits = (persons) => persons.flatMap(person => person.fruits);

const PERSONS = [
  {
    name: 'Jane',
    fruits: ['strawberry', 'raspberry'],
  },
  {
    name: 'John',
    fruits: ['apple', 'banana', 'orange'],
  },
  {
    name: 'Rex',
    fruits: ['melon'],
  },
];
assert.deepEqual(collectFruits(PERSONS),
  ['strawberry', 'raspberry', 'apple', 'banana', 'orange', 'melon']
);

.flatMap()只能产生数组

应用.flatMap()，咱们只能产生数组。这使得咱们无奈：

  • 用 .flatMap() 计算摘要
  • 用 .flatMap() 查找
  • 用 .flatMap() 查看条件

咱们能够产生一个被数组包裹的值。然而，咱们不能在回调的调用之间传递数据。而且咱们不能提前退出。

何时应用

.flatMap()善于：

  • 同时进行过滤和映射
  • 将输出元素扩大为零或多个输入元素

我还发现它绝对容易了解。然而，它不像 for-of 和.reduce()那样用处宽泛：

  • 它只能产生数组作为后果。
  • 咱们不能在回调的调用之间传递数据。
  • 咱们不能提前退出。

倡议

那么，咱们如何最佳地应用这些工具来解决数组呢？我大抵的倡议是：

  • 应用你所领有的最具体的工具来实现这个工作：

    • 你须要过滤吗？请应用.filter()。
    • 你须要映射吗？请应用.map()。
    • 你须要查看元素的条件吗？应用 .some() 或.every()。
    • 等等。

  • for-of是最通用的工具。依据我的教训：

    • 相熟函数式编程的人，偏向于应用 .reduce() 和.flatMap()。
    • 不相熟函数式编程的人通常认为 for-of 更容易了解。然而，for-of通常会导致更多简短的代码。
  • 如果不须要扭转累加器，.reduce()善于计算摘要（如所有元素的总和）。
  • .flatMap()擅长于过滤 & 映射和将输出元素扩大为零或更多的输入元素。

正文完
javascript
发表至： javascript
2023-06-16
 0
JavaScript 的未来：它还少些什么？
关于javascript:PrimeVue-推荐新轮子基于-Vue-3-开发的定制性很强的前端-UI-组件库
22道JavaScript高频手写面试题
项目经历准备篇如何准备阿里巴巴P6P7前端面试