JavaScript 数组常用方法大全

数组方法分类概览

1. 修改原数组的方法 (Mutator Methods)

2. 不修改原数组的方法 (Accessor Methods)

3. 迭代方法 (Iteration Methods)

4. ES6+ 新增方法

1. 修改原数组的方法

push() - 末尾添加元素

let fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'orange']

// 添加多个元素
fruits.push('mango', 'grape');
console.log(fruits); // ['apple', 'banana', 'orange', 'mango', 'grape']

pop() - 末尾删除元素

let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();
console.log(lastFruit); // 'orange'
console.log(fruits); // ['apple', 'banana']

unshift() - 开头添加元素

let fruits = ['banana', 'orange'];
fruits.unshift('apple');
console.log(fruits); // ['apple', 'banana', 'orange']

shift() - 开头删除元素

let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();
console.log(firstFruit); // 'apple'
console.log(fruits); // ['banana', 'orange']

splice() - 添加/删除元素

let fruits = ['apple', 'banana', 'orange', 'mango'];

// 删除元素
let removed = fruits.splice(1, 2); // 从索引1开始删除2个元素
console.log(removed); // ['banana', 'orange']
console.log(fruits); // ['apple', 'mango']

// 添加元素
fruits.splice(1, 0, 'grape', 'pear'); // 从索引1开始添加元素
console.log(fruits); // ['apple', 'grape', 'pear', 'mango']

// 替换元素
fruits.splice(1, 2, 'kiwi', 'pineapple');
console.log(fruits); // ['apple', 'kiwi', 'pineapple', 'mango']

reverse() - 反转数组

let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]

sort() - 排序数组

let fruits = ['banana', 'apple', 'orange'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'orange']

let numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b); // 升序
console.log(numbers); // [1, 5, 25, 40, 100]

numbers.sort((a, b) => b - a); // 降序
console.log(numbers); // [100, 40, 25, 5, 1]

fill() - 填充数组

let arr = new Array(5).fill(0);
console.log(arr); // [0, 0, 0, 0, 0]

let numbers = [1, 2, 3, 4];
numbers.fill(0, 1, 3); // 从索引1到3填充0
console.log(numbers); // [1, 0, 0, 4]

2. 不修改原数组的方法

concat() - 合并数组

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2);
console.log(arr3); // [1, 2, 3, 4, 5, 6]

// 合并多个数组
let combined = arr1.concat(arr2, [7, 8]);
console.log(combined); // [1, 2, 3, 4, 5, 6, 7, 8]

slice() - 截取数组

let fruits = ['apple', 'banana', 'orange', 'mango', 'grape'];

let citrus = fruits.slice(1, 3); // 从索引1到3（不包括3）
console.log(citrus); // ['banana', 'orange']

let lastTwo = fruits.slice(-2); // 最后两个元素
console.log(lastTwo); // ['mango', 'grape']

let copy = fruits.slice(); // 浅拷贝整个数组
console.log(copy); // ['apple', 'banana', 'orange', 'mango', 'grape']

join() - 数组转字符串

let fruits = ['apple', 'banana', 'orange'];
let result = fruits.join(', ');
console.log(result); // "apple, banana, orange"

let numbers = [1, 2, 3];
console.log(numbers.join('-')); // "1-2-3"
console.log(numbers.join()); // "1,2,3" (默认逗号分隔)

indexOf() / lastIndexOf() - 查找元素索引

let fruits = ['apple', 'banana', 'orange', 'banana'];

console.log(fruits.indexOf('banana')); // 1
console.log(fruits.indexOf('banana', 2)); // 3 (从索引2开始查找)
console.log(fruits.indexOf('grape')); // -1 (未找到)

console.log(fruits.lastIndexOf('banana')); // 3 (从后往前找)

includes() - 检查是否包含元素

let fruits = ['apple', 'banana', 'orange'];

console.log(fruits.includes('banana')); // true
console.log(fruits.includes('grape')); // false
console.log(fruits.includes('banana', 2)); // false (从索引2开始检查)

3. 迭代方法

forEach() - 遍历数组

let numbers = [1, 2, 3, 4, 5];

numbers.forEach((number, index, array) => {
    console.log(`索引 ${index}: 值 ${number}`);
});
// 输出:
// 索引 0: 值 1
// 索引 1: 值 2
// 索引 2: 值 3
// 索引 3: 值 4
// 索引 4: 值 5

