Map与Set、防抖与节流(注Vue的定时器)、vue路由器path带参和取值

一、Javascript对象的键必须是字符串，有时需要更方便操作，ES6引进新语法

1、Map 是一组键值对的二维数组，具有快速的查找数据

let obj = [{name: '张三', age: 18}, {name: '李四', age: 20}]

如果需要频繁查找obj中某个人的信息，那需要频繁遍历，而Map却可以避免

1、过滤一下数据
let arr = obj.map(item => {
   return [item.name, item.age] 
})

console.log(arr)  // [['张三‘， 18], ['李四'， 20]]

2、Map (针对二维数组)
let arrMap = new Map(arr)；

arrMap.get('张三')  // 18
arrMap.set('王五'， 22)  // [['张三‘， 18], ['李四'， 20], ['王五'， 22]]， 重复key添加覆盖val元素
arrMap.has('李四’)  // true
arrMap.delete('王五')  // 删除

2、Set

Set是一组key的集合，但不存储value , 由于key不能重复，因此Set不存在重复值（去重）

let arr = [1,2,3,2,'4']
let arrSet = new Set(arr)  // 将数组变成对象

console.log(arrSet) // {1,2,3,'4'}
console.log([...arrSet]) // [1,2,3,'4'] 将数组转成对象

arrSet.add(5)  // {1,2,3,'4',5}
arrSet.delete(2)  // {1,3,'4',5}

 二、节流和防抖属于性能优化，使用频率还比较高，可以避免多次、重复请求，防止页面卡死问题

1、节流

最常见的多次点击同一个按钮、页面滑动到底部请求数据渲染，那么问题来了只要在底部范围滑动，哪怕1px都会发送请求，这画面不可想象

那么我们可以定义一个开关，默认开关开启，请求前关闭，请求完并执行回调再打开

function demo(fn, delay){   // delay 延迟时间
  let flag = true  // 开关
  return function() {   
      if(flag){
          flag = false
          setTimeout(() => { // 异步未完成不会再触发异步请求
              fn()
              flag = true
          })
      } else {
          return false  
      }
  }   
}    

2、防抖

那么这样就可以了吗？

并不是，如果数据不大或者数据请求很快就完成，那么滑动依旧会触发下一次请求

因此需要防抖处理，在一定的时间内不能再次触发请求，以确保页面有足够的时间渲染请求的需求，各个元素的样式得到重新计算

function demo(fn, delay){  //delay 延迟的时间
   let timer = null
   return function(){
      if(timer){
         clearTimeout(timer)  // 如果在delay时间内，多次触发，那么就不会执行之前的异步请求，直到最后一次触发才执行
      }
      timer = setTimeout(fn, delay)
   }
}

 注： 这里都是用到定时器，在Vue中使用这种方法，必须将定时器放在window上才能清除定时器生效，即window.setTimeout ,  window.clearTimeout

 三：vue router.js中带默认参数及取值　　

 

{
    path: 'game/stat/:site/:id', //site和id是跳转时候可带上的参数（可选）
    component: () => import('@/views/activity/game/stat'),
    name: 'activityGameStat',
　　 props: true  // 将组件和路由解耦处理

}

 

组件使用跳转 this.$router.push()

this.$router.push(`/game/stat/${website}/${id}`)

取值：使用 this.$route.params.site 和 this.$route.params.id

当 router.js 中配置 props : true  即将组件和路由解耦， 这不需要this.$route.params 来取值

 

取值方法直接有父子传值方式： props

<script>
    export default {
      name: "stat",
      props: ["site", "id"]
    };
</script>