在JavaScript中,数组是常用的数据结构,特别是当数组的元素是对象时,我们经常需要对这样的数组进行各种操作。下面介绍一些常用的数组方法:

假设我们有一个包含多个用户对象的数组,每个用户对象有id、name和age属性。

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

1. forEach

遍历数组,对每个元素执行操作,例如打印每个用户的名字:

users.forEach(user => {
  console.log(user.name);
});

2. map

将每个用户的名字提取出来,形成一个新的数组:

let names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Charlie', 'David']

3. filter

过滤出年龄大于30的用户:

let olderThan30 = users.filter(user => user.age > 30);
console.log(olderThan30); // [{ id: 3, name: 'Charlie', age: 35 }, { id: 4, name: 'David', age: 40 }]

4. find

查找第一个年龄大于30的用户:

let user = users.find(user => user.age > 30);
console.log(user); // { id: 3, name: 'Charlie', age: 35 }

5. findIndex

查找第一个年龄大于30的用户的索引:

let index = users.findIndex(user => user.age > 30);
console.log(index); // 2

6. some

检查数组中是否有年龄大于30的用户:

let hasUserOlderThan30 = users.some(user => user.age > 30);
console.log(hasUserOlderThan30); // true

7. every

检查是否所有用户都年龄大于20:

let allOlderThan20 = users.every(user => user.age > 20);
console.log(allOlderThan20); // true

8. reduce

计算所有用户的年龄总和:

let totalAge = users.reduce((sum, user) => sum + user.age, 0);
console.log(totalAge); // 130

9. sort

按年龄从小到大排序(注意:sort会改变原数组,如果需要不改变原数组,可以先复制一份):

// 按年龄升序
let sortedUsers = users.slice().sort((a, b) => a.age - b.age);
console.log(sortedUsers);
// 按年龄降序
let sortedUsersDesc = users.slice().sort((a, b) => b.age - a.age);
console.log(sortedUsersDesc);

10. 使用some来模拟includes的功能(针对对象内容)

由于对象是引用类型,直接使用includes无法根据内容判断,但我们可以用some来实现:

// 检查数组中是否包含某个特定id的用户
let hasUserWithId2 = users.some(user => user.id === 2);
console.log(hasUserWithId2); // true

// 如果要检查整个对象,由于对象引用不同,即使内容相同也会返回false,所以通常不直接使用includes。

这些方法在处理对象数组时非常强大和灵活,可以根据需要组合使用。

例如合并两个数组并去重

核心实现步骤
 
1. 合并数组:使用  [...arr1, ...arr2]  或  arr1.concat(arr2)  合并两个数组。

2. 去重逻辑:用  Map  或对象存储已出现的唯一标识,仅保留首次出现的对象。
 
示例代码(以“id”为唯一标识)

const arr1 = [{id: 1, name: 'a'}, {id: 2, name: 'b'}];
const arr2 = [{id: 2, name: 'b'}, {id: 3, name: 'c'}];

// 方法1:用Map实现(推荐,更简洁)
const uniqueArr = [...new Map([...arr1, ...arr2].map(item => [item.id, item])).values()];

// 方法2:用对象实现(兼容性更优)
const obj = {};
[...arr1, ...arr2].forEach(item => {
  if (!obj[item.id]) obj[item.id] = item; // 只存首次出现的对象
});
const uniqueArr2 = Object.values(obj);

console.log(uniqueArr); // [{id:1,name:'a'},{id:2,name:'b'},{id:3,name:'c'}]

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