Vue3中如何过滤数组，筛选item=1的项提取指定字段重组新数组

直接用JavaScript原生数组的filter+map链式调用即可，Vue3环境不需要额外引入工具库，逻辑分两步：先筛选符合条件的项，再提取指定字段重组为新结构。

基础实现代码 #

let list = [
  {"name":"1000","properties":{"item":"1","unit":"DZN"}},
  {"name":"2000","properties":{"item":"1","unit":"CTN"}},
  {"name":"3000","properties":{"item":"2","unit":"DZN"}},
  {"name":"4000","properties":{"item":"3","unit":"CTN"}}
]

const result = list
  // 筛选properties.item等于"1"的项，加可选链避免properties为空时报错
  .filter(item => item.properties?.item === "1")
  // 提取需要的字段，重组为目标结构
  .map(item => ({
    name: item.name,
    unit: item.properties.unit
  }))

运行后result的输出就是你期望的结果：

[{"name":"1000", "unit":"DZN"}, {"name":"2000", "unit":"CTN"}]

Vue3响应式场景用法 #

如果你在Vue3组合式API中使用响应式数据，配合computed可以实现原数组变化时，筛选结果自动更新：

<script setup>
import { ref, computed } from 'vue'
// 定义响应式原始数组
const list = ref([
  {"name":"1000","properties":{"item":"1","unit":"DZN"}},
  {"name":"2000","properties":{"item":"1","unit":"CTN"}},
  {"name":"3000","properties":{"item":"2","unit":"DZN"}},
  {"name":"4000","properties":{"item":"3","unit":"CTN"}}
])

// 计算属性自动追踪依赖，原数组变化时自动重算
const filteredList = computed(() => {
  return list.value
    .filter(item => item.properties?.item === "1")
    .map(item => ({
      name: item.name,
      unit: item.properties.unit
    }))
})
</script>

注意事项 #

• 筛选条件里的"1"是字符串类型，如果你的数据中properties.item是数字类型，请把判断条件改为item.properties?.item === 1，避免隐式类型转换导致筛选失效。
• map回调中返回的是全新对象，不会修改原始数组的数据，不会触发响应式数据的意外更新。
• 如果你的业务场景需要兼容极低版本浏览器（如IE），可以把可选链?.去掉，改成item.properties && item.properties.item === "1"的判断写法即可。

内容的提问来源于stack exchange，提问作者Sona Rijesh