前端面试之道
文章平均质量分 68
记录前端相关知识笔记
凯小默
专注前端领域开发。
展开
-
15 # 手写 throttle 节流方法
节流是限制事件触发的频率,当持续触发事件时,在一定时间内只执行一次事件,这个效果跟英雄联盟里的闪现技能释放差不多。函数防抖关注一定时间连续触发的事件只在最后执行一次,而函数节流侧重于一段时间内只执行一次。滚动加载,加载更多或滚到底部监听谷歌搜索框,搜索联想功能高频点击提交,表单重复提交。原创 2023-11-11 17:28:46 · 236 阅读 · 0 评论 -
14 # 手写 debounce 防抖方法
防抖: n 秒后再去执行该事件,若在 n 秒内被重复触发,则重新计时,这个效果跟英雄联盟里的回城技能差不多。本质上是优化高频率执行代码的一种手段,目的就是降低回调执行频率、节省计算资源。搜索框搜索输入,手机号、邮箱等验证输入检测,只需用户最后一次输入完,再发送请求窗口大小 resize,只需窗口调整完成后,计算窗口大小,防止重复渲染。原创 2023-11-11 16:09:22 · 429 阅读 · 0 评论 -
13 # 手写 concat 方法
concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。如果省略了所有参数,则 concat 会返回调用此方法的现存数组的一个浅拷贝。原创 2023-11-09 20:36:31 · 134 阅读 · 0 评论 -
12 # 手写 findIndex 方法
findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。// fn 是 kaimoFindIndex 中传递的参数,是一个函数,this 是 arr。如果条件改成大于50,找不到就返回。原创 2023-11-09 19:37:00 · 169 阅读 · 0 评论 -
11 # 手写 reduce 方法
第一次执行回调函数时,不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被用作初始值,迭代器将从第二个元素开始执行(即从索引为 1 而不是 0 的位置开始)。reduce() 方法对数组中的每个元素按序执行一个提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。数组为空数组以及没有初始值的时候,就直接报错提示。原创 2023-11-09 19:25:44 · 290 阅读 · 0 评论 -
10 # 手写 every 方法
every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。// fn 是 kaimoEvery 中传递的参数,是一个函数,this 是 arr。原创 2023-11-09 02:43:07 · 199 阅读 · 0 评论 -
09 # 手写 some 方法
some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true,则返回 true;否则返回 false。// fn 是 kaimoSome 中传递的参数,是一个函数,this 是 arr。原创 2023-11-09 02:42:03 · 190 阅读 · 0 评论 -
08 # 手写 filter 方法
filter() 方法创建给定数组一部分的浅拷贝,其包含通过所提供函数实现的测试的所有元素。如果没有元素通过测试,则返回一个空数组。ele:表示数组中的每一个元素index:表示数据中元素的索引array:表示数组});var});});1});3});5});7});9;});var});});原创 2023-11-08 20:52:52 · 133 阅读 · 0 评论 -
07 # 手写 find 方法
/ fn 是 kaimoFind 中传递的参数,是一个函数,this 是 arr。方法返回数组中满足提供的测试函数的第一个元素的值。原创 2023-11-08 20:51:10 · 191 阅读 · 0 评论 -
06 # 手写 map 方法
/ fn 是 kaimoMap 中传递的参数,是一个函数,this 是 arr。map 自带循环功能,对数据中的元素进行加工,得到一个加工后的新数据。原创 2023-11-01 21:03:51 · 248 阅读 · 0 评论 -
05 # 手写 bind
/ 这里的 this 指向调用 kaimoBind 的 fn。// 这里的 this 指向调用 kaimoBind 的 fn。// 获取到 bind 里的剩余参数。// 拿到 bind 返回函数的参数。// 改变 fn 的 this 指向。// 获取到 bind 里的剩余参数。// 拿到 bind 返回函数的参数。// 改变 fn 的 this 指向。bind 难点在于参数的收集。// gn 继承 Mn。原创 2023-11-01 20:39:33 · 137 阅读 · 0 评论 -
04 # 手写 apply
apply 的作用跟 call 的作用是一样的,只不过传递的参数是以数组的形式。// 执行 this() 改变不了 this 指向,需要赋值给属性。// 没有东西指向 window,将 content 包装成对象。// 再删除多余的 f 参数。原创 2023-10-26 19:58:15 · 135 阅读 · 0 评论 -
03 # 手写 call
/ 执行 this() 改变不了 this 指向,需要赋值给属性。// 没有东西指向 window,将 content 包装成对象。// 再删除多余的 f 参数。原创 2023-10-26 19:56:20 · 103 阅读 · 0 评论 -
02 # 手写 instanceof 的原理
/ 由于修改了构造器 `Student.prototype`,`Student.prototype.constructor` 已经不是 Student。// 继承 Person 公有属性:使用 `Object.create()` 来解决多次调用父类构造函数问题。// 为了避免误解,手动重设 `Student.prototype.constructor` 属性。// 使用 kaimoInstanceof 模拟 instanceof 运算符。// className 的原型对象。// 往原型链上继续找。原创 2023-10-26 15:51:14 · 117 阅读 · 0 评论 -
01 # 手写 new 的原理
/ 使用 kaimoPerson 函数去模拟 new 运算符。// 2) 让对象的隐式原型指向 fn 的显式原型。// 3) 改变 this 指向;new 是一个运算符,只能通过函数的方式去模拟。// 1) 创建一个对象。// 5) 返回对象。原创 2023-10-26 12:00:27 · 231 阅读 · 0 评论 -
RGB颜色值与十六进制颜色码怎么相互转换?
我们经常看到网上的在线工具里有RGB颜色值与十六进制颜色码转换工具,那么这个是怎么实现的呢?可以理解为 FF0000 + FF00 + FF,如果左移是基于十六进制计算的,则可以理解为FF原创 2022-10-17 18:34:28 · 3085 阅读 · 0 评论 -
script标签中defer和async有什么不同?
我们可以在网址中经常看到script标签出现async以及defer的属性。我们可以参考MDN上关于。原创 2022-10-17 10:53:49 · 151 阅读 · 0 评论 -
100 行代码实现 Promises/A+ 规范
在这篇文章中,我们给出了 100 行以内的代码实现 Promise/A+ 规范的案例,我们澄清了几个关于 Promises 和 JS 里的异步方案的迷思。我们重新梳理了在 JavaScript 里的异步方案演进史的表述。我们也了解到,async/await 并非异步终极解决方案,也不是异步数据处理能力最强的模式。只能说,它是当前对新手开发者友好的主流方案。关于 Promises 还有好多话题可以讨论,比如它与函数式的 Monad 的关系,比如 Promise/A+ 规范中值得商榷和可以改进的部分等。...转载 2022-08-15 17:25:52 · 416 阅读 · 0 评论 -
数据技术专家能力模型
不过这个能力模型会对前端精读选材起到主导作用,我会尽量挑选重要的,保质期长的基础知识解读,而保质期较短的行业专用领域知识则尽量少讲,希望前端精读能形成一个正金字塔,底座是厚厚的基础知识,金字塔尖是重要的行业知识,风沙会经常侵蚀金字塔尖,所以金字塔尖需要不断的更新迭代,但我相信,只要有一个稳定的底座,上层的修缮总不是难事。对于知识,可以分为通用、领域的知识,其中越通用、越基础的知识越保值,比如数学知识的保质期可能持续到地球毁灭,而 Webpack5 的 API 可能保质期只有三个月。转载 2022-09-17 16:44:49 · 262 阅读 · 0 评论 -
[‘1‘, ‘2‘, ‘3‘].map(parseInt)
结果我们期望输出 [1, 2, 3], 而实际结果是 [1, NaN, NaN].先冷静一下,看个注释【狗头】,放松一下/* * .::::. * .::::::::. * ::::::::::: * ..:::::::::::' * '::::::::::::' *原创 2020-07-13 20:31:01 · 313 阅读 · 0 评论 -
什么时候 a == 1 && a == 2 && a == 3 为 true?
说明在网上看到的一个面试题:什么时候 a == 1 && a == 2 && a == 3 为 true?觉得很有趣,记录一下。(当然我想不出来_(:3」∠)_).分析关于要这个表达式成立, a == 1 && a == 2 && a == 3 的每一个条件都要为 true.1、显然,如果 每次调用 变量 a ,a 的 值都......原创 2019-11-28 21:32:49 · 1034 阅读 · 0 评论 -
手写系列 # 5:实现 bind 方法
实现bind 跟 apply 、call 实现不同的地方在于,它返回的是一个函数。bind 语法:fun.bind(context, arg1, arg2, …)context:当绑定函数被调用时,该参数会作为原函数运行时的this指向;当使用new操作符调用绑定函数时,该参数无效。arg1,arg2…:绑定函数被调用时,这些参数将位于实参之前传递给绑定的方法。Function.prototype.kaimoBind = function (context) { // 保存原函数 c原创 2021-08-09 19:22:16 · 179 阅读 · 0 评论 -
手写系列 # 4:实现 apply 方法
实现apply 语法:fun.apply(context, [argsArr])context:在fun 函数运行时指定的this值argsArr:一个数组或者是类数组对象,其中数组中元素会作为单独参数传给fun。当参数值为null 或者undefined时,表示不需要传入任何参数。处理参数上和 call 有区别,其他基本一样Function.prototype.kaimoApply = function (context) { context = context || window;原创 2021-08-09 17:08:53 · 350 阅读 · 0 评论 -
手写系列 # 3:实现 call 方法
实现基本思路:保留this —— 执行函数 —— 删除函数Function.prototype.kaimoCall = function (obj) { const symbolFn = Symbol(); const args = [...arguments].slice(1); obj = obj || window; // 保留 this obj[symbolFn] = this; // 执行函数 const result = obj[symbolFn](...a原创 2021-08-06 17:59:00 · 205 阅读 · 0 评论 -
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
实现原创 2021-08-04 18:33:58 · 857 阅读 · 0 评论 -
手写系列 # 1:实现 getQueryString 方法获取 URL 上的参数值
实现function getQueryString(url, name) { let index = url.indexOf('?'); console.log('?', index); // ? 30 // 需要判断是否存在 ? if(index === -1){ return undefined; } // 将 ? 后面的参数分割成 type=blog 这样的数组 let paramsArr = url.substring(index + 1).split('&am原创 2021-08-03 16:08:29 · 477 阅读 · 0 评论 -
前端面试知识点指南
说明还会持续完善…HTML和CSSHTML1.从规范的角度理解HTML,从分类和语义的角度使用标签2.常用页面标签的默认样式、自带属性、不同浏览器的差异、处理浏览器兼容问题的方式3.元信息类标签(head、title、meta)的使用目的和配置方法4.HTML5离线缓存原理5.可以使用Canvas API、SVG等绘制高性能的动画CSS1.CSS盒模型,在不同浏览器的差异2.CSS所有选择器及其优先级、使用场景,哪些可以继承,如何运用at规则3.CSS伪类和伪元素有哪些,它们的区原创 2020-08-05 20:41:56 · 386 阅读 · 0 评论