javascript中Array.reduce()

2021-05-30 本文已影响0人 zhao_ran

大部分现代的数组方法都返回一个新的数组，而 Array.reduce()更加灵活。它可以返回任意值，它的功能就是将一个数组的内容聚合成单个值。

这个值可以是数字、字符串，甚至可以是对象或新数组。这就是一直难住我的部分，我没想到它这么灵活！

用法

Array.reduce()接受两个参数：一个是对数组每个元素执行的回调方法，一个是初始值。这个回调也接受两个参数：accumulator是当前聚合值，current是数组循环时的当前元素。无论你返回什么值，都将作为累加器提供给循环中的下一个元素。初始值将作为第一次循环的累加器。

var myNewArray = [].reduce(function (accumulator, current) {
  return accumulator;
}, starting);

举例子

数组求和
假设你想把一组数字加在一起。使用Array.forEach()大概可以这么做：

var total = 0;

[1, 2, 3].forEach(function (num) {
  total += num;
});

这是Array.reduce()用得最多的例子了。我发现accumulator这个单词让人困惑，所以在示例中我改为sum，因为这里就是求和的意思。

var total = [1, 2, 3].reduce(function (sum, current) {
  return sum + current;
}, 0);

这里传入0作为初始值。在回调中，将当前值加入到sum，第一轮循环时它的值是初始值0，然后变成1（初始值0加上当前元素值1），然后变成3（累加值 1加上当前元素值 2 ），以此类推。

组合多个数组方法
假设有一个wizards 数组：

var wizards = [
  {
    name: 'Harry Potter',
    house: 'Gryfindor'
  },
  {
    name: 'Cedric Diggory',
    house: 'Hufflepuff'
  },
  {
    name: 'Tonks',
    house: 'Hufflepuff'
  },
  {
    name: 'Ronald Weasley',
    house: 'Gryfindor'
  },
  {
    name: 'Hermione Granger',
    house: 'Gryfindor'
  }
];

你想创建一个仅包含住在 Hufflepuff的巫师名字的新数组。一个可行的方法是使用Array.filter()方法获取house 属性为Hufflepuff的 wizards。然后用Array.map() 方法创建一个只包含过滤后对象的name 属性的新数组。

var hufflepuff = wizards.filter(function (wizard) {
  return wizard.house === 'Hufflepuff';
}).map(function (wizard) {
  return wizard.name;
});

使用Array.reduce()方法，我们可以用一步得到同样的结果，提高了性能。传递一个空数组[]作为初始值。每次循环时判断wizard.house 是否为Hufflepuff。如果是，就加入到newArr中（即accumulator），否则啥也不做。无论判断条件是否成立，最后都返回 newArr 作为下一次循环的accumulator。

var hufflepuff = wizards.reduce(function (newArr, wizard) {
  if (wizard.house === 'Hufflepuff') {
    newArr.push(wizard.name);
  }
  return newArr;
}, []);

从数组生成 HTML 标签

那么，如果想创建一个由住在Hufflepuff的巫师组成的无序列表要怎么做呢？这次不是给Array.reduce()传一个空数组作为初始值了，而是一个名为html的空字符串''。

如果wizard.house 等于Hufflepuff，我们就将wizard.name 用列表项li包裹起来，再拼接到html字符串里。然后返回html 作为下一次循环的accumulator 。

var hufflepuffList = wizards.reduce(function (html, wizard) {
  if (wizard.house === 'Hufflepuff') {
    html += '<li>' + wizard.name + '</li>';
  }
  return html;
}, '');

在Array.reduce()前后添加无序列表的开始和结束标记，就可以把它插入到 DOM 中了。

var hufflepuffList = '<ul>' + wizards.reduce(function (html, wizard) {
  if (wizard.house === 'Hufflepuff') {
    html += '<li>' + wizard.name + '</li>';
  }
  return html;
}, '') + '</ul>';

总结：Array.reduce() 真香

Array.reduce() 方法从我曾经认为不堪大用的东西，变成我最喜欢的 JavaScript 方法。那么，你应该使用它吗？什么时候可以用？

Array.reduce() 方法有着良好的浏览器支持。所有的现代浏览器都支持，包括 IE9 及以上。移动端浏览器也在很早之前就支持了。如果你还需要支持更老的浏览器，你可以添加一个 polyfill 来支持到 IE6。

Array.reduce()最大的槽点可能就是对于从来没接触过的人来说有点费解。组合使用Array.filter() 和Array.map()执行起来更慢，并且包含多余的步骤，但是更容易阅读，从方法名可以明显看出它要做的事情。

javascript中Array.reduce()

用法

总结：Array.reduce() 真香

猜你喜欢

热点阅读