es6 filter方法_极其有用的JavaScript数组方法，可提高您的编码技能

随着ES6的开始，在javascript语言中添加了许多改进以改进javascript编码标准。

今天，我们将看到一系列非常有用的数组方法，这些方法将提高您的编码技能。因此，让我们深入了解它。

数组

该Array.of语法如下

Array.of(element0[, element1[, ...[, elementN]]])

有两种在javascript中声明数组的方法，一种是使用数组文字符号[]，另一种是使用new关键字

const numbers = new Array(5,10);

上面的代码将创建一个包含两个值5和的数组10。但是如果我们只传递一个值，例如

const numbers = new Array(5);

这将创建一个长度数组，5其值设置undefined为预期值。但是new Array()语法在某些情况下很有用，因此Array.of方法可以解决此问题。

const numbers = Array.of(5);

这将创建一个包含值5而不是5的数字数组，undefined这与new Array（5）的情况相同。

显然，我们可以将多个值传递给这样的Array.of方法

const numbers = Array.of(5, 6, 7, 8);

浏览器支持：

• 除Internet Explorer（IE）之外的所有现代浏览器
• Microsoft Edge 12及更高版本

Array.from

该Array.from语法如下

Array.from(_arrayLike_[, _mapFn_[, _thisArg_]])

该from方法从array-like或iterable对象创建数组的新实例。

范例1：

看下面的代码

const numbers = [1, 2, 3, 4, 5];

const newArray = Array.from(numbers, value => value * 2);
console.log(newArray); // [2, 4, 6, 8, 10]

上面的代码创建了一个新数组，其中数组的每个元素都乘以2。

范例2：

假设您要遍历页面中包含的所有脚本并打印src属性值，则可以使用该document.scripts属性返回文档中脚本元素的列表。

但是返回的对象是一个HTMLCollection看起来像数组的对象，但不是实际的数组。

所以，当我们尝试运用任何阵列方法类似forEach或map在其上，它给出了一个错误。为了转换诸如或（使用方法时返回）之类的iterable对象，我们可以使用method。HTMLCollectionNodeListdocument.querySelectorAllArray.from

Array.from(document.scripts)
 .forEach(script => console.log(script.src)); 

浏览器支持：

• 除Internet Explorer（IE）之外的所有现代浏览器
• Microsoft Edge 12及更高版本

数组查找

该Array.find语法如下

Array.find(callback(element[, index[, array]])[, thisArg])

该find方法返回value的first element，其满足所提供的测试条件在数组中。

该find方法将回调函数作为第一个参数，并对数组的每个元素执行回调函数。每个数组元素值都作为第一个参数传递给回调函数。

const employees = [
 { name: "David Carlson", age: 30 },
 { name: "John Cena", age: 34 },
 { name: "Mike Sheridan", age: 25 },
 { name: "John Carte", age: 50 }
];

并且我们想要获取名称为的员工记录John。在这种情况下，我们可以使用该array.find方法。

const employee = employees.find(employee => { 
 return employee.name.indexOf("John") > -1;
});
console.log(employee); // { name: "John Cena", age: 34 }

即使"John Carte"在列表中，find方法在找到第一个匹配项时也会停止。因此它不会返回名称为"John Carte"

Codepen演示：https：//codepen.io/myogeshchavan97/pen/wvvbPLm ？ editors = 0011

浏览器支持：

• 除Internet Explorer（IE）之外的所有现代浏览器
• Microsoft Edge 12及更高版本

Array.findIndex

该Array.findIndex语法如下

Array.findIndex(callback(element[, index[, array]])[, thisArg])

该findIndex方法返回满足提供的测试条件的数组中第一个元素的索引。否则，返回，表明没有元素通过测试。-1

const employees = [
 { name: "David Carlson", age: 30 },
 { name: "John Cena", age: 34 },
 { name: "Mike Sheridan", age: 25 },
 { name: "John Carte", age: 50 }
];
const index = employees.findIndex(employee => {
  return employee.name.indexOf("John") > -1;
});
console.log(index); // 1

在这里，我们得到的输出为1，这是名称为的第一个对象的索引John。

Codepen演示：https：//codepen.io/myogeshchavan97/pen/WNNBdxY ？ editors = 0012

浏览器支持：

• 除Internet Explorer（IE）之外的所有现代浏览器
• Microsoft Edge 12及更高版本

数组过滤器

该Array.filter语法如下

Array.filter(callback(element[, index[, array]])[, thisArg])</span>

该filter方法返回a new array满足所提供测试条件的所有元素。

该filter方法将回调函数作为第一个参数，并对数组的每个元素执行回调函数，并且将每个数组元素值作为第一个参数传递给回调函数。

该filter方法返回一个数组，其中包含所有满足测试条件的元素

const employees = [
 { name: "David Carlson", age: 30 },
 { name: "John Cena", age: 34 },
 { name: "Mike Sheridan", age: 25 },
 { name: "John Carte", age: 50 }
];
const employee = employees.filter(employee => {
 return employee.name.indexOf("John") > -1;
});
console.log(employee); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]

Codepen演示：https：//codepen.io/myogeshchavan97/pen/ZEENvEd ？ editors = 0011

请注意，filter方法始终返回一个数组。如果没有元素通过测试条件，则将返回一个空数组。

浏览器支持：

• 所有现代浏览器和Internet Explorer（IE）9及更高版本
• Microsoft Edge 12及更高版本

