27个重要的JavaScript数组函数整理汇总

web前端开发

共 13130字,需浏览 27分钟

 ·

2021-12-29 03:58


英文 | https://javascript.plainenglish.io/27-javascript-array-methods-needed-by-every-developer-759f25a30138
翻译 | 杨小爱

在本文中,我将分享27 个每个开发人员在日常工作中所需的JavaScript 数组方法。在 JavaScript 中,数组是一个变量,用于存储多个相同或多种类型的项目。
JavaScript 数组方法是内置的 JavaScript 数组函数,可应用于数组。这些内置方法中的每一个都有一个独特的功能,可以生成一个数组,并使我们无需从头开始编写常用函数。
1、Array.isArray()
我们列表中的第一项是 JavaScript 中的 isArray 方法,它确定传递的输入是否为数组。
语法:
在下面的代码中, arr 将是我们要检查的输入,是否为数组。isArray() 函数的结果将是一个布尔值。
Array.isArray(arr)
示例:
Array.isArray([1, 'something', true]);  // trueArray.isArray({anything: 123}); // falseArray.isArray('some string');   // falseArray.isArray(undefined);  // false
2 、length
列表中的第二项不是方法,而是数组的一个重要属性。我认为它也必须在列表中。从属性名称可以清楚地看出,它返回数组中项目的长度(总数)。
语法:
在下面的代码中 arr 是我们的输入数组,我们将通过使用 length 属性获取其项目数。
arr.length;
示例:
[].length;// 0[1, 'something', true].length;// 3
3、forEach()
forEach 方法的行为类似于 for 循环。但是您不必定义它将执行多少次迭代,因为它将执行与输入数组中的项目数相等的迭代。
语法:
在下面的代码中, arr 将是我们的输入数组,forEach() 方法将在该数组上执行。
forEach 方法包含一个回调函数 callbackFn 作为 forEach 方法的参数。
callbackFn 是一个 ES6 箭头函数。
但是您也可以使用传统样式函数。此 callbackFn 将执行与输入数组中存在的项目数等效的迭代。
在每次迭代中,都会在 callbackFn 的范围内执行一些代码。同样在 callbackFn 的每次迭代参数中,arrItem 和 index 将使用连续的数组项和增量索引值进行更新。
arr.forEach(callbackFn);const callbackFn = (arrItem, index) => {callbackFn Scope Code Exec}// combining above statements together into one line of codearr.forEach((arrItem, index) => {callbackFn Scope Code Exec});
如果您还不明白,别着急,让我们看看下面的例子。
例子:
在下面的例子中,我们有一个输入数组 [‘apple’, ‘banana’, ‘carrot’],它在 forEach callbackFn 中迭代。
在 callbackFn 的范围内,我们正在打印 callbackFn 的参数。callbackFn 有 2 个参数,arrItem 和 index。
第二个参数 index 是可选的,如果你不需要它,你可以简单地省略它。由于 arr 有 3 个项目,因此 callbackFn 将迭代 3 次并在每次迭代时打印 callbackFn 的参数。
['apple', 'banana', 'carrot'].forEach((arrItem, index) => {  console.log(index + ' => ' + arrItem);});// 0 => apple// 1 => banana// 2 => carrot
4、map( )
map() 方法的行为类似于 forEach,但主要区别在于,它返回一个新数组作为结果。
您在一个数组上执行map(),在map方法callbackFn的范围内(如果您对callbackFn不清楚,查看forEach()方法解释),您执行一些语句。
callbackFn 的每次迭代都会为结果数组返回一个项目。
语法:
arr 是我们的输入数组,map 方法将在其上执行,并且在每次迭代时,都会将一个新项目添加到结果数组中,该数组将作为 resultIteration 返回。
arr.map((arrItem, index) => { return resultIteration });
例子:
我们对 arr [2, 4, 6, 8, 16] 执行 map 方法,并将结果保存在变量 mapResult 中。mapResult 将是一个数组,该数组将填充 map 方法每次迭代的结果。
在 map 方法 callbackFn 作用域中,我们将 arr 的每一项乘以 2,并将每次迭代的结果附加到 mapResult 中。
5 次迭代后我们的最终 mapResult 数组将是 [4, 8, 12, 16, 32]。
const arr = [2, 4, 6, 8, 16];const mapResult = arr.map(arrItem => arrItem * 2);console.log(mapResult);// [4, 8, 12, 16, 32]
5、filter() 
filter() 方法的行为类似于 map() 并返回一个数组作为结果。但正如名称所描述的,它返回一个过滤后的结果数组。
您可以使用过滤器 callbackFn 范围内的条件来过滤结果数组。
语法:
arr 将是 filter 方法将执行的数组,并且在每次迭代时,都会将一个新项目添加到结果数组中,该结果数组将作为 resultIteration 返回。
arr.filter((arrItem, index) => { condition to return arrItem });
例子:
我们对 arr [2, 4, 6, 8, 16] 执行 filter 方法,并将结果保存在变量 filterResult 中。
我们过滤输入数组的条件是( arrItem < 5 OR arrItem > 10 )。
mapResult 将是一个数组,它将填充符合条件的 arr 项目。
在 map 方法函数代码块中,我们将 arr 的每一项乘以 2,并将每次迭代的结果附加到 mapResult 中。
const arr = [2, 4, 6, 8, 16];const filterResult =   arr.filter(arrItem => arrItem < 5 || arrItem > 10);console.log(mapResult);// [2, 4, 16]
6、sort( )
JavaScript 中的 sort() 方法按字母顺序对输入数组进行排序。默认情况下,sort() 函数将值作为字符串进行排序。
const arr = ['banana', 'orange', 'apple', 'mango'];arr.sort();// ['apple', 'banana', 'mango', 'orange']
如果我们尝试对数字数组进行排序,那么默认的排序方法结果会有点混乱。
const arr = [22, 14, 0, 100, 89, 201];arr.sort();// [0, 100, 14, 201, 22, 89]
如果使用 sort() 方法对数字数组进行排序,则默认情况下将其视为字符串数组。
所以“22”会在“100”之后,因为“22”的2比“100”的1大。我们可以通过提供一个比较函数 (compareFn) 来解决这个问题。
// compareFn for ascending orderconst compareFnAsc = (a, b) => a - b;// compareFn for descending orderconst compareFnDes = (a, b) => b - a;const arr = [22, 14, 0, 100, 89, 201];arr.sort(compareFnAsc);// [0, 14, 22, 89, 100, 201]arr.sort(compareFnDes);// [201, 100, 89, 22, 14, 0]
有关一些高级排序示例,请查看此处:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
7、concat( )
concat() 方法用于合并两个或多个数组。它不会更改现有数组,而是返回一个新的结果数组。
语法:
您可以在 concat 方法中将 1 到 N 个值作为参数传递。每个值可以是任何类型。结果 concat 方法将这些所有值合并到一个结果数组中。
arr.concat(value);arr.concat(value0, value1, ... , valueN);
例子:
让我们看一下 concat 方法的 2 个示例。
// Example 1 // Concat 2 arrays of string and number typeconst letters = ['a', 'b', 'c'];const numbers = [1, 2, 3];
letters.concat(numbers);// ['a', 'b', 'c', 1, 2, 3]// Example 2 // Concat a string array with 2 values (number and number array)const letters = ['a', 'b', 'c'];
const alphaNumeric = letters.concat(1, [2, 3]);
console.log(alphaNumeric);// ['a', 'b', 'c', 1, 2, 3]
8、every( )
我们列表中的下一个有用的数组方法是every()。该方法测试输入数组中的所有元素是否都通过了实现的条件。它返回一个布尔值。
语法:
arr.every(callbackFn);const callbackFn = (arrItem, index) => {  condition to check on every arrItem}
例子:
在下面的示例中,我们有带有数字值的 arr1 和 arr2 数组。我们要检查它们的两个数组值是否都大于或等于 0。
对于 arr1,结果将为假,因为它包含 -4 和 -1。
所以我们的条件将在那里失败,但 arr2 将在每个数组项上传递条件,我们将获得真实的结果。
const arr1 = [89, 0, -4, 34, -1, 10];const arr2 = [89, 0, 45, 34, 1, 100];arr1.every(arrItem => arrItem >= 0);// falsearr2.every(arrItem => arrItem >= 0);// true
9、some()
我们列表中的下一个方法是 some()。这个方法和every()完全一样。不同之处在于我们检查输入数组的所有元素的条件,如果有任何元素满足条件,则返回 true。
如果输入数组的元素都没有通过条件,则返回 false。语法与 every() 方法相同。
例子:
在这个例子中,我们有 2 个类型为 number 的数组。我们正在检查的条件与 every() 方法中的最后一个示例相同,任何大于或等于 0 的 arrayItem 值。
这里因为我们使用 some() 方法,所以,如果任何项目将满足我们的条件,则为真,否则为假。
const arr1 = [89, 0, 44, 34, -1, 10];const arr2 = [-8, -45, -1, -100, -9];arr1.some(arrItem => arrItem >= 0);// truearr2.some(arrItem => arrItem >= 0);// false
10、includes( )
include() 方法检查输入数组是否在其条目中包含某个值,并返回一个布尔值。
例子:
const arr = [1, "2", 3, 4, 5];// Type of matching argument should match with the array entry// In the code below 2 is of type number but in arr "2" is stringconsole.log(arr.includes(2));// falseconsole.log(arr.includes("2"));// true
11、join( )
join() 方法通过连接输入数组中的所有条目来返回一个新字符串。如果数组只有一项,则该项将在不使用分隔符的情况下返回。
将分隔符参数传递给 join 方法是可选的。无论您将在 join 方法中传递什么参数字符串,输入数组的所有条目都将使用该字符串连接起来。
语法:
arr.join();arr.join(separator);
示例:
const arr = ['Hello', 'World', '!'];arr.join();      // 'Hello,World,!'arr.join(', ');  // 'Hello, World, !'arr.join(' + '); // 'Hello + World + !'arr.join('');    // 'HelloWorld!'arr.join(' ');    // 'Hello World !'
12、reduce() 
reduce() 方法执行一个 reducer 功能,由用户应用于输入数组的项目。在数组的所有项目上运行 reducer 的最终结果返回一个值。
我认为理解 reduce() 方法案例的最简单方法是返回数组中所有项目的总和。
这里的reducer函数会遍历每一个数组项,在每一步都将当前数组项的值加到上一步的结果中(这个结果是前面所有步骤的运行总和),直到没有更多的项要添加。
语法:
输入数组 arr 对其执行 reduce() 方法。reduce() 方法有一个回调函数 (callbackFn) 作为参数。
这个 callbackFn 基本上是 reducer 函数,它累加输入 arr 的所有值并返回单个值。
reduce() 方法的第二个参数是初始值 (initVal),这是一个可选参数。
现在 reducer 函数/回调函数 (callbackFn) 有 4 个参数。
第一个参数 total 是上一次调用 callbackFn 的值。
第二个参数是当前数组项 (currArrItem) 的值。
第三个参数是索引,它是可选的。
最后一个参数是输入数组( arr ),它也是可选的。
const callbackFn = (total, currArrItem, index, arr) => { ... }arr.reduce(callbackFn, initVal)// Combining above statements into one statementarr.reduce((total, currArrItem, index, arr) => { ... }, initVal)
让我们看一下示例以更好地理解 reduce() 方法。
例子:
在下面的示例中,我们使用 reduce() 方法来累积输入 arr。
const arr = [1, 2, 3, 4];const reducer = (prevVal, currVal) => prevVal + currVal;arr.reduce(reducer);// 10// In the code below initVal is set to 5, which means that we have // to init the sum with initial value 5: 5 + 1 + 2 + 3 + 4 arr.reduce(reducer, 5);// 15
13、find()
列表中的下一个 JavaScript 数组方法是 find()。它返回输入数组中满足 find 方法 callbackFn 中给定条件的第一个元素的值。
如果没有值满足 callbackFn 的条件,则返回 undefined。
语法:
arr.find((arrItem) => condition to check on arrItem);
示例:
const arr = [5, 10, 100, 12, 8, 130, 44];const result = arr.find(arrItem => arrItem > 10);console.log(result);// 100
14、findIndex( )
findIndex() 方法返回输入数组中满足 find 方法 callbackFn 中给定条件的第一个元素的索引。否则返回-1,表示没有数组项通过条件检查。语法将与 find() 方法保持相同,只是返回结果会有所不同。
例子:
const arr = [5, 10, 100, 12, 8, 130, 44];const result1 = arr.findIndex(arrItem => arrItem > 10);const result2 = arr.findIndex(arrItem => arrItem > 1000);console.log(result1);// 2console.log(result2);// -1
15、indexOf( )
这类似于 findIndex() 方法,但不同之处在于 indexOf() 方法返回可以在输入数组中找到给定元素(作为 indexOf() 方法的参数传递)的第一个索引。如果未找到,则返回 -1。
示例:
const arr = [5, 10, 100, 12, 8, 130, 44];arr.indexOf(12);// 3// As the input argument '12' is of type string and the input array // arr elements are of type number so there will be no match in // input arrarr.indexOf('12');// -1
16、fill( )
fill() 方法使用静态值更改输入数组中的所有元素。此方法返回修改后的数组。
语法:
传递给 fill() 方法需要第一个参数。如果我们没有在 fill() 方法中传递第二个和第三个参数,那么第二个参数将默认为 0 (startIndex),第三个参数将是数组 (arr.length) 索引中的最后一项。
arr.fill(value)// default startIndex = 0arr.fill(value, startIndex)// default endIndex is arr.lengtharr.fill(value, startIndex, endIndex)
示例:
const arr1 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];arr1.fill(0);// [0, 0, 0, 0, 0, 0, 0, 0]const arr2 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];arr2.fill(0, 5);// ['A', 'B', 'C', 'D', 'E', 0, 0, 0]const arr3 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];arr3.fill(0, 5, 7);// ['A', 'B', 'C', 'D', 'E', 0, 0, 'H']const arr4 = [1, 2, 3, 4, 5];arr4.fill();//[undefined, undefined, undefined, undefined, undefined]
17、slice()
slice() 方法是一个非常有用的 JavaScript 数组方法。它为 slice 方法中传递的给定参数制作原始数组的副本。
这些参数定义了新数组副本的开始和结束索引。不会修改原始数组。
语法:
arr.slice()arr.slice(startIndex)arr.slice(startIndex, endIndex)
示例:
const arr = ['rats', 'sheep', 'cows', 'chickens', 'dogs', 1001];arr.slice();// ['rats', 'sheep', 'cows', 'chickens', 'dogs', 1001]arr.slice(3);// ['chickens', 'dogs', 1001]arr.slice(2, 5);// ['cows', 'chickens', 'dogs']arr.slice(-4);// ['cows', 'chickens', 'dogs', 1001]
18、splice()
splice() 方法通过删除或替换现有项目和/或添加新项目来更改数组的内容。不会修改原始数组。
语法:
arr.splice(startIndex)arr.splice(startIndex, deleteCount)arr.splice(startIndex, deleteCount, item1)arr.splice(startIndex, deleteCount, item1, ..., itemN)
示例:
// Example 1// Remove 0 items before index 2 & insert "drum"let arr = ['angel', 'clown', 'mandarin', 'sturgeon'];let removedArr = arr.splice(2, 0, 'drum');// arr: ["angel", "clown", "drum", "mandarin", "sturgeon"]// removedArr: []
// Example 2// Remove 0 items before index 2 & insert "drum", "guitar"let arr = ['angel', 'clown', 'mandarin', 'sturgeon'];let removedArr = arr.splice(2, 0, 'drum', 'guitar');// arr: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]// removedArr: []
// Example 3// Remove 1 element at index 3let arr = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];let removedArr = myFish.splice(3, 1);// arr: ["angel", "clown", "drum", "sturgeon"]// removedArr: ["mandarin"]
// Example 4// Remove 1 element at index 2 & insert "trumpet"let arr = ['angel', 'clown', 'drum', 'sturgeon'];let removedArr = arr.splice(2, 1, 'trumpet');// arr: ["angel", "clown", "trumpet", "sturgeon"]// removedArr: ["drum"]
// Example 5// Remove 2 items from index 0 & insert "parrot", "anemone", "blue"let arr = ['angel', 'clown', 'trumpet', 'sturgeon'];let removedArr = arr.splice(0, 2, 'parrot', 'anemone', 'blue');// arr: ["parrot", "anemone", "blue", "trumpet", "sturgeon"]// removedArr: ["angel", "clown"]
19、reverse() 
顾名思义,reverse() 方法反转输入数组。
例子:
const arr1 = [1, 2, 3];arr1.reverse();// [3, 2, 1]const arr2 = ['1', '4', '3', 1, 'some string', 100];arr2.reverse();// [100, 'some string', 1, '3', '4', '1']
20、push() 
JavaScript 中的 push() 方法将一个或多个(任何类型的)项目添加到数组的末尾,并返回数组中项目的更新总数。
语法:
arr.push(value);arr.push(value0, value1, ... , valueN);
示例:
const animals = ['cats', 'rats', 'sheep'];animals.push('cows');// 4console.log(animals);// ['cats', 'rats', 'sheep', 'cows']animals.push('chickens', 'dogs', 1001);// 7console.log(animals);// ['cats', 'rats', 'sheep', 'cows', 'chickens', 'dogs', 1001]
21、pop()
pop() 方法从数组中删除最后一项并返回该项。输入数组的长度减1。
例子:
const arr = ['rats', 'sheep', 'cows', 'chickens', 'dogs', 1001];arr.pop();// 1001console.log(arr);// ['rats', 'sheep', 'cows', 'chickens', 'dogs']
22、shift() 
JavaScript 的 shift() 方法从数组中删除第一项并返回该项。 输入数组的长度减1,和pop()方法一样。
例子:
const arr = ['rats', 'sheep', 'cows', 'chickens', 'dogs', 1001];arr.shift();// 'rats'console.log(arr);// ['sheep', 'cows', 'chickens', 'dogs', 1001]
23、unshift()
unshift() 方法将一项或多项添加到数组的开头,并返回数组的新长度。 语法与 push() 相同。 push() 方法只是在数组的末尾,但 unshift() 方法在开头添加。
例子:
const animals = ['cats', 'rats', 'sheep'];animals.unshift('cows');// 4console.log(animals);// ['cows', 'cats', 'rats', 'sheep']animals.unshift('chickens', 'dogs', 1001);// 7console.log(animals);// ['chickens', 'dogs', 1001, 'cows', 'cats', 'rats', 'sheep']
24、Array.of( )
Array.of() 方法从可变数量的参数创建一个新的 Array 实例,而不管参数的数量或类型。
例子:
Array.of(1);         // [1]Array.of(1, 2, 3);   // [1, 2, 3]Array.of(undefined); // [undefined]
25、Array.from( )
Array.from() 静态方法从类数组或可迭代对象创建一个新的、浅复制的 Array 实例。
语法:
Array.from(value, callbackFn)
示例:
Array.from('hello');// ['h', 'e', 'l', 'l', 'o']Array.from([1, 2, 3], arrItem => arrItem * 4);// [4, 8, 12]
26、flat()
JavaScript 的 flat()方法创建一个新数组,其中所有子数组项以递归方式连接到指定深度。
句法:
指定嵌套数组结构应展平的深度的深度级别。 如果没有参数传递给 flat() 方法,则默认深度为 1。 或者您可以传递任何深度参数。
arr.flat()arr.flat(depth)
示例:
让我们看一些 JavaScript 中 flat() 方法的例子。
// Example 1const arr1 = [0, 1, 2, [3, 4]];console.log(arr1.flat());// [0, 1, 2, 3, 4]// Example 2const arr2 = [0, 1, 2, [[[3, 4]]]];console.log(arr2.flat(2));// [0, 1, 2, [3, 4]]console.log(arr2.flat(3));// [0, 1, 2, 3, 4]
27、at()
at() 方法将一个整数作为参数,并返回输入数组中该索引处的项目。 at() 方法的参数可以是正数或负数。 负整数从输入数组的最后一项开始计数。
语法:
arr.at(index)
示例:
const arr = ['chickens', 'dogs', 1001, 'cows', 'cats', 'sheep']arr.at(1);// 'dogs'arr.at(-1);// 'sheep'arr.at(2);// 1001arr.at(-2);// 'cats'arr.at(-100);// undefined
结论
如果您有扩展此函数列表的想法,请随时在留言区中分享您的想法。 我很乐意根据您的建议来增加并丰富此列表。 
最后,感谢您的阅读,如果您觉得今天内容对您有用的话,也请您分享给您身边的做开发的朋友。


学习更多技能
请点击下方公众号

浏览 31
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报