JavaScript 面试问题

TL;DR

== 是抽象相等运算符，而 === 是严格相等运算符。== 运算符会在进行任何必要的类型转换后比较是否相等。=== 运算符不会进行类型转换，因此如果两个值不是同一类型，=== 将直接返回 false。

相等运算符 (==)

== 运算符检查两个值是否相等，但如果这些值的类型不同，则会执行类型转换。这意味着 JavaScript 将尝试在进行比较之前将这些值转换为通用类型。

console.log(42 == '42'); // true
console.log(0 == false); // true
console.log(null == undefined); // true
console.log([] == false); // true
console.log('' == false); // true

在这些示例中，JavaScript 在进行比较之前将操作数转换为相同的类型。例如，42 == '42' 为 true，因为字符串 '42' 在比较之前被转换为数字 42。

但是，当使用 == 时，可能会发生不直观的结果：

console.log(1 == [1]); // true
console.log(0 == ''); // true
console.log(0 == '0'); // true
console.log('' == '0'); // false

作为一般经验法则，永远不要使用 == 运算符，除非为了方便与 null 或 undefined 进行比较，其中 a == null 将在 a 为 null 或 undefined 时返回 true。

var a = null;
console.log(a == null); // true
console.log(a == undefined); // true

严格相等运算符 (===)

=== 运算符，也称为严格相等运算符，检查两个值是否相等，而不执行类型转换。这意味着，只有当值和类型都相同时，比较才会返回 true。

console.log(42 === '42'); // false
console.log(0 === false); // false
console.log(null === undefined); // false
console.log([] === false); // false
console.log('' === false); // false

对于这些比较，不执行类型转换，因此如果类型不同，该语句将返回 false。例如，42 === '42' 为 false，因为类型（数字和字符串）不同。

// 带有类型转换的比较 (==)
console.log(42 == '42'); // true
console.log(0 == false); // true
console.log(null == undefined); // true

// 不带类型转换的严格比较 (===)
console.log(42 === '42'); // false
console.log(0 === false); // false
console.log(null === undefined); // false

额外内容：Object.is()

JavaScript 中最后一个值比较操作是 Object.is() 静态方法。Object.is() 和 === 之间唯一的区别在于它们如何处理带符号的零和 NaN 值。=== 运算符（和 == 运算符）将数字值 -0 和 +0 视为相等，但将 NaN 视为彼此不相等。

结论

• 当您希望通过类型转换比较值（并了解其含义）时，请使用==。 实际上，相等运算符的唯一合理用例是在单个比较中同时检查null和undefined以方便使用。
• 当您希望确保值和类型都相同时，请使用===，这在大多数情况下是更安全、更可预测的选择。

笔记

• 建议使用 ===（严格相等）以避免类型强制转换的缺陷，这可能导致代码中出现意外行为和错误。它使您的比较意图更清晰，并确保您同时比较值和类型。
• ESLint 的 eqeqeq 规则强制使用严格相等运算符 === 和 !==，甚至提供了一个选项，始终强制使用严格相等，除非与 null 字面量进行比较。

延伸阅读

• Equality (==) | MDN
• Strict equality (===) | MDN

TL;DR

未声明

未声明 变量是在您将值分配给先前未使用 var、let 或 const 创建的标识符时创建的。未声明的变量将在全局范围内定义，在当前范围之外。在严格模式下，当您尝试分配给未声明的变量时，将抛出 ReferenceError。未声明的变量和全局变量一样糟糕。不惜一切代价避免它们！要检查它们，请将其用法包装在 try/catch 块中。

function foo() {
  x = 1; // 在严格模式下抛出 ReferenceError
}

foo();
console.log(x); // 1 (如果不在严格模式下)

对未声明的变量使用 typeof 运算符将给出 'undefined'。

console.log(typeof y === 'undefined'); // true

undefined

一个undefined的变量是已声明但未赋值的变量。它的类型是undefined。如果一个函数没有返回值，并且它的结果被分配给一个变量，那么该变量也将具有undefined值。要检查它，请使用严格相等运算符（===）或typeof进行比较，这将给出'undefined'字符串。请注意，您不应该使用宽松相等运算符（==）进行检查，因为它在值为null时也会返回true。

let foo;
console.log(foo); // undefined
console.log(foo === undefined); // true
console.log(typeof foo === 'undefined'); // true

console.log(foo == null); // true. 错误，不要使用它来检查一个值是否为 undefined!

function bar() {} // 如果没有任何返回，则返回 undefined。
let baz = bar();
console.log(baz); // undefined

null

一个 null 的变量将被显式地赋值为 null 值。它表示没有值，并且与 undefined 的不同之处在于它已被显式赋值。要检查 null，只需使用严格相等运算符进行比较。请注意，与上述类似，您不应该使用松散相等运算符 (==) 进行检查，因为它在值为 undefined 时也会返回 true。

const foo = null;
console.log(foo === null); // true
console.log(typeof foo === 'object'); // true

console.log(foo == undefined); // true. 错误，不要使用它来检查一个值是否为 null!

注意事项

• 养成一个好习惯，永远不要让你的变量未声明或未赋值。如果您不打算使用它们，在声明后显式地将 null 赋值给它们。
• 始终在变量使用前显式声明它们以防止错误。
• 在您的工作流程中使用一些静态分析工具（例如 ESLint、TypeScript 编译器），将启用您未引用未声明变量的检查。

实践

在 GreatFrontEnd 上练习实现 检查 null 和 undefined 的类型实用程序。

延伸阅读

• MDN Web 文档：null
• MDN Web 文档：undefined
• MDN Web 文档：ReferenceError

TL;DR

.call 和 .apply 都用于使用特定的 this 上下文和参数来调用函数。主要区别在于它们接受参数的方式：

