2024年JavaScript面试总结查错、复习

}

}

var fnc = fn();

console.log(fnc())//hello

这个很好理解就是以闭包的形式将 name 返回。

题目2：函数赋值

var fn2;

function fn(){

var name=“hello”;

//将函数赋值给fn2

fn2 = function(){

return name;

}

}

fn()//要先执行进行赋值，

console.log(fn2())//执行输出fn2

在闭包里面给fn2函数设置值，闭包的形式把name属性记忆下来，执行会输出 hello。

题目3：函数参数

function fn(){

var name=“hello”;

return function callback(){

return name;

}

}

var fn1 = fn()//执行函数将返回值（callback函数）赋值给fn1，

function fn2(f){

//将函数作为参数传入

console.log(f());//执行函数，并输出

}

fn2(fn1)//执行输出fn2

用闭包返回一个函数，把此函数作为另一个函数的参数，在另一个函数里面执行这个函数，最终输出 hello

题目4：IIFE（自执行函数）

(function(){

var name=“hello”;

var fn1= function(){

return name;

}

//直接在自执行函数里面调用fn2，将fn1作为参数传入

fn2(fn1);

})()

function fn2(f){

//将函数作为参数传入

console.log(f());//执行函数，并输出

}

直接在自执行函数里面将封装的函数fn1传给fn2，作为参数调用同样可以获得结果 hello

题目5：循环赋值

//每秒执行1次，分别输出1-10

for(var i=1;i<=10;i++){

(function(j){

//j来接收

setTimeout(function(){

console.log(j);

},j*1000);

})(i)//i作为实参传入

}

题目6：getter和setter

function fn(){

var name=‘hello’

setName=function(n){

name = n;

}

getName=function(){

return name;

}

//将setName，getName作为对象的属性返回

return {

setName:setName,

getName:getName

}

}

var fn1 = fn();//返回对象，属性setName和getName是两个函数

console.log(fn1.getName());//getter

fn1.setName(‘world’);//setter修改闭包里面的name

console.log(fn1.getName());//getter

第一次输出 hello 用setter以后再输出 world ，这样做可以封装成公共方法，防止不想暴露的属性和函数暴露在外部。

题目7：迭代器（执行一次函数往下取一个值）

var arr =[‘aa’,‘bb’,‘cc’];

function incre(arr){

var i=0;

return function(){

//这个函数每次被执行都返回数组arr中 i下标对应的元素

return arr[i++] || ‘数组值已经遍历完’;

}

}

var next = incre(arr);

console.log(next());//aa

console.log(next());//bb

console.log(next());//cc

console.log(next());//数组值已经遍历完

题目8：首次区分（相同的参数，函数不会重复执行）

var fn = (function(){

var arr=[];//用来缓存的数组

return function(val){

if(arr.indexOf(val)==-1){//缓存中没有则表示需要执行

arr.push(val);//将参数push到缓存数组中

console.log(‘函数被执行了’,arr);

//这里写想要执行的函数

}else{

console.log(‘此次函数不需要执行’);

}

console.log(‘函数调用完打印一下，方便查看已缓存的数组：’,arr);

}

})();

fn(10);

fn(10);

fn(1000);

fn(200);

fn(1000);

执行结果

---

可以明显的看到首次执行的会被存起来，再次执行直接取。

题目9：缓存

//比如求和操作，如果没有缓存，每次调用都要重复计算，采用缓存已经执行过的去查找，查找到了就直接返回，不需要重新计算

var fn=(function(){

var cache={};//缓存对象

var calc=function(arr){//计算函数

var sum=0;

//求和

for(var i=0;i<arr.length;i++){

sum+=arr[i];

}

return sum;

}

return function(){

var args = Array.prototype.slice.call(arguments,0);//arguments转换成数组

var key=args.join(“,”);//将args用逗号连接成字符串

var result , tSum = cache[key];

if(tSum){//如果缓存有

console.log(‘从缓存中取：’,cache)//打印方便查看

result = tSum;

}else{

//重新计算，并存入缓存同时赋值给result

result = cache[key]=calc(args);

console.log(‘存入缓存：’,cache)//打印方便查看

}

return result;

}

})();

