vue 使用js new Map（）优化多个if else 执行方法

最新推荐文章于 2024-06-01 15:46:07 发布
最新推荐文章于 2024-06-01 15:46:07 发布
阅读量646 收藏
点赞数
分类专栏： 实际开发-vue知识 文章标签： vue.js javascript new map （） 优化多个if else
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53579656/article/details/134358118
版权

前言

  • 在实际开发中根据业务需求我们经常要判断情况，一个if 我们科技直接使用ES6就可以解决

  • 经常会出现根据不同的条件执行不同的方法，这是就会有多个if else 看起不太美观也费劲

  • js new map （）就可以解决这个问题，它就是一个容器，我们可以通过set，get存取东西

  • map 是以key value 形式存在的，只要我们把value存成方法，并且执行就可以解决问题了

  • 注意：map 的key注意类型，比如存的时候用的数字1，取的时候用字符串1，也会导致取不到

图片展示-注意：当你格式存储正确，取不到值报错可能是key类型不对

代码实现-dom-可以直接复制查看

<template>
  <div class="result-box">
    <el-form :inline="true" :model="form">
      <el-form-item label="第一个值">
        <el-input v-model="form.oneprice" placeholder="输入值"></el-input>
      </el-form-item>
​
      <el-form-item label="运算规则">
        <el-select v-model="form.region" placeholder="选择计算规则">
          <el-option label="乘法" value="1"></el-option>
          <el-option label="加法" value="2"></el-option>
          <el-option label="减法" value="3"></el-option>
        </el-select>
      </el-form-item>
​
      <el-form-item label="第二个值">
        <el-input v-model="form.twoprice" placeholder="输入值"></el-input>
      </el-form-item>
​
      <el-form-item label="计算结果">
        <el-input v-model="form.result" placeholder="请点击计算结果"></el-input>
      </el-form-item>
​
      <el-form-item>
        <el-button type="primary" @click="onSubmit">计算结果</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
​
<script>
export default {
  name: 'Newmap',
  data () {
    return {
      form: {
        // 计算值
        oneprice: null,
        twoprice: null,
        // 计算规则
        calculaterule: null,
        // 计算结果
        result: null
      },
      map: null
    }
  },
  created () {
    this.$nextTick(() => {
      this.map = new Map([
        ['1', this.calculatemultiplication],
        ['2', this.calculateaddition],
        ['3', this.calculatesubtraction]
      ])
    })
  },
  methods: {
    // x - 第一个值
    // y - 第二个值
    // 乘法
    calculatemultiplication (x, y) {
      this.$message.success('执行乘法')
      this.form.result = x * y
    },
    // 加法
    calculateaddition (x, y) {
      this.$message.success('执行加法')
      this.form.result = Number(x) + Number(y)
    },
    // 减法
    calculatesubtraction (x, y) {
      this.$message.success('执行减法')
      this.form.result = Number(x) - Number(y)
    },
​
    // 计算结果
    onSubmit () {
      // if else - 优化之前
      // if (this.form.region == 1) {
      //   this.calculatemultiplication(this.form.oneprice, this.form.twoprice)
      // } else if (this.form.region == 2) {
      //   this.calculateaddition(this.form.oneprice, this.form.twoprice)
      // } else if (this.form.region == 3) {
      //   this.calculatesubtraction(this.form.oneprice, this.form.twoprice)
      // } else {
      //   // 默认处理
      // }
​
      // 使用new map （）优化之后
      let dispose = this.map.get(this.form.region)
      dispose(this.form.oneprice, this.form.twoprice)
    }
  }
}
</script>
​
<style lang="scss" scoped>
.result-box {
  padding: 40px 20px;
}
</style>
 

 

总结：
 

经过这一趟流程下来相信你也对 vue 使用js new Map（）优化多个if else 执行方法 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！
 

 

 
 