• .call(thisArg, arg1, arg2, ...)：单独获取参数。
• .apply(thisArg, [argsArray])：将参数作为数组获取。

假设我们有一个函数 add，可以使用以下方式使用 .call 和 .apply 调用该函数：

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

console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3

Call vs Apply

.call 和 .apply 都用于调用函数，第一个参数将用作函数中 this 的值。但是，.call 将逗号分隔的参数作为下一个参数，而 .apply 将参数数组作为下一个参数。

记住这一点的一个简单方法是 C 代表 call 和逗号分隔，A 代表 apply 和参数数组。

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

console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3

使用 ES6 语法，我们可以使用数组以及用于参数的扩展运算符来调用 call。

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

console.log(add.call(null, ...[1, 2])); // 3

用例

上下文管理

.call 和 .apply 可以在调用不同对象上的方法时显式设置 this 上下文。

const person = {
  name: 'John',
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

const anotherPerson = { name: 'Alice' };

person.greet.call(anotherPerson); // Hello, my name is Alice
person.greet.apply(anotherPerson); // Hello, my name is Alice

函数借用

.call 和 .apply 都允许从一个对象借用方法并在另一个对象的上下文中使它们。当将函数作为参数（回调）传递并且原始 this 上下文丢失时，这很有用。.call 和 .apply 允许使用预期的 this 值调用该函数。

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

const person1 = { name: 'John' };
const person2 = { name: 'Alice' };

greet.call(person1); // Hello, my name is John
greet.apply(person2); // Hello, my name is Alice

调用对象方法的替代语法

.apply 可以通过将对象作为第一个参数传递，然后传递通常的参数来与对象方法一起使用。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

Array.prototype.push.apply(arr1, arr2); // Same as arr1.push(4, 5, 6)

console.log(arr1); // [1, 2, 3, 4, 5, 6]

分解上述内容：

1. 第一个对象 arr1 将用作 this 值。
2. 在 arr1 上调用 .push()，使用 arr2 作为参数数组，因为它使用 .apply()。
3. Array.prototype.push.apply(arr1, arr2) 等同于 arr1.push(...arr2)。

可能并不明显，但 Array.prototype.push.apply(arr1, arr2) 会导致修改 arr1。如果可能，使用面向 OOP 的方式调用方法会更清晰。

后续问题

• .call 和 .apply 与 Function.prototype.bind 有什么不同？

实践

在 GreatFrontEnd 上实践实现你自己的 Function.prototype.call 方法 和 Function.prototype.apply 方法。

延伸阅读

• Function.prototype.call | MDN
• Function.prototype.apply | MDN

TL;DR

主要区别在于 mouseenter 和 mouseover 事件的冒泡行为。mouseenter 不冒泡，而 mouseover 冒泡。

mouseenter 事件不冒泡。mouseenter 事件仅在鼠标指针进入元素本身时触发，而不是其后代元素。如果父元素有子元素，并且鼠标指针进入子元素，则不会再次在父元素上触发 mouseenter 事件，它仅在进入父元素时触发一次，而不考虑其内容。如果父元素和子元素都附加了 mouseenter 侦听器，并且鼠标指针从父元素移动到子元素，则 mouseenter 将仅为子元素触发。

mouseover 事件会在 DOM 树中冒泡。当鼠标指针进入元素或其后代时，会触发 mouseover 事件。如果父元素有子元素，并且鼠标指针进入子元素，则父元素也会再次触发 mouseover 事件。如果父元素有多个子元素，这可能导致多次触发事件回调。如果有子元素，并且鼠标指针从父元素移动到子元素，则 mouseover 将同时为父元素和子元素触发。

mouseenter 事件：

• 不冒泡：mouseenter 事件不冒泡。它仅在鼠标指针进入附加了事件侦听器的元素时触发，而不是进入任何子元素时触发。
• 触发一次：当鼠标指针进入元素时，mouseenter 事件仅触发一次，这使得它在某些情况下更可预测且更易于管理。

mouseenter 的一个用例是，当您希望检测鼠标进入元素而无需担心子元素多次触发事件时。

mouseover 事件：

• 在 DOM 中冒泡：mouseover 事件通过 DOM 冒泡。这意味着，如果您在父元素上有一个事件侦听器，当鼠标指针移动到任何子元素上时，它也会触发。
• 多次触发：每次鼠标指针移动到元素或其任何子元素上时，都会触发 mouseover 事件。如果您有嵌套元素，这可能导致多次触发。

mouseover 的一个用例是，当您希望检测鼠标进入元素或其任何子元素，并且可以接受事件多次触发时。

示例

这是一个演示 mouseover 和 mouseenter 事件之间区别的示例：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mouse Events Example</title>
    <style>
      .parent {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        padding: 20px;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: lightcoral;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      Parent Element
      <div class="child">Child Element</div>
    </div>

    <script>
      const parent = document.querySelector('.parent');
      const child = document.querySelector('.child');

      // Mouseover event on parent.
      parent.addEventListener('mouseover', () => {
        console.log('Mouseover on parent');
      });

      // Mouseenter event on parent.
      parent.addEventListener('mouseenter', () => {
        console.log('Mouseenter on parent');
      });

      // Mouseover event on child.
      child.addEventListener('mouseover', () => {
        console.log('Mouseover on child');
      });

      // Mouseenter event on child.
      child.addEventListener('mouseenter', () => {
        console.log('Mouseenter on child');
      });
    </script>
  </body>
</html>

预期行为

• 当鼠标进入父元素时：
  • 父元素上的 mouseover 事件将触发。
  • 父元素上的 mouseenter 事件将触发。
• 当鼠标进入子元素时：
  • 父元素上的 mouseover 事件将再次触发，因为 mouseover 从子元素冒泡。
  • 子元素上的 mouseover 事件将触发。
  • 子元素上的 mouseenter 事件将触发。
  • 父元素上的 mouseenter 事件将不会再次触发，因为 mouseenter 不冒泡。

延伸阅读

• Element: mouseenter event - Web APIs | MDN
• Element: mouseover event - Web APIs | MDN

TL;DR

在 JavaScript 中，数据类型可以分为 原始 和 非原始 类型：

原始数据类型

• Number：表示整数和浮点数。
• String：表示字符序列。
• Boolean：表示 true 或 false 值。
• Undefined：已声明但未赋值的变量。
• Null：表示有意缺失任何对象值。
• Symbol：用作对象属性键的唯一且不可变的值。在我们的 关于 Symbol 的深入探讨 中阅读更多内容
• BigInt：表示任意精度的整数。

非原始（引用）数据类型

• Object：用于存储数据集合。
• Array：数据的有序集合。
• Function：可调用对象。
• Date：表示日期和时间。
• RegExp：表示正则表达式。
• Map：键控数据项的集合。
• Set：唯一值的集合。

原始类型存储单个值，而非原始类型可以存储数据集合或复杂实体。

JavaScript 中的数据类型

与许多编程语言一样，JavaScript 具有多种数据类型来表示不同种类的数据。 JavaScript 中的主要数据类型可以分为两类：原始类型和非原始（引用）类型。

原始数据类型

1. Number：表示整数和浮点数。 JavaScript 只有一种数字类型。

let age = 25;
let price = 99.99;
console.log(price); // 99.99

2. String：表示字符序列。 Strings 可以用单引号、双引号或反引号（用于模板字面量）括起来。

let myName = 'John Doe';
let greeting = 'Hello, world!';
let message = `Welcome, ${myName}!`;
console.log(message); // "Welcome, John Doe!"

3. Boolean：表示逻辑实体，可以有两个值：true 或 false。

let isActive = true;
let isOver18 = false;
console.log(isOver18); // false

4. Undefined：已声明但未赋值的变量的类型为 undefined。

let user;
console.log(user); // undefined

5. Null: 表示任何对象值有意缺失。它是一个原始值，被视为假值。

let user = null;
console.log(user); // null
if (!user) {
  console.log('user is a falsy value');
}

6. Symbol: 一种独特且不可变的原始值，通常用作对象属性的键。

let sym1 = Symbol();
let sym2 = Symbol('description');
console.log(sym1); // Symbol()
console.log(sym2); // Symbol(description)

7. BigInt：用于表示任意精度的整数，对于处理非常大的数字很有用。

let bigNumber = BigInt(9007199254740991);
let anotherBigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber); // 9007199254740991n
console.log(anotherBigNumber); // 1234567890123456789012345678901234567890n

非原始（引用）数据类型

1. Object: 用于存储数据集合和更复杂的实体。Objects 使用大括号 {} 创建。

let person = {
  name: 'Alice',
  age: 30,
};
console.log(person); // {name: "Alice", age: 30}

2. Array: 一种特殊类型的对象，用于存储有序的数据集合。Arrays 使用方括号 [] 创建。

let numbers = [1, 2, 3, 4, 5];
console.log(numbers);

3. Function: JavaScript 中的函数是对象。它们可以使用函数声明或表达式来定义。

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

let add = function (a, b) {
  return a + b;
};

greet(); // "Hello!"
console.log(add(2, 3)); // 5

4. Date: 表示日期和时间。Date 对象用于处理日期。

let today = new Date().toLocaleTimeString();
console.log(today);

5. RegExp: 表示正则表达式，正则表达式是用于匹配字符串中字符组合的模式。

let pattern = /abc/;
let str = '123abc456';

console.log(pattern.test(str)); // true

6. Map: 键控数据项的集合，类似于对象，但允许任何类型的键。

let map = new Map();
map.set('key1', 'value1');
console.log(map);

7. Set: 唯一值的集合。

let set = new Set();
set.add(1);
set.add(2);
console.log(set); // { 1, 2 }

确定数据类型

JavaScript 是一种动态类型语言，这意味着变量可以随时间推移保存不同数据类型的值。typeof 运算符可用于确定值或变量的数据类型。

console.log(typeof 42); // "number"
console.log(typeof 'hello'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (this is a historical bug in JavaScript)
console.log(typeof Symbol()); // "symbol"
console.log(typeof BigInt(123)); // "bigint"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function () {}); // "function"

陷阱

类型强制转换

JavaScript 经常执行类型强制转换，将值从一种类型转换为另一种类型，这可能导致意外结果。

let result = '5' + 2;
console.log(result, typeof result); // "52 string" (string concatenation)

let difference = '5' - 2;
console.log(difference, typeof difference); // 3 "number" (numeric subtraction)

在第一个例子中，由于字符串可以使用 + 运算符进行连接，因此该数字被转换为字符串，并且两个字符串连接在一起。在第二个例子中，字符串不能与减号运算符 (-) 一起使用，但两个数字可以相减，因此字符串首先被转换为数字，结果是差值。

延伸阅读

• JavaScript data types and data structures - MDN
• JavaScript guide: Data types
• Data types - javascript.info
• JavaScript data types

TL;DR

JavaScript 中的 Map 对象和普通对象都可以存储键值对，但它们有几个关键的区别：

Map vs 普通 JavaScript 对象

在 JavaScript 中，Map 对象和普通对象（也称为“POJO”或“普通旧 JavaScript 对象”）都用于存储键值对，但它们具有不同的特性、用例和行为。

普通 JavaScript 对象 (POJO)

普通对象是使用 {} 语法创建的基本 JavaScript 对象。它是一个键值对的集合，其中每个键都是一个字符串（或现代 JavaScript 中的符号），每个值可以是任何类型的值，包括字符串、数字、布尔值、数组、对象等。

const person = { name: 'John', age: 30, occupation: 'Developer' };
console.log(person);

Map 对象

在 ECMAScript 2015 (ES6) 中引入的 Map 对象是一种更高级的数据结构，它允许您存储具有附加功能的键值对。Map 是可迭代的，这意味着您可以在 for...of 循环中使用它，并且它提供了用于常见操作（如 get、set、has 和 delete）的方法。

const person = new Map([
  ['name', 'John'],
  ['age', 30],
  ['occupation', 'Developer'],
]);
console.log(person);

关键区别

以下是 Map 对象和普通对象之间的主要区别：

1. 键类型：在普通对象中，键始终是字符串（或符号）。在 Map 中，键可以是任何类型的值，包括对象、数组，甚至其他 Map。
2. 键顺序：在普通对象中，键的顺序不保证。在 Map 中，键的顺序被保留，您可以按照它们插入的顺序进行迭代。
3. 迭代：Map 是可迭代的，这意味着您可以使用 for...of 循环来迭代其键值对。默认情况下，普通对象不可迭代，但您可以使用 Object.keys() 或 Object.entries() 来迭代其属性。
4. 性能：Map 对象通常比普通对象更快、更高效，尤其是在处理大型数据集时。
5. 方法：Map 对象提供了其他方法，例如 get、set、has 和 delete，这使得处理键值对更容易。
6. 序列化：将 Map 对象序列化为 JSON 时，它将被转换为一个对象，但现有的 Map 属性可能会在转换过程中丢失。另一方面，普通对象被序列化为具有相同结构的 JSON 对象。

何时使用哪个

当您需要时使用普通对象 (POJO)：

• 您需要一个具有字符串键的简单、轻量级对象。
• 您正在处理小型数据集。
• 您需要将对象序列化为 JSON（例如，通过网络发送）。

当您需要时使用 Map 对象：

• 您需要使用非字符串键（例如对象、数组）存储键值对。
• 您需要保留键值对的顺序。
• 您需要按特定顺序迭代键值对。
• 您正在处理大型数据集，需要更好的性能。

总而言之，虽然普通对象和 Map 对象都可以用来存储键值对，但 Map 对象提供了更高级的功能、更好的性能和额外的方法，使其成为更复杂用例的更好选择。

注意事项

Map 对象无法被序列化以在 HTTP 请求中发送，但像 superjson 这样的库允许它们被序列化和反序列化。

延伸阅读

• Map - JavaScript | MDN
• Object - JavaScript | MDN

TL;DR

在 JavaScript 中，代理是一个充当对象和代码之间中介的 对象。代理用于拦截和自定义 JavaScript 对象的基本操作，例如属性访问、赋值、函数调用等。

以下是使用 Proxy 记录每个属性访问的基本示例：

const myObject = {
  name: 'John',
  age: 42,
};

const handler = {
  get: function (target, prop, receiver) {
    console.log(`Someone accessed property "${prop}"`);
    return target[prop];
  },
};

const proxiedObject = new Proxy(myObject, handler);

console.log(proxiedObject.name);
// Someone accessed property "name"
// 'John'

console.log(proxiedObject.age);
// Someone accessed property "age"
// 42

用例包括：

• 属性访问拦截：拦截和自定义对对象的属性访问。
  • 属性赋值验证：在将属性值设置到目标对象之前验证它们。
  • 日志记录和调试：创建用于记录和调试与对象交互的包装器
  • 创建反应式系统：当对象属性更改时，触发应用程序其他部分的更新（数据绑定）。
  • 数据转换：转换从对象设置或检索的数据。
  • 在测试中模拟和存根：为测试目的创建模拟或存根对象，允许您隔离依赖项并专注于被测单元
• 函数调用拦截：用于缓存和返回经常访问的方法的结果（如果它们涉及网络调用或计算密集型逻辑），从而提高性能
• 动态属性创建：用于即时定义具有默认值的属性，并避免在对象中存储冗余数据。

JavaScript 代理

在 JavaScript 中，代理是一个允许您自定义另一个对象（通常称为目标对象）行为的对象。代理可以拦截和重新定义目标对象的各种操作，例如属性访问、赋值、枚举、函数调用等。这使得代理成为各种用例的强大工具，包括但不限于验证、日志记录、性能监控和实现高级数据结构。

以下是代理在 JavaScript 中使用的一些常见用例和示例：

属性访问拦截

代理可用于拦截和自定义对对象的属性访问。

const target = {
  message: 'Hello, world!',
};

const handler = {
  get: function (target, property) {
    if (property in target) {
      return target[property];
    }

    return `Property ${property} does not exist.`;
  },
};

const proxy = new Proxy(target, handler);

console.log(proxy.message); // Hello, world!
console.log(proxy.nonExistentProperty); // Property nonExistentProperty does not exist.

创建用于日志记录和调试的包装器

这对于创建用于记录和调试与对象交互的包装器很有用。

const target = {
  name: 'Alice',
  age: 30,
};

const handler = {
  get: function (target, property) {
    console.log(`Getting property ${property}`);
    return target[property];
  },
  set: function (target, property, value) {
    console.log(`Setting property ${property} to ${value}`);
    target[property] = value;
    return true;
  },
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // Output: Getting property name
//         Alice
proxy.age = 31; // Output: Setting property age to 31
console.log(proxy.age); // Output: Getting property age
//         31

属性赋值验证

代理可用于在将属性值设置到目标对象之前验证它们。

const target = {
  age: 25,
};

const handler = {
  set: function (target, property, value) {
    if (property === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a number');
    }
    target[property] = value;
    return true;
  },
};

const proxy = new Proxy(target, handler);

proxy.age = 30; // Works fine
proxy.age = 'thirty'; // Throws TypeError: Age must be a number

创建响应式系统

代理通常用于在对象属性更改时触发应用程序其他部分的更新（数据绑定）。

一个实际的例子是像 Vue.js 这样的 JavaScript 框架，其中代理用于创建响应式系统，当数据更改时自动更新 UI。

const target = {
  firstName: 'John',
  lastName: 'Doe',
};

const handler = {
  set: function (target, property, value) {
    console.log(`Property ${property} set to ${value}`);
    target[property] = value;
    // Automatically update the UI or perform other actions
    return true;
  },
};

const proxy = new Proxy(target, handler);

proxy.firstName = 'Jane'; // Output: Property firstName set to Jane

访问拦截的其他用例包括：

• 模拟和存根：代理可用于创建用于测试目的的模拟或存根对象，允许您隔离依赖项并专注于被测单元。

函数调用拦截

代理可以拦截和自定义函数调用。

const target = function (name) {
  return `Hello, ${name}!`;
};

const handler = {
  apply: function (target, thisArg, argumentsList) {
    console.log(`Called with arguments: ${argumentsList}`);
    return target.apply(thisArg, argumentsList);
  },
};

const proxy = new Proxy(target, handler);

console.log(proxy('Alice')); // Called with arguments: Alice
// Hello, Alice!

如果频繁访问的方法涉及网络调用或计算密集型逻辑，则此拦截可用于缓存并返回结果，从而通过减少发出的请求/计算次数来提高性能。

动态属性创建

代理可用于动态地在对象上创建属性或方法。这对于使用默认值即时定义属性并避免在对象中存储冗余数据非常有用。

const target = {};

const handler = {
  get: function (target, property) {
    if (!(property in target)) {
      target[property] = `Dynamic property ${property}`;
    }
    return target[property];
  },
};

const proxy = new Proxy(target, handler);

console.log(proxy.newProp); // Output: Dynamic property newProp
console.log(proxy.anotherProp); // Output: Dynamic property anotherProp

实现对象关系映射器 (ORM)

代理可用于创建数据库记录的对象，方法是拦截属性访问以从数据库中惰性加载数据。这提供了一个更面向对象的接口来与数据库交互。

实际用例

许多流行的库，尤其是状态管理解决方案，都是建立在 JavaScript 代理之上的：

• Vue.js: Vue.js 是一个用于构建用户界面的渐进式框架。在 Vue 3 中，代理被广泛用于实现响应式系统。
• MobX: MobX 使用代理使对象和数组可观察，允许组件自动响应状态变化。
• Immer: Immer 是一个允许你以更方便的方式处理不可变状态的库。它使用代理来跟踪更改并生成下一个不可变状态。

总结

JavaScript 中的代理提供了一种强大而灵活的方式来拦截和自定义对象上的操作。它们适用于广泛的应用程序，包括验证、日志记录、调试、动态属性创建和实现响应式系统。通过使用代理，开发人员可以创建更强大、更易于维护且功能更丰富的应用程序。

延伸阅读

• Proxy - JavaScript | MDN
• Proxy and Reflect | JavaScript.info

TL;DR

回调函数是作为参数传递给另一个函数的函数，然后在外部函数中调用该函数以完成某种例程或操作。在异步操作中，回调用于处理需要时间才能完成的任务，例如网络请求或文件 I/O，而不会阻塞其余代码的执行。例如：

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'John', age: 30 };
    callback(data);
  }, 1000);
}

