返回

数组常见方法总结

前端

数组作为 JavaScript 中一种基本的数据结构,具有广泛的应用场景。了解并熟练掌握数组的常用方法,对于提高开发效率和代码质量至关重要。

1. push()

向数组末尾添加新元素(可一次性添加多个)。返回值:新数组的长度。

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

2. unshift()

向数组最前面添加新元素(可一次性添加多个)。返回值:新数组的长度。

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

3. shift()

从数组最前面删除一个元素并返回该元素。

const arr = [1, 2, 3];
const removedElement = arr.shift();
console.log(arr); // 输出:[2, 3]
console.log(removedElement); // 输出:1

4. pop()

从数组末尾删除一个元素并返回该元素。

const arr = [1, 2, 3];
const removedElement = arr.pop();
console.log(arr); // 输出:[1, 2]
console.log(removedElement); // 输出:3

5. reverse()

反转数组中的元素顺序。

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

6. sort()

对数组中的元素进行排序。默认情况下,sort() 方法会对字符串元素进行字典序排序,对数字元素进行数值排序。

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

const arr2 = ["Apple", "Banana", "Orange"];
arr2.sort();
console.log(arr2); // 输出:[“Apple", “Banana”, “Orange”]

7. splice()

在数组中指定的位置插入、删除或替换元素。

const arr = [1, 2, 3, 4, 5];

// 从索引 2 开始删除 2 个元素
arr.splice(2, 2);
console.log(arr); // 输出:[1, 2, 5]

// 从索引 2 开始,插入元素 "a" 和 "b"
arr.splice(2, 0, "a", "b");
console.log(arr); // 输出:[1, 2, "a", "b", 5]

// 从索引 3 开始,替换元素 "b" 为 "c"
arr.splice(3, 1, "c");
console.log(arr); // 输出:[1, 2, "a", "c", 5]

8. concat()

将一个或多个数组合并成一个新数组。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = arr1.concat(arr2);
console.log(newArr); // 输出:[1, 2, 3, 4, 5, 6]

9. join()

将数组中的元素连接成一个字符串。

const arr = [1, 2, 3];
const str = arr.join(",");
console.log(str); // 输出:“1,2,3”

10. slice()

从数组中提取一段元素,并返回一个新数组。

const arr = [1, 2, 3, 4, 5];

// 从索引 1 开始,提取 3 个元素
const newArr = arr.slice(1, 4);
console.log(newArr); // 输出:[2, 3, 4]

// 从索引 2 开始,提取到数组末尾
const newArr2 = arr.slice(2);
console.log(newArr2); // 输出:[3, 4, 5]

11. indexOf()

返回数组中某个元素的索引,如果没有找到该元素则返回 -1。

const arr = [1, 2, 3, 4, 5];

console.log(arr.indexOf(3)); // 输出:2
console.log(arr.indexOf(6)); // 输出:-1

12. lastIndexOf()

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

const arr = [1, 2, 3, 4, 5, 3];

console.log(arr.lastIndexOf(3)); // 输出:5
console.log(arr.lastIndexOf(6)); // 输出:-1

13. includes()

判断数组是否包含某个元素,如果包含则返回 true,否则返回 false。

const arr = [1, 2, 3, 4, 5];

console.log(arr.includes(3)); // 输出:true
console.log(arr.includes(6)); // 输出:false

14. every()

判断数组中的所有元素是否都满足某个条件,如果所有元素都满足则返回 true,否则返回 false。

const arr = [1, 2, 3, 4, 5];

const isAllEven = arr.every((element) => element % 2 === 0);
console.log(isAllEven); // 输出:false

const isAllPositive = arr.every((element) => element > 0);
console.log(isAllPositive); // 输出:true

15. some()

判断数组中是否存在某个元素满足某个条件,如果存在则返回 true,否则返回 false。

const arr = [1, 2, 3, 4, 5];

const isAnyEven = arr.some((element) => element % 2 === 0);
console.log(isAnyEven); // 输出:true

const isAnyNegative = arr.some((element) => element < 0);
console.log(isAnyNegative); // 输出:false

16. forEach()

对数组中的每个元素执行某个操作。

const arr = [1, 2, 3, 4, 5];

arr.forEach((element) => {
  console.log(element);
});

// 输出:
// 1
// 2
// 3
// 4
// 5

17. map()

对数组中的每个元素执行某个操作,并返回一个新数组。

const arr = [1, 2, 3, 4, 5];

const newArr = arr.map((element) => element * 2);
console.log(newArr); // 输出:[2, 4, 6, 8, 10]

18. filter()

对数组中的每个元素执行某个操作,并返回一个包含满足该条件的元素的新数组。

const arr = [1, 2, 3, 4, 5];

const evenArr = arr.filter((element) => element % 2 === 0);
console.log(evenArr); // 输出:[2, 4]

19. reduce()

将数组中的元素累积成一个单一的值。

const arr = [1, 2, 3, 4, 5];

const sum = arr.reduce((accumulator, element) => accumulator + element, 0);
console.log(sum); // 输出:15

20. find()

返回数组中第一个满足某个条件的元素,如果没有找到则返回 undefined。

const arr = [1, 2, 3, 4, 5];

const firstEven = arr.find((element) => element % 2 === 0);
console.log(firstEven); // 输出:2

21. findIndex()

返回