用于面试的终极 JavaScript 和 React 备忘单

准备下一次面试：JavaScript 和 React 关键主题

JavaScript 主题

1。吊装

提升是 JavaScript 的一种机制，它在编译阶段、执行代码之前将变量和函数声明移动到其包含范围的顶部。这意味着您可以在代码中实际声明变量和函数之前对其进行引用。但是，仅提升声明，而不提升初始化。对于用 var 声明的变量，它们会被提升并初始化为未定义，而 let 和 const 会被提升但未初始化，如果在声明之前访问，则会导致“临时死区”错误。函数声明被完全提升，这意味着它们可以在出现在代码中之前被调用。

示例：

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

函数声明也被提升：

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

2。关闭

闭包是 JavaScript 中的一项功能，其中函数即使在该范围之外执行时仍保留对其词法范围的访问。这允许函数“记住”其周围范围中的变量。闭包通常用于 JavaScript 中的数据封装、维护状态或创建私有变量。当一个函数在另一个函数内部定义并且内部函数引用外部函数中的变量时，它们就会形成。

示例：

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

3。承诺

Promise 代表未来可用的值的占位符。它们用于比传统回调函数更有效地处理异步操作，从而减少“回调地狱”。 Promise 可以处于以下三种状态之一：待定、已履行或已拒绝。一旦承诺被履行或拒绝，它就变得不可改变。 Promise 提高了代码的可读性，并使链接异步操作变得更容易。

示例：

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

4。函数柯里化

函数柯里化是一种将具有多个参数的函数转换为一系列函数的技术，每个函数采用一个参数。这种方法广泛应用于函数式编程中，通过修复原始函数的一些参数来创建可重用的函数。柯里化可以实现更好的代码可读性、可重用性和模块化。

示例：

function add(a) {
  return function(b) {
    return a + b;
  };
}

const add5 = add(5);
console.log(add5(3)); // 8

5。执行上下文

执行上下文定义了 JavaScript 代码的执行环境。它包括在特定时间可访问的变量、对象和函数。执行上下文分为三种类型：

• 全局执行上下文：在脚本首次运行时创建。在全局范围内声明的变量和函数是此上下文的一部分。
• 函数执行上下文：每当调用函数时创建，包含其局部变量和参数。
• Eval 执行上下文：很少使用，在调用 eval() 时创建。 执行上下文也决定了它的值，并涉及作用域链.
的创建

示例：

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

6。调用、申请、绑定

这些是在调用函数时显式设置 this 值的方法。

• Call：使用给定的 this 上下文和单独传递的参数调用函数。
• Apply：与 call 类似，但参数以数组形式传递。
• Bind：返回一个具有特定 this 上下文和预设参数的新函数，而不立即调用它。

示例：

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

7。常用方法的 Polyfill

Polyfill 是在原生不可用的环境中实现功能的代码片段。它们允许较旧的浏览器或运行时环境支持现代 JavaScript 功能，例如 Array.map、Promise 或 Object.assign。 Polyfill 通常用于确保兼容性，并使用模仿缺失功能行为的回退逻辑来实现。

示例： Array.prototype.map Polyfill：

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

反应主题

1。和解

协调是 React 更新 DOM 以匹配虚拟 DOM 的过程。 React 使用 diff 算法来确定所需的最小更新次数，从而提高渲染效率。当状态或属性发生变化时，React 会创建一个新的虚拟 DOM，将其与前一个进行比较，并仅更新已更改的部分。

2。钩子

钩子是允许功能组件使用状态和生命周期方法等功能的函数，这些功能以前仅在类组件中可用。示例包括用于状态管理的 useState 和用于副作用的 useEffect。 Hooks 让 React 代码更加简洁，功能组件更加强大。

示例：

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

3。类与函数组件

类组件是 ES6 类，将其用于状态和生命周期方法。功能组件是呈现 UI 的简单功能。通过引入钩子，功能组件可以管理状态和生命周期，而无需类。函数式组件因其简单性和更好的性能而受到青睐。

类组件示例：

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

4。记忆

记忆化是一种性能优化技术，用于防止不必要的重新计算或重新渲染。在 React 中，记忆化确保组件仅在其 props 或状态发生变化时才重新渲染。这对于计算成本较高或更新频繁的组件特别有用。

示例：

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

5。高阶组件 (HOC)

HOC 是 React 中的一种设计模式，其中函数将组件作为输入并返回该组件的增强版本。 HOC 通常用于代码重用、管理状态以及添加日志记录或身份验证等功能。

示例：

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

6。表演

提高 React 性能涉及避免不必要的重新渲染、延迟加载组件以及使用 React.memo 或 useMemo 优化渲染等技术。开发人员还使用 React Profiler 等工具来识别瓶颈。

7。反应路由器

React Router 是一个用于管理 React 应用程序中导航的库。它允许开发人员定义路由并根据 URL 动态渲染组件。功能包括嵌套路线、路线参数和导航守卫。

示例：

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

8。缓存

React 中的缓存涉及存储经常使用的数据以避免重新获取它。这可以使用 React-query、Redux 或 localStorage 等库来实现。缓存通过减少加载时间来提高性能和用户体验。

9。安全

为了保护 React 应用程序的安全，开发人员应该验证和清理用户输入、使用 HTTPS 并避免内联 JavaScript 以防止 XSS 攻击。像 Helmet 这样的库可以帮助设置安全的 HTTP 标头。身份验证和授权也应该安全地实现。

10。提高性能

可以通过以下方式提高性能：

• 通过代码分割减少包大小。
• 避免不必要的状态更新。
• 使用 React.lazy 进行延迟加载。
• 优化图像和资源。
• 使用高效的算法来执行计算任务。

11。内存泄漏

当对象不再使用但未被垃圾收集时，就会发生内存泄漏。在 React 中，泄漏通常是由于事件侦听器、计时器或订阅的清理不当而引起的。将 useEffect 与清理功能结合使用可确保正确清理，防止此类问题。

清理正在使用的订阅或定时器效果：

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

总之，掌握 JavaScript 和 React 的核心概念对于任何旨在构建健壮且高效的应用程序的开发人员来说至关重要。这些原则不仅构成了 Web 开发的基础，而且还帮助您自信地应对复杂的挑战。无论是理解闭包、使用 React 优化性能，还是实施安全最佳实践，对这些主题的深入理解将使您在面试和职业生涯中脱颖而出。不断探索、练习和完善您的技能——因为在不断发展的编程世界中，学习之旅永远不会真正结束。

以上是用于面试的终极 JavaScript 和 React 备忘单的详细内容。更多信息请关注PHP中文网其他相关文章！