手撕前端面试题【javascript】

简介: 手撕前端面试题【javascript】

instanceof

问题 1:

请补全JavaScript代码,要求以Boolean的形式返回第一个实例参数是否在第二个函数参数的原型链上。

解答:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <script type="text/javascript">
            const _instanceof = (target, Fn) => {
                // 补全代码
                //基本数据类型的判断
                if(target === null || typeof target !== 'object'){
                    return false
                }
                    //获取第一个原型
                let leftProto = Object.getPrototypeOf(target)
                while(true){
                    if (leftProto === null){
                        return false
                    }
                            //和第二个原型进行比较
                    if(leftProto == Fn.prototype){
                        return true
                    }
                    leftProto = Object.getPrototypeOf(leftProto)
                }
            }
        </script>
    </body>
</html>

微信图片_20220927115104.pngjs中原型链

原型链,所有的原型构成了一个链条,这个链条我们称之为原型链(prototype chain)。

原型链是一种机制,指的是JavaScript每个对象包括原型对象都有一个内置的[[proto]]属性指向创建它的函数对象的原型对象,即prototype属性。当调用某个函数的方法时,这个函数未定义这个方法,此时不会返回undefined,而是继续往原型链后面的原型去查找,只有查找不到,才返回undefined。


原理: 每个对象都有隐式原型(proto)和显式原型(prototype),对象的proto指向它原型对象上的prototype。原型链最终指向的是Object.prototype,他的__proto__为null


总结:

1、详细步骤:

1)、在原型链上查找先使用接口是Object.getPrototypeOf()去除基本数据类型的干扰。

2)、在获取第一个类型的原型用第一个类型的原型和第二个类型的原型进行比较。

3)、如果leftProto ===null,为空则 return false。

4)、如果leftProto == Fn.prototype相等,return true。

4)、如果不相等 则第一个原型再往上找一层 再比较。

2、何须如此复杂,来看看捷径如何走。

return target instanceof Fn;

instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上

obj instanceof Object;//true 实例obj在不在Object构造函数中

Array.map

问题 2:

请补全JavaScript代码,要求实现Array.map函数的功能且该新函数命名为"_map"。

示例1

输入:

[1,2]._map(i => i * 2)

输出:

[2,4]

解答:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <script type="text/javascript">
            // 补全代码
            Array.prototype._map = function (fn) {
            const newArr = [];
            const len = this.length;
            for (let i = 0; i < len; i++) {
                newArr.push(fn(this[i]));
            }
            return newArr;
        };
        </script>
    </body>
</html>

微信图片_20220927115253.png总结:

1、上面主要是创建一个新的,把之前的循环遍历,每一项追加到新建的里面。

2、除了上面的方法,还有一个最简单的方法,js封装好的。

Array.prototype._map=Array.prototype.map

Array.filter

问题 3:

请补全JavaScript代码,要求实现Array.filter函数的功能且该新函数命名为"_filter"

解答:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <script type="text/javascript">
            // 补全代码
            Array.prototype._filter = function(f){
            let result = [];
            this.forEach(item => {
                if(f(item)){
                    result.push(item);
                }
            })
            return result;
        }
        </script>
    </body>
</html>

微信图片_20220927115349.png总结:

🥭🥭1、这个跟上面一个差不多,创建、循环、遍历、追加

Array.reduce

问题 4:

array_reduce() 函数用回调函数迭代地将数组简化为单一的值。如果指定第三个参数,则该参数将被当成是数组中的第一个值来处理,或者如果数组为空的话就作为最终返回值。


解答:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <script type="text/javascript">
            // 补全代码
            Array.prototype._reduce = function(fn, prev) {
                for(let i=0 ; i<this.length ; i++) {
                    if(prev === undefined) {
                        prev = fn(this[i], this[i+1], i+1, this)
                            ++i
                    } else {
                        prev = fn(prev, this[i], i, this)
                    }
                }
                return prev
            }
        </script>
    </body>
</html>

微信图片_20220927115434.pngarray_reduce() 函数用回调函数迭代地将数组简化为单一的值。如果指定第三个参数,则该参数将被当成是数组中的第一个值来处理,或者如果数组为空的话就作为最终返回值。


总结:

1、详细步骤。

1)在Array的原型对象上添加”_reduce“函数

2)”_reduce“函数第一个参数为回调函数,第二个参数为初始值

3)进入数组长度的循环体中

4)当初始值为空时,首个被加数为数组的第一项

5)当初始值不为空时,首个被加数为初始值

_objectCreate

问题 5:

请补全JavaScript代码,要求实现Object.create函数的功能且该新函数命名为"_objectCreate"。


解答:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <script type="text/javascript">
            const _objectCreate = proto => {
                // 补全代码
                 // 1、创建一个函数
                function Func() {}
                // 2、 将该函数的原型指向对象函数
                Func.prototype = proto
                // 3、返回该函数对象的实例
                return new Func()
            }
        </script>
    </body>
</html>

微信图片_20220927115515.png

总结:

1、除了上面之外还有很多种方法。例如

if (proto == undefined || typeof proto !== 'object') return;
        const obj = new Object();
        obj.__proto__ = proto;
        return obj;

js中哪些操作会造成内存泄漏?

1.意外的全局变量


由于我们使用未声明的变量,而意外的创建了一个全局变量,而使这个变量一直留在内存中无法被回收。


2.被遗忘的计时器或回调函数。


当我们设置了setinterval定时器,而忘记取消它,如果循环函数有对外部变量的引用的话,那么这个变量会被一直留在内存中,而无法被回收。


3.脱离DOM的引用


我们获取一个DOM元素的引用,而后面这个元素被删除,由于我们一直保留了对这个元素的引用,所以它也无法被回收。


4.闭包


不合理的使用闭包,从而导致某些变量─直被留在内存当中。





目录
相关文章
|
6天前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
4天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
5天前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
7天前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
22 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
7天前
|
Web App开发 JavaScript 前端开发
前端基础(一)_初识JavaScript
本文介绍了JavaScript的起源、核心组成(ECMAScript、DOM、BOM),并解释了JavaScript的三种引入方式:行内引入、内部引入和外部引入,以及`window.onload`的使用,最后讨论了网页、网站、浏览器和兼容性的概念。
13 2
前端基础(一)_初识JavaScript
|
7天前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
26 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
9天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
15 2
前端JS读取文件内容并展示到页面上
|
7天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
24 4
|
7天前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
13 2
|
11天前
|
JavaScript 前端开发 开发者
基于Vue.js的前端框架有哪些?
Vue.js 是一款流行的前端 JavaScript 框架,用于构建单页面应用(SPA)。除了 Vue.js 本身,还有许多基于 Vue.js 的前端框架和 UI 库,它们提供了更多的功能和组件,以便开发者能够快速构建应用程序。
19 6
下一篇
无影云桌面