上一篇 前端面试题(二)

1.JavaScript对于cookie的读、写操作

写入 cookie

function setCookie(cName, cValue, days) {   var expires = new Date();    expires.setTime(expires.getTime() + parseInt(days) * 24 * 60 * 60 * 1000);    document.cookie = cName + "=" + escape(cValue) + ";expires=" +       expires.toGMTString()+";path=/;domain=xxx.cn"; };复制代码

  • expires: cookie的过期时间,注意这里要使用格林威治时间
  • path: 这个参数表示cookie保存的路径,如果没有给出的话会保存为当前站点的,如果给出值”/“的话会保存到当前虚拟目录
  • domain: 这个参数有点类似于session的保存路径,默认情况下保存在当前客户端,也可以自定义到其他位置

读取cookie

function getCookie(name){     var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));   if(arr != null)   return decodeURI(arr[2]); return null;
}复制代码

分享一片关于cookie的文章  http://www.cnblogs.com/Darren_code/archive/2011/11/24/Cookie.html

2.setTimeout promise 和 await sync执行顺序

async function async1() {
console.log("async1 start");
await  async2();console.log("async1 end");
}
async  function async2() {console.log( 'async2');
}
console.log("script start");
setTimeout(function () {console.log("settimeout");
},0);
async1();
new Promise(function (resolve) {console.log("promise1");resolve();
}).then(function () {console.log("promise2");
});
console.log('script end'); 复制代码

结果是:

script start async1 start async2 promise1 script end async1 end promise2 settimeout

这里涉及到同步异步 Microtasks Macrotasks Microtasks优先级别高于Macrotasks  其中Microtasks Macrotasks分别是

microtasks:

  • process.nextTick
  • promise
  • Object.observe
  • MutationObserver

macrotasks:

  • setTimeout
  • setInterval
  • setImmediate
  • I/O
  • UI渲染
  1. 一个事件循环(event loop)会有一个或多个任务队列(task queue)
  2. task queue 就是 macrotask queue
  3. 每一个 event loop 都有一个 microtask queue
  4. task queue == macrotask queue != microtask queue
  5. 一个任务 task 可以放入 macrotask queue 也可以放入 microtask queue 中

因此事件循环的顺序,决定了JavaScript代码的执行顺序。它从script(整体代码)开始第一次循环。之后全局上下文进入函数调用栈。直到调用栈清空(只剩全局),然后执行所有的micro-task。当所有可执行的micro-task执行完毕之后。循环再次从macro-task开始,找到其中一个任务队列执行完毕,然后再执行所有的micro-task,这样一直循环下去。

3. 关于Vue.nextTick()的正确使用 什么时候需要用的Vue.nextTick()

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

  1. 你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。

  2. 在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。

4. 关于数组排序 任意数值相同的数组混乱排序但是每次排出的顺序都是一样的 比如是【1,3,5,6】或者 【6,5,3,1】排除顺序以后是 【3,6,1,5】

用数组sort方法

5. es5 和 es6 class 有什么区别 

用ES6定义class中的方法,定义在原型对象上的。与ES5不同的是,这些定义在原型对象的方法是不可枚举的。

ES6类和模块是严格模式下的;

不存在变量提升,保证子类父类的顺序;

子类必须在父类的构造函数中调用super(),这样才有this对象,因为this对象是从父类继承下来的。而要在子类中调用父类的方法,用super关键词可指代父类。

ES5中类继承的关系是相反的,先有子类的this,然后用父类的方法应用在this上。

ES6类继承子类的this是从父类继承下来的这个特性,使得在ES6中可以构造原生数据结构的子类,这是ES5无法做到的。

ES6也可以定义类的静态方法和静态属性,静态的意思是这些不会被实例继承,不需要实例化类,就可以直接拿来用。ES6中class内部只能定义方法,不能定义属性。在方法名前加上static就表示这个方式是静态方法,而属性还是按照ES5的方式来实现。

7. es6 class内部箭头函数写法和普通函数写法有什么不同