fetchData((data) => {
  console.log(data);
});

什么是回调函数？

回调函数是作为参数传递给另一个函数并在完成某些操作后执行的函数。这在异步编程中特别有用，其中需要处理网络请求、文件 I/O 或计时器等操作，而不会阻塞主执行线程。

同步与异步回调

• 同步回调 在传递给它们的函数中立即执行。它们是阻塞的，代码执行会等待它们完成。
• 异步回调 在完成某个事件或操作后执行。它们是非阻塞的，允许代码执行在等待操作完成的同时继续进行。

同步回调示例

function greet(name, callback) {
  console.log('Hello ' + name);
  callback();
}

function sayGoodbye() {
  console.log('Goodbye!');
}

greet('Alice', sayGoodbye);
// Output:
// Hello Alice
// Goodbye!

异步回调示例

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'John', age: 30 };
    callback(data);
  }, 1000);
}

fetchData((data) => {
  console.log(data);
});
// Output after 1 second:
// { name: 'John', age: 30 }

常见用例

• 网络请求：从 API 获取数据
• 文件 I/O：读取或写入文件
• 计时器：使用 setTimeout 或 setInterval 延迟执行
• 事件处理：响应用户操作，如单击或按键

在回调中处理错误

处理异步操作时，正确处理错误非常重要。一个常见的模式是使用回调函数的第一个参数来传递一个错误对象（如果有）。

