JS和Vue中如何使用map新建数组

Question

我正在尝试在 JavaScript 和 Vue 中设置一个映射方法，该方法创建一个新的 object 数组，同时仅返回每个 object 中的选定项目。为此，我设置了一个 UI，其中有 2 个复选框对应于 2 个单独的 objects:

    <div v-for="object in objects" :key="object.id" class="max-w-sm rounded overflow-hidden shadow-lg justify-center">
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">{{ object.name }}</div>
      </div>
      <span class="flex-1 flex mt-8 m-2">
        <span class="flex flex-col">
          <input v-model="checkBoxArray" :value="object.id" @click="selectObject(object.id)" type="checkbox" class="h-5 w-5" />
        </span>
      </span>
    </div>

  const objects = [
  {
    id: 1,
    name: 'bucky barnes',
    title: 'winter soldier',
    cellnum: '123-456-7890',
    email: 'barnes@hydra.com',
    description: 'Description 1'
  },
  {
    id: 2,
    name: 'sam wilson',
    title: 'falcon',
    cellnum: '098-765-4321',
    email: 'falcon@avengers.com',
    description: 'Description 2'
  },
]

复选框输入上的 selectObject 处理程序将所选 object 的 ID 推送到 checkBoxArray:

const checkBoxArray = ref([])

const selectObject = (id) => {
  checkBoxArray.value.push(id)
}

然后，watch 属性用于监视对 checkBoxArray.value 的更改，然后调用一个函数，该函数使用 map 创建一个新数组，目标是所选 object 的 id :

watch(checkBoxArray.value, () => {
  const storedObjects = objects.map(val => checkBoxArray.value.find(obj => obj === val.id), ['id', 'name', 'title'])
  console.log(storedObjects)
})

我的期望是创建的新数组将是一个 object 的数组，仅包含原始 object 中的 ID、名称和标题。示例：

{id: 1, name: 'bucky barnes', title: 'winter soldier'}

但是，我目前只返回一个新数组，其中包含所选 object 的 ID。我该如何设置地图并在手表属性中找到方法来创建一个 object 仅包含 ID、名称和标题的新数组？

完整代码如下：

<template>
  <div>
    <div v-for="object in objects" :key="object.id" class="max-w-sm rounded overflow-hidden shadow-lg justify-center">
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">{{ object.name }}</div>
      </div>
      <span class="flex-1 flex mt-8 m-2">
        <span class="flex flex-col">
          <input v-model="checkBoxArray" :value="object.id" @click="selectObject(object.id)" type="checkbox" class="h-5 w-5" />
        </span>
      </span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';

  const objects = [
  {
    id: 1,
    name: 'bucky barnes',
    title: 'winter soldier',
    cellnum: '123-456-7890',
    email: 'barnes@hydra.com',
    description: 'Description 1'
  },
  {
    id: 2,
    name: 'sam wilson',
    title: 'falcon',
    cellnum: '098-765-4321',
    email: 'falcon@avengers.com',
    description: 'Description 2'
  },
]

const checkBoxArray = ref([])

const selectObject = (id) => {
  checkBoxArray.value.push(id)
}

watch(checkBoxArray.value, () => {
  const storedObjects = objects.map(val => checkBoxArray.value.find(obj => obj === val.id), ['id', 'name', 'title'])
  console.log(storedObjects)
})

onMounted(() => {
  console.log(objects)
})
</script>

Answer 1

map function 没有通过第二个参数过滤字段的语法：

                                                             // This parameter will not work
                                                                          
objects.map(val => checkBoxArray.value.find(obj => obj === val.id), ['id', 'name', 'title'])

你应该先过滤存储的对象，然后使用map转换它们：

const storedObjects = objects
.filter(obj => checkBoxArray.value.find(id => id === obj.id)) // this returns the array of object that are stored
.map(elm => {
 return {
   id: elm.id,
   title: elm.title,
   name: elm.name
 }
})

JS和Vue中如何使用map新建数组

How to use map in JS and Vue to create a new array

javascript

arrays

object

vue.js

vuejs3