有什么不足的地方请大家指出谢谢 -- 風过无痕
 


                

        

        

    




    

      

        

            

              
                
                  -風过无痕
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
用Vue.js方法创建模板并使用多个模板合成

				
			

			

				

					10-16
				

			

		

		

			
				
在本篇文章中小编给大家分享了关于如何使用Vue.js方法创建模板并使用多个模板合成的相关知识点内容，需要的朋友们学习下。

			
		

	



                

              
                



	

		

			

				
					
vue使用map代替Aarry数组循环遍历的方法

				
			

			

				

					11-21
				

			

		

		

			
				
因此使用map，让数组（原本是list）变成一个map集合（key-value形式），把主键id当做key，下标当做value，一一对应，需要的时候直接使用map.get(key)就可以获取到对应的value 1.在data{}中先定义一个map全局变量   2...

			
		

	



                


  
              

                


	

		

			

				
					
Set集合与Map集合

				
			

			

				

					syy的博客
				

				

					11-09
					
					2652
					
				

			

		

		

			
				
ES6中Set集合与Map集合

			
		

	





	

		

			

				
					
vue遍历Map，Map在vue中的使用方法

					
热门推荐

				
			

			

				

					weixin_38897313的博客
				

				

					11-27
					
					6万+
					
				

			

		

		

			
				
Map在vue中的使用方法：
html：遍历的时候要遍历两遍
<template>
  <div class="course">
       <div class="">
           <div class="pt0 ctRow">
                <ul class="ctNavbar">
          ...

			
		

	



		

			
		



	

		

			

				
					
vue遍历new Map()对象数据

				
			

			

				

					qq_15769147的博客
				

				

					05-28
					
					3626
					
				

			

		

		

			
				
data () {
  return {
    map: new Map()
  }
},
mounted () {
  this.map.set('a', [{ name: 'a', age: 18 }]);
  this.map.set('b', [{ name: 'b', age: 20 }]);
}

<li v-for="[key, value] of map" :key="key">
  <span>key: {{ key }}</span>
  <p

			
		

	





	

		

			

				
					
js 多个if else如何优化？

				
			

			

				

					weixin_42178050的博客
				

				

					03-22
					
					255
					
				

			

		

		

			
				
js 多个if else如何优化，复杂条件优化

			
		

	





	

		

			

				
					
JavaScript之if else分支优化

				
			

			

				

					m0_67584973的博客
				

				

					04-25
					
					163
					
				

			

		

		

			
				
在项目中我们经常会用到判断，if else过多的情况下，使代码阅读起来麻烦，扩展性较差，那我们就来看看if else如何做优化的吧

			
		

	





	

		

			

				
					
Vue--set和map

				
			

			

				

					m0_67403188的博客
				

				

					04-27
					
					1831
					
				

			

		

		

			
				
1.set
2.map
含义：Javascript的对象 (Object)，本质上是键值对的集合(Hash结构)，但是传统上只能用字符串当作键。
ES6提供了Map数据结构，它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
Map的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。
const m = new Map();
const o = {p : 'Hello World'};
m.set(o,'content');
document.w

			
		

	





	

		

			

				
					
代码优化之if-else

				
			

			

				

					zzqz的博客
				

				

					01-09
					
					302
					
				

			

		

		

			
				
前言
当项目中有越来越多的 if else的时候，不免会有些头痛，一个接着一个，一层嵌套一层，十分影响代码可读性和代码维护。

为了解决这个问题，在这里以购买订单状态为例举例

