extras mui_返璞归真：Array Extras

extras mui

数组是许多编程语言中的基本数据结构，JavaScript也不例外。 为了抽象化使用数组的许多细节，JavaScript提供了一组称为数组额外功能的函数。 本文介绍了各种数组附加功能及其用法。

背景

几乎所有阵列操作都是通过一次循环遍历每个阵列元素来执行的。 例如，以下代码使用for循环将数组的所有元素记录到调试控制台。

var foo = ["a", "b", "c", "d"];

for (var i = 0, len = foo.length; i < len; i++) {
  console.log(foo[i]);
}

首先，最重要的是，您应该了解前面的示例是完美JavaScript代码。 但是，如果您有多个复杂的循环，则跟踪变量可能很繁琐。 数组额外功能使我们可以用函数调用替换整个循环，从而经常提高代码的可读性。 现在，让我们看一下各种数组附加功能。

forEach()

像许多其他数组一样， forEach()方法是一个高阶函数 -该函数接收另一个函数作为参数。 代替循环数组元素， forEach()依次对每个元素调用一个回调函数。 回调函数接受三个参数–当前数组元素，数组索引和数组本身。 在以下代码中，原始示例已被重写为使用forEach()方法。

["a", "b", "c", "d"].forEach(function(element, index, array) {
  console.log(element);
});

注意，使用forEach()消除了对循环和数组下标表示法的需要。 另外，由于JavaScript使用函数级作用域，因此forEach()回调函数提供了新的作用域，从而允许重用变量名。 一个缺点是对阵列中每个元素调用一个函数会导致性能下降。 幸运的是，这种惩罚通常可以忽略不计。 还要注意，您可以在回调函数之后将可选参数传递给forEach() 。 如果存在，则第二个参数定义在回调函数中使用的this值。

map()

map()函数与forEach()几乎相同。 唯一的区别是map()返回一个包含回调函数返回值的数组。 例如，以下代码使用map()来计算输入数组中每个项目的平方根。 然后将结果作为数组返回并显示。 还要注意，额外的数组与内置JavaScript函数（例如Math.sqrt()兼容。

var sqrts = [1, 4, 9, 16, 25].map(Math.sqrt);

console.log(sqrts);
// displays "[1, 2, 3, 4, 5]"

filter()

与forEach()和map() ， filter()方法采用回调函数，并且this值是可选的。 并且，与map() ， filter()根据回调函数的返回值返回一个值数组。 区别在于filter()回调函数应返回布尔值。 如果返回值为true，则将数组元素添加到结果数组。 例如，以下代码从原始数组中删除所有不以字母x开头的元素。 在此示例中，针对每个数组元素测试一个正则表达式（作为this值传递）。

["x", "abc", "x1", "xyz"].filter(RegExp.prototype.test, /^x/);

every()和some()

every()和some()函数还在每个数组元素上运行一个回调函数。 如果每个回调函数返回true ，则every()返回true ，否则返回false 。 同样， some()返回true ，如果至少一个回调函数返回true 。 在下面的示例中， every()和some()用于测试数组元素是否小于五个。 在这种情况下，因为最后一个元素等于5，所以every()返回false 。 但是， some()返回true因为至少一个元素小于五个。 请注意，存在index和array参数，但已在回调函数中将其省略，因为在此示例中不需要它们。

var foo = [1, 2, 3, 4, 5];
var every = foo.every(function(element) {
  return element < 5;
});
var some = foo.some(function(element) {
  return element < 5;
});
// every = false, some = true

reduce()和reduceRight()

reduce()方法从头开始处理数组中的每个元素，并计算单个值。 reduce()采用回调函数和可选的初始值作为参数。 如果不存在初始值，则使用第一个数组元素。 reduce()回调函数与到目前为止我们看到的其他回调函数不同，因为它带有四个参数–上一个值，当前值，索引和数组。

reduce操作的一个常见示例是对数组的所有值求和。 以下示例正是这样做的。 第一次调用回调函数时， previous等于1， current等于2。 在随后的调用中，总和被累加为最终值15。

var sum = [1, 2, 3, 4, 5].reduce(function(previous, current, index, array) {
  return previous + current;
});
// sum = 15

reduceRight()方法以与reduce()相同的方式工作，除了处理从数组的末尾开始并朝数组的开头移动。

indexOf()和lastIndexOf()

indexOf()方法在数组中搜索特定元素，然后返回第一个匹配项的索引。 如果找不到匹配项， indexOf()返回-1。 indexOf()将要搜索的元素作为其第一个参数。 第二个可选参数用于指定搜索的起始索引。 例如，以下代码在数组中找到字母z的前两次出现。 要查找第二个事件，我们只需找到第一个事件，然后在其后再次开始搜索。

var foo = ["a", "z", "b", "z"];
var first = foo.indexOf("z");
var second = foo.indexOf("z", first + 1);
// first = 1, second = 3

lastIndexOf()方法的工作方式完全相同，只是它从数组的末尾开始搜索。

结论

利用额外的数组可以产生简洁的代码。 可悲的是，某些较旧的浏览器不支持这些方法。 但是，您可以通过检查Array.prototype对象（即Array.prototype.forEach ）来检测这些方法。 如果缺少方法，则可以轻松提供自己的实现。

翻译自: https://www.sitepoint.com/back-to-basics-array-extras/

extras mui