filter方法过滤出id=1的数组

假设有一个包含多个对象的数组，每个对象都有一个id属性，我们可以使用filter方法来过滤出id为1的对象。

示例代码如下：

const arr = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
  { id: 1, name: '赵六' },
];

const filteredArr = arr.filter(obj => obj.id === 1);

console.log(filteredArr); // [{ id: 1, name: '张三' }, { id: 1, name: '赵六' }]

在上面的代码中，我们定义了一个数组arr，其中包含了多个对象，每个对象都有一个id属性。

然后我们使用filter方法来过滤出id为1的对象，具体实现是在filter方法的回调函数中，通过判断obj.id是否等于1来决定是否保留该对象。

最终的结果是一个新的数组filteredArr，其中只包含了id为1的对象。

相关问题

filter匹配某个数组对应的数组对象的id的数组对象及过滤前下标

在JavaScript中，如果你有一个数组，比如`users`，它是一个对象数组，每个对象都有一个`id`属性，你可以使用`Array.prototype.filter()`方法来筛选出那些满足特定条件（例如，id等于某个值）的对象，并返回一个新的数组。同时，如果你想保留原数组中这些元素的索引，你可以创建一个新的数组，其中包含元组，包含对象和它的原始索引。

这里是一个简单的示例：

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

// 定义一个id值
const targetId = 2;

// 使用filter()方法并保存索引
let filteredUsersWithIndex = users
  .filter((user, index) => user.id === targetId)
  .map((user, index) => ({ user, originalIndex: index }));

console.log(filteredUsersWithIndex);
// 输出：[{ user: { id: 2, name: 'Bob' }, originalIndex: 1 }]

过滤Vue3响应式数组

在Vue3中，可以使用 `computed` 和 `watchEffect` 来过滤响应式数组。

下面是使用 `computed` 来过滤响应式数组的示例代码：

import { ref, computed } from 'vue'

const list = ref([
  { id: 1, name: 'apple', category: 'fruit' },
  { id: 2, name: 'banana', category: 'fruit' },
  { id: 3, name: 'carrot', category: 'vegetable' },
  { id: 4, name: 'orange', category: 'fruit' },
])

const filteredList = computed(() => {
  return list.value.filter(item => item.category === 'fruit')
})

在上面的代码中，我们使用 `computed` 创建了一个新的响应式数组 `filteredList`，它会根据 `list` 数组中的元素进行过滤，只保留 `category` 为 'fruit' 的元素。

如果你需要在过滤条件发生变化时重新过滤数组，可以使用 `watchEffect` 监听过滤条件的变化，示例代码如下：

import { ref, computed, watchEffect } from 'vue'

const list = ref([
  { id: 1, name: 'apple', category: 'fruit' },
  { id: 2, name: 'banana', category: 'fruit' },
  { id: 3, name: 'carrot', category: 'vegetable' },
  { id: 4, name: 'orange', category: 'fruit' },
])

const filterCategory = ref('fruit')

const filteredList = computed(() => {
  return list.value.filter(item => item.category === filterCategory.value)
})

watchEffect(() => {
  filteredList.value // 重新过滤数组
})

在上面的代码中，我们创建了一个新的响应式变量 `filterCategory`，用于存储过滤条件。然后，我们使用 `watchEffect` 监听 `filterCategory` 的变化，并在回调函数中重新过滤数组。当 `filterCategory` 发生变化时，`filteredList` 会自动更新。