随着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