fn(1,2,3,4,5);

fn(1,2,3,4,5);

fn(1,2,3,4,5,6);

fn(1,2,3,4,5,8);

fn(1,2,3,4,5,6);

输出结果：

题目10：节流函数

节流函数的作用是在限定的时间内函数只执行一次，比如：

1.按钮提交（可以避免重复提交，当然不只这种方法，将按钮设置为不可用也可以）。

2.scroll、mousehover、mousemove等触发频率高的时候。

主要的原理就是在闭包内设置一个标记，在限定的时间内这个flag设置为true，函数再次点击则不让执行，setTimeout函数执行以后将flag设置为flase，就可以继续执行 。

test

这里限定了按钮的点击时间，2000毫秒之内只有第一次会被执行，多次点击的话无效。

总结：闭包可以说无处不在，所以闭包这些场景，还是很值得研究一番。

5、原型与原型链

---

题目1：

function F() {

this.a = 1;

}

var obj = new F();

console.log(obj.prototype);//打印undefined 对象只有 __proto__属性没有prototype属性，函数才有

题目2：

Object.prototype.a = 1;

var obj = {

b: 2

};

for(var i in obj) {

console.log(i); //能迭代出原型链里面的属性，所以会打印出 b和a

}

题目3：

Object.prototype.a = 1;

var obj = {

b: undefined

};

console.log(obj.a);//1

console.log(‘b’ in obj);//true //能找到处于原型链里面的bar属性

console.log(obj.hasOwnProperty(‘a’));//false 不是自身的属性

console.log(obj.hasOwnProperty(‘b’));//true 是自身的属性

题目4：

function A(){

}

function B(a){

this.a = a;

}

function C(a){

if(a){

this.a = a;

}

}

A.prototype.a = 1;

B.prototype.a = 1;

C.prototype.a = 1;

//实例对象都能访问构造函数的原型对象，可以明确的是以上3个都是能拿到a的

console.log(new A().a);//1 拿到的是原型上的a=1

console.log(new B().a);//undefined this.a = a;将new B()这个实例对象的a属性这是为undefined，所以拿到的是undefined

console.log(new C(2).a);//2 将new C(2)这个实例对象的a属性这是为2，所以拿到的是2

题目5：

function A () {

}

A.prototype.n = 1;

var b = new A();//b实例对象已经建立原型连接

//原型对象指向被改变，不会切断b实例对象的

A.prototype = {

n: 2,

m: 3

}

var c = new A();//c实例对象将根据新的原型建立连接

console.log(b.n, b.m); //1 undefined 这里拿到是改变prototype之前的

console.log(c.n, c.m); //2 3 这里拿到是改变prototype之后的

题目6：

var F = function(){};

Object.prototype.a = function(){

console.log(‘a’)

}

Function.prototype.b = function(){

console.log(‘b’)

}

var f = new F();

F.a(); //打印a 对象都能访问Object.prototype中的属性和方法

F.b(); //打印b F是函数，原型链 F => F.proto => Function.prototype => Function.prototype.proto => Object.prototype

f.a(); //打印a 对象都能访问Object.prototype中的属性和方法

f.b(); //报错f.b is not a function 因f是F实例对象，原型链 f=>f.proto=>F.prototype=>F.prototype.proto => Object.prototype

**总结：**在JavaScript中，对象都有__proto__属性（隐式原型），指向构造该对象的构造函数的原型，而函数Function比较特殊，它除了和其他对象一样有__proto__属性，还有自己特有的属性----prototype称之为原型对象，原型对象有一个constructor属性，该属性指回该函数。

6、this的理解

---

实例1（new）：

function person(name){

this.name=name;

}

var p = new person(“张三”)

