JS数组常用方法及其实例

138 阅读6分钟

JavaScript 中的数组(Array)提供了一系列非常实用的方法来帮助你操作数组。下面我将详细介绍一些常用的数组方法,并给出对应的代码示例。

1. Array.from()

用途:从类数组对象或可迭代对象创建一个新的数组实例。

示例

const arrayLike = { length: 3, 0: 'a', 1: 'b', 2: 'c' };
const arr = Array.from(arrayLike);

console.log(arr);  // 输出: ['a', 'b', 'c']

2. Array.of()

用途:从零个或多个项创建一个新的数组实例。

示例

const arr = Array.of(1, 2, 3, 4);

console.log(arr);  // 输出: [1, 2, 3, 4]

3. push()

用途:向数组的末尾添加一个或多个元素,并返回新的长度。

示例

let arr = [1, 2, 3];
arr.push(4, 5);

console.log(arr);  // 输出: [1, 2, 3, 4, 5]

4. pop()

用途:删除并返回数组的最后一个元素。

示例

let arr = [1, 2, 3];
let lastElement = arr.pop();

console.log(lastElement);  // 输出: 3
console.log(arr);  // 输出: [1, 2]

5. shift()

用途:删除并返回数组的第一个元素。

示例

let arr = [1, 2, 3];
let firstElement = arr.shift();

console.log(firstElement);  // 输出: 1
console.log(arr);  // 输出: [2, 3]

6. unshift()

用途:向数组的开头添加一个或多个元素,并返回新的长度。

示例

let arr = [1, 2, 3];
arr.unshift(0, -1);

console.log(arr);  // 输出: [-1, 0, 1, 2, 3]

7. slice()

用途:返回一个新的数组,包含从 start 到 end 的所有元素的浅拷贝。

示例

let arr = [1, 2, 3, 4, 5];
let slicedArr = arr.slice(1, 3);

console.log(slicedArr);  // 输出: [2, 3]

8. splice()

用途:删除/替换数组的一部分,并返回被删除的元素。也可以用于添加新元素。

示例

let arr = [1, 2, 3, 4, 5];
let removedElements = arr.splice(1, 2, 'a', 'b');

console.log(removedElements);  // 输出: [2, 3]
console.log(arr);  // 输出: [1, 'a', 'b', 4, 5]

9. concat()

用途:返回一个新数组,其中包含当前数组的所有元素,后面跟着提供的数组的元素。

示例

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let concatenatedArr = arr1.concat(arr2);

console.log(concatenatedArr);  // 输出: [1, 2, 3, 4, 5, 6]

10. join()

用途:将数组的所有元素连接成一个字符串,并返回这个字符串。

示例

let arr = [1, 2, 3];
let str = arr.join('-');

console.log(str);  // 输出: '1-2-3'

11. toString()

用途:将数组转换为逗号分隔的字符串。

示例

let arr = [1, 2, 3];
let str = arr.toString();

console.log(str);  // 输出: '1,2,3'

12. sort()

用途:对数组的元素进行排序,并返回该数组。

示例

let arr = [3, 1, 4, 1, 5, 9, 2];
arr.sort((a, b) => a - b);

console.log(arr);  // 输出: [1, 1, 2, 3, 4, 5, 9]

13. reverse()

用途:颠倒数组中元素的顺序,并返回该数组。

示例

let arr = [1, 2, 3, 4, 5];
arr.reverse();

console.log(arr);  // 输出: [5, 4, 3, 2, 1]

14. indexOf()

用途:返回在数组中找到的第一个元素的索引,如果没有找到则返回 -1。

示例

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);

console.log(index);  // 输出: 2

15. lastIndexOf()

用途:返回在数组中找到的最后一个元素的索引,如果没有找到则返回 -1。

示例

let arr = [1, 2, 3, 2, 4, 5];
let index = arr.lastIndexOf(2);

console.log(index);  // 输出: 3

16. includes()

用途:检查数组是否包含特定元素,并返回布尔值。

示例

let arr = [1, 2, 3, 4, 5];
let containsThree = arr.includes(3);

console.log(containsThree);  // 输出: true

17. every()

用途:检查数组中的所有元素是否都满足条件。

示例

let arr = [2, 4, 6, 8];
let allEven = arr.every(x => x % 2 === 0);

console.log(allEven);  // 输出: true

18. some()

用途:检查数组中是否有至少一个元素满足条件。

示例

let arr = [2, 4, 6, 8, 9];
let hasOdd = arr.some(x => x % 2 !== 0);

console.log(hasOdd);  // 输出: true

19. filter()

用途:创建一个新数组,其包含通过测试的所有元素。

