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渲染

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中传统函数和箭头函数的区别，传统函数的this和es5函数的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 并监听内容变化