2022前端年面试

去除字符串的开头结尾

//方法一: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的过程是这样的:

  • 创建一个对象
  • 让this指向新创建的这个对象
  • 执行构造函数,给新对象添加属性和方法
  • 返回这个新对象

深拷贝和浅拷贝

防抖和节流

事件循环机制(ElentLoop)

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

  • 当我们第一次执行的时候,解释器会将整体代码script放入宏任务队列中,因此事件循环是从第一个宏任务开始的;
  • 如果在执行微任务的过程中,产生的微任务添加到微任务队列中,也需要一起清空;微任务队列没清空之前,是不会执行下一个宏任务的。

请参考地址: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进行数据劫持。
响应数据分为两类:

  • 对象:对象是通过遍历所有的属性,为每一个属性设置getter和setter,已达到拦截访问和设置,当对象的属性依旧为对象时;会递归对象的属性为其设置getter和setter。
    1.访问数据时进行依赖收集,在dep中存储相关的watcher。
    2.设置数据时由dep通知相关的watcher去更新。
  • 数组 :当响应式数据为数组的时候,回去增强数组改变原数组的七个方法,然后拦截起这些方法的操作
    1.当添加新数据的时候进行响应式处理,然后有dep通知watcher去更新。
    2.删除数据,也要有dep通知watcher去更新。

methods、computed、watch的区别

  • methods VS computed
    如果在一次渲染中,有多个地方同时调用了methods和computed,methods会执行多次而computed只会执行一次。
    多次访问computedProperty,只会在此一次执行computed属性的回调函数,后续其他访问,则直接使用第一次的执行结果,而这一些的实现原理则是通过watcher.dirty属性的控制来实现的。而methods,每一次的访问则是简单的方法调用。

  • computed VS watch
    computed和watch的本质是一样,内部都是通过watcher来实现的,其实没有什么区别,非要说区别那就两点:1.使用场景的不同。2.computed默认是懒执行,切不可更改。

  • methods VS watch
    methods和watch之间没有什么可比性,完全就是两个东西,不过可以把watch中的代码逻辑提取到methods中,提高代码的可读性。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,347评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,435评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,509评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,611评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,837评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,987评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,730评论 0 267
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,194评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,334评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,944评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2 349

推荐阅读更多精彩内容