手撕前端面试题【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.闭包


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





目录
相关文章
|
5月前
|
JavaScript 前端开发 API
|
6月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
276 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
10月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
207 1
|
5月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
195 8
|
6月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
5415 24
|
7月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
183 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
10月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
153 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
10月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
335 5
|
10月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
235 4
|
10月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
385 1