前端面试之梳理JS

最新推荐文章于 2024-05-11 12:21:17 发布

番茄大大~

最新推荐文章于 2024-05-11 12:21:17 发布

阅读量80

点赞数

分类专栏：前端面试总结文章标签： javascript 前端面试

本文链接：https://blog.csdn.net/qq_41926464/article/details/131296421

版权

前端面试总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

无论我们是主动还是被动，面试总是我们不得不学会的一项技能；其中的基础又是重中之重，决定了我们是否能继续面下去。

本文主讲一些常用JS考点：

0）同步任务、异步任务、宏任务和微任务之间的关系
同步任务就是js单线程执行语言
异步任务包含宏任务和微任务

1）宏任务微任务 （https://www.cnblogs.com/ckAng/p/11133643.html）
       a. 宏任务（由宿主(JS允许的环境一般为浏览器或者node)发起的）
           微任务（由JS自身发起）
       b. 宏任务一般是整体代码script setTimeout setInterval I/O UIrender ajax
           微任务主要是Promise.then Object.observe MutationObserver catch finally
           执行顺序优先级同步 > 微任务 > 宏任务

2）eventLoop（事件循环）
       a. 以JavaScript语言为例它是一种单线程语言所有任务都在一个线程上完成一旦遇到大量任务或者遇到一个耗时的任务网页就会出现假死因为js停不下来也就无法影响用户的行为
       b. Event Loop应运而生是指浏览器的一种解决JavaScript单线程运行时不会阻塞的一种机制也就是我们经常使用异步的原理
       c. 同步和异步任务分别进入不同的场所执行所有同步任务都在主线程上执行形成一个执行栈而异步任务进入Event Table并注册回调函数当这个异步任务有了执行结果 Event Table会将这个回调函数移入Event Queue 进入等待状态当主线程内同步任务执行完成会去Event Queue读取对应的函数并结束它的等待状态进入主线程执行（主线程不断重复上面3个步骤也就是常说的Event Loop事件循环）
       d. 执行栈在执行完同步任务后查看执行栈是否为空如果执行栈为空就会去执行Task（宏任务）每次宏任务执行完后会检查微任务队列是否为空如果不为空的话会按照先入先出的规则全部执行完微任务后设置微任务队列为null 然后再执行宏任务如此循环
       e. 整体script属于宏任务的概念

3）手写instanceof实现（用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上）
a. 实现思路首先instanceof左侧必须是对象才能找到它的原型链 instanceof右侧必须是函数函数才有prototype属性迭代处理左侧对象的原型不等于右侧的prototype时沿着原型链重新赋值左侧
b. 代码如下：

function instance_of(L, R) {
    const baseType = ['string', 'number', 'boolean', 'undefined', 'symbol'];
    if(baseType.includes(typeof(L))) return false; // 验证如果为基本数据类型 就直接返回false
    let RP = R.prototype; // 取R的显式原型
    L = L.__protp__; // 取L的隐式原型
    while(true) { // 循环判断prototype是否出现在实例对象的原型链上
        if(L === null) return false;
        if(L === RP) return true;
        L = L.__protp__;  // 向上一层原型链查找
    }
}

4）new的过程
   a. 创建一个空对象将它的引用赋给this 继承函数的原型
   b. 通过this 将属性和方法添加至这个对象
   c. 最后返回this指向的新对象也就是实例（如果没有手动返回其他的对象）

5）this指向
   a. 第一准则是 this永远指向函数运行时所在的对象而不是函数被创建是所在的对象
   b. 普通的函数调用函数被谁调用 this就是谁构造函数的话如果不用new操作符而直接调用那即this指向window 用new操作符生成对象实例后 this就指向了新生成的对象
   c. 匿名函数或不处于任何对象中的函数指向window
   d. 如果是call apply等（改变函数作用域）指定的this是谁就是谁每个函数都包含两个非继承而来的方法call apply 在js中两者作用是一样的都是为了改变某个函数运行时的上下文（context）而存在的换句话说就是为了改变函数体内部this的指向

