
JavaScript手撕代码
整理的关于前端面试中,可能会遇到的手写代码题。
火星飞鸟
学习前端ing...
展开
-
JavaScript 手动实现instanceof
1. instanceof的用法instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。function Person() {}function Person2() {}const usr = new Person();console.log(usr instanceof Person); // trueconsole.log(usr instanceof Object); // trueconsole.log(usr instanceof P原创 2021-10-28 15:43:35 · 895 阅读 · 0 评论 -
JavaScript 实现数组扁平化的常见方法
在处理数据时,经常会遇到需要将多维数组转化成一维数组的场景,也就是数组扁平化,这里我总结了三种方式来实现数组扁平化。1. reduce + 递归使用reduce处理数组,reduce的第一个参数是一个函数,第二个参数是可选的,是传递给函数的初始值。如果没有提供初始值,则将使用数组中的第一个元素。这里传入一个空数组[]作为初始值,接着判断cur是否是数组,若为数组,则递归调用;若不是数组,就将cur拼接到pre。const arr = [1, 2, [3, [4, [5, 6], 7], 8], 9,原创 2021-10-26 15:23:43 · 220 阅读 · 0 评论 -
JavaScript 实现call、apply、bind函数
1. call、apply、bind三者的异同共同点:都可以改变this指向不同点:call() 和 apply() 会调用函数,并且改变函数内部this指向.call() 和 apply()传递的参数不一样,call()传递参数使用逗号隔开,apply()使用数组传递bind() 不会调用函数,可以改变函数内部this指向应用场景call()经常做继承apply()经常跟数组有关系,比如借助于数学对象实现数组最大值最小值bind()不调用函数,但是还想改变this指向,原创 2021-09-29 11:37:36 · 208 阅读 · 0 评论 -
JavaScript 手动实现new操作符
1. 回顾构造函数、实例、原型对象的关系构造函数的prototype属性指向了构造函数的原型对象实例对象是由构造函数创建的,实例对象的__proto__属性指向了构造函数的原型对象构造函数的原型对象的constructor属性指向了构造函数,实例对象的原型的constructor属性(usr1. __proto__.constructor)也指向了构造函数现有构造函数Star,Star的实例对象usr1,其三者关系如图所示:2. new操作符做了什么简单来说,当我们使用new操作符为构造函原创 2021-09-27 21:02:39 · 435 阅读 · 0 评论 -
JavaScript 生成指定范围内的随机整数
1. 实现代码输入随机整数出现的范围(最大值、最小值),返回此范围内的一个随机整数。const getRandomNum = (Min, Max) => { const Range = Max - Min + 1; const Rand = Math.random(); return Min + Math.floor(Rand * Range);};2. 验证产生[2,5]范围内1000个随机整数,用Map进行统计计数:const map = new Map();原创 2021-07-17 12:42:33 · 2005 阅读 · 0 评论 -
JavaScript手撕代码 —— 实现对象的深拷贝
1. 实现深拷贝const deepCopy = oldObj => { // 递归出口:若属性为值或者null,则直接返回 if (typeof oldObj !== 'object' || oldObj === null) { return oldObj; } // 结果对象 let newObj = {}; // 如果是数组,则定义结果数组 if (oldObj.constructor === Array) {原创 2021-07-15 13:38:42 · 336 阅读 · 0 评论 -
JavaScript 判断一个数组是否包含了另一个数组的全部元素
定义函数判断一个数组是否包含了另一个数组的全部元素,话不多说,直接上代码:代码// 定义函数const isContained = (a, b) => { // a和b其中一个不是数组,直接返回false if (!(a instanceof Array) || !(b instanceof Array)) return false; const len = b.length; // a的长度小于b的长度,直接返回false if (a.length &l原创 2021-07-10 09:35:24 · 6336 阅读 · 1 评论 -
JavaScript手撕代码 —— 实现防抖、节流函数
以下为本人学习所记,若有不对,望指出。手写防抖函数(debounce)防抖函数功能:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。比如一个搜索框,应用防抖函数后,当用户不断输入内容时,不会发送请求。只有当用户一段时间T内不输入内容了,才会发送一次请求。如果小于这段时间T继续输入内容的话,就会重新计算时间T,也不会发送请求。这样降低了发送请求的次数,提高性能的同时也提升了用户体验。实现防抖函数:// func是用户传入需要防抖的函数// wait是等待时间,若不传参,.原创 2021-06-05 14:14:13 · 551 阅读 · 1 评论 -
JavaScript 实现一个sleep()延迟函数
实现效果实现一个sleep()延迟函数,例如,sleep(2000)表示等待2000毫秒,再执行后面的操作。实现过程利用Promise:const sleep = (time) => { return new Promise(resolve => setTimeout(resolve, time));}验证console.log(1);sleep(2000).then(() => { console.log(2);});console.log(3)原创 2020-12-20 18:22:40 · 1519 阅读 · 0 评论 -
JavaScript 实现(4).add(2).minus(1)功能
实现效果// 4+2-1=5console.log((4).add(2).minus(1)); // 5实现过程使用Number对象的prototype属性,为对象添加方法即可。Number.prototype.add = function(n) { // this为 Number {4} 实例对象 // this.valueOf()为Number {4}的基本数字值4 return this.valueOf() + n;};Number.prototype.minu原创 2020-12-16 12:49:05 · 677 阅读 · 0 评论 -
JavaScript 实现Array.isArray
实现效果:实现原生 JavaScript 中的Array.isArray()方法,使用如下:console.log(Array.isArray([])); // trueconsole.log(Array.isArray({})); // falseconsole.log(Array.isArray(123)); // falseconsole.log(Array.isArray('123')); // false实现过程:通过Object.prototype.toString.call()原创 2020-12-15 11:57:59 · 2089 阅读 · 0 评论 -
JavaScript 实现一个判断数据类型的函数
实现效果:console.log(getType(123)); // numberconsole.log(getType('string')); // stringconsole.log(getType(true)); // booleanconsole.log(getType(undefined)); // undefinedconsole.log(getType(null)); // nullconsole.log(getType({})); // objectconsole.log(ge原创 2020-12-14 21:28:39 · 1304 阅读 · 3 评论 -
JavaScript 实现数组去重的几种方法
原始数组:[1, 1, 1, 2, 2, 3, 3]去重后数组:[ 1, 2, 3 ]1. 双重for循环function distinct(arr) { for (let i = 0, len = arr.length; i < len; i++) { for (j = i + 1; j < len; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1);原创 2020-12-07 20:16:32 · 281 阅读 · 1 评论 -
JavaScript 查找字符串中出现最多的字符和个数
思路:利用charAt()遍历这个字符串把每个字符都存储给对象,如果对象没有该属性,就先幅值为1,如果存在了就+1遍历对象,得到最大值和该字符在遍历的过程中,把字符串中的每个字符作为对象的属性存储在对象中,对应的属性值是该字符出现的次数代码实现:var str = 'abdgdbcaethbganmugthaesqszaphfdvwd';// 1.统计次数// 创建了一个空的对象,存储字符串中的每个字符。属性:每个字符,属性值:该字符出现的次数var obj = {};for (原创 2020-12-08 20:21:12 · 1973 阅读 · 0 评论