function fetchData(callback) {
  // assume asynchronous operation to fetch data
  const { data, error } = { data: { name: 'John', age: 30 }, error: null };
  callback(error, data);
}

fetchData((error, data) => {
  if (error) {
    console.error('An error occurred:', error);
  } else {
    console.log(data);
  }
});

延伸阅读

• MDN Web Docs: Callback function
• JavaScript.info: Callbacks
• Node.js: Asynchronous programming and callbacks

TL;DR

微任务队列是一个任务队列，需要在当前执行的脚本之后和任何其他任务之前执行。微任务通常用于需要紧接在当前操作之后执行的任务，例如 promise 回调。微任务队列在宏任务队列之前处理，确保微任务尽快执行。

微任务队列的概念

什么是微任务队列？

微任务队列是 JavaScript 事件循环机制的一部分。它是一个队列，用于保存需要在当前执行的脚本之后和宏任务队列中的任何其他任务之前执行的任务。微任务通常用于需要尽快执行的操作，例如 promise 回调和 MutationObserver 回调。

微任务队列如何工作？

1. 执行顺序：微任务队列在当前执行的脚本之后和宏任务队列之前处理。这意味着微任务的优先级高于宏任务。
2. 事件循环：在事件循环的每次迭代期间，JavaScript 引擎首先处理微任务队列中的所有微任务，然后再转到宏任务队列。
3. 添加微任务：可以使用 Promise.resolve().then() 和 queueMicrotask() 等方法将微任务添加到微任务队列中。

