2022前端年面试

2022-10-23  本文已影响0人  执念_01a7

去除字符串的开头结尾

//方法一：trim
var str = "   abcde     "
str.trim()
//方法二：replace //更换字符串里的空格
var newStr = str.replace(/\s/g/,"")
//方法三：
//去除字符串里全部的空
let arr = str.split(' ')
arr.fliter(item=>item!='').join('')

截取3.1415926的后三位小数，然后向上取整。

let str = "3.1415926"
let number = str.slice(0,5)
Math.floor(Number(number))

箭头函数和普通函数的区别

1.箭头函数是匿名函数，普通函数既可以匿名也可以不匿名。
2.this不可改变，this永远指向上层作用的this。
3.没有原型prototype，proto,没有自己的arguments
4.不能作为构造函数来使用，因为构造函数是通过new来实现的，而new的过程是这样的：

深拷贝和浅拷贝

防抖和节流

事件循环机制（ElentLoop）

宏任务：setTimeout、setInterval
微任务：Promise.then
时间循环的具体流程：
1.从宏任务队列中，按照入队顺序，找到第一个执行的宏任务，放入调用栈，开始执行；
2.执行完宏任务下所有的同步任务，即调用栈清空，该宏任务被推出宏任务队列，然后微任务队列开始按照入队顺序，依次执行其中的微任务，直至微任务队列清空；
3.当微任务队列清空后，一个事件循环结束；
4.接着从宏任务队列中，找到下一个执行的宏任务，开始第二个时间循环，直至宏任务队列清空为止。
这里几个重点：

请参考地址：https://juejin.cn/post/6969028296893792286#heading-4

vue中的nexTick是什么？使用场景以及原理。

nexTick：在下次DOM更新循环结束后延迟回调。在数据修改结束之后理解使用，获取更新后的DOM。
使用场景：当你修改了一个元素的内容之后想立刻获取修改的内容时候可以调用。

<template>
  <div class="hello">
    <h3 id="h">{{testMsg}}</h3>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods:{
  changeTxt:function(){
  let that=this;
  that.testMsg="修改后的文本值";  //修改dom结构
   
  that.$nextTick(function(){  //使用vue.$nextTick()方法可以dom数据更新后延迟执行
    let domTxt=document.getElementById('h').innerText; 
    console.log(domTxt);  //输出可以看到vue数据修改后并没有DOM没有立即更新，
    if(domTxt==="原始值"){
      console.log("文本data被修改后dom内容没立即更新");
    }else {
      console.log("文本data被修改后dom内容被马上更新了");
    }
  });
},

}
</script>

原理：vue中的NexTick方法其实做了两件事：
1.递归回调函数用try catch包裹放入到callbacks数组中。
2.执行timerFun,在浏览器的异步执行队列中加入刷新的callbacks函数。

vue的异步更新机制是如何实现的

vue的异步更新机制是利用浏览器的异步任务队列来实现的。
当响应式数据更新后，会调用dep.notify方法，通知dep中收集的watcher去执行updata方法，将wathcer放入一个异步队列中。
然后通过nexTick方法，将所有的回调函数都添加在callbacks这个数组中，执行timerFun，根据浏览器的兼容，来创建一个异步任务。
当异步任务完成后，执行对应的回调函数，对依赖进行排序，然后执行run方法，对dom进行更新。

vue的响应式原理

vue的响应式原理核心是通过object.defineProperty进行数据劫持。
响应数据分为两类：

methods、computed、watch的区别

上一篇下一篇

猜你喜欢

热点阅读