示例

let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(x => x % 2 === 0);

console.log(evenNumbers);  // 输出: [2, 4]

20. map()

用途:创建一个新数组,其结果是调用一个提供的函数产生的数组每个元素的结果。

示例

let arr = [1, 2, 3, 4, 5];
let squaredNumbers = arr.map(x => x * x);

console.log(squaredNumbers);  // 输出: [1, 4, 9, 16, 25]

21. forEach()

用途:对数组中的每个元素执行一个提供的函数。

示例

let arr = [1, 2, 3, 4, 5];
arr.forEach(x => console.log(x * x));

// 输出:
// 1
// 4
// 9
// 16
// 25

22. reduce()

用途:对数组中的每个元素执行一个由左至右的累加器函数,将其结果汇总为单个输出值。

示例

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, cur) => acc + cur, 0);

console.log(sum);  // 输出: 15

23. flat()

用途:创建一个新数组,其中所有元素都是原数组元素的子元素的扁平化版本。

示例

let arr = [1, 2, [3, 4], [5, [6, 7]]];
let flattenedArr = arr.flat(2);

console.log(flattenedArr);  // 输出: [1, 2, 3, 4, 5, 6, 7]

24. flatMap()

用途:首先映射数组中的每个元素,然后将结果展平到最大深度为 1 的新数组。

示例

let arr = [1, 2, [3, 4]];
let mappedAndFlattened = arr.flatMap(x => [x * 2]);

console.log(mappedAndFlattened);  // 输出: [2, 4, [6, 8]]

当然,JavaScript 中的数组提供了许多其他有用的方法。除了之前提到的方法外,这里还有一些额外的方法以及它们的用法和示例。

25. fill()

用途:用给定值填充数组的一部分或全部。

示例

let arr = [1, 2, 3, 4, 5];
arr.fill(0);

console.log(arr);  // 输出: [0, 0, 0, 0, 0]

arr.fill(7, 1, 3);

console.log(arr);  // 输出: [0, 7, 7, 0, 0]

26. copyWithin()

用途:将数组的一部分复制到数组的另一部分,不会离开原数组。

示例

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(2, 0, 3);

console.log(arr);  // 输出: [1, 2, 1, 2, 5]

27. find()

用途:返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

示例

let arr = [1, 2, 3, 4, 5];
let found = arr.find(x => x > 3);

console.log(found);  // 输出: 4

28. findIndex()

用途:返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。

示例

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(x => x > 3);

console.log(index);  // 输出: 3

29. entries()

用途:返回一个数组迭代器对象,该对象包含数组的键值对。

示例

let arr = [1, 2, 3];
let iterator = arr.entries();

for (let entry of iterator) {
  console.log(entry);  // 输出: [0, 1], [1, 2], [2, 3]
}

30. keys()

用途:返回一个数组迭代器对象,该对象包含数组的键。

示例

let arr = [1, 2, 3];
let iterator = arr.keys();

for (let key of iterator) {
  console.log(key);  // 输出: 0, 1, 2
}

31. values()

用途:返回一个数组迭代器对象,该对象包含数组的值。

示例

let arr = [1, 2, 3];
let iterator = arr.values();

for (let value of iterator) {
  console.log(value);  // 输出: 1, 2, 3
}

32. at()

用途:返回指定位置的元素,支持负索引。

示例

let arr = [1, 2, 3, 4, 5];
let element = arr.at(-1);

console.log(element);  // 输出: 5

33. toString()

用途:将数组转换为字符串,元素之间用逗号分隔。

示例

let arr = [1, 2, 3];
let str = arr.toString();

console.log(str);  // 输出: "1,2,3"

34. toLocaleString()

用途:返回数组转换为本地格式的字符串。

示例

let arr = [1, 2, 3];
let str = arr.toLocaleString();

console.log(str);  // 输出: "1,2,3"

35. with()

用途:返回一个新数组,其中某个元素已被替换。

示例

let arr = [1, 2, 3];
let newArr = arr.with(1, 7);

console.log(newArr);  // 输出: [1, 7, 3]

36. isArray()

用途:检查传递的值是否为数组。

示例

let arr = [1, 2, 3];
let obj = { a: 1 };

console.log(Array.isArray(arr));  // 输出: true
console.log(Array.isArray(obj));  // 输出: false

总结

这些方法进一步增强了 JavaScript 数组的功能,使你能够更灵活地操作数组。通过使用这些方法,你可以轻松地实现数组的填充、复制、搜索,排序、过滤、映射、累加等。这些方法使得 JavaScript 中的数组操作更加灵活和高效。