JavaScript 中Array 整理
系统梳理一下 JavaScript 中 Array 最常用的方法。
一、添加 / 删除元素（修改原数组）
这类方法会直接改变原数组的内容。
-
push()
-
功能：在数组的末尾添加一个或多个元素。
-
返回值：新数组的长度。
示例：
const arr = [1, 2, 3]; arr.push(4, 5); console.log(arr); // 输出: [1, 2, 3, 4, 5]
-
-
pop()
-
功能：删除并返回数组的最后一个元素。
-
返回值：被删除的元素。
示例：
const arr = [1, 2, 3]; const last = arr.pop(); console.log(arr); // 输出: [1, 2] console.log(last); // 输出: 3
-
-
unshift()
- 功能：在数组的开头添加一个或多个元素。
- 返回值：新数组的长度。
示例：const arr = [3, 4, 5]; arr.unshift(1, 2); console.log(arr); // 输出: [1, 2, 3, 4, 5]
-
shift()
- 功能：删除并返回数组的第一个元素。
- 返回值：被删除的元素。
示例：const arr = [1, 2, 3]; const first = arr.shift(); console.log(arr); // 输出: [2, 3] console.log(first); // 输出: 1
-
splice()
-
功能：一个非常强大的方法，可以删除、插入或替换数组中的元素。
-
语法：array.splice(startIndex, deleteCount, item1, item2, …)
-
返回值：包含被删除元素的数组。
示例：const arr = ['a', 'b', 'c', 'd'];// 删除：从索引1开始，删除2个元素 const removed = arr.splice(1, 2); console.log(arr); // 输出: ['a', 'd'] console.log(removed); // 输出: ['b', 'c']// 插入：从索引1开始，删除0个元素，并插入 'x', 'y' arr.splice(1, 0, 'x', 'y'); console.log(arr); // 输出: ['a', 'x', 'y', 'd']// 替换：从索引2开始，删除1个元素，并插入 'z' arr.splice(2, 1, 'z'); console.log(arr); // 输出: ['a', 'x', 'z', 'd']
-
二、创建新数组（不修改原数组）
这类方法不会改变原数组，而是返回一个全新的数组，非常适合在函数式编程或需要保持数据不可变性的场景中使用。
-
slice()
-
功能：截取数组的一部分，返回一个新数组。
-
语法：array.slice(startIndex, endIndex)（endIndex 不包含）
-
返回值：一个包含截取元素的新数组。
示例：const arr = ['a', 'b', 'c', 'd', 'e']; const newArr = arr.slice(1, 4); // 从索引1到索引4（不包含4） console.log(newArr); // 输出: ['b', 'c', 'd'] console.log(arr); // 原数组不变: ['a', 'b', 'c', 'd', 'e']
-
-
concat()
-
功能：连接两个或多个数组 / 值，返回一个新数组。
-
返回值：一个新的、连接后的数组。
示例：const arr1 = [1, 2]; const arr2 = [3, 4]; const combined = arr1.concat(arr2, 5, 6); console.log(combined); // 输出: [1, 2, 3, 4, 5, 6]
-
-
map()
-
功能：遍历数组的每个元素，并对每个元素执行一个回调函数，将回调函数的返回值组成一个新数组返回。
-
核心：“映射”，即一对一地将原数组元素转换为新元素。
示例：const numbers = [1, 2, 3, 4]; const doubled = numbers.map(num => num * 2); console.log(doubled); // 输出: [2, 4, 6, 8]
-
-
filter()
-
功能：遍历数组，根据回调函数返回的布尔值（true/false）来 “过滤” 元素，将返回 true 的元素组成一个新数组返回。
-
核心：“过滤”，即筛选出符合条件的元素。
示例：const numbers = [1, 2, 3, 4, 5, 6]; const evens = numbers.filter(num => num % 2 === 0); console.log(evens); // 输出: [2, 4, 6]
-
-
reduce()
-
功能：遍历数组，将数组元素 “累积” 成一个单一的值（可以是数字、对象、数组等）。
-
核心：“归约” 或 “累积”。
示例：const numbers = [1, 2, 3, 4]; const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // 输出: 10
-
三、数组遍历 / 查找
这类方法用于遍历数组元素或查找特定元素。
-
forEach()
-
功能：遍历数组的每个元素，并对每个元素执行一个回调函数。
-
与 map 的区别：forEach 没有返回值（undefined），它仅用于执行副作用（如打印、修改外部变量）。
示例：const fruits = ['apple', 'banana', 'cherry']; fruits.forEach(fruit => console.log(fruit)); // 输出: // apple // banana // cherry
-
-
find()
-
功能：遍历数组，返回第一个满足回调函数条件的元素。
-
返回值：找到的元素，如果没有找到则返回 undefined。
示例：const users = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' } ]; const user = users.find(u => u.id === 2); console.log(user); // 输出: { id: 2, name: 'Bob' }
-
-
findIndex()
-
功能：遍历数组，返回第一个满足回调函数条件的元素的索引。
-
返回值：找到的元素的索引，如果没有找到则返回 -1。
示例：const numbers = [5, 12, 8, 130, 44]; const index = numbers.findIndex(num => num > 10); console.log(index); // 输出: 1 (因为 12 是第一个大于10的数，其索引为1)
-
-
includes()
-
功能：判断数组是否包含某个指定的元素。
-
返回值：布尔值（true 表示包含，false 表示不包含）。
示例：const arr = [1, 2, 3, 4]; console.log(arr.includes(2)); // 输出: true console.log(arr.includes(5)); // 输出: false
-
四、数组排序与反转
-
sort()
-
功能：对数组元素进行原地排序。
-
注意：默认按 Unicode 编码排序，对数字排序时需要传入自定义比较函数。
示例：const fruits = ['banana', 'apple', 'cherry']; fruits.sort(); console.log(fruits); // 输出: ['apple', 'banana', 'cherry']const numbers = [3, 1, 4, 1, 5, 9]; numbers.sort((a, b) => a - b); // 数字升序 console.log(numbers); // 输出: [1, 1, 3, 4, 5, 9]
-
-
reverse()
-
功能：将数组元素原地反转。
示例：const arr = [1, 2, 3, 4]; arr.reverse(); console.log(arr); // 输出: [4, 3, 2, 1]
-