Vue 3 + TypeScript的方式，将对象的键名和键值提取到数组中

1、Vue 3 + TypeScript的方式，将对象的键名和键值提取到数组中

已知data1如下：

data1 = [

            { A: 11,B: 22,C: 33,D: 44 },

        ],

得到data2如下

data2 = [
            {
                name: "A",
                value: "11"
            },
            {
                name: "B",
                value: "22"
            },
            {
                name: "C",
                value: "33"
            }
        ]

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    const data1 = [
      { A: 11, B: 22, C: 33, D: 44 },
    ];

    const data2 = Object.keys(data1[0]) // Get keys of the first object in data1
      .filter(key => ['A', 'B', 'C'].includes(key)) // Filter keys A, B, C
      .map(key => ({
        name: key, // Set name as the key (A, B, C)
        value: data1[0][key].toString(), // Set value as the corresponding value converted to string
      }));

    return {
      data2,
    };
  },
});
</script>

2、使用Vue 3 + TypeScript的方法，将data1的键名（A、B、C）和对应的值赋值给data2的name和value字段

data1如下：

data1 = {
            A: 1, B: 2, C: 3, D: 4
        }

得到data2如下：

data2 = [
            {
                name: 'A',
                value: 1,
            },
            {
                name: 'B',
                value: 2,
            },
        ]

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    const data1 = {
      A: 1,
      B: 2,
      C: 3,
      D: 4,
    };

    const data2 = Object.keys(data1)
      .filter(key => ['A', 'B'].includes(key))
      .map(key => ({
        name: key,
        value: data1[key],
      }));

    return {
      data2,
    };
  },
});
</script>