针对含对象的数组，如何根据条件给每个对象添加新的属性与属性值

假定有一个含若干对象的数组
const arr1 = [
{name:'Tom', grade:'A'},
{name:'Jack',grade: 'E'},
{name:'Mike',grade: 'C'},
{name:'John',grade: 'D'},
{name:'Ben',grade: 'E'},
{name:'Tony',grade: 'D'},
]

想通过比较grade的属性值的异同，动态添加新的属性value，并且value的值为数值型，当grade的属性值不同时（grade的值为任意长度的字符串），分别赋不同的数字值，当grade属性值相同时，赋相同的数字值。

const arr2 = [
{name:'Tom', grade:'A',value: 1},
{name:'Jack',grade: 'E', value: 2},
{name:'Mike',grade: 'C', value: 3},
{name:'John',grade: 'D', value: 4},
{name:'Ben',grade: 'E', value: 2},
{name:'Tony',grade: 'D',value: 4},
]

看看这样符不符合你的需求。

img

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <script>
        const arr1 = [
            { name: 'Tom', grade: 'A' },
            { name: 'Jack', grade: 'E' },
            { name: 'Mike', grade: 'C' },
            { name: 'John', grade: 'D' },
            { name: 'Ben', grade: 'E' },
            { name: 'Tony', grade: 'D' },
        ]
        const arr2 = [
            { name: 'Tom', grade: 'A', value: 1 },
            { name: 'Jack', grade: 'E', value: 2 },
            { name: 'Mike', grade: 'C', value: 3 },
            { name: 'John', grade: 'D', value: 4 },
            { name: 'Ben', grade: 'E', value: 2 },
            { name: 'Tony', grade: 'D', value: 4 },
        ]

        function Convert(arr1) {
            let cache = {};
            let res = JSON.parse(JSON.stringify(arr1))
            for (let i = 0; i < res.length; i++) {
                let grade = res[i].grade;
                if (cache[grade]) res[i].value = cache[grade]
                else res[i].value = cache[grade] = Object.keys(cache).length + 1
            }
            return res;
        }

        console.log(Convert(arr1));
        // 测试是否相等
        console.log(JSON.stringify(Convert(arr1)) == JSON.stringify(arr2));

    </script>
</body>

</html>

可以使用object记录用到的grade

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const arr1 = [
        { name: "Tom", grade: "A" },
        { name: "Jack", grade: "E" },
        { name: "Mike", grade: "C" },
        { name: "John", grade: "D" },
        { name: "Ben", grade: "E" },
        { name: "Tony", grade: "D" },
      ];

      let obj = {};
      const result = arr1.map((item, index) => {
        if (!obj[item.grade]) obj[item.grade] = index + 1;
        item.value = obj[item.grade] || index + 1;
        return item;
      });
      console.log("result", result);
    </script>
  </body>
</html>


<template>
  <div id="app">
    <HelloWorld v-model="searchText" />
    <!-- 等价于 -->
    <!-- <HelloWorld
      v-bind:value="searchText"
      v-on:input="searchText = $event"
    ></HelloWorld> -->
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',  //父组件
  components: {
    HelloWorld
  },
  data(){
    return{
      searchText:'',
      arr1 : [
        { name: "Tom", grade: "A" },
        { name: "Jack", grade: "E" },
        { name: "Mike", grade: "C" },
        { name: "John", grade: "D" },
        { name: "Ben", grade: "E" },
        { name: "Tony", grade: "D" },
      ]

    }
  },
  created(){
    let obj = {};
    const result = this.arr1.map((item, index) => {
      if (!obj[item.grade]) obj[item.grade] = index + 1
      item.value = obj[item.grade]
      return item;
    });
    console.log("result", result);
  },
  methods:{
   
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>