JavaScript数组函数整理

把爱写进代码里

已于 2023-12-08 11:36:26 修改

阅读量764

点赞数 23

文章标签： javascript 开发语言

于 2023-11-30 10:54:32 首次发布

本文链接：https://blog.csdn.net/titlezhang/article/details/131080854

版权

1、Array.isArray()

确定传递的输入是否为数组。

语法
isArray() 函数的结果将是一个布尔值。

Array.isArray(arr)

示例

Array.isArray([1, 'something', true]);  
// true
Array.isArray({anything: 123}); 
// false
Array.isArray('some string');   
// false
Array.isArray(undefined);  
// false

2 、length

使用 length 属性获取其项目数。

语法

arr.length;

示例

[].length;
// 0
[1, 'something', true].length;
// 3

3、forEach()

语法

arr.forEach(callbackFn);
const callbackFn = (arrItem, index) => {callbackFn Scope Code Exec}
// combining above statements together into one line of code
arr.forEach((arrItem, index) => {callbackFn Scope Code Exec});

示例

['apple', 'banana', 'carrot'].forEach((arrItem, index) => {
  console.log(index + ' => ' + arrItem);
});
// 0 => apple
// 1 => banana
// 2 => carrot

4、map( )

语法

arr.map((arrItem, index) => { return resultIteration });

示例

const arr = [2, 4, 6, 8, 16];
const mapResult = arr.map(arrItem => arrItem * 2);
console.log(mapResult);
// [4, 8, 12, 16, 32]

5、filter()

语法

arr.filter((arrItem, index) => { condition to return arrItem });

示例

const arr = [2, 4, 6, 8, 16];
const filterResult = 
  arr.filter(arrItem => arrItem < 5 || arrItem > 10);
console.log(mapResult);
// [2, 4, 16]

6、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]
// compareFn for ascending order
const compareFnAsc = (a, b) => a - b;
// compareFn for descending order
const 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]

7、concat( )

concat() 方法用于合并两个或多个数组。它不会更改现有数组，而是返回一个新的结果数组。
语法

arr.concat(value);arr.concat(value0, value1, ... , valueN);

示例

// Example 1 
// Concat 2 arrays of string and number type
const 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);
// false
arr2.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);
// true
arr2.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));
// false
console.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 statement
arr.reduce((total, currArrItem, index, arr) => { ... }, initVal)

示例
在下面的示例中，我们使用 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);
// 2
console.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 arr
arr.indexOf('12');
// -1

16、fill( )

fill() 方法使用静态值更改输入数组中的所有元素。此方法返回修改后的数组。
语法
传递给 fill() 方法需要第一个参数。如果我们没有在 fill() 方法中传递第二个和第三个参数，那么第二个参数将默认为 0 (startIndex)，第三个参数将是数组 (arr.length) 索引中的最后一项。

arr.fill(value)
// default startIndex = 0
arr.fill(value, startIndex)
// default endIndex is arr.length
arr.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 3
let 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');
// 4
console.log(animals);
// ['cats', 'rats', 'sheep', 'cows']
animals.push('chickens', 'dogs', 1001);
// 7
console.log(animals);
// ['cats', 'rats', 'sheep', 'cows', 'chickens', 'dogs', 1001]

21、pop()

pop() 方法从数组中删除最后一项并返回该项。输入数组的长度减1。
例子

const arr = ['rats', 'sheep', 'cows', 'chickens', 'dogs', 1001];
arr.pop();
// 1001
console.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');
// 4
console.log(animals);
// ['cows', 'cats', 'rats', 'sheep']
animals.unshift('chickens', 'dogs', 1001);
// 7
console.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 1
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());
// [0, 1, 2, 3, 4]
// Example 2
const 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);
// 1001
arr.at(-2);
// 'cats'
arr.at(-100);
// undefined