总结-前端知识点(二)

tech2024-05-27  71

4.vue的生命周期有哪些?并解释每个生命周期的意思

before creat     安装前  :创建vue对象之后

created     安装后  : 开始监控data对象数据变化,vue内部初始化事件之后

beforeMount    挂载前  : 开始执行挂载钩子,注意此时还没有生成html到页面上去

mounted     挂载后  : 模板中的html渲染到了html页面中,此时一般可以做一些ajax操作,mounted 只会执行一次 

beforeUpdate    更新前   : 更新数据之前发生的事件钩子

updated    更新后    :  实时监控数据变化,随时更新dom

beforeDestroy   销毁前    :在实例销毁之前调用,实例仍然完全可用,这一步还可以用this来获取实例,

                                            一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件

Destroyed   销毁后   : 在实例销毁之后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用

以下是组件之间的,keep-alive 才有的声明周期

activated  :  是在被包裹组建被激活的状态下使用的生命周期钩子

deactivated   :   在被包裹组件停止使用时调用

errorCaptured :防止当一个错误被捕获时该组件进入一个无限的渲染循环

5.  给数组[6,2,4,1,8,5,7]进行排序有哪几种方法可以实现?分别写出

let arr = [6,2,4,1,8,5,7]

let newArr = [...arr]    // 不破坏原数组,深复制

第一种:快速排序

arr.sort()   反序 : arr.sort().reverse() 

第二种:基本排序

      function bubbleSort(arr) {

        for (let i = arr.length - 1; i > 0; i--) {

          for (let j = 0; j < i; j++) {

            if (arr[j] > arr[j + 1]) {

              swap(arr, j, j + 1);

            }

          }

        }

        return arr;

      }

      console.log(bubbleSort(arr));

6.  给数组[6,6,3,2,1,1,8,1,9]进行去重有哪几种方法可以实现?分别写出

      let arr = [6, 6, 3, 2, 1, 1, 8, 1, 9]

第一种:ES6 写法 : [...new Set (arr)]

      let es6 = [...new Set(arr)]

      console.log(es6)

第二种:for嵌套:遍历循环比较是否一样,splice 去重 (ES5 常用)

      for(let i = 0;i<arr.length;i++){

          for(let j = i+1;j<arr.length;j++){

              if(arr[i]==arr[j]){

                  arr.splice(j,1)

                  j--

              }

          }

      }

第三种:利用 indexOf 去重:判断是否有此对象

判断对象是否是个数组,变量新数组,遍历循环判断新数组里面是否有就数组里面的数,没有就添加,有就不添加

      let array = [];

      for (let i = 0; i < arr.length; i++) {

        if (array.indexOf(arr[i]) === -1) {

          array.push(arr[i]);

        }

      }

      console.log(array);

参考一下网址:https://segmentfault.com/a/1190000016418021

7. js中call、 apply、 bind有什么区别?

        call 和 apply  立即执行

        bind  手动执行

        apply 传的参数是数组

        call 和 bind  传的参数是选项

8.  闭包是什么?写出一个闭包的使用场景.

避免垃圾回收机制 , 回收执行完函数得到的结果

    function fn1(){

        var a = 1

        function fn2(){

            ++a

            console.log(a)

        }

        // 这个就是闭包

        return fn2

    }

 

    var f = fn1()

    f()

    f()

    f()

    // 没有经过垃圾没收机制,直接在内存里面一直增加下去

9.  防抖函数和节流函数有什么区别?分别写出应用场景

防抖函数: 是函数在特定的时间内不被再调用后执行

节流函数: 是确保函数特定的时间内至多执行一次

他们都是可以防止一个函数被无意义的高频率调用

  // 函数防抖

function fun(){ console.log('onresize') } function throttle(method,context){ clearTimeout(method.timer); method.timer=setTimeout(function(){ method.call(context); },500); } window.onresize = ()=>throttle(fun,window) // 函数节流 var canRun = true; document.getElementById("throttle").onscroll = function(){ if(!canRun){ return } canRun = false setTimeout( function () { console.log("函数节流") canRun = true }, 500) }

10. mvvm模式是什么意思?相比jq有什么优势和劣势?

  m : 模型 - 数据     v : 视图 - 标签     vm:视图模型 - vue - 链接标签和数据

 mvvm和jq的区别:vue数据驱动,通过数据来显示视图层而不是节点操作

优势:渲染的速度快,方便    

劣势:兼容性差,低版本用不了vue只能用jq

11. 深拷贝和浅拷贝有什么区别?分别写出实现方式。

浅拷贝:只能克隆第一层的对象

深拷贝:克隆整个对象

缺陷:无法实现对函数,RegExp等特殊对象的克隆

let obj = {

            name:"团团",

            children:{

                name:"仙某某"

            }

        }

浅拷贝:

 let obj3 = Object.create(obj)

 obj3.name =  "王大娘"

 console.log(obj3)

 console.log(obj)

深拷贝:

        let obj2 = JSON.parse(JSON.stringify(obj))

        console.log(obj2)

        console.log(obj)

浅克隆和深克隆认识:https://blog.csdn.net/Runpire/article/details/108470974

 

最新回复(0)