例子

这里有一个例子来说明微任务队列的工作原理：

console.log('Script start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve()
  .then(() => {
    console.log('Promise 1');
  })
  .then(() => {
    console.log('Promise 2');
  });

console.log('Script end');

输出：

Script start
Script end
Promise 1
Promise 2
setTimeout

在这个例子中：

• 同步代码（console.log('Script start') 和 console.log('Script end')）首先执行。
• promise 回调（Promise 1 和 Promise 2）被添加到微任务队列中，然后执行。
• setTimeout 回调被添加到宏任务队列中，最后执行。

用例

1. Promise 回调：微任务通常用于 promise 回调，以确保它们在当前操作之后尽快执行。
2. MutationObserver：MutationObserver API 使用微任务来通知 DOM 中的更改。

延伸阅读

• MDN Web 文档：微任务
• JavaScript 事件循环解释
• 理解 JavaScript 微任务队列

TL;DR

缓存是一种用于存储文件或数据的副本的临时存储技术，以减少访问它们所需的时间。它通过减少重复从原始来源获取数据的需要来提高性能。在前端开发中，可以使用浏览器缓存、service workers 和 HTTP 标头（如 Cache-Control）来实现缓存。

缓存的概念以及如何使用它来提高性能

什么是缓存？

缓存是一种用于将文件或数据的副本存储在临时存储位置（称为缓存）中的技术，以减少访问它们所需的时间。缓存的主要目标是通过最大限度地减少重复从原始来源获取数据的需要来提高性能。

缓存的类型

浏览器缓存

浏览器缓存将网页、图像和其他资源的副本存储在用户设备的本地。当用户重新访问网站时，浏览器可以从缓存中加载这些资源，而不是从服务器获取它们，从而加快加载时间。

Service workers

Service workers 是在后台运行的脚本，可以拦截网络请求。它们可以缓存资源并从缓存中提供它们，即使在用户离线时也是如此。这可以显著提高性能并提供更好的用户体验。

HTTP 缓存

HTTP 缓存涉及使用 HTTP 标头来控制如何以及何时缓存资源。常见的标头包括 Cache-Control、Expires 和 ETag。

缓存如何提高性能

减少延迟

通过将经常访问的数据存储在更靠近用户的位置，缓存减少了检索该数据所需的时间。这可以加快加载时间并提供更流畅的用户体验。

减少服务器负载

缓存减少了向服务器发出的请求数量，这有助于减少服务器负载并提高整体性能。

离线访问

通过 Service Worker，即使在用户离线时也可以提供缓存的资源，从而提供无缝体验。

实现缓存

浏览器缓存示例

<head>
  <link rel="stylesheet" href="styles.css" />
  <script src="app.js"></script>
</head>

Service worker 示例

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll(['/index.html', '/styles.css', '/app.js']);
    }),
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    }),
  );
});

