三种非破坏性处理数组的方法|当前关注

在这篇文章中，我们将会探索处理数组的三种方法：

目的是帮助你在需要处理数组的时候在这些特性之间做出选择。如果你还不知道.reduce()和.flatMap()，这里将向你解释它们。

为了更好地感受这三个特性是如何工作的，我们分别使用它们来实现以下功能：

【资料图】

我们所做的一切都是「非破坏性的」：输入的数组永远不会被改变。如果输出是一个数组，它永远是新建的。

下面是数组如何通过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来实现数组方法.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"]);

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"]);

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

/** * 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"]);

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也擅长在未排序的数组中查找元素：

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行）。

当实现数组方法.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是一个非常常用的工具：

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()之前，让我们通过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()有两个参数：

在下面代码中，我们使用.reduce()来实现concatElements():

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

.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()来实现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()进行扩展：

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()在一步中进行过滤和映射：

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()就很出色：

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()实现的简易版的数组方法.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()实现的简易版的数组方法.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()就是一个好工具。

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

普通的.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()进行过滤：

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

下面展示如何使用.flatMap()进行映射：

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

一步到位的过滤和映射是.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()的另一个优势：

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()擅长：

我还发现它相对容易理解。然而，它不像for-of和.reduce()那样用途广泛：

那么，我们如何最佳地使用这些工具来处理数组呢？我大致的建议是：

你需要过滤吗？请使用.filter()。

你需要映射吗？请使用.map()。

你需要检查元素的条件吗？使用.some()或.every()。

等等。

本文译自：https://2ality.com/2022/05/processing-arrays-non-destructively.html[1]

以上就是本文的全部内容，感谢阅读。

[1]https://2ality.com/2022/05/processing-arrays-non-destructively.html:https://2ality.com/2022/05/processing-arrays-non-destructively.html

关键词：