6）call apply bind (获取另一个对象的指向就能使用它的方法与变量)
代码如下：

// 写法
obj.myFun.call(db,'成都','上海');
obj.myFun.apply(db,['成都','上海']);
obj.myFun.bind(db,'成都','上海')();
obj.myFun.bind(db,['成都','上海'])();

// 手写call es5
Function.prototype.call = function(content) {
    content = content || window; // 给执行上下文 添加默认值
    content.fn = this; // 给content添加一个方法 指向this
    var args = []; // 保存参数集合
    for(let i = 1; i < arguments.length; i++) {
        args.push(arguments[i]);
    }
    var res = args.length > 1 ? eval('content.fn(' + args + ')') : content.fn(); // 执行fn
    delete content.fn; // 删除fn方法
    return res;
}

// 手写apply es6
Function.prototype._Apply = function(content, args) {
    content = content || window;
    args = [];
    if(!(args instanceof Object)) { // 如果第二个参数不是对象的实例 就返回一个错误
        throw new TypeError("Create List From Array Like called on non-object");
    }
    content.fn = this; // 显示绑定函数的this
    const res = arguments[1] ? content.fn(...arguments[1]) : content.fn()
    delete content.fn; // 删除fn方法
    return res;
}

// 手写 bind es6
Function.prototype._bind = function(content = window) {
    const slice = Array.prototype.slice;
    const thatFunc = this; // 保存调用函数的this 也就是原函数
    const args = [].slice.call(arguments, 1); // 获取第一个参数之后剩余的参数数组
    return function() {
        const funcArgs = args.concat(slice.call(arguments)); // 合并返回的新函数的参数
        return thatFunc.call(content, ...funcArgs); // 返回新函数调用的结果
    }
}

   其实就是通过一个中间函数fn 将接受的参数arguments封装返回就实现了当前作用域使用其他函数的内容

7）for in 和for of
   a. for in {
       (即可遍历对象也可遍历数组)
       遍历数组的问题（1.index索引为字符串型数字不能直接进行几何运算 2.遍历顺序有可能不是按照实际数组的内部顺序 3.使用for in会遍历数组所有的枚举属性包括原型例如上溯的原型方法和method和name属性所以for in更适合遍历对象不要使用for in遍历数组）
   }
   b. for of 遍历数组不可遍历对象（取索引用[index, val]）

8）变量比较时对象的隐式转换（valueOf 或者 toString转换为原始类型的值比较）
   a. 如何声明a 令 a==1&&a==2&&a==3 返回true
   b. a为对象对象和原始数据类型比较会找对象的 valueOf方法（返回对象的原始值）如果没有则找toString()方法