HTTP 缓存示例

Cache-Control: max-age=3600

延伸阅读

• Service Workers: an Introduction

TL;DR

代码覆盖率是一个衡量测试套件运行时执行代码百分比的指标。它通过识别代码库中未测试的部分来帮助评估测试的质量。较高的代码覆盖率通常表明测试更彻底，但并不能保证没有错误。可以使用 Istanbul 或 Jest 等工具来衡量代码覆盖率。

什么是代码覆盖率？

代码覆盖率是一个软件测试指标，用于确定在自动化测试期间执行的代码量。它提供了关于代码库的哪些部分正在被测试以及哪些部分没有被测试的见解。

代码覆盖率的类型

1. 语句覆盖率：衡量已执行的代码中的语句数量。
2. 分支覆盖率：衡量每个分支（例如，if 和 else 块）是否已被执行。
3. 函数覆盖率：衡量代码中每个函数是否已被调用。
4. 行覆盖率：衡量已执行的代码行数。
5. 条件覆盖率：衡量每个布尔子表达式是否已被评估为真和假。

示例

考虑以下 JavaScript 函数：

function isEven(num) {
  if (num % 2 === 0) {
    return true;
  } else {
    return false;
  }
}

此函数的测试套件可能如下所示：

test('isEven returns true for even numbers', () => {
  expect(isEven(2)).toBe(true);
});

test('isEven returns false for odd numbers', () => {
  expect(isEven(3)).toBe(false);
});

在此测试套件上运行代码覆盖率工具将显示 100% 的语句、分支、函数和行覆盖率，因为代码的所有部分都已执行。

如何衡量代码覆盖率

工具

1. Istanbul：一个流行的 JavaScript 代码覆盖率工具。
2. Jest：一个测试框架，包含内置的代码覆盖率报告。
3. Karma：一个测试运行器，可以配置为使用 Istanbul 进行代码覆盖率。

使用 Jest 的示例

要使用 Jest 衡量代码覆盖率，您可以在运行测试时添加 --coverage 标志：

jest --coverage

这将生成一个覆盖率报告，显示测试覆盖代码的百分比。

使用代码覆盖率评估测试质量

优点

• 识别未测试的代码：帮助找到未被测试覆盖的代码库部分。
• 改进测试套件：鼓励编写更全面的测试。
• 增加信心：更高的覆盖率可以增加对代码稳定性的信心。

局限性

