js动态构建属性名并访问其对象属性(动态属性访问)

在开发中有时会遇到这种情况：你写了很多的函数，写完发现他们的操作逻辑都是相同的，但是原始数据不同，如：

        /* 获取 区域，道路 拥堵指数对应的色标 */
        makeCongestionColor(num) {
            let outColor = '#fff'
            let colorMap = {
                '[-10000, 0]': '#fff',
                '[0, 2]': 'rgb(0, 128, 0)',
                '[2, 4]': 'rgb(153, 204, 0)',
                '[4, 6]': 'rgb(255, 255, 0)',
                '[6, 8]': 'rgb(255, 153, 0)',
                '[8, 10000]': 'rgb(255, 0, 0)'
            }
            for (const [range, color] of Object.entries(colorMap)) {
                const [start, end] = JSON.parse(range)
                if (start <= parseFloat(num) && parseFloat(num) < end) {
                    outColor = color
                }
            }
            return outColor
        },
            
            
    	/* 获取延时指数TTI对应的色标 */
        makeTtiColor(num) {
            let outColor = '#fff'
            let colorMap = {
                '[-10000, 1]': '#fff',
                '[1, 1.3]': 'rgb(0, 128, 0)',
                '[1.3, 1.6]': 'rgb(153, 204, 0)',
                '[1.6, 1.9]': 'rgb(255, 255, 0)',
                '[1.9, 2.2]': 'rgb(255, 153, 0)',
                '[2.2, 10000]': 'rgb(255, 0, 0)'
            }
            for (const [range, color] of Object.entries(colorMap)) {
                const [start, end] = JSON.parse(range)
                if (start <= parseFloat(num) && parseFloat(num) < end) {
                    outColor = color
                }
            }
            return outColor
        },

为此我们需要改造一下这个函数：将colorMap的数据从外部传入：如：

    makeTtiColor(num, colorMap) {
            let outColor = '#fff'
            for (const [range, color] of Object.entries(colorMap)) {
                const [start, end] = JSON.parse(range)
                if (start <= parseFloat(num) && parseFloat(num) < end) {
                    outColor = color
                }
            }
            return outColor
        },

但是改造完成之后你会发现每次使用这个函数的时候就会很繁琐，colorMap就重复写了很多次，为此我们可以直接将colorMap在methods文件中定义好，然后在模板页面中直接传入类型即可。如：

src/mixin/calculationIndicators.js

    // 我是在mixin中定义的，如果是别的js文件中使用方法也是大相径庭的
    export const calculationIndicators = {
      data() {
        return {
          congestionColorMap: {
            '[-10000, 0]': '#fff',
            '[0, 2]': 'rgb(0, 128, 0)',
            '[2, 4]': 'rgb(153, 204, 0)',
            '[4, 6]': 'rgb(255, 255, 0)',
            '[6, 8]': 'rgb(255, 153, 0)',
            '[8, 10000]': 'rgb(255, 0, 0)'
          },
    
          ttiColorMap: {
            '[-10000, 1]': '#fff',
            '[1, 1.3]': 'rgb(0, 128, 0)',
            '[1.3, 1.6]': 'rgb(153, 204, 0)',
            '[1.6, 1.9]': 'rgb(255, 255, 0)',
            '[1.9, 2.2]': 'rgb(255, 153, 0)',
            '[2.2, 10000]': 'rgb(255, 0, 0)'
          },
    
          aArr: [1, 2, 3],
          bArr: [4, 5, 6]
        }
      },
      methods: {
        /**
         * @Event 获取 路段、区域，道路 拥堵指数对应的色标
         * @param num: 指数的数据
         * @param type: 类型（tti 还是 拥堵指数[congestion]）
         * @description:
         * @author: mhf
         * @time: 2024-01-08 11:11:01
         **/
        makeColor(num, type) {
          console.log(this[`${type}ColorMap`], "this[`${type}ColorMap`]")
          let outColor = '#fff'
          for (const [range, color] of Object.entries(this[`${type}ColorMap`])) {
            const [start, end] = JSON.parse(range)
            if (start <= parseFloat(num) && parseFloat(num) < end) {
              outColor = color
            }
          }
          return outColor
        },
    
        getArr(type) {
          console.log(this[`${type}Arr`], "this[`${type}Arr`]")
          return this[`${type}Arr`]
        }
      }
    }
    

使用如下：

xxx.vue文件

    import { calculationIndicators } from '@/mixin/calculationIndicators'
    export default {
        mixins: [calculationIndicators],
        created() {
            this.makeColor(2.2, "congestion")
            this.getArr('b')
        },
    }