探索数组方法的奥秘：分门别类，全面解析
2023-12-07 12:59:55
一、改天换地：改变自身值的方法
数组提供了多种方法来修改自身的值，包括添加、删除和更新元素。这些方法可以帮助您轻松地对数组中的数据进行操作，实现各种复杂的数据处理需求。
1. push()：尾部添新丁
push() 方法可谓数组的"扩容高手"，它可以向数组的尾部添加一个或多个元素。无论是数字、字符串还是对象，都可以轻松入列。
const numbers = [1, 2, 3];
numbers.push(4, 5); // numbers = [1, 2, 3, 4, 5]
2. pop()：末尾弹出一个
pop() 方法与 push() 方法相辅相成，它可以从数组的尾部移除最后一个元素，并将其返回。
const colors = ["red", "green", "blue"];
const lastColor = colors.pop(); // lastColor = "blue"
// colors = ["red", "green"]
3. shift()：首位除旧迎新
shift() 方法从数组的头部移除第一个元素，同时将其返回。它与 pop() 方法类似，但操作的位置不同。
const animals = ["dog", "cat", "fish"];
const firstAnimal = animals.shift(); // firstAnimal = "dog"
// animals = ["cat", "fish"]
4. unshift()：头部扩容
unshift() 方法与 push() 方法相似，但它是在数组的头部添加一个或多个元素。无论您是想在数组的开头添加新元素，还是将多个元素一网打尽，unshift() 方法都能满足您的需求。
const fruits = ["apple", "banana", "cherry"];
fruits.unshift("strawberry", "kiwi"); // fruits = ["strawberry", "kiwi", "apple", "banana", "cherry"]
5. splice()：精准修改
splice() 方法堪称数组修改的"万能工具"，它可以从数组中添加、删除或替换元素，并且可以指定操作的位置和数量。
const months = ["January", "February", "March", "April", "May"];
months.splice(2, 1, "June"); // months = ["January", "February", "June", "April", "May"]
二、岿然不动：不改变自身值的方法
虽然数组的改变自身值的方法非常强大，但有时我们也需要对数组进行操作，而不改变其本身。此时，不改变自身值的方法就派上用场了。这些方法可以帮助您查询、搜索和排序数组中的数据，而不会对数组本身造成任何修改。
1. slice()：截取复制
slice() 方法可以从数组中截取出一部分元素，并返回一个新的数组，而不会修改原数组。
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const slicedNumbers = numbers.slice(2, 5); // slicedNumbers = [3, 4, 5]
// numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
2. concat()：数组拼接
concat() 方法可以将两个或多个数组合并成一个新的数组，而不会修改原数组。
const colors1 = ["red", "green", "blue"];
const colors2 = ["yellow", "orange", "purple"];
const allColors = colors1.concat(colors2); // allColors = ["red", "green", "blue", "yellow", "orange", "purple"]
3. indexOf()：元素查找
indexOf() 方法可以查找数组中某个元素的索引，如果元素不存在则返回-1。
const names = ["John", "Mary", "Bob", "Alice", "Tom"];
const index = names.indexOf("Mary"); // index = 1
4. lastIndexOf()：倒序查找
lastIndexOf() 方法与 indexOf() 方法类似，但它是从数组的尾部开始查找元素的索引。
const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const lastIndex = numbers.lastIndexOf(2); // lastIndex = 6
5. includes()：元素是否存在
includes() 方法可以检查数组中是否包含某个元素，如果包含则返回 true，否则返回 false。
const colors = ["red", "green", "blue"];
const hasRed = colors.includes("red"); // hasRed = true
6. find()：满足条件的第一个元素
find() 方法可以找到数组中第一个满足指定条件的元素，并将其返回。如果数组中没有满足条件的元素，则返回 undefined。
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const firstEvenNumber = numbers.find(number => number % 2 === 0); // firstEvenNumber = 2
7. findIndex()：满足条件的第一个元素的索引
findIndex() 方法与 find() 方法类似，但它返回的是第一个满足指定条件的元素的索引，而不是元素本身。
const names = ["John", "Mary", "Bob", "Alice", "Tom"];
const indexOfBob = names.findIndex(name => name === "Bob"); // indexOfBob = 2
8. sort()：排序数组
sort() 方法可以对数组中的元素进行排序。默认情况下，sort() 方法会将数组中的元素按字母顺序从小到大排序。
const numbers = [1, 5, 3, 2, 4];
numbers.sort(); // numbers = [1, 2, 3, 4, 5]
9. reverse()：反转数组
reverse() 方法可以将数组中的元素反转。
const names = ["John", "Mary", "Bob", "Alice", "Tom"];
names.reverse(); // names = ["Tom", "Alice", "Bob", "Mary", "John"]
三、纵横捭阖：遍历方法
遍历方法可以帮助您逐个访问数组中的元素，并对每个元素进行操作。这些方法非常适用于对数组中的每个元素进行相同的处理，或者对数组中的元素进行累加或求和等操作。
1. forEach()：逐个访问
forEach() 方法可以对数组中的每个元素进行访问，并对每个元素执行指定的回调函数。
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number, index) => {
console.log(`Element at index ${index}: ${number}`);
});
// Output:
// Element at index 0: 1
// Element at index 1: 2
// Element at index 2: 3
// Element at index 3: 4
// Element at index 4: 5
2. map()：逐个转换
map() 方法可以对数组中的每个元素进行转换，并返回一个新的数组，其中包含转换后的元素。
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2); // doubledNumbers = [2, 4, 6, 8, 10]
3. filter()：逐个筛选
filter() 方法可以对数组中的每个元素进行筛选，并返回一个新的数组，其中包含满足指定条件的元素。
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter(number => number % 2 === 0); // evenNumbers = [2, 4, 6, 8, 10]
4. reduce()：逐个累加或求和
reduce() 方法可以对数组中的每个元素进行累加或求和，并返回一个最终结果。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum = 15