9）判断汉字和字母
   a. ASCII码比较 './images/ASCII码比较.jpg'
   b. 面试题（js判断输入内容长度（不限中英文和数字））(https://www.jb51.net/article/48202.htm)

10）数据类型
   a. 基础数据类型（string number boolean undefined null symbol bigint）
       symbol(独一无二的值作为属性名命名可以保证不重名)
       https://www.runoob.com/w3cnote/es6-symbol.html
       https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt
   b. 引用数据类型（function object array）

11）箭头函数
   a. 箭头函数不能用作构造器和new一起使用会抛出错误（箭头函数没有自己的this 而是继承父作用域中的this）
   b. 箭头函数没有prototype属性（因为不能通过new关键字调用）
   c. 不绑定this 在箭头函数出现之前每个新定义的函数都有他自己的this值
   d. 用剩余参数语法表示而不是arguments
   e. 防止变量提升
   f. 由于箭头函数没有自己的this指针通过call或apply方法调用一个函数时只能传递参数（不能绑定this）

12）gengerator函数（生成器）
   a. 在JavaScript中一个函数一旦开始执行就会运行到最后或遇到return时结束运行期间不会有其他代码能够打断它也不能从外部再传入值到函数体内
   b. 而gengerator函数的出现使得打破函数的完整运行成为了可能其语法行为与传统函数完全不同
   c. https://www.cnblogs.com/rogerwu/p/10764046.html
function关键字与函数名之间有一个*号（紧挨function关键字）
函数体内使用yeild表达式定义不同的内部状态（可以有多个yeild）
直接调用Gengerator函数并不会执行也不会返回运行结果而是返回一个遍历器对象（Iterator Object）
依次调用遍历器的next方法遍历Gengerator函数内部的每一个状态

13）手写promise.all

代码如下：

// 手写promise.all
function promiseAll(args) {
    return new Promise((resolve, reject) => {
        const promiseResults = [];
        let iteratorIndex = 0;
        let fullCount = 0;
        for(const item of args) {
            let resultIndex = iteratorIndex;
            iteratorIndex += 1;
            Promise.resolve(item).then(res => {
                promiseResults[resultIndex] = res;
                fullCount += 1;
                if(fullCount === iteratorIndex) {
                    resolve(promiseResults);
                }
            }).catch(err => {
                reject(err);
            });
        }
        if(iteratorIndex === 0) {
            resolve(promiseResults);
        }
    });
}
if(!Promise.all) {
    Promise.all = promiseAll;
}

14）shim和polyfill有什么区别
   a. 一个shim是一个库它将一个新的api引入到一个旧的环境中而且仅靠旧环境中已有的手段实现
   b. 一个polyfill就是一个用在浏览器API上的shim 我们通常的做法是先检查当前浏览器是否支持某个API 如果不支持的话就加载对应的polyfill 然后新旧浏览器就都可以使用这个API了
   c. 示例：

if(!Number.isNaN) {
   Number.isNaN = function(num) {
   return(num !== num); }
 }

15）设计模式
   a. 观察者模式和发布订阅模式的区别（https://www.jianshu.com/p/594f018b68e7）
   b. 单例模式（保证一个类仅有一个实例并提供一个全局的访问点） {
       (无非是用一个变量来标志当前是否已经为某个类创建对象如果是则在下一次获取该类的实例时直接返回之前创建的对象)
       (只需要生成一个唯一对象的时候比如说页面登录框只可能有一个登录框那么你就可以用单例的思路去实现他当然不用单例的思想实现也行那带来的结果可就是你每次要显示登录框的时候都要重新生成一个登录框并显示（耗费性能）或者是不小心显示了两个登录框)
       (https://www.cnblogs.com/yonglin/p/8080836.html)
   }
   c. 策略模式（应用促销方案表单验证） {
       (策略模式就是将一系列算法封装起来并使他们相互之间可以转换被封装起来的算法具有独立性外部不可改变其特性)
       (改变多个if-else的问题)
       (https://zhuanlan.zhihu.com/p/146500964)
   }
   d. 工厂模式 {
       (工厂模式是我们最常用的实例化对象模式了使用工厂方法代替new操作的一种模式)
       (因为工厂模式就相当于创建实例对象的new 我们经常要根据类Class生成实例对象如A a = new A（）工厂模式也是用来创建实例对象的所以以后new时就要多个心眼是否可以考虑使用工厂模式虽然这样做可能多做一些工作但会给你系统带来更大的可扩展性和尽量少的修改量)
   }
   e. 纯函数 {
       (如果函数的调用参数相同则永远返回相同的结果它不依赖于执行期间函数外部任何状态或数据的变化必须只依赖于其输入参数)
       (该函数不会产生任何可观察的副作用例如网路请求输入和输出设备或数据突变（mutation）)
       (一个函数的返回结果只依赖于它的参数并且在执行过程里面没有副作用我们就把这个函数叫做纯函数)
       (const a = 1; const foo = (x, b) => x + b; foo(1, 2) // =3)
   }