zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    【转】Win7下VS2010中配置Opencv2.4.4的方法(32位和64位都有效)(亲测成功)
    【转】vs2008中leptonica-1.68安装配置
    python在Mac上做数据分析
    javascript在浏览器中调用sqlserver数据
    浏览器console中加入jquery方便调试
    2008 iis7.5 + php7 + mysql + SSL
    SSL基础知识
    iis7配置php7
    ubuntu 16.04下手动安装apache2php7.0mysqlphpmyadminftp等环境
    ubuntu 14.04下的rails开发环境
  • 原文地址:https://www.cnblogs.com/cp-cookie/p/13535531.html
Copyright © 2011-2022 走看看