map() - 映射新数组

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

let users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 }
];
let names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob']

filter() - 过滤数组

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

let users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 17 },
    { name: 'Charlie', age: 30 }
];
let adults = users.filter(user => user.age >= 18);
console.log(adults); // [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 30 }]

reduce() - 累计计算

let numbers = [1, 2, 3, 4, 5];

// 求和
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // 15

// 求最大值
let max = numbers.reduce((acc, curr) => Math.max(acc, curr));
console.log(max); // 5

// 数组转对象
let fruits = ['apple', 'banana', 'orange'];
let fruitObj = fruits.reduce((obj, fruit, index) => {
    obj[fruit] = index;
    return obj;
}, {});
console.log(fruitObj); // { apple: 0, banana: 1, orange: 2 }

find() / findIndex() - 查找元素

let users = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 35 }
];

let user = users.find(user => user.age > 28);
console.log(user); // { id: 2, name: 'Bob', age: 30 }

let userIndex = users.findIndex(user => user.name === 'Charlie');
console.log(userIndex); // 2

some() / every() - 条件检查

let numbers = [1, 2, 3, 4, 5];

// some: 至少一个元素满足条件
let hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

// every: 所有元素都满足条件
let allPositive = numbers.every(num => num > 0);
console.log(allPositive); // true

let allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // false

4. ES6+ 新增方法

Array.from() - 类数组转数组

// 字符串转数组
let str = 'hello';
let arr = Array.from(str);
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

// Set转数组
let set = new Set([1, 2, 3, 2, 1]);
let uniqueArray = Array.from(set);
console.log(uniqueArray); // [1, 2, 3]

// 带映射函数的转换
let squares = Array.from([1, 2, 3], x => x * x);
console.log(squares); // [1, 4, 9]

Array.of() - 创建数组

let arr1 = Array.of(1, 2, 3);
console.log(arr1); // [1, 2, 3]

let arr2 = Array.of(5);
console.log(arr2); // [5] (不同于 Array(5) 创建长度为5的空数组)

flat() / flatMap() - 扁平化数组

// flat: 数组扁平化
let nested = [1, 2, [3, 4, [5, 6]]];
console.log(nested.flat()); // [1, 2, 3, 4, [5, 6]]
console.log(nested.flat(2)); // [1, 2, 3, 4, 5, 6]

// flatMap: 先映射再扁平化
let phrases = ["hello world", "the quick brown fox"];
let words = phrases.flatMap(phrase => phrase.split(' '));
console.log(words); // ['hello', 'world', 'the', 'quick', 'brown', 'fox']

实用方法组合示例

1. 数组去重

let numbers = [1, 2, 2, 3, 4, 4, 5];

// 方法1: Set + 扩展运算符
let unique1 = [...new Set(numbers)];
console.log(unique1); // [1, 2, 3, 4, 5]

// 方法2: filter
let unique2 = numbers.filter((item, index) => numbers.indexOf(item) === index);
console.log(unique2); // [1, 2, 3, 4, 5]

2. 数组分组

let users = [
    { name: 'Alice', age: 25, city: 'New York' },
    { name: 'Bob', age: 30, city: 'London' },
    { name: 'Charlie', age: 25, city: 'New York' }
];

// 按城市分组
let groupedByCity = users.reduce((groups, user) => {
    const city = user.city;
    if (!groups[city]) {
        groups[city] = [];
    }
    groups[city].push(user);
    return groups;
}, {});

console.log(groupedByCity);
// {
//   'New York': [{ name: 'Alice', ... }, { name: 'Charlie', ... }],
//   'London': [{ name: 'Bob', ... }]
// }

3. 数组排序和分页

let products = [
    { name: 'Laptop', price: 1000 },
    { name: 'Mouse', price: 25 },
    { name: 'Keyboard', price: 75 },
    { name: 'Monitor', price: 300 }
];

// 按价格排序
let sortedProducts = products.sort((a, b) => a.price - b.price);

// 分页函数
function paginate(array, pageSize, pageNumber) {
    return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
}

let page1 = paginate(sortedProducts, 2, 1);
console.log(page1); // [{ name: 'Mouse', price: 25 }, { name: 'Keyboard', price: 75 }]

方法速查表

这些方法涵盖了JavaScript数组操作的绝大多数场景，掌握它们能极大提高开发效率！