![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端面试——代码题集锦
虽然初衷是总结面试考点,但在此过程中,结合代码分析、知识点查漏补缺,对js、react底层原理有了更深入的认识。我本人是不太喜欢直接看源码的(会点头……),但是很喜欢在做错某个点之后去深挖原理,希望您在做题过程中,也能如此,积少成多,滴水穿石!
咩咩羊10
微光·炬火
展开
-
模拟实现深浅拷贝
浅拷贝创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。属性值是基本类型:拷贝基本类型的值;属性是引用类型: 拷贝引用类型的内存地址;特点: 其中一个对象改变了引用类型的属性,会影响另一个对象。深拷贝将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。赋值把一个对象赋值给一个新变量的时候,赋的是该对象在栈中的地址,而不是堆中的数据。即两对象指的是同一个堆存储空间,无论谁发生变化,另一个会跟着联动。浅拷贝实现代码function原创 2021-06-20 15:29:46 · 213 阅读 · 0 评论 -
模拟实现call,apply,bind
bindFunction.prototype.bind = function (context) { if (typeof this !== "function") { throw new Error("Function.prototype.bind - is not a function"); } var self = this; var args = Array.prototype.slice.call(arguments, 1); var fNO原创 2021-06-20 15:04:10 · 108 阅读 · 0 评论 -
前端面试算法-高频
反转链表输入:{1,2,3}返回值:{3,2,1}function ReverseList(pHead){ let nex = null, cur=pHead, pre = null; while(cur) { nex = cur.next; cur.next = pre; pre = cur; cur = nex; } return pre}排序数组//1.大顶堆var bigHeap =原创 2021-06-17 23:11:34 · 159 阅读 · 2 评论 -
B函数继承A函数的4种方法
方法一: (直接prototype等号赋值,缺点:地址相同,修改B原型链,A同步被修改)function A(opt){ this.name = opt.name this.age = opt.age}//A的函数方法A.prototype.sayName = function(){ console.log(this.name)} /********实现B继承A的变量 ******/function B(opt){ A.call(this,opt)原创 2021-05-31 21:00:07 · 1265 阅读 · 0 评论 -
前端算法题【持续更新】
1.代码执行题['10','10','10','10','10'].map(parseInt);// [10, NaN, 2, 3, 4]2.什么是防抖和节流?有什么区别?如何实现?防抖触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。每次触发事件时都取消之前的延时调用方法.function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () {原创 2021-04-28 17:50:49 · 267 阅读 · 0 评论 -
事件执行机制-代码题
async function async1() { console.log('a'); await async2(); console.log('b');}async function async2(){ console.log('c');}console.log('d');setTimeout(function(){ console.log('e')}, 0);async1();new Promise(function (resolve) {原创 2021-06-12 17:51:29 · 84 阅读 · 0 评论 -
节流与防抖函数——代码题
防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行防抖触发高频事件后n秒函数执行一次,如果n秒内高频事件再次被触发,则重新计算时间。每次触发事件时都取消之前的延时调用方法.应用:INPUT输入框自动补全function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { let args=[...arguments]; timeout &原创 2021-06-12 17:41:31 · 110 阅读 · 0 评论 -
原型继承——代码题【持续更新】
var A = function(){};A.prototype.n = 1;var b = new A();A.prototype = { n:2, m:3}var c = new A();console.log(b.n);console.log(b.m);console.log(c.n);console.log(c.m);1undefined23async function async1() { console.log('a'); awa原创 2021-06-12 17:35:52 · 338 阅读 · 0 评论 -
预编译相关-代码题【持续更新】
预编译阶段万能口诀1.创建了ao对象2. 找形参和变量的声明,作为AO对象的属性名,值是undefined3. 实参和形参相统一4. 找函数声明 会覆盖变量的声明拓展:AO对象——函数作用域创建阶段,有一个与之对应的叫做JS的变量对象,在函数作用域创建阶段称为AO对象,供JS引擎自己去访问。题目合集function fn(a,c) { console.log(a); //function a() {} var a = 123; console.log(a); //1原创 2021-06-12 16:35:31 · 104 阅读 · 0 评论 -
作用域相关-代码题【持续更新】
var array = [];for(var i = 0; i <3; i++) { array.push(() => i);}var newArray = array.map(el => el());console.log(newArray); 答案:3 3 3解析:执行到var newArray = array.map(el => el());时候,i在当前作用域的值均变为3...原创 2021-06-12 16:13:40 · 142 阅读 · 0 评论 -
变量提升-代码题【持续更新】
(function(){ var x = y = 1;})();console.log(y); // 1console.log(x); // ReferenceError: x is not defined以上代码等同于:var y = 1;function fn() {var x = y;}x在外部无法访问到,因此打印 x is not defined原创 2021-06-12 16:05:44 · 183 阅读 · 0 评论 -
this指向相关-代码题【持续更新】
var x = 10;var foo = { x: 90, getX: function() { return this.x; }};foo.getX(); var xGetter = foo.getX;xGetter();答案:// 90 10xGetter();this是属于函数调用而非对象调用,此时相当于xGetter.call(window)原创 2021-06-12 16:11:02 · 134 阅读 · 0 评论 -
二叉树遍历模板总结【前中后+层级遍历】
递归常规遍历1.简易版【前+中+后】var traversal= (root) => { if (root) { // 前序遍历 return [root.val, ...traversal(root.left), ...traversal(root.right)] //中序遍历 return [ ...traversal(root.left), root.val, ...traversal(root.right)] //后序遍历 retur原创 2021-04-20 16:42:18 · 166 阅读 · 0 评论 -
多维数组扁平化-实现flat函数
答案见末尾实现多维数组拍平(数组扁平化)多维数组拍平答案递归(forEach)var flat = (arr) => { let ans = []; arr.forEach((item, index) => { ans = Array.isArray(item) ? ans.concat(flat(item)) : ans.concat(item); }) return ans;}var arr = [1,[2,3],[4,[5.原创 2021-04-14 10:50:17 · 812 阅读 · 0 评论 -
解析复杂URL
Question输入:例如:url = https://www.youzan.com?name=coder&age=20&callback=https%3A%2F%2Fyouzan.com%3Fname%3Dtest&list[]=a&json=%7B%22str%22%3A%22abc%22,%22num%22%3A123%7D输出:{ name: "coder", age: "20", callback: "https://youzan.com?nam原创 2021-01-07 16:54:25 · 489 阅读 · 0 评论