使用Map优雅写多元判断

想要实现的效果

使用el-slider组件，有不同的间断值，使用Map写多元判断，实现只能为我设定的间断值。

Map

• new Map([iterable])
• Iterable 可以是一个数组或者其他 iterable 对象 Map 的键可以是任意值（包括函数、对象、基本类型），其元素为键值对(两个元素的数组，例如: [[ 1, ‘one’ ],[ 2, ‘two’ ]])。
• 每个键值对都会添加到新的 Map。
• null 会被当做 undefined。

页面

 <el-popover placement="top" trigger="hover">
   <div class="slider-popper">
     {{ safeForm.bandwidthSize | formatUnits }}
   </div>
   <el-slider
     slot="reference"
     :min="0"
     :max="10000"
     @change="changeBandWidth(safeForm.bandwidthSize)"
     v-model="safeForm.bandwidthSize"
   >
   </el-slider>
 </el-popover>

实现

  methods: {
    changeBandWidth(val) {
      const actions = new Map([
        [
          { min: 0, max: 50 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 50;
            }, 100);
          },
        ],
        [
          { min: 50, max: 100 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 100;
            }, 100);
          },
        ],
        [
          { min: 100, max: 200 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 200;
            }, 100);
          },
        ],
        [
          { min: 200, max: 300 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 300;
            }, 100);
          },
        ],
        [
          { min: 300, max: 400 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 400;
            }, 100);
          },
        ],
        [
          { min: 400, max: 500 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 500;
            }, 100);
          },
        ],
        [
          { min: 500, max: 600 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 600;
            }, 100);
          },
        ],
        [
          { min: 600, max: 700 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 700;
            }, 100);
          },
        ],
        [
          { min: 700, max: 800 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 800;
            }, 100);
          },
        ],
        [
          { min: 800, max: 900 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 900;
            }, 100);
          },
        ],
        [
          { min: 900, max: 1000 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 1000;
            }, 100);
          },
        ],
        [
          { min: 1000, max: 2000 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 2000;
            }, 100);
          },
        ],
        [
          { min: 2000, max: 3000 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 3000;
            }, 100);
          },
        ],
        [
          { min: 3000, max: 4000 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 4000;
            }, 100);
          },
        ],
        [
          { min: 4000, max: 5000 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 5000;
            }, 100);
          },
        ],
        [
          { min: 5000, max: 6000 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 6000;
            }, 100);
          },
        ],
        [
          { min: 6000, max: 7000 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 7000;
            }, 100);
          },
        ],
        [
          { min: 7000, max: 8000 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 8000;
            }, 100);
          },
        ],
        [
          { min: 8000, max: 9000 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 9000;
            }, 100);
          },
        ],
        [
          { min: 9000, max: 10000 },
          () => {
            setTimeout(() => {
              this.safeForm.bandwidthSize = 10000;
            }, 100);
          },
        ],
      ]);

      let action = [...actions].filter(
        ([key, value]) => val > key.min && val < key.max
      );
      action.forEach(([key, value]) => value.call(this));
    },
  },