2024年Web前端最全JavaScript：高阶面试技巧_js高级面试(3)，2024年最新程序员面试防坑宝典-CSDN博客

本文链接：https://blog.csdn.net/2401_84437095/article/details/138692019

总结

对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

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

算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

闭包是指函数中定义的函数，它可以访问外部函数的变量。闭包可以用来创建私有变量和方法，从而保护代码不受外界干扰。

// 例1
function outerFunction() {
  const privateVariable = "私有变量";
  function innerFunction() {
    console.log(privateVariable); // 内部引用外部变量
  }
  return innerFunction;
}
const myFunction = outerFunction();
myFunction(); // 输出 "私有变量"

// 例2
function makeAdder(x) {  
  return function(y) {
    return x + y;
  }
}
const add5 = makeAdder(5);
add5(2); // 7

innerFunction 可以访问 outerFunction 中定义的 privateVariable 变量，但外部的代码无法直接访问 privateVariable。

二、高阶函数

高阶函数是指接受一个或多个函数作为参数，并返回一个函数的函数。通过使用高阶函数，你可以将代码复用最大化，并提高代码的可读性和可维护性。例如：

function double(num) {
  return num * 2;
}

function triple(num) {
  return num * 3;
}

function apply(fn, num) {
  return fn(num);
}

console.log(apply(double, 5)); // 输出 10
console.log(apply(triple, 5)); // 输出 15

apply 是一个高阶函数，它接受一个函数和一个数字作为参数，并调用该函数并返回结果。通过使用 apply 函数，我们避免了重复书写代码。

三、原型链

原型链是JavaScript面向对象编程的基础之一。每个JavaScript对象都有一个原型对象，通过原型链，我们可以实现对象之间的继承关系。例如：

function Animal(name, sound) {
  this.name = name;
  this.sound = sound;
}

Animal.prototype.makeSound = function() {
  console.log(this.sound);
};

function Dog(name, sound) {
  Animal.call(this, name, sound);
}

Dog.prototype = Object.create(Animal.prototype);

Dog.prototype.bark = function() {
  console.log("Woof!");
};

const myDog = new Dog("Buddy", "Bark");
myDog.makeSound(); // 输出 "Bark"
myDog.bark(); // 输出 "Woof!"

Animal 是一个构造函数，它有一个 makeSound 方法，Dog 构造函数继承自 Animal 构造函数，并添加了一个 bark 方法。通过使用原型链，我们实现了 Dog 对象继承了 Animal 对象的属性和方法。

四、函数柯里化

函数柯里化是指将一个接收多个参数的函数转换成一系列只接收一个参数的函数。通过使用函数柯里化，你可以简化函数的调用方式，并提高代码的可读性和可维护性。

function multiply(a, b) {
  return a * b;
}

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...moreArgs) {
        return curried.apply(this, args.concat(moreArgs));
      };
    }
  };
}

const curriedMultiply = curry(multiply);
console.log(curriedMultiply(2)(3)); // 输出 6

curry 是一个函数，它接受一个函数作为参数，并返回一个新的函数。通过使用 curry 函数，我们将 multiply 函数转换成了一个只接收一个参数的函数，在调用时可以更加方便和灵活。

五、函数节流和函数防抖

函数节流和函数防抖是两种常用的性能优化技巧。

函数节流指在一定时间内只执行一次函数，

函数防抖指在一定时间内只执行最后一次函数。

两种都可以帮助我们避免频繁触发函数，从而提高代码的性能和用户体验。

// 节流
function throttle(fn,waitTime) { 
    let timer;
    return function(...args) { 
        if (!timer) { 
            timer = setTimeout(() => { 
                fn.apply(this, args); 
                timer = null; 
            }, waitTime); 
        } 
    }; 
}
// 防抖
function debounce(fn, waitTime) { 
    let timer;
    return function(...args) { 
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, args);
        }, waitTime);
    }; 
}

const throttledFunction = throttle(() => console.log("Throttled function"), 1000);
const debouncedFunction = debounce(() => console.log("Debounced function"), 1000);// 在短时间内多次调用函数
for (let i = 0; i < 10; i++) {
    throttledFunction();
    debouncedFunction();
}
// 输出 
// Throttled function
// Debounced function

throttle 和 debounce 函数都接受一个函数和一个等待时间作为参数，并返回一个新的函数。通过使用这两种技巧，我们可以避免在短时间内多次触发函数，从而提高代码性能和用户体验。

六、Promise

Promise是一种用于异步编程的解决方案，它用于处理异步操作并返回结果。Promise有三种状态：pending、resolved和rejected，分别表示异步操作正在进行、操作已成功完成和操作未成功完成。

function fetchData() {
    return new Promise((resolve, reject) => {
        // 异步操作
        setTimeout(() => {
            const data = { name: "John", age: 30 };
            if (data) {
                resolve(data);
            } else {
                reject(new Error("Failed to fetch data"));
            }
        }, 1000);
    });
}

fetchData().then(data => console.log(data)).catch(error => console.error(error));

fetchData 函数返回一个Promise对象，并在异步操作完成后通过 resolve 或 reject 方法来返回结果或错误信息。通过使用 then 和 catch`方法，我们可以获取异步操作的结果并进行处理。

七、async/await

async/await是一种基于Promise的异步编程解决方案，它提供了更加简洁和直观的方式来处理异步操作。async函数用于声明一个异步函数，而await用于等待一个异步操作的结果。

function fetchData( {
    return new Promise((resolve, reject) => {
      // 异步操作
      setTimeout(() => {
        const data = { name: "John", age: 30 };


### 紧跟潮流



大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/8f4634e85dd904c95364c9d62e0e9eff.png)