noah的前端面试题(三)|掘金技术征文
上一篇 前端面试题(二)
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渲染
- 一个事件循环(event loop)会有一个或多个任务队列(task queue)
- task queue 就是 macrotask queue
- 每一个 event loop 都有一个 microtask queue
- task queue == macrotask queue != microtask queue
- 一个任务 task 可以放入 macrotask queue 也可以放入 microtask queue 中
因此事件循环的顺序,决定了JavaScript代码的执行顺序。它从script(整体代码)开始第一次循环。之后全局上下文进入函数调用栈。直到调用栈清空(只剩全局),然后执行所有的micro-task。当所有可执行的micro-task执行完毕之后。循环再次从macro-task开始,找到其中一个任务队列执行完毕,然后再执行所有的micro-task,这样一直循环下去。
3. 关于Vue.nextTick()的正确使用 什么时候需要用的Vue.nextTick()
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
你在Vue生命周期的
created()
钩子函数进行的DOM操作一定要放在Vue.nextTick()
的回调函数中。原因是什么呢,原因是在created()
钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()
的回调函数中。与之对应的就是mounted
钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。在数据变化后要执行的
某个操作
,而这个操作
需要使用随数据改变而改变的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
中传统函数和箭头函数的区别,传统函数的this
和es5
函数的this
指向完全一样,但箭头函数的this
指向的是它外层对象的作用域,这里不细说,想了解请点击
7.vue.js中的事件修饰符.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的前端面试题(三)|掘金技术征文相关推荐
- 2018年各大互联网前端面试题三(阿里)
三月份有很多朋友辞职跳槽,也遇到了许许多多的面试题,在交流群里和网站上总结了一些常见的面试题,细细分析,其实基本都是万变不离其宗,所有的问题都是从某一技术点的基础出发,综合考量,如果懂得了这项技术的原 ...
- 金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上
引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...
- 2022金三银四前端面试题预告
2022金三银四前端面试题预告 马上就到了面试季了,今天整理了一下前端常见的一些面试题.虽说面试的时候造火箭,需要你背好八股文,不过很多基础还是应该掌握的,就算不面试,也应该多看一些基础,内功深厚了, ...
- 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)
好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...
- 金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)下
引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...
- 每日三道前端面试题--vue 第三弹
每日三道前端面试题--vue 第三弹 Vue常见的指令有哪些? Vue的生命周期函数有哪些?(中文及英文)? vue2.0生命周期 vue3.0生命周期 vue怎样自定义指令? 自定义指令 全局注册 ...
- 身为三本的我就是凭借这些前端面试题拿到百度京东offer的,前端面试题2021及答案
更新啦!更新啦! 2022年面试题及答案 点进来之后你的噩梦就要来了,接下来你要面对上百道面试题,那么,如果你-- 是个小白菜: 推荐使用2~3周的时间来消化接下来的面试题, 遇到不会的没听说过名词请 ...
- 前端周报:前端面试题及答案总结;JavaScript参数传递的深入理解
1.2017前端面试题及答案总结 |掘金技术征文 "金三银四,金九银十",用来形容求职最好的几个月.但是随着行业的饱和,初中级前端er就业形势不容乐观. 行业状态不可控,我们能做的 ...
- 重要前端面试题,来自一个2022年面试大牛(上)
面经链接 2022高频前端面试题--CSS篇 - 掘金 精心整理HTML/CSS面试题(2022求职必看) - 掘金(今天正在看的) 一.css面试题 1.Dom事件模型(分为捕获和冒泡) 一个事件发 ...
最新文章
- 图像转换 之 方形图转化扇形图
- Tungsten Fabric SDN — VNC API — API Server 的 API Specification
- 面试必问,如何控制多个线程的执行顺序
- MySQL存储过程和函数(一)
- 安装NodeJs运行环境
- DDD理论学习系列(4)-- 领域模型
- 为什么要学数据结构?| 原力计划
- 【UVA10537】The Toll! Revisited (逆推最短路)
- 使用BoobSnail生成任意Excel 4.0 XLM宏文件
- xs资料网-jdpaint编程图档下载_限时下载 | 西门子、三菱、欧姆龙PLC电气设计与编程自学宝典(3册)...
- 用Python3在Win10上自动更新Aria2的BT Trackers,提升Aria2的BT下载速度,非常实用。
- springmvc整合UReport2
- HTML蒙版css,浅谈图片蒙版效果-webkit-mask_html/css_WEB-ITnose
- WDS桥接副路由器有线上网方法
- 从BlueSky.h和BlueSky.cpp到BlueSky.out的那些事儿
- 计算机怎么给硬盘加密,电脑上的硬盘如何加密?几种文件加密的方法
- gogs mail 配置(邮件服务器使用自颁发证书)
- python英文参考文献格式_英文参考文献标准格式
- PWA之 Service worker
- 代码管理平台gitlab
热门文章
- linux的read命令
- ***PHP中empty()和isset()的区别
- 面试人,想被面试,面试。。。
- 用“ul+li”及css制作韩国风格菜单
- 机械制图中外螺纹的画法_机械制图中图纸上的各种符号代表什么意思?
- python元类的概念_Python中的元类编程 | 学步园
- pythonpandas函数详解_对pandas中Series的map函数详解
- matlab模拟风场竖桥向时程,索梁结构应急桥抖振响应分析
- Nessus提示API Disabled错误
- Nvidia的CUDA库现在恢复使用了