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')
    },
}