比较三种非破坏性处理数组的方法-6ren

比较三种非破坏性处理数组的方法

转载作者：我是一只小鸟更新时间：2023-06-16 14:31:57

26

4

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

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. 输入：旧的累加器和当前元素
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() 擅长于过滤&映射和将输入元素扩展为零或更多的输出元素.

最后此篇关于比较三种非破坏性处理数组的方法的文章就讲到这里了,如果你想了解更多关于比较三种非破坏性处理数组的方法的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

26

4

0

文章推荐： Falcon登陆HuggingFace生态

文章推荐：常见代码优化技术

文章推荐：解密Prompt系列9.模型复杂推理-思维链COT基础和进阶玩法

文章推荐：【QCustomPlot】配置帮助文档

ios - 如果对主纹理进行 mipmap 处理，是否还需要对多重采样纹理进行 mipmap 处理？
对于 Metal ，如果对主纹理进行 mipmap 处理，是否还需要对多采样纹理进行 mipmap 处理？我阅读了苹果文档，但没有得到任何相关信息。最佳答案 Mipmapping 适用于您将从中
javascript - 让一些路由由 Groovy 处理，另一些由 React-router v4 处理
我正在使用的代码在后端 Groovy 代码中具有呈现 GSP(Groovy 服务器页面)的 Controller 。对于前端，我们使用 React-router v4 来处理路由。我遇到的问题是，通过
jquery - 让客户端 (Javascript) 处理 HTML 比用 C# 处理 HTML 更好吗？
我们正在 build 一个巨大的网站。我们正在考虑是在服务器端(ASP .Net)还是在客户端进行 HTML 处理。例如，我们有 HTML 文件，其作用类似于用于生成选项卡的模板。服务器端获取 HT
java - 处理 - 图像数组错误 - "Type mismatch, ' 处理 .core.PImage' 不匹配.."
我正在尝试将图像加载到 void setup() 中的数组中，但是当我这样做时出现此错误:“类型不匹配，'processing .core.PImage' does not匹配“processing.
javascript - 客户更新请求可通过 POSTMAN 处理，但无法使用 Shopify 私有(private)应用程序通过 AJAX 处理
我正在尝试使用其私有(private)应用程序更新 Shopify 上的客户标签。我用 postman 尝试过，一切正常，但通过 AJAX，它带我成功回调而不是错误，但成功后我得到了身份验证链接，而不
处理 - 更改默认应用程序图标
如何更改我的 Processing appIconTest.exe 导出的默认图标在窗口中的应用程序？默认一个: 最佳答案经过一些研究，我能找到的最简单的解决方案是: 进入 ...\process
处理:如何添加背景音乐
我在 Processing 中做了一个简单的小游戏，但需要一些帮助。我有一个 mp3，想将它添加到我的应用程序中，以便在后台循环运行。这可能吗？非常感谢。最佳答案您可以使用声音库。处理已经自带
处理 - 将一起形成一个圆的多个图像按钮
我有几个这样创建的按钮: 在 setup() PImage[] imgs1 = {loadImage("AREA1_1.png"),loadImage("AREA1_2.png"),loadImage
处理:如何分屏？
我正在尝试使用 Processing 创建一个多人游戏，但无法弄清楚如何将屏幕分成两个以显示玩家的不同情况？就像在 c# 中一样，我们有Viewport leftViewport,rightView
处理如何根据草图中的位置改变颜色？
我一直在尝试使用 Moore 邻域在处理过程中创建元胞自动机，到目前为止非常成功。我已经设法使基本系统正常工作，现在我希望通过添加不同的功能来使用它。现在，我检查细胞是否存活。如果是，我使用 fill
JavaScript 处理
有没有办法用 JavaScript 代码检查资源使用情况？我可以检查脚本的 RAM 使用情况和 CPU 使用情况吗？由于做某事有多种方法，我可能会使用不同的方法编写代码，并将其保存为两个不同的文件，
list - 处理 list
我想弄清楚如何处理这样的列表: [ [[4,6,7], [1,2,4,6]] , [[10,4,2,4], [1]] ] 这是一个整数列表的列表我希望我的函数将此列表作为输入并返回列表中没有重复的整
Flutter 处理 MethodChannel
有没有办法在不需要时处理 MethodChannel/EventChannel ？我问是因为我想为对象创建多个方法/事件 channel 。例子: class Call { ... fields
python - 处理 ConnectionResetError
我有一个关于在 Python3 中处理 ConnectionResetError 的问题。这通常发生在我使用 urllib.request.Request 函数时。我想知道如果我们遇到这样的错误是否可
处理 float 的奇怪问题
我一直在努力解决这个问题几个小时，但无济于事。代码很简单，一个弹跳球(粒子)。将粒子的速度初始化为 (0, 0) 将使其保持上下弹跳。将粒子的初始化速度更改为 (0, 0.01) 或任何十进制浮点数都
python - 处理 : 时遇到错误
我把自己弄得一团糟。我想在我的系统中添加 python3.6 所以我决定在我的 Ubuntu 19.10 中卸载现有的。但是现在每次我想安装一些东西我都会得到这样的错误: dpkg: error w
Rpart - NA 处理
我正在努力解决 Rpart 包中的 NA 功能。我得到了以下数据框(下面的代码) Outcome VarA VarB 1 1 1 0 2 1 1 1
java - 处理/访问磁盘上的文件
我将 Java 与 JSF 一起使用，这是 Glassfish 3 容器。在我的 Web 应用程序中，我试图实现一个文件(图像)管理系统。我有一个 config.properties我从中读取上传
optimization - 处理:如何提高程序的帧率？
所以我一直在Processing工作几个星期以来，虽然我没有编程经验，但我已经转向更复杂的项目。我正在编写一个进化模拟器，它会产生具有随机属性的生物。最终，我将添加复制，但现在这些生物只是在屏幕上漂
Delphi 2009 处理 with
有人知道 Delphi 2009 对“with”的处理有什么不同吗？我昨天解决了一个问题，只是将“with”解构为完整引用，如“with Datamodule、Dataset、MainForm”。

首页

博学

6Ren·AI

商城