数组填充

该Array.fill语法如下

Array.fill(value[, start[, end]])

该fill方法使用静态值填充数组的所有元素，从开始索引（默认为零）到结束索引（默认数组长度）。

如果我们要创建一个预先填充有特定值的数组，则fill方法非常有用。

考虑一下，我们正在制作一个购物清单，并且页面上有5个商品的清单，我们希望将复选框的状态存储为选中状态。为此，我们可以初始化一个长度与复选框数相同的数组，并将其初始值设置为false。

因此，当我们选中任何复选框时，会将其设置为true。

为了使其成为可能，我们可以使用array.fill以下方法

const checkboxes = new Array(5).fill(false);

这将创建一个由5个元素组成的数组，其值默认情况下设置为false

[false, false, false, false, false]

CodeSandbox（使用React）：https ://codesandbox.io/s/gracious-frost-sz5d9

Codepen（使用Jquery）：https ://codepen.io/myogeshchavan97/pen/Rwwmxgx?editors=1011

浏览器支持：

• 除Internet Explorer（IE）之外的所有现代浏览器
• Microsoft Edge 12及更高版本

Array.forEach

该Array.forEach语法如下

Array.forEach(callback(currentValue [, index [, array]])[, thisArg]);

该forEach方法对数组中的每个元素执行一次提供的功能

const months = ["January", "February", "March", "April"];
const returnedValue = months.forEach(month => {
 return month;
});
console.log('returnedValue: ', returnedValue); // undefined

请注意forEach，即使您从回调函数显式返回值，所以它仅用于遍历数组并执行一些处理或记录，它不会返回任何值，因此undefined如上例所示，返回的值将到来。

Codepen演示：https：//codepen.io/myogeshchavan97/pen/rNNgdBK ？ editors = 0012

浏览器支持：

• 所有现代浏览器和Internet Explorer（IE）9及更高版本
• Microsoft Edge 12及更高版本

---

Array.map

该Array.map语法如下

Array.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])

该map方法对数组中的每个元素执行一次提供的函数，然后返回一个新的转换数组

const months = ["January", "February", "March", "April"];
const transformedArray = months.map(month => month.toUpperCase());
console.log(transformedArray); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"]

Codepen演示：https：//codepen.io/myogeshchavan97/pen/gOOJewM ？ editors = 0012

浏览器支持：

• 所有现代浏览器和Internet Explorer（IE）9及更高版本
• Microsoft Edge 12及更高版本

---

每个数组

该Array.every语法如下

Array.every(callback(element[, index[, array]])[, thisArg])

该every方法测试数组中的所有元素是否都通过提供的测试条件，并返回布尔值true或false值。

考虑一下，您有一个注册表格，并且想要在提交表格之前检查是否输入了所有必填字段。您可以使用该every方法轻松检查每个字段值。

Codepen演示：https：//codepen.io/myogeshchavan97/pen/QWWRjEa ？ editors = 1011

浏览器支持：

• 所有现代浏览器和Internet Explorer（IE）9及更高版本
• Microsoft Edge 12及更高版本

数组

该Array.some语法如下

Array.some(callback(element[, index[, array]])[, thisArg])

该some方法测试at least one数组中的元素是否通过提供的函数给定的测试条件，并返回布尔值true或false值。

找到第一个匹配项后返回true，如果没有匹配项则返回false。

使用此方法有一些有用的方案。

方案1：

考虑一下，我们有一个雇员列表，我们想检查某个雇员是否存在于该数组中，如果找到该雇员，还要获取该雇员的索引位置。

因此，我们可以使用method来做这两个事情，而不是分别使用find和findIndex方法some。

Codepen演示：https：//codepen.io/myogeshchavan97/pen/KKKLoZR ？ editors = 0012

方案2：

数组forEach和map方法从头到尾运行，直到不处理数组的所有元素。一旦找到特定元素，就无法停止forEachormap方法或中断循环。

在这种情况下，我们可以使用数组some方法。的map，forEach和some方法利用在回调函数相同的参数。

• 第一个参数是实际值
• 第二个参数是索引
• 第三个参数是原始数组

some一旦找到特定匹配项，该方法就会停止遍历数组，如方案1的上述代码笔示例所示。

浏览器支持：

• 所有现代浏览器和Internet Explorer（IE）9及更高版本
• Microsoft Edge 12及更高版本

数组减少

该Array.reduce语法如下

Array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

该reduce方法在数组的每个元素上执行reducer函数（由您提供），从而产生单个输出值。

该reduce方法的输出始终是单个值。它可以是一个对象，一个数字，一个字符串或一个数组等。它取决于您希望该reduce方法的输出生成什么，但是它始终是单个值。

假设您有一个具有x和y坐标的对象数组，并且想要获取x坐标的总和，则可以使用reduce方法，如下面的代码笔所示。

Codepen演示：https：//codepen.io/myogeshchavan97/pen/Baaexjx ？ editors = 0012

浏览器支持：

• 所有现代浏览器和Internet Explorer（IE）9及更高版本
• Microsoft Edge 12及更高版本

希望这些方法对您改进代码有帮助。

花房菇凉：关于前端学习路线的一些建议（内含经典自测题）​zhuanlan.zhihu.com

作者：Yogesh Chavan
译者：花房姑娘
链接：Insanely Useful JavaScript Array Methods to improve your coding skills
来源：hashnode