JavaScript中Array的常用方法举例详解
作者：shifff
这篇文章主要介绍了JavaScript中Array常用方法的相关资料,JavaScript的Array对象提供多种方法,涵盖创建、增删、查找、遍历、转换、排序等操作,文中给出了详细的代码示例,需要的朋友可以参考下
前言
JavaScript 中的 Array 对象提供了许多常用的方法，这些方法可以帮助你更方便地操作数组。以下是一些常用的 Array 方法及其用法：
1. 创建和初始化数组
new Array()：创建一个空数组。Array.of()：创建一个具有可变数量参数的新数组实例。Array.from()：从类数组或可迭代对象创建一个新的数组实例。
const arr1 = new Array();
const arr2 = Array.of(1, 2, 3);
const arr3 = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
2. 添加和删除元素
push(...items)：在数组末尾添加一个或多个元素，并返回新的长度。pop()：移除数组末尾的元素，并返回该元素。unshift(...items)：在数组开头添加一个或多个元素，并返回新的长度。shift()：移除数组开头的元素，并返回该元素。
const arr = [1, 2, 3]; arr.push(4); // arr 现在是 [1, 2, 3, 4] console.log(arr.pop()); // 输出: 4, arr 现在是 [1, 2, 3] arr.unshift(0); // arr 现在是 [0, 1, 2, 3] console.log(arr.shift()); // 输出: 0, arr 现在是 [1, 2, 3]
3. 查找元素
indexOf(searchElement[, fromIndex])：返回第一个匹配项的索引，如果没有找到则返回 -1。lastIndexOf(searchElement[, fromIndex])：返回最后一个匹配项的索引，如果没有找到则返回 -1。find(callback[, thisArg])：返回数组中满足提供的测试函数的第一个元素的值，如果没有找到则返回undefined。findIndex(callback[, thisArg])：返回数组中满足提供的测试函数的第一个元素的索引，如果没有找到则返回 -1。
const arr = [1, 2, 3, 4, 5]; console.log(arr.indexOf(3)); // 输出: 2 console.log(arr.lastIndexOf(3)); // 输出: 2 const foundElement = arr.find(element => element > 3); console.log(foundElement); // 输出: 4 const foundIndex = arr.findIndex(element => element > 3); console.log(foundIndex); // 输出: 3
4. 遍历数组
forEach(callback[, thisArg])：对数组中的每个元素执行一次提供的函数。map(callback[, thisArg])：创建一个新数组，其结果是该数组中的每个元素调用提供的函数的结果。filter(callback[, thisArg])：创建一个新数组，包含通过提供的函数实现的测试的所有元素。reduce(callback[, initialValue])：对数组中的每个元素执行一个由您提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。reduceRight(callback[, initialValue])：与reduce类似，但降序执行。
const arr = [1, 2, 3, 4, 5]; // forEach arr.forEach(element => console.log(element)); // map const squared = arr.map(element => element * element); console.log(squared); // 输出: [1, 4, 9, 16, 25] // filter const evenNumbers = arr.filter(element => element % 2 === 0); console.log(evenNumbers); // 输出: [2, 4] // reduce const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // 输出: 15 // reduceRight const reversedSum = arr.reduceRight((accumulator, currentValue) => accumulator + currentValue, 0); console.log(reversedSum); // 输出: 15
5. 数组转换
slice([begin[, end]])：返回一个新的数组，包含从开始到结束（不包括结束）的数组的一部分浅拷贝。splice(start[, deleteCount[, ...items]])：改变原数组，通过删除现有元素和/或添加新元素。concat(...items)：返回一个新的数组实例，该实例是通过将现有数组与传入的数组或非数组值连接而成的。flat(depth)：按照指定深度递归地展平数组。flatMap(callback[, thisArg])：先映射数组，然后将结果展平。
const arr = [1, 2, 3, 4, 5]; // slice const sliced = arr.slice(1, 3); console.log(sliced); // 输出: [2, 3] // splice const removed = arr.splice(1, 2, 10, 11); console.log(arr); // 输出: [1, 10, 11, 4, 5] console.log(removed); // 输出: [2, 3] // concat const concatenated = arr.concat([6, 7]); console.log(concatenated); // 输出: [1, 10, 11, 4, 5, 6, 7] // flat const nested = [1, [2, [3, [4, 5]]]]; const flattened = nested.flat(Infinity); console.log(flattened); // 输出: [1, 2, 3, 4, 5] // flatMap const mappedAndFlattened = arr.flatMap(x => [x, x * 2]); console.log(mappedAndFlattened); // 输出: [1, 2, 10, 20, 11, 22, 4, 8, 5, 10]
6. 排序和反转
sort([compareFunction])：对数组的元素进行排序，并返回排序后的数组。reverse()：反转数组中元素的顺序，并返回反转后的数组。
const arr = [3, 1, 4, 1, 5, 9, 2, 6]; // sort arr.sort((a, b) => a - b); console.log(arr); // 输出: [1, 1, 2, 3, 4, 5, 6, 9] // reverse arr.reverse(); console.log(arr); // 输出: [9, 6, 5, 4, 3, 2, 1, 1]
7. 其他方法
includes(searchElement[, fromIndex])：判断数组是否包含某个指定的值，如果是返回true，否则返回false。join([separator])：将所有数组元素连接成一个字符串。some(callback[, thisArg])：检测数组中是否有至少一个元素满足提供的测试函数。every(callback[, thisArg])：检测数组中的所有元素是否都满足提供的测试函数。
const arr = [1, 2, 3, 4, 5];
// includes
console.log(arr.includes(3)); // 输出: true
// join
const joined = arr.join('-');
console.log(joined); // 输出: 1-2-3-4-5
// some
const hasEven = arr.some(element => element % 2 === 0);
console.log(hasEven); // 输出: true
// every
const allPositive = arr.every(element => element > 0);
console.log(allPositive); // 输出: true总结
到此这篇关于JavaScript中Array常用方法的文章就介绍到这了,更多相关JS中Array常用方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！