如何在JS和Vue中使用map創建新陣列

我正在嘗試在 JavaScript 和 Vue 中設定一個 map 方法，該方法創建一個新的物件陣列，同時僅回傳每個物件中的選定項。為此，我設定了一個 UI，其中包含對應于 2 個單獨物件的 2 個復選框：

    <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: '[email protected]',
    description: 'Description 1'
  },
  {
    id: 2,
    name: 'sam wilson',
    title: 'falcon',
    cellnum: '098-765-4321',
    email: '[email protected]',
    description: 'Description 2'
  },
]

復選框輸入上的 selectObject 處理程式將選定物件的 id 推送到 checkBoxArray：

const checkBoxArray = ref([])

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

然后，使用一個 watch 屬性來監視 checkBoxArray.value 的變化，然后呼叫一個函式，該函式使用 map 來創建一個以選定物件的 id 為目標的新陣列：

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

我的期望是創建的新陣列將是一個陣列，其物件僅包含原始物件的 id、名稱和標題。例子：

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

但是，我目前只回傳一個帶有所選物件 id 的新陣列。如何設定地圖并在 watch 屬性中查找方法以創建一個新陣列，其中的物件僅包含 id、name 和 title？

這是完整的代碼：

<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: '[email protected]',
    description: 'Description 1'
  },
  {
    id: 2,
    name: 'sam wilson',
    title: 'falcon',
    cellnum: '098-765-4321',
    email: '[email protected]',
    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>

uj5u.com熱心網友回復：

沒有按第二個引數過濾欄位的map 函式語法：

                                                             // 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
 }
})

標籤：javascript 数组 Vue.js 目的 Vuejs3

上一篇：如何根據兩個物件鍵合并兩個不同長度的物件陣列

下一篇：如何替換陣列中所有出現的物件鍵？(JavaScript)