• 虚假的安全感：高覆盖率并不能保证没有错误。
• 质量胜于数量：100% 的覆盖率并不意味着测试质量高。测试还应检查边缘情况和潜在错误。

延伸阅读

• Istanbul documentation
• Jest code coverage
• Karma coverage

总结

内容安全策略 (CSP) 是一项安全功能，通过指定受信任的内容来源，帮助防止各种类型的攻击，例如跨站点脚本 (XSS) 和数据注入攻击。它的工作原理是允许开发人员定义一个受信任的脚本、样式和图像等内容来源的白名单。这通过 HTTP 标头或 meta 标签完成。例如，您可以使用 Content-Security-Policy 标头来指定仅应执行来自您自己域的脚本：

Content-Security-Policy: script-src 'self'

什么是内容安全策略 (CSP)？

内容安全策略 (CSP) 是一项安全标准，旨在缓解一系列攻击，包括跨站点脚本 (XSS) 和数据注入攻击。CSP 允许 Web 开发人员控制用户代理允许为给定页面加载的资源。通过指定受信任内容来源的白名单，CSP 有助于防止恶意内容的执行。

CSP 的工作原理

CSP 的工作原理是允许开发人员定义一组规则，用于指定哪些内容来源被认为是可信的。这些规则通过 HTTP 标头或 meta 标签传递给浏览器。当浏览器加载页面时，它会检查 CSP 规则并阻止任何与指定来源不匹配的内容。

CSP 标头的示例

以下是一个简单的 CSP 标头的示例，该标头仅允许来自同一来源的脚本：

Content-Security-Policy: script-src 'self'

此策略告诉浏览器仅执行从与页面本身相同的来源加载的脚本。

常用指令

• object-src：指定 Flash 等插件的有效来源。

使用 CSP 的好处

• 提高安全态势：实施 CSP 是一项积极措施，可增强 Web 应用程序的整体安全性。

实施 CSP

可以使用 HTTP 标头或 meta 标签来实现 CSP。通常首选 HTTP 标头方法，因为它更安全，并且不易被攻击者覆盖。

使用 HTTP 标头

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com

使用 meta 标签

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' https://trusted.cdn.com" />

延伸阅读

• Google Developers: CSP: Content Security Policy

TL;DR

跨站点请求伪造 (CSRF) 是一种攻击，恶意网站会诱骗用户的浏览器向用户已通过身份验证的另一个站点发出不需要的请求。这可能导致代表用户执行未经授权的操作。缓解技术包括使用反 CSRF 令牌、SameSite cookie 和确保适当的 CORS 配置。

跨站点请求伪造 (CSRF) 及其缓解技术

什么是 CSRF？

跨站点请求伪造 (CSRF) 是一种攻击类型，当恶意网站导致用户的浏览器在用户已通过身份验证的不同站点上执行不需要的操作时，就会发生这种攻击。这可能导致未经授权的操作，例如更改帐户详细信息、进行购买或其他用户无意执行的操作。

CSRF 如何工作？

1. 用户身份验证：用户登录到受信任的网站（例如，银行网站）并收到身份验证 cookie。
2. 恶意网站：用户在仍登录到受信任网站的情况下访问恶意网站。
3. 不需要的请求：恶意网站包含向受信任网站发出请求的代码，使用用户的身份验证 cookie 代表用户执行操作。

缓解技术

反 CSRF 令牌

防止 CSRF 攻击的最有效方法之一是使用反 CSRF 令牌。这些令牌是服务器生成的、包含在表单或请求中的唯一且不可预测的值。然后，服务器验证该令牌以确保请求是合法的。

<form method="POST" action="/update-profile">
  <input type="hidden" name="csrf_token" value="unique_token_value" />
  <!-- other form fields -->
  <button type="submit">Update Profile</button>
</form>

在服务器端，验证令牌以确保它与预期值匹配。

SameSite cookie

cookie 上的 SameSite 属性可以通过限制 cookie 如何与跨站点请求一起发送来帮助缓解 CSRF 攻击。SameSite 属性可以设置为 Strict、Lax 或 None。

Set-Cookie: sessionId=abc123; SameSite=Strict

• Strict：Cookie 仅在第一方上下文中发送，而不是与第三方网站发起的请求一起发送。
• Lax：Cookie 不会通过正常的跨站点子请求（例如，加载图像）发送，但会在用户从外部站点导航到 URL 时发送（例如，点击链接）。
• None：Cookie 在所有上下文中发送，包括跨源请求。

CORS（跨源资源共享）

正确配置 CORS 可以通过确保只有受信任的来源才能向您的服务器发出请求来帮助防止 CSRF 攻击。这涉及在服务器上设置适当的标头以指定允许访问资源的来源。

Access-Control-Allow-Origin: https://trustedwebsite.com

延伸阅读

• OWASP CSRF 预防备忘单
• MDN Web 文档：SameSite cookies
• MDN Web 文档：跨域资源共享 (CORS)

总结

防抖和节流是用于控制函数执行速率的技术。防抖确保函数仅在自上次调用后经过指定的延迟后才被调用。节流确保函数在一个指定的时间间隔内最多被调用一次。

防抖会延迟函数的执行，直到自上次调用后经过一定的时间。这对于搜索输入框等场景非常有用，在这些场景中，您希望在用户停止输入后才进行 API 调用。

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

const debouncedHello = debounce(() => console.log('Hello world!'), 2000);
debouncedHello(); // Prints 'Hello world!' after 2 seconds

节流确保函数在一个指定的时间间隔内最多被调用一次。这对于窗口调整大小或滚动等场景非常有用，在这些场景中，您希望限制函数被调用的次数。

function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

const handleResize = throttle(() => {
  // Update element positions
  console.log('Window resized at', new Date().toLocaleTimeString());
}, 2000);

