【前端】常见问题汇总

本文主要是介绍【前端】常见问题汇总，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 跳转界面传参值

当传的值中有特殊字符时，需进值加密解密处理

加密 encodeURIComponent() 解密 decodeURIComponent()

2. console.log(“” == 0) 结果为true

问题： var zt = “”; console.log(zt == 0) 结果为true,业务中zt字段值有两种含义(""跟0)，会导致判断不准确。

解决:

var zt = "";
1.if(zt == '0')//0加单引号
2.if(zt === 0){alert(zt)}else if(zt === 1){alert(zt)} //需要注意，如果zt="1"时, zt === 1此时为false。

3. 渲染出的列表，触发事件调用方法时，不要使用索引判断走不同代码逻辑

理由： 列表顺序有可能会发生改变，一旦改变，方法逻辑走向不对，触发bug。

<template><div v-for="(item,index ) in [{isOpen:true,name:'java'},{name:'javascript'},{isOpen:true,name:'python'}] ":key="index" @click="toOpen(item,index)"> </div>
</template>
<script>export default {toOpen(item,index){/**反例  一旦列表顺序发生改变，此判断会出现bug**/if(index == 0 || index == 2) window.open("baidu.com?gjz"+item.name)else location.href ="baidu.com?gjz"+item.name/**正确判断，使用列表中某个参数进行判断**/if(item.isOpen) window.open("baidu.com?gjz"+item.name)else location.href ="baidu.com?gjz"+item.name/**一样的代码量，平常写的时候注意一些，会有效减少bug量**/}}
</script>

4. 常见提示信息场景

1.一般查询接口正常返回数据不要加提示信息

2.一般保存修改删除接口，回调成功要有提示信息，没有提示信息用户以为保存更新不成功，会重复进行点击

3.如保存修改删除成功后，需要跳转其他界面，先提示一下，使用setTimeout延迟一秒后进行跳转界面。

5. js中检测数据类型，比较通用的检测方式

Object.prototype.toString.call('1')
'[object String]'
Object.prototype.toString.call([])
'[object Array]'
Object.prototype.toString.call({})
'[object Object]'
Object.prototype.toString.call(1)
'[object Number]'
Object.prototype.toString.call(null)
'[object Null]'
Object.prototype.toString.call(function(){})
'[object Function]'
Object.prototype.toString.call(undefined)
'[object Undefined]'
/*也可以使用instanceof检测数据类型，不过没有这种方式好用便捷
**/

6. 防抖节流

防抖：在一段时间内连续点击触发方法，每次触发会重新计时，最常用场景：在文本框输入值立马去后台查询数据，频繁调用后台造成性能问题，可以使用防抖，在一定时间内只去后台查询一次。（ echart图表监听窗口改变重新渲染、滚动事件、滑动事件）

节流：在一段时间内连续点击触发方法，在这段时间内只执行一次，不会去重新计时，最常用场景：去请求接口数据。或者更新数据，可以使用节流，保证在(假设一秒内)只执行一次查询，或者更新操作

演示地址：点这里

<template><div><button @click="click1">不使用防抖</button><button @click="click2">使用防抖</button><button  @click="click3">不使用节流</button><button  @click="click4">使用节流</button></div>    
</template>
<script>export default {methods:{click1(){console.log("不使用防抖=>",new Date().getTime())},click2:debounce(function(){console.log("使用防抖=>",new Date().getTime())}),click3(){console.log("不使用节流=>",new Date().getTime())},click4:throttle(function(){console.log("使用节流=>",new Date().getTime())})}}
</script>