JS数组进阶示例【数组的几种函数用法】

JS数组进阶示例【数组的几种函数用法】是一个关于JavaScript数组的进阶教程。本教程主要介绍了数组的一些常用函数用法，可以帮助读者更好地理解和运用JavaScript数组。

目录

• map()函数
• reduce()函数
• filter()函数
• 示例教程1：统计颜色
• 示例教程2：计算平均分

map()函数

map()函数是一种用于处理数组元素的函数，它会将数组中的每个元素应用于指定的函数，并返回一个新的数组。map()函数的语法如下所示：

array.map(function(currentValue, index, arr), thisValue)

其中，function(currentValue, index, arr)是应用于数组中每个元素的函数，currentValue是当前元素的值，index是当前元素的索引，arr是数组自身。thisValue是可选参数，它是作为函数的this指向的对象。

reduce()函数

reduce()函数是一种在数组中执行累计计算的函数，它通过指定的函数将数组中的元素归纳为单个值，并返回该值。reduce()函数的语法如下所示：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

其中，function(total, currentValue, currentIndex, arr)是应用于数组元素的函数，total是上一次调用函数时返回的值，currentValue是当前元素的值，currentIndex是当前元素的索引，arr是数组自身。initialValue是可选参数，用于指定用作第一个参数来调用函数的初始值。

filter()函数

filter()函数是一种用于筛选数组元素的函数，它会遍历数组中的每个元素，并返回一个新的数组，该数组只包含满足指定条件的元素。filter()函数的语法如下所示：

array.filter(function(currentValue, index, arr), thisValue)

其中，function(currentValue, index, arr)是应用于数组中每个元素的函数，currentValue是当前元素的值，index是当前元素的索引，arr是数组自身。thisValue是可选参数，它是作为函数的this指向的对象。

示例教程1：统计颜色

下面使用map()和reduce()函数来统计一个数组中不同颜色出现的次数。例如，给定一个数组：

const colors = ['red', 'green', 'blue', 'green', 'red', 'yellow', 'blue', 'purple'];

我们希望知道每种颜色出现的次数。首先，我们可以使用map()函数来将每种颜色转换为一个对象，该对象具有颜色和初始计数器属性：

const colorCounts = colors.map(function(color) {
  return {color: color, count: 1};
});

接下来，我们使用reduce()函数来将相同颜色的计数器相加：

const colorCounts = colors.map(function(color) {
  return {color: color, count: 1};
}).reduce(function(previous, current) {
  const color = current.color;
  if (previous[color]) {
    previous[color] += current.count;
  } else {
    previous[color] = current.count;
  }
  return previous;
}, {});

代码中使用了一个空对象作为reduce()函数的初始值，该函数遍历颜色计数器数组，并检查previous对象中是否已存在当前颜色的计数器属性。如果是，则将其计数器加上当前计数器，否则将颜色计数器添加为对象的新属性。

示例教程2：计算平均分

下面使用filter()和reduce()函数来计算一个数组中所有分数的平均值。例如，给定一个数组：

const scores = [80, 95, 78, 90, 89, 84, 66, 70];

我们希望计算出所有分数的平均值。我们可以使用filter()函数来过滤掉无效分数：

const validScores = scores.filter(function(score) {
  return (score >= 0 && score <= 100);
});

接下来，我们使用reduce()函数来计算所有分数的总和，并除以有效分数的数量来得到平均分数：

const avgScore = scores.filter(function(score) {
  return (score >= 0 && score <= 100);
}).reduce(function(total, score) {
  return total + score;
}, 0) / validScores.length;

代码中使用了一个初始值为0的累加器，reduce()函数遍历所有有效分数，并将它们加入累加器中。最终，我们将累加器的值除以有效分数的数量得到平均分数。

以上就是本教程关于JavaScript数组的进阶教程的完整攻略，希望能对您有所帮助。