// Simulate rapid calls to handleResize every 100ms
let intervalId = setInterval(() => {
  handleResize();
}, 100);
// 'Window resized' is outputted only every 2 seconds due to throttling

防抖和节流

防抖

防抖是一种技术，用于确保函数仅在自上次调用后经过一定时间后才执行。这在您希望限制函数被调用次数的场景中特别有用，例如处理用户输入事件（如按键或鼠标移动）。

使用案例

想象一下，您有一个搜索输入框，并且您想进行 API 调用来获取搜索结果。如果没有防抖，每次用户输入一个字符时都会进行 API 调用，这可能会导致大量不必要的调用。防抖确保仅在用户停止输入指定时间后才进行 API 调用。

代码示例

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// Usage
const handleSearch = debounce((query) => {
  // Make API call
  console.log('API call with query:', query);
}, 300);

document.getElementById('searchInput').addEventListener('input', (event) => {
  handleSearch(event.target.value);
});

节流

节流是一种技术，用于确保函数在一个指定的时间间隔内最多被调用一次。这在您希望限制函数被调用次数的场景中很有用，例如处理窗口调整大小或滚动等事件。

使用案例

想象一下，您有一个函数，该函数根据窗口大小更新屏幕上元素的位置。如果没有节流，此函数可能会在用户调整窗口大小时每秒被调用多次，从而导致性能问题。节流确保该函数在一个指定的时间间隔内最多被调用一次。

代码示例

function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

// Usage
const handleResize = throttle(() => {
  // Update element positions
  console.log('Window resized');
}, 100);

window.addEventListener('resize', handleResize);

延伸阅读

• 通过示例解释防抖和节流
• 了解防抖和节流之间的区别
• Lodash 防抖和节流文档

总结

解构赋值是 JavaScript 中的一种语法，它允许您将数组中的值或对象中的属性解包到不同的变量中。对于数组，您使用方括号，对于对象，您使用花括号。例如：

// 数组解构
const [a, b] = [1, 2];

// 对象解构
const { name, age } = { name: 'John', age: 30 };

对象和数组的解构赋值

解构赋值是一种方便的方法，用于将数组和对象中的值提取到单独的变量中。这可以使您的代码更具可读性和简洁性。

数组解构

数组解构允许您使用方括号将数组中的值解包到不同的变量中。

基本示例

const numbers = [1, 2, 3];
const [first, second, third] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3

跳过值

您可以通过在逗号之间留一个空格来跳过数组中的值。

const numbers = [1, 2, 3];
const [first, , third] = numbers;

console.log(first); // 1
console.log(third); // 3

默认值

如果数组没有足够的元素，您可以分配默认值。

const numbers = [1];
const [first, second = 2] = numbers;

console.log(first); // 1
console.log(second); // 2

对象解构

对象解构允许您使用花括号将对象中的属性解包到不同的变量中。

基本示例

const person = { name: 'John', age: 30 };
const { name, age } = person;

console.log(name); // John
console.log(age); // 30

重命名变量

您可以在解构时重命名变量。

const person = { name: 'John', age: 30 };
const { name: personName, age: personAge } = person;

console.log(personName); // John
console.log(personAge); // 30

默认值

如果属性在对象中不存在，您可以分配默认值。

const person = { name: 'John' };
const { name, age = 25 } = person;

console.log(name); // John
console.log(age); // 25

嵌套对象

您也可以解构嵌套对象。

const person = { name: 'John', address: { city: 'New York', zip: '10001' } };
const {
  name,
  address: { city, zip },
} = person;

console.log(name); // John
console.log(city); // New York
console.log(zip); // 10001

延伸阅读

• MDN Web Docs: Destructuring assignment
• JavaScript.info: Destructuring assignment
• FreeCodeCamp: How Destructuring Works in JavaScript

TL;DR

JavaScript 中的错误传播指的是错误如何通过调用堆栈传递。当函数中发生错误时，可以使用 try...catch 块捕获和处理它。如果未捕获，错误会沿着调用堆栈向上冒泡，直到它被捕获或导致程序终止。例如：

function a() {
  throw new Error('An error occurred');
}

function b() {
  a();
}

try {
  b();
} catch (e) {
  console.error(e.message); // Outputs: An error occurred
}

JavaScript 中的错误传播

JavaScript 中的错误传播是一种机制，它允许错误沿着调用堆栈传递，直到它们被捕获和处理。这对于调试和确保错误不会导致整个应用程序意外崩溃至关重要。

错误如何传播

当函数中发生错误时，它可以在该函数内被捕获和处理，或者沿着调用堆栈传递到调用函数。如果调用函数不处理该错误，它会继续在堆栈上传播，直到它到达全局范围，这可能会导致程序终止。

使用 try...catch 块

为了处理错误并防止它们进一步传播，您可以使用 try...catch 块。这是一个例子：

function a() {
  throw new Error('An error occurred');
}

function b() {
  a();
}

try {
  b();
} catch (e) {
  console.error(e.message); // Outputs: An error occurred
}

在这个例子中，函数 a 中抛出的错误传播到函数 b，然后传播到 try...catch 块，在那里它最终被捕获和处理。

异步代码的传播

错误传播在异步代码（如 promises 和 async/await）中的工作方式有所不同。对于 promises，您可以使用 .catch() 来处理错误：

function a() {
  return Promise.reject(new Error('An error occurred'));
}

function b() {
  return a();
}

b().catch((e) => {
  console.error(e.message); // Outputs: An error occurred
});

对于 async/await，您可以使用 try...catch 块：

async function a() {
  throw new Error('An error occurred');
}

async function b() {
  await a();
}

(async () => {
  try {
    await b();
  } catch (e) {
    console.error(e.message); // Outputs: An error occurred
  }
})();