![d1d358dd485dd22ac7bdc8c75dacc594.png](https://i-blog.csdnimg.cn/blog_migrate/6631de28397fb701a3352de25288fa19.jpeg)
随着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
方法从头到尾运行,直到不处理数组的所有元素。一旦找到特定元素,就无法停止forEach
ormap
方法或中断循环。
在这种情况下,我们可以使用数组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![adc333ea2fb2de5224b90715fec9af6d.png](https://i-blog.csdnimg.cn/blog_migrate/c1f25c0bca0dfb369caaa2fc3b3994b9.jpeg)
作者:Yogesh Chavan
译者:花房姑娘
链接:Insanely Useful JavaScript Array Methods to improve your coding skills
来源:hashnode