JavaScript总结之18种常用数组方法-猿码集

1. 概述

数组是JavaScript中最常用的数据结构之一，由于其灵活性和可扩展性，数组操作也成为了JavaScript开发的基本技能之一。在本文中，我们将介绍18种常用的数组方法，包括修改原数组的方法、返回新数组的方法和遍历数组的方法。

2. 修改原数组的方法

2.1 push()

push()方法用于在数组的末尾添加一个或多个元素，并返回数组的新长度。

let arr = ["apple", "banana", "orange"];
let length = arr.push("peach", "grape");
console.log(arr); // ["apple", "banana", "orange", "peach", "grape"]
console.log(length); // 5

2.2 pop()

pop()方法用于从数组的末尾删除一个元素，并返回该元素。

let arr = ["apple", "banana", "orange"];
let lastElement = arr.pop();
console.log(arr); // ["apple", "banana"]
console.log(lastElement); // "orange"

2.3 shift()

shift()方法用于从数组的开头删除一个元素，并返回该元素。

let arr = ["apple", "banana", "orange"];
let firstElement = arr.shift();
console.log(arr); // ["banana", "orange"]
console.log(firstElement); // "apple"

2.4 unshift()

unshift()方法用于在数组的开头添加一个或多个元素，并返回数组的新长度。

let arr = ["apple", "banana", "orange"];
let length = arr.unshift("peach", "grape");
console.log(arr); // ["peach", "grape", "apple", "banana", "orange"]
console.log(length); // 5

2.5 splice()

splice()方法用于从数组中删除或添加元素，并返回被删除的元素（如果有）。

let arr = ["apple", "banana", "orange"];
let deletedElements = arr.splice(1, 1, "peach", "grape");
console.log(arr); // ["apple", "peach", "grape", "orange"]
console.log(deletedElements); // ["banana"]

3. 返回新数组的方法

3.1 slice()

slice()方法返回数组中指定部分的浅拷贝，不会修改原数组。

let arr = ["apple", "banana", "orange"];
let newArr = arr.slice(1, 3);
console.log(newArr); // ["banana", "orange"]
console.log(arr); // ["apple", "banana", "orange"]

3.2 concat()

concat()方法将两个或多个数组合并成一个新数组，并返回该数组。

let arr1 = ["apple", "banana"];
let arr2 = ["orange", "peach"];
let newArr = arr1.concat(arr2);
console.log(newArr); // ["apple", "banana", "orange", "peach"]

3.3 filter()

filter()方法返回一个新数组，其中包含通过函数测试的所有元素。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(function(element) {
  return element % 2 === 0;
});
console.log(newArr); // [2, 4]

3.4 map()

map()方法返回一个新数组，其中包含对原数组每个元素调用函数后的返回值。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(function(element) {
  return element * 2;
});
console.log(newArr); // [2, 4, 6, 8, 10]

3.5 reduce()

reduce()方法对数组中的所有元素执行一个函数，并返回单个值。

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce(function(acc, element) {
  return acc + element;
}, 0);
console.log(sum); // 15

3.6 sort()

sort()方法返回排序后的数组。如果不传递参数，则按照字母顺序排序。

let arr = [4, 2, 5, 1, 3];
let sortedArr = arr.sort();
console.log(sortedArr); // [1, 2, 3, 4, 5]

4. 遍历数组的方法

4.1 forEach()

forEach()方法对数组中的每个元素执行一个函数，没有返回值。

let arr = ["apple", "banana", "orange"];
arr.forEach(function(element) {
  console.log(element);
});
// 输出：apple
// 输出：banana
// 输出：orange

4.2 some()

some()方法对数组中的每个元素执行一个函数，如果有一个元素满足函数条件，则返回true，否则返回false。

let arr = [1, 2, 3, 4, 5];
let hasEven = arr.some(function(element) {
  return element % 2 === 0;
});
console.log(hasEven); // true

4.3 every()

every()方法对数组中的每个元素执行一个函数，如果所有元素都满足函数条件，则返回true，否则返回false。

let arr = [2, 4, 6, 8, 10];
let allEven = arr.every(function(element) {
  return element % 2 === 0;
});
console.log(allEven); // true

4.4 find()

find()方法对数组中的每个元素执行一个函数，返回第一个满足条件的元素（如果有）。

let arr = ["apple", "banana", "orange"];
let found = arr.find(function(element) {
  return element.indexOf("a") !== -1;
});
console.log(found); // "apple"

4.5 indexOf()

indexOf()方法返回数组中第一次出现指定元素的索引。如果没有找到该元素，则返回-1。

let arr = ["apple", "banana", "orange"];
let index = arr.indexOf("banana");
console.log(index); // 1

5. 结语

本文介绍了18种常用的JavaScript数组方法，包括修改原数组的方法、返回新数组的方法和遍历数组的方法。这些方法可以为开发者在实际开发中遇到的数组问题提供有力的解决方案。阅读本文可以帮助你更好地理解和应用JavaScript的数组操作。

JavaScript总结之18种常用数组方法