JS中Array的常用方法

文章目录

- - 1. 创建和初始化数组
  - 2. 添加和删除元素
  - 3. 查找元素
  - 4. 遍历数组
  - 5. 数组转换
  - 6. 排序和反转
  - 7. 其他方法

JavaScript 中的 Array 对象提供了许多常用的方法，这些方法可以帮助你更方便地操作数组。以下是一些常用的 Array 方法及其用法：

1. 创建和初始化数组

new Array()：创建一个空数组。
Array.of()：创建一个具有可变数量参数的新数组实例。
Array.from()：从类数组或可迭代对象创建一个新的数组实例。

javascript">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()：移除数组开头的元素，并返回该元素。

javascript">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。

javascript">const arr = [1, 2, 3, 4, 5];console.log(arr.indexOf(3)); // 输出: 2
console.log(arr.lastIndexOf(3)); // 输出: 2const foundElement = arr.find(element => element > 3);
console.log(foundElement); // 输出: 4const 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 类似，但降序执行。

javascript">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])：先映射数组，然后将结果展平。

javascript">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()：反转数组中元素的顺序，并返回反转后的数组。

javascript">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])：检测数组中的所有元素是否都满足提供的测试函数。

javascript">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