JS循环数组对象找出指定对象

发布时间：2023-05-23

一、从JS循环给数组里的对象添加属性

在实际开发中，我们可能需要在数组中的每个对象上添加一些属性，方便后续的计算或操作。我们可以通过JS循环数组对象的方式，为每个对象添加属性，具体代码实现如下：

const arr = [
  { name: 'Bob', age: 18 },
  { name: 'Lucy', age: 20 },
  { name: 'Tom', age: 22 }
];
arr.forEach((item, index) => {
  item.id = index + 1;
});
console.log(arr);
/*
输出结果：
[
  { name: 'Bob', age: 18, id: 1 },
  { name: 'Lucy', age: 20, id: 2 },
  { name: 'Tom', age: 22, id: 3 }
]
*/

二、JS循环数组对象删除指定对象

在实际开发中，我们可能需要从数组中删除指定的对象。我们可以通过JS循环数组对象的方式，找到需要删除的对象，然后使用数组的splice方法进行删除，具体代码实现如下：

const arr = [
  { name: 'Bob', age: 18 },
  { name: 'Lucy', age: 20 },
  { name: 'Tom', age: 22 }
];
const removeItem = { name: 'Lucy', age: 20 };
arr.forEach((item, index) => {
  if(item.name === removeItem.name && item.age === removeItem.age) {
    arr.splice(index, 1);
  }
});
console.log(arr);
/*
输出结果：
[
  { name: 'Bob', age: 18 },
  { name: 'Tom', age: 22 }
]
*/

三、JS循环遍历数组对象

JS循环遍历数组对象是非常常见的操作，我们可以使用for循环、forEach、map等方法对数组对象进行遍历，具体代码实现如下：

const arr = [
  { name: 'Bob', age: 18 },
  { name: 'Lucy', age: 20 },
  { name: 'Tom', age: 22 }
];
// 使用for循环遍历
for(let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
// 使用forEach遍历
arr.forEach(item => console.log(item));
// 使用map遍历
const newArr = arr.map(item => item.name);
console.log(newArr); // 输出结果：['Bob', 'Lucy', 'Tom']

四、数组对象去重JS

有时候我们从后台获取的数据可能包含重复的对象，我们需要对数组对象进行去重。我们可以通过JS循环遍历数组对象的方式，使用ES6的Set去重，具体代码实现如下：

const arr = [
  { name: 'Bob', age: 18 },
  { name: 'Lucy', age: 20 },
  { name: 'Tom', age: 22 },
  { name: 'Bob', age: 18 }
];
const newArr = Array.from(new Set(arr));
console.log(newArr);
/*
输出结果：
[
  { name: 'Bob', age: 18 },
  { name: 'Lucy', age: 20 },
  { name: 'Tom', age: 22 }
]
*/

五、对象数组拼接JS

在实际开发中，我们可能需要将多个对象数组进行拼接。我们可以通过JS循环遍历数组对象的方式，使用concat方法进行拼接，具体代码实现如下：

const arr1 = [
  { name: 'Bob', age: 18 },
  { name: 'Lucy', age: 20 },
];
const arr2 = [
  { name: 'Tom', age: 22 },
  { name: 'Jack', age: 24 },
];
const newArr = arr1.concat(arr2);
console.log(newArr);
/*
输出结果：
[
  { name: 'Bob', age: 18 },
  { name: 'Lucy', age: 20 },
  { name: 'Tom', age: 22 },
  { name: 'Jack', age: 24 },
]
*/

六、JS找出数组对象中最大的数

如果我们有一个对象数组，每个对象中都有一个数字属性，我们可以通过JS循环遍历数组对象的方式，找出其中数字属性的最大值，具体代码实现如下：

const arr = [
  { name: 'Bob', score: 80 },
  { name: 'Lucy', score: 90 },
  { name: 'Tom', score: 85 }
];
let maxScore = 0;
arr.forEach(item => {
  maxScore = Math.max(maxScore, item.score);
});
console.log(maxScore); // 输出结果：90

七、检测JS对象是数组类型

如果我们需要判断一个JS对象是否为数组类型，我们可以使用Array.isArray()方法，具体代码实现如下：

const arr = [1, 2, 3];
console.log(Array.isArray(arr)); // 输出结果：true
const obj = { name: 'Bob' };
console.log(Array.isArray(obj)); // 输出结果：false

八、创建对象或数组JS

如果我们需要创建一个新的JS对象或数组，可以使用对象字面量或数组字面量进行创建，具体代码实现如下：

// 创建新的对象
const newObj = { name: 'Bob', age: 18 };
console.log(newObj); // 输出结果：{ name: 'Bob', age: 18 }
// 创建新的数组
const newArr = [1, 2, 3];
console.log(newArr); // 输出结果：[1, 2, 3]

以上就是JS循环数组对象找出指定对象的一些常见操作，这些操作在实际开发中非常常见，希望能对大家有所帮助。

推荐文章