优化过程
刚开始拿到需求的时候，可能会写出以下的代码：
	// 获取状态
	let status = getStatus()
	if (status === 'waiting') {
		console.log('等待支付...

			
		

	





	

		

			

				
					
vue.js 使用v-if v-else发现没有执行解决办法

				
			

			

				

					01-19
				

			

		

		

			
				
最近在学习Vue，因为刚开始学习，所以总会遇到这样那样的问题，今天要说的一个错误就是在看Vue的官方文档的时候，发现在使用v-if和v-else指令的时候，相应的内容都出现了 初始代码：  <div v-if=Math.random> 0.5>  ...

			
		

	





	

		

			

				
					
代码中大量的if/else，你有什么优化方案?

				
			

			

				

					不断学习，不断进步，提高自己
				

				

					01-29
					
					312
					
				

			

		

		

			
				
代码中大量的if/else，你有什么优化方案?
观点一：
前期迭代懒得优化，来一个需求，加一个if，久而久之，就串成了一座金字塔。

当代码已经复杂到难以维护的程度之后，只能狠下心重构优化。那，有什么方案可以优雅的优化掉这些多余的if/else?
1. 提前return
这是判断条件取反的做法，代码在逻辑表达上会更清晰，看下面代码：

其实，每次看到上面这种代码，我都心里抓痒，完全可以先判断...

			
		

	





	

		

			

				
					
Vue学习笔记六：element-ui中表格单元格合并（多个if else语句的优化）

				
			

			

				

					Ocean111best的博客
				

				

					08-12
					
					1235
					
				

			

		

		

			
				
最近平台中有一个需求：读取excel文件，并将表格显示在前端。之前我们实现了将一个json数据读取之后放到表格里（直接读取excel也差不多）。实现这个不难，主要是合并单元格有些麻烦，element-ui自己提供了合并行或列的计算方法：span-method，但是首先要处理下合并的单元格数据。

合并前：



合并后：



实现步骤简单来说有两步，这里会逐步展开来说，也会说明下每一步最开始的写法，然后一步步优化，消除多个 if else 语句，使代码更加简洁，这个过程中逐步地进行抽象封装。

一、读..

			
		

	





	

		

			

				
					
真香！我终于干掉了该死的if-else

				
			

			

				

					varyall的专栏
				

				

					04-11
					
					1023
					
				

			

		

		

			
				
if else 是所有高级编程语言都有的必备功能。但现实中的代码往往存在着过多的 if else。



图片来自 Pexels

虽然 if else 是必须的，但滥用 if else 会对代码的可读性、可维护性造成很大伤害，进而危害到整个软件系统。

现在软件开发领域出现了很多新技术、新概念，但 if...else 这种基本的程序形式并没有发生太大变化。

使用好 if else 不仅对于现在...

			
		

	





	

		

			

				
					
this.$set()，new Map（）的用法，ref 的用法，this.$children，this.$parent

				
			

			

				

					丁贵龙学习技术的博客
				

				

					10-21
					
					573
					
				

			

		

		

			
				
this.$set()用法
this.$set()，new Map（）的用法，ref 的用法，this.$children，this.$parent

			
		

	





	

		

			

				
					
vue2中使用es6的map实现的发布任务

				
			

			

				

					柠的博客
				

				

					04-26
					
					391
					
				

			

		

		

			
				
在vue2中实现一个由es6的map实现的发布任务页遇到的问题

			
		

	





	

		

			

				
					
Vue2进阶笔记

				
			

			

				

					hupei
				

				

					01-09
					
					1104
					
				

			

		

		

			
				
Vue2进阶笔记，受益于尚硅谷天禹老师，全文共三万余字。

			
		

	





	

		

			

				
					
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)

				
			

			

				

					JIngJaneIL的博客
				

				

					05-28
					
					1199
					
				

			

		

		

			
				
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。

			
		

	





	

		

			

				
					
Vue3实战笔记（52）—Vue 3封装持仓分析饼图

				
			

			

				

					山花的博客
				

				

					05-30
					
					517
					
				

			

		

		

			
				
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。

			
		

	





	

		

			

				
					
vue3 vue-draggable-next 实现拖拽穿梭框效果

					
最新发布

				
			

			

				

					游九尘的博客
				

				

					06-01
					
					292
					
				

			

		

		

			
				
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。

			
		

	





	

		

			

				
					
vue2多线程处理切片上传文件请使用详细的代码实现

				
			

			

				

					06-01
				

			

		

		

			
				
下面是一个使用 Web Workers 在 Vue.js 2 中实现切片上传文件的示例代码：

1. 创建 worker.js 文件，该文件包含要在后台线程中执行的 JavaScript 代码。例如：

```
// worker.js

// 监听主线程发送的消息
self.addEventListener('message', function(e) {
  const data = e.data;

  if (data.type === 'slice') {
    // 如果接收到的消息类型是 'slice'
    const file = data.file;
    const start = data.start;
    const end = data.end;

    // 读取文件切片并将其发送回主线程
    const reader = new FileReader();
    reader.onload = function(e) {
      const slice = e.target.result;
      self.postMessage({ type: 'slice', slice });
    };
    reader.readAsArrayBuffer(file.slice(start, end));
  } else if (data.type === 'merge') {
    // 如果接收到的消息类型是 'merge'
    const slices = data.slices;
    const filename = data.filename;

    // 合并文件切片并将其发送回主线程
    const blob = new Blob(slices);
    const url = URL.createObjectURL(blob);
    self.postMessage({ type: 'merge', url, filename });
  }
});
```

2. 在 Vue.js 组件中创建一个 Worker 对象，并将 worker.js 文件作为参数传递给它。例如：

```
// MyComponent.vue

export default {
  data() {
    return {
      file: null, // 上传的文件
      slices: [], // 文件切片
      sliceSize: 1024 * 1024, // 切片大小
      uploaded: false, // 是否上传完成
      url: null // 上传完成后文件的 URL
    };
  },
  methods: {
    sliceFile() {
      // 读取文件并切片
      const file = this.file;
      const sliceSize = this.sliceSize;
      const slices = [];
      let start = 0;
      let end = sliceSize;
      while (start < file.size) {
        slices.push({ start, end });
        start = end;
        end = start + sliceSize;
        if (end > file.size) {
          end = file.size;
        }
      }
      this.slices = slices;

      // 创建一个 Worker 对象
      const worker = new Worker('worker.js');
      // 监听 worker 发送的消息
      worker.addEventListener('message', (e) => {
        const data = e.data;
        if (data.type === 'slice') {
          // 如果接收到的消息类型是 'slice'
          // 将切片保存到 slices 中
          slices[data.index].slice = data.slice;
        } else if (data.type === 'merge') {
          // 如果接收到的消息类型是 'merge'
          // 将合并后的文件 URL 保存到组件的 data 中
          this.url = data.url;
          this.uploaded = true;
        }
      });
      // 向 worker 发送切片请求
      slices.forEach((slice, index) => {
        const { start, end } = slice;
        worker.postMessage({ type: 'slice', file, start, end, index });
      });
      // 向 worker 发送合并请求
      worker.postMessage({ type: 'merge', slices: slices.map(slice => slice.slice), filename: file.name });
    }
  }
};
```

在这个示例中，我们在 MyComponent.vue 组件中创建了一个 Worker 对象，并监听了 worker 发送的消息。当 worker 发送一条类型为 'slice' 的消息时，我们将文件切片保存到组件的 data 中的 slices 数组中。当 worker 发送一条类型为 'merge' 的消息时，我们将合并后的文件 URL 保存到组件的 data 中的 url 字段中，并将 uploaded 字段设置为 true。

在 sliceFile 方法中，我们首先读取文件并切片，然后创建一个 Worker 对象，并向它发送切片请求和合并请求。在发送切片请求时，我们将文件、切片起始位置、切片结束位置和切片索引作为参数传递给 worker。在发送合并请求时，我们将切片数组、文件名作为参数传递给 worker。

这样，我们就可以使用 Web Workers 在 Vue.js 2 中实现切片上传文件了。请注意，由于 Web Workers 与主线程是分离的，因此它们不能直接访问 Vue.js 组件中的 data 和 methods，需要通过消息传递来完成。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
-風过无痕

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值