class Person { Run() {    //传统形式的函数写法  this; } eat = () => {    //es6中的箭头函数写法  this; }
}   复制代码

编译之后的结果如下

var Person = (function () {function Person() {var _this = this;this.eat = function () {    //箭头写法直接挂到Person的this下_this;        };   }   Person.prototype.Run = function () {    //传统写法则挂到prototype中定义       this;};       return Person;}());  复制代码

这里不仅展示了在方法的定义,还比较了在ES6中传统函数和箭头函数的区别,传统函数的thises5函数的this指向完全一样,但箭头函数的this指向的是它外层对象的作用域,这里不细说,想了解请点击

7.vue.js中的事件修饰符.self的用法

.self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行。

8. pwa 缓存策略

Service Worker 是一段脚本,与 Web Worker 一样,也是在后台运行。作为一个独立的线程,运行环境与普通脚本不同,所以不能直接参与 Web 交互行为。Native App 可以做到离线使用、消息推送、后台自动更新,Service Worker 的出现是正是为了使得 Web App 也可以具有类似的能力。详情链接

9. 混合开发中如何native的token

10. Vue 中如何使用 MutationObserver 做批量处理?

现在 Vue 的 nextTick 实现移除了 MutationObserver 的方式(兼容性原因),取而代之的是使用 MessageChannel。至于 MutationObserver 如何模拟 nextTick 这点,直接看源码,其实就是创建一个 TextNode 并监听内容变化

转载于:https://juejin.im/post/5ad3718d6fb9a028e1206807

noah的前端面试题(三)|掘金技术征文相关推荐

  1. 2018年各大互联网前端面试题三(阿里)

    三月份有很多朋友辞职跳槽,也遇到了许许多多的面试题,在交流群里和网站上总结了一些常见的面试题,细细分析,其实基本都是万变不离其宗,所有的问题都是从某一技术点的基础出发,综合考量,如果懂得了这项技术的原 ...

  2. 金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上

    引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...

  3. 2022金三银四前端面试题预告

    2022金三银四前端面试题预告 马上就到了面试季了,今天整理了一下前端常见的一些面试题.虽说面试的时候造火箭,需要你背好八股文,不过很多基础还是应该掌握的,就算不面试,也应该多看一些基础,内功深厚了, ...

  4. 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)

    好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...

  5. 金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)下

    引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...

  6. 每日三道前端面试题--vue 第三弹

    每日三道前端面试题--vue 第三弹 Vue常见的指令有哪些? Vue的生命周期函数有哪些?(中文及英文)? vue2.0生命周期 vue3.0生命周期 vue怎样自定义指令? 自定义指令 全局注册 ...

  7. 身为三本的我就是凭借这些前端面试题拿到百度京东offer的,前端面试题2021及答案

    更新啦!更新啦! 2022年面试题及答案 点进来之后你的噩梦就要来了,接下来你要面对上百道面试题,那么,如果你-- 是个小白菜: 推荐使用2~3周的时间来消化接下来的面试题, 遇到不会的没听说过名词请 ...

  8. 前端周报:前端面试题及答案总结;JavaScript参数传递的深入理解

    1.2017前端面试题及答案总结 |掘金技术征文 "金三银四,金九银十",用来形容求职最好的几个月.但是随着行业的饱和,初中级前端er就业形势不容乐观. 行业状态不可控,我们能做的 ...

  9. 重要前端面试题,来自一个2022年面试大牛(上)

    面经链接 2022高频前端面试题--CSS篇 - 掘金 精心整理HTML/CSS面试题(2022求职必看) - 掘金(今天正在看的) 一.css面试题 1.Dom事件模型(分为捕获和冒泡) 一个事件发 ...

最新文章

  1. 图像转换 之 方形图转化扇形图
  2. Tungsten Fabric SDN — VNC API — API Server 的 API Specification
  3. 面试必问,如何控制多个线程的执行顺序
  4. MySQL存储过程和函数(一)
  5. 安装NodeJs运行环境
  6. DDD理论学习系列(4)-- 领域模型
  7. 为什么要学数据结构?| 原力计划
  8. 【UVA10537】The Toll! Revisited (逆推最短路)
  9. 使用BoobSnail生成任意Excel 4.0 XLM宏文件
  10. xs资料网-jdpaint编程图档下载_限时下载 | 西门子、三菱、欧姆龙PLC电气设计与编程自学宝典(3册)...
  11. 用Python3在Win10上自动更新Aria2的BT Trackers,提升Aria2的BT下载速度,非常实用。
  12. springmvc整合UReport2
  13. HTML蒙版css,浅谈图片蒙版效果-webkit-mask_html/css_WEB-ITnose
  14. WDS桥接副路由器有线上网方法
  15. 从BlueSky.h和BlueSky.cpp到BlueSky.out的那些事儿
  16. 计算机怎么给硬盘加密,电脑上的硬盘如何加密?几种文件加密的方法
  17. gogs mail 配置(邮件服务器使用自颁发证书)
  18. python英文参考文献格式_英文参考文献标准格式
  19. PWA之 Service worker
  20. 代码管理平台gitlab

热门文章

  1. linux的read命令
  2. ***PHP中empty()和isset()的区别
  3. 面试人,想被面试,面试。。。
  4. 用“ul+li”及css制作韩国风格菜单
  5. 机械制图中外螺纹的画法_机械制图中图纸上的各种符号代表什么意思?
  6. python元类的概念_Python中的元类编程 | 学步园
  7. pythonpandas函数详解_对pandas中Series的map函数详解
  8. matlab模拟风场竖桥向时程,索梁结构应急桥抖振响应分析
  9. Nessus提示API Disabled错误
  10. Nvidia的CUDA库现在恢复使用了