console.log§;

var p1 = new person(“李四”)

console.log(p1);

通过new来创建的对象，看他们的this，从下图中可以看到分别创建了新的对象。

实例2（硬绑定 call、apply）

var person = {

name:‘person’,

sayHi:function(){

console.log(this)

}

}

var o={name:‘o1’};

person.sayHi.call(o);

看下图的this打印，这个this绑定的就是对象o

实例3（上下文对象调用）

var person = {

name:‘person’,

sayHi:function(){

console.log(this)

}

}

var o={name:‘o1’};

person.sayHi();

this打印如下图，直接绑定到person对象上

---

实例4（使用默认绑定）

var name=‘person’;

function sayHi(){

console.log(this)

}

sayHi();

打印的this是window

---

例外情况

var person = {

name:‘person’,

sayHi:function(){

console.log(this)

}

}

var o={name:‘o1’};

person.sayHi.call(null);

当用call、apply第一个参数传入null或者undefined的时候，会采用默认的绑定规则，this就指向window。

总结：

• 函数是否是用new来调用的？如果是的话this绑定新创建的对象。 var p = new Person();

• 函数是否通过call、apply来硬绑定调用的？如果是则this绑定的是指定的对象。 var p = sayHi.call(obj);

• 函数是否是被摸个上下文对象调用？如果是则this绑定这个上下文对象。 var p = obj.sayHi();

• 如果以上都不是的话，则使用默认绑定。  var p  = sayHi();

箭头函数的this

箭头函数 被单独拎出来是有原因的，它是根据外层的作用域来决定 this 的，并且箭头函数的绑定是无法被修改的。

var a = 2;

var foo = () => {

console.log(this.a)

}

var obj = {

a: 4,

foo: foo

}

obj.foo() // 2

上述代码 箭头函数并没有受到隐式绑定规则的影响，所以控制台当中打印的结果为 2 。

7、数组去重

---

方式1：

var arr=[1,2,3,4,5,3,6,1,0];

var arr2 = [];

for(let i = 0; i < arr.length; i++) {

if(arr2.indexOf(arr[i]) == -1) { //不包含某个值则返回-1

arr2.push(arr[i]);

}

}

console.log(arr2);

这种方式的话估计大家也是最容易想到的。

方式2：

var arr=[1,2,3,4,5,3,6,1,0];

var arrSort = arr.sort();

var arr2 = [];

for(let i = 0; i< arrSort.length; i++) {

if(arrSort[i] != arrSort[i+1]) {

arr2.push(arrSort[i]);

}

}

console.log(arr2);

这种方法会导致数组被排序了，没有保持原来的顺序。

使用splice：

var arr=[1,2,3,4,5,3,6,1,0];

var len = arr.length;

for(var i = 0; i < len; i++) {

for(var j = i + 1; j < len; j++) {

if(arr[i] === arr[j]) {

arr.splice(i,1);

len–;

j–;

}

}

}

console.log(arr);

ES6的Set

var arr=[1,2,3,4,5,3,6,1,0];

let sortSet = new Set(arr);

console.log(Array.from(sortSet));

8、事件代理

---

查阅这篇文章

9、变量提升和函数提升

---

变量提升

a=2;

var a;

console.log(a);

这段代码console会打印什么呢？也许是undefined，但其实会打印 2 。因为这段代码实际会被这样处理：

var a;

a=2;

console.log(a);

其中：var a;是编译，后面的两句才是执行。

再来看一段：

console.log(a);

var a=2;

它会被处理成这个样子：

var a;

console.log(a);

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-YmZqBBiT-1710749400304)]
[外链图片转存中…(img-A5vtuaBD-1710749400304)]
[外链图片转存中…(img-0wVTDmrw-1710749400305)]
[外链图片转存中…(img-sFT6oQpM-1710749400305)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-Iwxg39Kw-1710749400305)]

数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

[外链图片转存中…(img-YeaFFDLu-1710749400306)]