28 个热门 JavaScript 面试问题及答案

KeepCatch
143 阅读1小时+

28 个热门 JavaScript 面试问题及答案

准备JavaScript面试需要大量的工作。扎实的JavaScript基础知识非常重要，但你也应该掌握JavaScript代码的调试方法，了解一些高级函数以及如何使用JavaScript构建项目。

1. 什么是 JavaScript？

JavaScript 是一种高级的、解释型编程语言，它可以用来创建具有动态功能的互动式网页和在线应用。它常被称为“通用语言”，开发者主要使用 JavaScript 进行前端和后端的开发工作。

2. JavaScript 中有哪些不同的数据类型？

JavaScript 原始数据类型：

  • JavaScript 的原始数据类型是编程语言中最基本的数据类型。它们是不可变的（immutable），这意味着一旦创建，它们的值就不能被更改。JavaScript 中共有七种原始数据类型：

    1. Undefined (未定义): 表示变量已被声明，但尚未赋值。它是任何未显式赋值的变量的默认值。

      let x;
console.log(x); // 输出: undefined

    2. Null (空值): 表示一个空值或不存在的对象。它与 undefined 不同，null 是有意为之的“无值”。

      let y = null;
console.log(y); // 输出: null

    3. Boolean (布尔值): 表示逻辑值，只有两个可能的值：true（真）和 false（假）。

      let isTrue = true;
let isFalse = false;

    4. Number (数值): 表示数值，包括整数和浮点数。JavaScript 不区分整数和浮点数，所有数字都以双精度 64 位浮点格式存储。

      let integer = 10;
let float = 3.14;
let negative = -5;

      特殊数值：

      • NaN (Not a Number): 表示非数值，通常在执行无效的数学运算时产生。例如，将字符串与数字相加。
      • Infinity: 表示正无穷大。
      • -Infinity: 表示负无穷大。

    5. BigInt (大整数): 表示任意精度的整数。当数值超过 Number 类型所能表示的最大安全整数 (Number.MAX_SAFE_INTEGER) 时，可以使用 BigInt。要创建一个 BigInt，只需在整数末尾添加 n。

      let bigInt = 9007199254740991n;

    6. String (字符串): 表示文本数据，由一系列 Unicode 字符组成。字符串可以用单引号 '、双引号 " 或反引号 `` (模板字符串) 括起来。

      let singleQuoteString = 'hello';
let doubleQuoteString = "world";
let templateString = `hello ${doubleQuoteString}`; // 模板字符串支持变量插值

    7. Symbol (符号): ES6 中新增的数据类型，表示唯一的、不可变的值。主要用于对象属性的键，以避免属性名冲突。

      let symbol1 = Symbol('description');
let symbol2 = Symbol('description');

console.log(symbol1 === symbol2); // 输出: false (即使描述相同，Symbol 也是唯一的)

    原始类型与对象类型的区别:

    • 存储方式: 原始类型直接存储值本身，而对象类型存储的是指向值的引用。
    • 可变性: 原始类型的值是不可变的，而对象的属性可以更改。
    • 比较方式: 原始类型通过值进行比较（例如，1 === 1），而对象通过引用进行比较（例如，两个内容相同的对象 {} === {} 的结果是 false，因为它们是不同的引用）。

    检测数据类型:

    可以使用 typeof 运算符来检测变量的数据类型：

    console.log(typeof undefined);    // "undefined"
console.log(typeof null);         // "object" (这是一个历史遗留问题)
console.log(typeof true);         // "boolean"
console.log(typeof 42);           // "number"
console.log(typeof 9007199254740991n);// "bigint"
console.log(typeof "hello");      // "string"
console.log(typeof Symbol());     // "symbol"
console.log(typeof {});           // "object"
console.log(typeof function() {}); // "function"

    理解 JavaScript 的原始数据类型是学习 JavaScript 的基础，它们在日常编程中被广泛使用。掌握它们及其特性有助于编写更健壮、更高效的代码。

JavaScript复合数据类型

  • JavaScript 中，除了七种原始数据类型（Undefined、Null、Boolean、Number、BigInt、String、Symbol）之外，还有一种复杂数据类型，通常被称为复合数据类型或对象类型，即 Object (对象)。

    Object (对象)

    对象是 JavaScript 中最重要的数据类型之一。它可以存储多个键值对（key-value pairs），其中键是字符串（或 Symbol），值可以是任何数据类型，包括原始数据类型和其他对象。这使得对象非常灵活，可以用来表示各种复杂的数据结构。

    创建对象：

    有几种方法可以创建对象：

    1. 对象字面量 (Object Literal): 这是最常用的创建对象的方法。

      let person = {
  name: "张三",
  age: 30,
  city: "北京",
  hobbies: ["阅读", "旅行"],
  greet: function() {
    console.log("你好，我叫" + this.name);
  }
};

    2. 使用 new 关键字和构造函数:

      function Person(name, age, city) {
  this.name = name;
this.age = age;
  this.city = city;
}

let person2 = new Person("李四", 25, "上海");

    3. 使用 Object.create() 方法:

      let proto = {
  greet: function() {
  console.log("你好");
  }
 };

let obj = Object.create(proto);
obj.name = "王五";

    访问对象属性：

    可以使用两种方式访问对象的属性：

    1. 点表示法 (Dot Notation):

      console.log(person.name); // 输出: 张三
person.greet();           // 输出: 你好，我叫张三

  1. 方括号表示法 (Bracket Notation):

    console.log(person["age"]); // 输出: 30
  let key = "city";
  console.log(person[key]);    // 输出: 北京

    当属性名包含空格或特殊字符，或者属性名是变量时，必须使用方括号表示法。

对象的特点：

  • 可变性 (Mutability): 对象是可变的，这意味着可以添加、修改或删除对象的属性。

    person.age = 31;          // 修改属性
person.job = "程序员";   // 添加属性
delete person.city;      // 删除属性

  • 引用类型 (Reference Type): 对象存储的是对内存中实际数据的引用。当将一个对象赋值给另一个变量时，实际上是复制了引用，而不是复制对象本身。这意味着两个变量会指向同一个内存地址。

    let anotherPerson = person;
anotherPerson.name = "赵六";
console.log(person.name);       // 输出: 赵六 (person 的 name 也被修改了)

  • 动态属性 (Dynamic Properties): 可以随时添加或删除对象的属性。

特殊的对象类型：

虽然 JavaScript 中只有一种对象类型，但有些“内置对象”提供了特定的功能，它们本质上也是对象：

  • 数组 (Array): 是一种特殊的对象，用于存储有序的数据集合。数组使用数字作为索引来访问元素。

    let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 输出: 1

  • 函数 (Function): 在 JavaScript 中，函数也是对象。它们可以有属性和方法。

    function myFunction() {
  // ...
  }

  myFunction.description = "这是一个函数";

  • Date (日期): 用于处理日期和时间。

    • RegExp (正则表达式): 用于进行模式匹配。

    等等。这些“内置对象”都继承自 Object，并添加了各自特定的属性和方法。

3. JavaScript 中的变量提升是什么？

JavaScript 中的变量提升（Hoisting）是指在代码执行之前，JavaScript 引擎会将变量和函数声明“提升”到其作用域的顶部的行为。这使得你可以在声明它们之前使用变量和函数。理解变量提升对于编写和调试 JavaScript 代码至关重要，因为它会影响代码的执行方式。

详细解释：

JavaScript 代码的执行分为两个阶段：

  1. 编译阶段（Compilation Phase）： 在代码真正运行之前，JavaScript 引擎会先扫描整个代码，进行语法分析和编译。在这个阶段，引擎会找到所有的变量和函数声明，并将它们“提升”到其作用域的顶部。
  2. 执行阶段（Execution Phase）： 代码逐行执行。

“提升”的含义是，声明会被移动到作用域顶部，但赋值操作仍然留在原来的位置。

不同类型的提升：

  • 变量提升（Variable Hoisting）：

    • 使用 var 声明的变量会被提升到作用域顶部，但初始值为 undefined。这意味着你可以在声明之前访问该变量，但得到的值是 undefined。

      console.log(x); // 输出：undefined
var x = 10;
console.log(x); // 输出：10

    • 使用 let 和 const 声明的变量也会被提升，但它们不会被初始化。如果在声明之前访问这些变量，会抛出 ReferenceError，提示“Cannot access 'variable' before initialization”（无法在初始化之前访问变量）。这种情况被称为“暂时性死区”（Temporal Dead Zone，TDZ）。

      console.log(y); // 抛出 ReferenceError
let y = 20;

console.log(z); // 抛出 ReferenceError
const z = 30;

  • 函数提升（Function Hoisting）：

    • 函数声明会被完整地提升，包括函数名和函数体。这意味着你可以在声明之前调用函数。

      greet("World"); // 输出：Hello, World!

function greet(name) {
  console.log("Hello, " + name + "!");
}

    • 函数表达式的提升方式与变量提升类似。如果使用 var 声明函数表达式，则只有变量名会被提升，值为 undefined。如果使用 let 或 const 声明，则遵循 let 和 const 的提升规则（即存在暂时性死区）。

      console.log(greet2); // 输出：undefined
var greet2 = function(name) {
  console.log("Hello, " + name + "!");
};

console.log(greet3); // 抛出 ReferenceError
let greet3 = function(name) {
  console.log("Hello, " + name + "!");
};

为什么要有提升？

提升的主要目的是为了支持在代码中先使用函数后定义函数的编程风格，使代码更加灵活。但同时也可能导致一些意想不到的行为，尤其是在使用 var 的情况下。

最佳实践：

  • 始终在作用域顶部声明变量和函数。
  • 尽量使用 let 和 const 代替 var，以避免 var 带来的意外提升行为。
  • 遵循“先声明后使用”的原则，提高代码的可读性和可维护性。
4. null 和 undefined 不同之处?

null 和 undefined 都是 JavaScript 中表示“空”或“无”的值，但它们之间存在一些重要的区别。理解这些区别对于编写健壮的 JavaScript 代码至关重要。

主要区别：

  1. 类型 (Type):

    • undefined 的类型是 undefined。
    • null 的类型是 object。这是一个历史遗留问题，实际上 null 应该有自己的类型 Null。typeof null 返回 "object" 是 JavaScript 的一个 bug，但它已经存在很久，并且被广泛使用，所以没有被修复以避免破坏现有的代码。
    typeof undefined; // "undefined"
typeof null; // "object"

  2. 含义 (Meaning):

    • undefined 表示一个变量已被声明，但尚未被赋值。它是 JavaScript 中变量的默认初始值。换句话说，undefined 表示“未定义”或“缺少值”，通常是由于以下情况：
      • 声明了一个变量但没有初始化它。
      • 访问一个对象不存在的属性。
      • 函数没有返回值（或者 return 语句没有显式返回值）。
    • null 表示一个空对象指针。它表示一个变量被显式地赋予了一个“空值”。也就是说，null 表示“空”或“无对象”。它通常用于：
      • 显式地将一个变量设置为空。
      • 作为一些操作（例如 document.getElementById()）在没有找到匹配元素时返回的值。

    简单来说，undefined 通常是 JavaScript 引擎自动赋予的，而 null 通常是程序员手动赋予的。

  3. 数值转换 (Numeric Conversion):

    • undefined 转换为数值是 NaN (Not a Number)。
    • null 转换为数值是 0。
    Number(undefined); // NaN
Number(null); // 0

5 + undefined; // NaN
5 + null; // 5

  4. 相等性比较 (Equality Comparisons):

    • 使用非严格相等 (==) 比较时，null 和 undefined 是相等的。
    • 使用严格相等 (===) 比较时，null 和 undefined 是不相等的。
    null == undefined; // true
null === undefined; // false
特性undefinednull
类型undefinedobject (实际上应该是 Null)
含义未定义，缺少值 (通常是引擎自动赋予)空值，无对象 (通常是程序员手动赋予)
数值转换NaN0
== 比较与null 相等与undefined 相等
=== 比较与null 不相等与undefined 不相等

何时使用 null 和 undefined：

  • 通常情况下，最好避免显式地将变量设置为 undefined。让 JavaScript 引擎来处理未初始化的变量。
  • 当需要显式地表示一个变量不包含任何对象时，应该使用 null。例如，当你想清除一个对象引用或表示一个可选的 DOM 元素不存在时。

最佳实践：

  • 使用严格相等 (=== 和 !==) 进行比较，以避免 == 带来的类型转换问题。
  • 在代码中保持一致性，尽量避免混用 null 和 undefined。通常推荐使用 null 来表示空值。

通过理解 null 和 undefined 之间的区别，你可以编写更清晰、更易于维护的 JavaScript 代码，并避免潜在的错误。

5. JavaScript 如何使用 “debugger”?

在 JavaScript 中，“debugger” 是一个语句，用于在代码中设置断点，以便在调试过程中暂停代码的执行，并检查变量的值、调用栈等信息。它通常与浏览器的开发者工具一起使用。

如何使用 “debugger”：

  1. 在代码中插入 debugger 语句：

    在需要设置断点的位置插入 debugger; 语句。当 JavaScript 引擎执行到这一行代码时，如果浏览器的开发者工具是打开的，它将自动暂停执行。

    function myFunction(x, y) {
  let sum = x + y;
  debugger; // 在这里设置断点
  let product = x * y;
  return product;
}

myFunction(5, 10);

  2. 打开浏览器的开发者工具：

    大多数现代浏览器都内置了开发者工具。通常可以通过以下方式打开：

    • 按下 F12 键。
    • 在浏览器菜单中找到“更多工具”或类似的选项，然后选择“开发者工具”。

  3. 选择 “Sources”（或 “源代码”）选项卡：

    在开发者工具中，找到并点击 “Sources”（或 “源代码”）选项卡。这个选项卡显示了加载到浏览器中的所有 HTML、CSS 和 JavaScript 文件。

  4. 执行包含 debugger 语句的代码：

    运行包含 debugger 语句的 JavaScript 代码。当代码执行到 debugger 语句时，执行将暂停，并且开发者工具会自动切换到 “Sources” 选项卡，并在断点处高亮显示代码行。

在调试器中进行的操作：

代码执行暂停后，你可以在开发者工具中执行以下操作：

  • 检查变量的值： 在 “Scope”（作用域）面板或 “Watch”（监视）面板中查看当前作用域中变量的值。

  • 单步执行代码：

    使用 “Step over”（单步跳过）、“Step into”（单步进入）和 “Step out”（单步跳出）按钮来控制代码的执行流程。

    • “Step over”：执行当前行代码，然后跳到下一行。如果当前行是函数调用，则整个函数将执行完毕，而不会进入函数内部。
    • “Step into”：如果当前行是函数调用，则会进入函数内部。
    • “Step out”：从当前函数中跳出，返回到调用该函数的位置。

  • 设置断点： 除了使用 debugger 语句，还可以在 “Sources” 选项卡中点击代码行号来设置断点。

  • 继续执行： 点击 “Resume”（继续）按钮以继续代码的正常执行。

  • 查看调用栈： 在 “Call Stack”（调用栈）面板中查看当前函数的调用关系。

示例：

假设有以下代码：

function calculateTotal(price, quantity) {
  let total = price * quantity;
  debugger;
  if (total > 100) {
    total = total * 0.9; // 应用 10% 的折扣
  }
  return total;
}

let finalPrice = calculateTotal(25, 5);
console.log(finalPrice);
  1. 在浏览器中打开包含这段代码的 HTML 文件。
  2. 打开开发者工具（F12）。
  3. 代码执行到 debugger 语句时，执行会暂停。
  4. 在 “Scope” 面板中，你可以看到 price 的值为 25，quantity 的值为 5，total 的值为 125。
  5. 点击 “Step over” 按钮，代码会继续执行到 if 语句。
  6. 由于 total 大于 100，因此会执行 if 语句块中的代码。
  7. 再次点击 “Step over” 按钮，total 的值将更新为 112.5。
  8. 点击 “Resume” 按钮，代码将继续执行，并在控制台输出 112.5。

注意事项：

  • debugger 语句只有在开发者工具打开时才会生效。如果开发者工具未打开，debugger 语句将被忽略。
  • 在生产环境中，通常应该删除或注释掉 debugger 语句，以避免对性能产生不必要的影响。

通过使用 debugger 语句和浏览器的开发者工具，你可以更有效地调试 JavaScript 代码，查找和修复错误。

6. JavaScript中的this?

在 JavaScript 中，this 是一个非常重要的关键字，它代表的是函数执行的上下文对象。简单来说，this 的值取决于函数是如何被调用的，而不是函数如何被定义的。理解 this 的工作方式是掌握 JavaScript 的关键。

this 的绑定规则：

this 的绑定主要有以下四种规则：

  1. 默认绑定（Default Binding）：

    在非严格模式下，如果函数是独立调用的（即没有被任何对象所拥有），this 指向全局对象。在浏览器中，全局对象是 window；在 Node.js 中，全局对象是 global。

    在严格模式下（使用 "use strict";），独立调用的函数中的 this 将是 undefined。

    function foo() {
  console.log(this);
}

foo(); // 非严格模式下：window (浏览器) 或 global (Node.js)；严格模式下：undefined

"use strict";
function bar() {
    console.log(this);
}
bar(); //严格模式下：undefined

  2. 隐式绑定（Implicit Binding）：

    当函数作为对象的方法调用时，this 指向调用该方法的对象。

    const obj = {
  name: "对象A",
  greet: function() {
    console.log("你好，我是" + this.name);
  }
};

obj.greet(); // 输出：你好，我是对象A (this 指向 obj)

const obj2 = {
    name: "对象B",
    greet: obj.greet
}
obj2.greet(); // 输出：你好，我是对象B (this 指向 obj2)

    需要注意的是，如果方法被赋值给另一个变量，然后通过该变量调用，则 this 会应用默认绑定规则。

  3. 显式绑定（Explicit Binding）：

    可以使用 call()、apply() 或 bind() 方法来显式地指定 this 的值。

    • call()：接受一个 this 值作为第一个参数，后面的参数作为函数的参数传递。

      function greet(greeting) {
  console.log(greeting + ", " + this.name);
}

const person = { name: "张三" };
greet.call(person, "你好"); // 输出：你好, 张三 (this 指向 person)

    • apply()：与 call() 类似，但接受一个包含函数参数的数组作为第二个参数。

      greet.apply(person, ["Hello"]); // 输出：Hello, 张三 (this 指向 person)

    • bind()：创建一个新的函数，该函数永久地绑定了指定的 this 值。

      const greetPerson = greet.bind(person);
greetPerson("Hey"); // 输出：Hey, 张三 (this 永久绑定到 person)

  4. new 绑定（new Binding）：

    当使用 new 关键字调用构造函数时，会发生以下步骤：

    1. 创建一个新的空对象。
    2. 将新对象的 __proto__ 属性指向构造函数的 prototype 属性，从而继承原型链上的属性和方法。
    3. 将 this 绑定到新对象。
    4. 执行构造函数中的代码，为新对象添加属性。
    5. 如果构造函数没有显式返回一个对象，则返回新创建的对象。

    JavaScript

    function Person(name) {
  this.name = name;
}

const john = new Person("约翰"); // this 指向新创建的 Person 对象
console.log(john.name); // 输出：约翰

箭头函数中的 this：

箭头函数不使用以上四种标准绑定规则。箭头函数中的 this 是在定义时绑定的，而不是在调用时绑定的。它继承的是外层作用域（最近的非箭头函数）的 this 值。

const obj = {
  value: 10,
  getValue: function() {
    const arrowFunction = () => {
      console.log(this.value); // this 继承 getValue 函数的 this，指向 obj
    };
    arrowFunction();
  }
};

obj.getValue(); // 输出：10

const obj2 = {
    value: 20,
    getValue: obj.getValue
}
obj2.getValue(); // 输出：20

优先级：

如果多种绑定规则同时存在，它们的优先级如下（从高到低）：

  1. new 绑定
  2. 显式绑定
  3. 隐式绑定
  4. 默认绑定
7.JavaScript中== 和 === 的用法和区别?

在 JavaScript 中，== 和 === 都是用于比较两个值是否相等的运算符，但它们之间存在重要的区别，理解这些区别对于编写正确的 JavaScript 代码至关重要。

== (相等运算符 - Equal):

  • 类型转换： == 会在比较之前进行类型转换（也称为“类型强制转换”）。这意味着如果比较的两个值的类型不同，JavaScript 会尝试将它们转换为相同的类型，然后再进行比较。
  • 比较值： 转换类型后，== 只比较两个值是否相等，而不比较它们的类型。

=== (严格相等运算符 - Strict Equal):

  • 不进行类型转换： === 不会进行任何类型转换。它直接比较两个值及其类型。
  • 比较值和类型： 只有当两个值的类型和值都完全相等时，=== 才会返回 true。

区别总结：

特性== (相等)=== (严格相等)
类型转换进行不进行
比较值值和类型
结果类型转换后值相等则为true值和类型都相等则为true

详细解释和示例：

以下是一些示例，展示了 == 和 === 的不同行为：

  • 数字和字符串：

    1 == "1"; // true (字符串 "1" 被转换为数字 1)
1 === "1"; // false (类型不同)

0 == false; // true (false 被转换为数字 0)
0 === false; // false (类型不同)

null == undefined; // true (这是一个例外，但仍然是类型转换的结果)
null === undefined; // false (类型不同)

  • 布尔值：

    true == 1; // true (true 被转换为数字 1)
true === 1; // false (类型不同)

false == 0; // true (false 被转换为数字 0)
false === 0; // false (类型不同)

  • 对象：

    对于对象，== 和 === 比较的是引用。只有当两个变量引用同一个对象时，它们才会相等。

    const obj1 = { value: 1 };
const obj2 = { value: 1 };
const obj3 = obj1;

obj1 == obj2; // false (不同的对象)
obj1 === obj2; // false (不同的对象)

obj1 == obj3; // true (相同的对象引用)
obj1 === obj3; // true (相同的对象引用)

  • NaN：

    NaN (Not a Number) 是一个特殊的值，表示非数字。NaN 与任何值（包括它自身）使用 == 和 === 比较都返回 false。要检查一个值是否为 NaN，应使用 isNaN() 函数。

    NaN == NaN; // false
NaN === NaN; // false
isNaN(NaN); // true

何时使用 == 和 ===：

  • 始终使用 ===： 在绝大多数情况下，都应该使用 === (严格相等)。它可以避免由于类型转换而导致的意外行为和错误。使用 === 可以使代码更清晰、更易于理解和维护。
  • 特殊情况： 只有在非常特殊的情况下，并且你完全理解类型转换的规则时，才可以考虑使用 ==。例如，在某些情况下，你可能需要检查一个值是否为 null 或 undefined，这时可以使用 value == null，因为它相当于 value === null || value === undefined。但即使在这种情况下，显式地使用 || 也是一种更清晰的做法。

最佳实践：

  • 避免使用 ==： 除非有充分的理由，否则应尽量避免使用 ==。
  • 使用 === 进行比较： 始终使用 === 进行严格相等比较，以确保比较的是值和类型，从而避免潜在的错误。
  • 显式类型转换： 如果需要进行类型转换，应该显式地进行，例如使用 Number()、String() 或 Boolean() 函数，而不是依赖 == 的隐式转换。

通过遵循这些最佳实践，你可以编写更健壮、更可预测的 JavaScript 代码。总之，记住：总是使用 ===，除非你有充分的理由不这样做。

8. “var", "let", "const"的用法和区别?

在 JavaScript 中，var、let 和 const 都是用于声明变量的关键字，但它们在使用方式和作用域方面存在重要的区别。理解这些区别对于编写清晰、可维护且避免错误的 JavaScript 代码至关重要。

1. 作用域 (Scope):

  • var：函数作用域 (Function Scope)。 使用 var 声明的变量，其作用域是包含该声明的函数。如果在函数外部声明，则为全局作用域。

    function myFunction() {
  var x = 10;
  if (true) {
    var y = 20; // y 的作用域是 myFunction
  }
  console.log(x); // 输出 10
  console.log(y); // 输出 20 (即使在 if 语句块外部也能访问)
}

myFunction();
console.log(x); // 报错：x is not defined (x 在函数外部不可访问)

  • let 和 const：块级作用域 (Block Scope)。 使用 let 和 const 声明的变量，其作用域是包含该声明的最近的代码块（通常是花括号 {} 包围的代码）。

    function myFunction() {
  let x = 10;
  if (true) {
    let y = 20; // y 的作用域仅限于 if 语句块内部
    const z = 30; // z 的作用域也仅限于 if 语句块内部
  }
  console.log(x); // 输出 10
  console.log(y); // 报错：y is not defined (y 在 if 语句块外部不可访问)
  console.log(z); // 报错：z is not defined
}

myFunction();

2. 变量提升 (Hoisting):

  • var：存在变量提升。 使用 var 声明的变量会被提升到其作用域的顶部。这意味着你可以在声明之前使用该变量，但其值为 undefined。

    console.log(myVar); // 输出 undefined (变量提升)
var myVar = 5;
console.log(myVar); // 输出 5

  • let 和 const：也存在提升，但不会初始化。 虽然 let 和 const 声明的变量也会被提升到其作用域的顶部，但在声明之前访问它们会导致 ReferenceError（暂时性死区）。

    console.log(myLet); // 报错：Cannot access 'myLet' before initialization (暂时性死区)
let myLet = 5;

console.log(myConst); // 报错：Cannot access 'myConst' before initialization (暂时性死区)
const myConst = 10;

3. 重复声明 (Redeclaration):

  • var：允许重复声明。 你可以在同一个作用域内多次使用 var 声明同名的变量，后面的声明会覆盖前面的声明（如果没有赋值，则相当于重新声明）。

    var myVar = 5;
var myVar = 10; // 不会报错，myVar 的值变为 10
console.log(myVar); // 输出 10

  • let 和 const：不允许在同一个作用域内重复声明同名的变量。 这样做会导致语法错误。

    let myLet = 5;
let myLet = 10; // 报错：Identifier 'myLet' has already been declared

const myConst = 5;
const myConst = 10; // 报错：Identifier 'myConst' has already been declared

4. 重新赋值 (Reassignment):

  • var 和 let：允许重新赋值。 你可以在声明后更改变量的值。

    var myVar = 5;
myVar = 10;

let myLet = 5;
myLet = 10;

  • const：不允许重新赋值。 const 用于声明常量，一旦赋值后就不能再更改其值。但是，如果 const 声明的是一个对象或数组，则可以修改对象的属性或数组的元素，但不能重新赋予新的对象或数组。

    const myConst = 5;
myConst = 10; // 报错：Assignment to constant variable

const myObj = { value: 5 };
myObj.value = 10; // 可以修改对象属性
myObj = { newValue: 10 }; // 报错：Assignment to constant variable

const myArray = [1, 2, 3];
myArray.push(4); // 可以修改数组
myArray = [4,5,6]; // 报错：Assignment to constant variable

总结：

特性varletconst
作用域函数作用域块级作用域块级作用域
变量提升存在，初始化为undefined存在，但未初始化（暂时性死区）存在，但未初始化（暂时性死区）
重复声明允许不允许不允许
重新赋值允许允许不允许（基本类型），允许修改属性/元素（对象/数组）

最佳实践：

  • 优先使用 const： 如果变量的值在初始化后不会改变，则应该使用 const。这有助于提高代码的可读性和可维护性，并防止意外的修改。
  • 在需要重新赋值时使用 let： 只有当变量的值需要改变时才使用 let。
  • 避免使用 var： 在 ES6 及以后的版本中，应该尽量避免使用 var，因为它容易导致作用域混乱和意外的错误。

通过遵循这些最佳实践，你可以编写更清晰、更健壮的 JavaScript 代码。

9. JavaScript 中的闭包是什么？

在 JavaScript 中，闭包是一个非常重要的概念，它涉及到函数、作用域和变量的生命周期。简单来说，闭包是指函数与其周围状态（词法环境）的捆绑。换句话说，闭包允许函数访问并操作其外部作用域的变量，即使在其外部函数已经执行完毕之后。

理解闭包的关键点：

  1. 函数内部可以访问外部函数的变量： 这是 JavaScript 作用域链的特性。内部函数可以访问其父函数（以及更外层的函数）的变量。
  2. 即使外部函数执行完毕，内部函数仍然可以访问其外部函数的变量： 这是闭包的核心特性。当一个内部函数被返回或传递到外部作用域时，它会“记住”其创建时的词法环境，包括外部函数的变量。即使外部函数执行完毕并从调用栈中弹出，这些变量仍然存在于内存中，供内部函数访问。

闭包的形成：

闭包的形成通常发生在以下情况：

  • 在一个函数内部定义另一个函数： 内部函数形成了闭包，它可以访问外部函数的变量。

    function outerFunction(outerVar) {
  function innerFunction(innerVar) {
    console.log(outerVar + innerVar);
  }
  return innerFunction;
}

const myClosure = outerFunction(10); // outerFunction 执行完毕，但其变量 outerVar 仍然存在
myClosure(5); // 输出 15 (innerFunction 仍然可以访问 outerVar)

  • 将函数作为参数传递给其他函数： 当一个函数作为参数传递给另一个函数时，它也会形成闭包，可以访问其定义时的作用域。

    function process(callback) {
  const data = "一些数据";
  callback(data);
}

function logData(data) {
  console.log("处理后的数据：" + data); // logData 形成了闭包，可以访问其外部作用域（全局作用域）
}

process(logData); // 输出：处理后的数据：一些数据

闭包的作用：

闭包在 JavaScript 中有很多重要的应用：

  • 创建私有变量： 通过闭包，可以模拟私有变量。在 JavaScript 中，没有原生的私有变量的概念，但可以使用闭包来实现。

    function createCounter() {
  let count = 0; // count 是 createCounter 的局部变量，外部无法直接访问

  return {
    increment: function() {
      count++;
    },
    decrement: function() {
      count--;
    },
    getValue: function() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increment();
counter.increment();
console.log(counter.getValue()); // 输出 2
counter.count = 100; // 外部无法直接修改 count
console.log(counter.getValue()); // 输出 2

  • 保存函数的状态： 闭包可以用来保存函数的状态，例如在事件处理程序中。

  • 模块化： 闭包可以用于创建模块，将相关的函数和数据封装在一起。

闭包的缺点：

  • 内存泄漏： 由于闭包会引用其外部作用域的变量，如果使用不当，可能会导致内存泄漏。如果闭包引用的变量是一个很大的对象，并且闭包长期存在，那么这个对象将无法被垃圾回收器回收，从而占用内存。因此，在使用闭包时要谨慎，避免不必要的引用。

示例解释：

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    console.log(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc(); // 输出 "Mozilla"

在这个例子中：

  1. makeFunc() 函数定义了一个局部变量 name 和一个内部函数 displayName()。
  2. displayName() 函数可以访问其外部函数 makeFunc() 的变量 name。
  3. makeFunc() 函数返回了 displayName() 函数。
  4. 当调用 myFunc() 时，实际上是调用了 displayName() 函数。
  5. 即使 makeFunc() 函数已经执行完毕，displayName() 函数仍然可以访问其外部函数 makeFunc() 的变量 name，这就是闭包的作用。
10. 什么是 JavaScript 中的事件委托？

JavaScript 中的事件委托（也称为事件代理）是一种利用事件冒泡机制的技术，将事件处理程序绑定到父元素（或祖先元素），而不是直接绑定到子元素。当子元素触发某个事件时，事件会沿着 DOM 树向上冒泡到父元素，父元素上的事件处理程序就会被执行。

事件冒泡：

在理解事件委托之前，需要先了解事件冒泡。当一个 HTML 元素上的事件被触发时，该事件会从最具体的元素（事件的目标元素）开始，逐级向上传播到其父元素、祖父元素，直到 window 对象。这个过程称为事件冒泡。

例如，如果点击了一个 <li> 元素，而该元素在一个 <ul> 元素内，<ul> 元素又在一个 <div> 元素内，那么点击事件的传播顺序是：<li> -> <ul> -> <div> -> ... -> window。

事件委托的原理：

事件委托正是利用了事件冒泡的特性。通过将事件处理程序绑定到父元素，我们可以捕获在其子元素上触发的事件。在事件处理程序内部，可以通过 event.target 属性来确定实际触发事件的子元素。

事件委托的优点：

  • 提高性能： 当有大量的子元素需要绑定相同的事件处理程序时，使用事件委托可以显著提高性能。因为只需要绑定一个事件处理程序到父元素，而不是为每个子元素都绑定一个。这减少了内存占用和 DOM 操作的次数。
  • 简化代码： 事件委托可以使代码更简洁、更易于维护。当动态添加或删除子元素时，不需要手动绑定或解绑事件处理程序。
  • 处理动态添加的元素： 对于通过 JavaScript 动态添加到 DOM 中的元素，如果使用传统的事件绑定方式，需要在添加后手动绑定事件处理程序。而使用事件委托，由于事件处理程序绑定在父元素上，因此新添加的子元素也能自动拥有相应的事件处理能力。

事件委托的实现：

以下是一个简单的示例，演示了如何使用事件委托来处理 <li> 元素的点击事件：

<!DOCTYPE html>
<html>
<head>
<title>事件委托示例</title>
</head>
<body>

<ul id="myList">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

<script>
  const myList = document.getElementById('myList');

  myList.addEventListener('click', function(event) {
    if (event.target && event.target.nodeName === 'LI') {
      console.log('你点击了：' + event.target.textContent);
      // 在此处执行其他操作，例如根据点击的 <li> 元素执行不同的逻辑
    }
  });

    // 动态添加li元素
    const newLi = document.createElement('li');
    newLi.textContent = '动态添加的项目';
    myList.appendChild(newLi);
</script>

</body>
</html>

在这个例子中：

  1. 事件处理程序绑定到了 <ul> 元素 (myList) 上。
  2. 当点击任何一个 <li> 元素时，点击事件会冒泡到 <ul> 元素。
  3. 在事件处理程序内部，使用 event.target 来获取实际触发事件的元素。
  4. 通过 event.target.nodeName === 'LI' 来判断是否点击的是 <li> 元素。
  5. 如果点击的是 <li> 元素，则执行相应的操作。
  6. 动态添加的<li>元素也能够响应点击事件，不需要额外绑定。

注意事项：

  • 并非所有事件都支持冒泡。例如，focus、blur、load 等事件不冒泡，因此不能使用事件委托。
  • 使用事件委托时，需要注意 event.target 的准确性。有时可能需要根据具体的 DOM 结构进行额外的判断。
11. “let”、“const”和“var”之间有什么区别？

let、const 和 var 都是 JavaScript 中声明变量的关键字，但它们在使用方式和作用域等方面存在显著的区别。理解这些区别对于编写清晰、可维护且避免错误的 JavaScript 代码至关重要。

1. 作用域 (Scope)：

  • var：函数作用域 (Function Scope)。 使用 var 声明的变量，其作用域是包含该声明的整个函数。如果在任何函数外部声明，则为全局作用域。这意味着在函数内部任何地方都可以访问 var 声明的变量，即使在声明之前。

    function myFunction() {
  var x = 10;
  if (true) {
    var y = 20; // y 的作用域是 myFunction 整个函数
  }
  console.log(x); // 输出 10
  console.log(y); // 输出 20 (即使在 if 语句块外部也能访问)
}

myFunction();
console.log(x); // 报错：x is not defined (x 在函数外部不可访问)

  • let 和 const：块级作用域 (Block Scope)。 使用 let 和 const 声明的变量，其作用域被限制在声明它们的代码块（通常是花括号 {} 包围的代码）内。这意味着变量只能在其声明的代码块内部访问。

    function myFunction() {
  let x = 10;
  if (true) {
    let y = 20; // y 的作用域仅限于 if 语句块内部
    const z = 30; // z 的作用域也仅限于 if 语句块内部
  }
  console.log(x); // 输出 10
  console.log(y); // 报错：y is not defined (y 在 if 语句块外部不可访问)
  console.log(z); // 报错：z is not defined
}

myFunction();

2. 变量提升 (Hoisting)：

  • var：存在变量提升。 使用 var 声明的变量会被“提升”到其作用域的顶部。这意味着你可以在声明之前使用该变量，但其值为 undefined。这可能会导致一些意外的行为。

    console.log(myVar); // 输出 undefined (变量提升)
var myVar = 5;
console.log(myVar); // 输出 5

  • let 和 const：也存在提升，但不会初始化。 虽然 let 和 const 声明的变量也会被提升到其作用域的顶部，但在实际声明语句执行之前访问它们会导致 ReferenceError（引用错误），提示“Cannot access 'variable_name' before initialization”（在初始化之前无法访问“变量名”）。这个区域被称为“暂时性死区”（Temporal Dead Zone，TDZ）。

    console.log(myLet); // 报错：Cannot access 'myLet' before initialization (暂时性死区)
let myLet = 5;

console.log(myConst); // 报错：Cannot access 'myConst' before initialization (暂时性死区)
const myConst = 10;

3. 重复声明 (Redeclaration)：

  • var：允许在相同作用域内重复声明同名变量。 后面的声明会覆盖前面的声明（如果没有赋值，则相当于重新声明）。这可能会导致意外的错误和难以调试的代码。

    var myVar = 5;
var myVar = 10; // 不会报错，myVar 的值变为 10
console.log(myVar); // 输出 10

  • let 和 const：不允许在相同作用域内重复声明同名变量。 这样做会导致语法错误，有助于避免意外的变量覆盖。

    let myLet = 5;
let myLet = 10; // 报错：Identifier 'myLet' has already been declared（标识符“myLet”已被声明）

const myConst = 5;
const myConst = 10; // 报错：Identifier 'myConst' has already been declared

4. 重新赋值 (Reassignment)：

  • var 和 let：允许在声明后更改变量的值。

    var myVar = 5;
myVar = 10;

let myLet = 5;
myLet = 10;

  • const：不允许重新赋值。 const 用于声明常量，一旦赋值后就不能再更改其值。但是，如果 const 声明的是一个对象或数组，则可以修改对象的属性或数组的元素，但不能将该变量重新赋予一个新的对象或数组。

    const myConst = 5;
myConst = 10; // 报错：Assignment to constant variable（给常量赋值）

const myObj = { value: 5 };
myObj.value = 10; // 可以修改对象属性
myObj = { newValue: 10 }; // 报错：Assignment to constant variable

const myArray = [1, 2, 3];
myArray.push(4); // 可以修改数组
myArray = [4, 5, 6]; // 报错：Assignment to constant variable

总结：

特性varletconst
作用域函数作用域块级作用域块级作用域
变量提升存在，初始化为undefined存在，但未初始化（暂时性死区）存在，但未初始化（暂时性死区）
重复声明允许不允许不允许
重新赋值允许允许不允许（基本类型），允许修改属性/元素（对象/数组）

最佳实践：

  • 优先使用 const： 如果变量的值在初始化后不会改变，应该优先使用 const。这有助于提高代码的可读性和可维护性，并防止意外的修改。
  • 在需要重新赋值时使用 let： 只有当变量的值需要在后续代码中改变时才使用 let。
  • 避免使用 var： 在 ES6 及以后的版本中，强烈建议避免使用 var，因为它容易导致作用域混乱、意外的变量覆盖和难以调试的代码。let 和 const 提供了更清晰、更可预测的作用域规则。

通过遵循这些最佳实践，你可以编写更健壮、更易于理解和维护的 JavaScript 代码。

12. JavaScript 中的隐式类型强制转换是什么？

JavaScript 中的隐式类型强制转换（Implicit Type Coercion）是指在进行运算或比较时，JavaScript 引擎会在幕后自动将不同类型的数据转换为相同的类型，然后再进行操作。这种转换是“隐式”的，因为你没有明确地使用类型转换函数（如 Number()、String() 等）。

理解隐式类型强制转换对于避免 JavaScript 中一些常见的错误和意想不到的行为至关重要。

常见的隐式类型转换场景：

  1. 字符串与数字的运算：

    • 加法运算符 +： 当 + 运算符的操作数中有一个是字符串时，JavaScript 会将另一个操作数也转换为字符串，然后进行字符串拼接。

      1 + "1"; // "11" (数字 1 被转换为字符串 "1")
1 + true; // 2 (true 被转换为数字 1)
1 + null; // 1 (null 被转换为数字 0)
1 + undefined; // NaN (undefined 被转换为 NaN)
"hello" + 1; // "hello1" (数字 1 被转换为字符串 "1")

    • 其他算术运算符 (-、\*、/、%)： 当使用这些运算符时，JavaScript 会尝试将操作数都转换为数字。

      "5" - 3; // 2 (字符串 "5" 被转换为数字 5)
"5" * "2"; // 10 (字符串 "5" 和 "2" 都被转换为数字)
"hello" - 1; // NaN (字符串 "hello" 无法转换为数字，结果为 NaN)

  2. 布尔环境中的转换：

    在 if 语句、while 循环、逻辑运算符 (&&、||、!) 等布尔环境中，JavaScript 会将非布尔值转换为布尔值。转换规则如下：

    • 假值 (Falsy Values)： 以下值会被转换为 false：

      • false
      • 0 (零)
      • "" (空字符串)
      • null
      • undefined
      • NaN

    • 真值 (Truthy Values)： 除了以上假值之外的所有值都会被转换为 true。

      if ("hello") { // "hello" 是真值，所以条件成立
  console.log("条件成立"); // 输出 "条件成立"
}

if (0) { // 0 是假值，所以条件不成立
  console.log("条件不成立"); // 不会输出
}

if ([]) { // 空数组是真值
    console.log("空数组是真值") // 输出 "空数组是真值"
}

if ({}) { // 空对象是真值
    console.log("空对象是真值") // 输出 "空对象是真值"
}

  3. 相等比较运算符 (==)：

    == 运算符在比较不同类型的值时会进行类型转换。转换规则比较复杂，以下是一些常见的例子：

    • null == undefined; // true
    • 0 == false; // true
    • "" == false; // true
    • "0" == 0; // true
    • 0 == []; // true
    • 0 == [0]; // true
    • "" == []; // true
    • "" == [0]; // true

    由于 == 的类型转换规则比较复杂且容易引起混淆，因此强烈建议使用严格相等运算符 ===，它不会进行类型转换。

  4. 其他类型转换：

    • 对象到原始值的转换：当需要将对象转换为原始值（如字符串或数字）时，JavaScript 会调用对象的 valueOf() 或 toString() 方法。

示例和解释：

console.log(1 + "2"); // "12" (字符串拼接)
console.log(1 - "2"); // -1 (字符串 "2" 转换为数字 2)
console.log(1 == "1"); // true (字符串 "1" 转换为数字 1)
console.log(1 === "1"); // false (类型不同)
console.log(0 == false); // true (false 转换为数字 0)
console.log(0 === false); // false (类型不同)
console.log(null == undefined); // true
console.log(null === undefined); // false
  • 隐式类型强制转换是 JavaScript 的一个重要特性，但它也容易导致一些意想不到的行为。
  • 理解隐式类型转换的规则对于编写正确的 JavaScript 代码至关重要。
  • 强烈建议在比较时使用严格相等运算符 === 和严格不等运算符 !==，以避免类型转换带来的混淆。
  • 如果需要进行类型转换，应该显式地进行，例如使用 Number()、String()、Boolean() 等函数，这样可以使代码更清晰、更易于理解和维护。
13. 解释 JavaScript 中原型的概念。

在 JavaScript 中，原型（prototype）是一个非常重要的概念，它是实现对象继承和共享属性与方法的核心机制。理解原型对于深入学习 JavaScript 至关重要。

1. 什么是原型？

简单来说，原型就是一个对象，其他对象可以通过它来继承属性和方法。每个 JavaScript 对象（除了 null）都关联着一个原型对象。当你试图访问一个对象的属性或方法时，如果该对象自身没有这个属性或方法，JavaScript 就会在其原型对象上查找，如果原型对象还没有，就继续在其原型对象的原型上查找，直到找到或者到达原型链的顶端 null 为止。这个查找的过程就构成了原型链。

2. 原型相关的属性：

  • prototype（函数的属性）： 每个函数都有一个 prototype 属性，它指向一个对象，这个对象就是该函数作为构造函数创建的所有实例的原型。
  • __proto__（对象的属性）： 每个对象（除了 null）都有一个内部属性 __proto__（非标准，但大多数浏览器都支持），它指向该对象的原型。
  • constructor（原型对象的属性）： 原型对象通常有一个 constructor 属性，它指回构造函数。

3. 如何使用原型：

  • 使用构造函数创建对象： 当使用 new 关键字调用一个函数作为构造函数来创建对象时，新创建的对象的 __proto__ 属性会被设置为构造函数的 prototype 属性。

    function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

const person1 = new Person("Alice");
person1.greet(); // 输出 "Hello, my name is Alice"

console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.constructor === Person); // true

    在这个例子中：

    • Person.prototype 是 Person 函数的原型对象。
    • person1 对象的 __proto__ 指向 Person.prototype。
    • person1 对象自身没有 greet 方法，但由于原型链的存在，它可以调用 Person.prototype 上的 greet 方法。

  • 使用对象字面量创建对象： 使用对象字面量创建的对象，其 __proto__ 属性指向 Object.prototype。

    const obj = { a: 1 };
console.log(obj.__proto__ === Object.prototype); // true

  • 修改原型： 可以通过修改原型来为所有实例添加新的属性和方法。

    JavaScript

    Person.prototype.sayGoodbye = function() {
  console.log("Goodbye!");
};

person1.sayGoodbye(); // 输出 "Goodbye!"

const person2 = new Person("Bob");
person2.sayGoodbye(); // 输出 "Goodbye!"

4. 原型链：

原型链是由 __proto__ 属性连接起来的对象链。当访问一个对象的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到或者到达原型链的顶端 null 为止。

例如：

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

Animal.prototype.eat = function() {
  console.log(this.name + " is eating.");
};

function Dog(name, breed) {
  Animal.call(this, name); // 调用父构造函数
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // 设置 Dog 的原型为 Animal 的原型
Dog.prototype.constructor = Dog; // 修复 constructor 指向

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

const myDog = new Dog("Buddy", "Golden Retriever");
myDog.bark(); // 输出 "Woof!"
myDog.eat(); // 输出 "Buddy is eating."

console.log(myDog.__proto__ === Dog.prototype); // true
console.log(Dog.prototype.__proto__ === Animal.prototype); // true
console.log(Animal.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__ === null); // true

在这个例子中，myDog 的原型链是：myDog -> Dog.prototype -> Animal.prototype -> Object.prototype -> null。

5. Object.create()：

Object.create() 方法可以创建一个新对象，使用现有的对象作为新创建对象的原型。这是一种更灵活的创建继承关系的方式。

6. 总结：

  • 原型是 JavaScript 实现继承和共享属性与方法的核心机制。
  • 每个对象都有一个原型对象，通过 __proto__ 属性连接起来形成原型链。
  • 函数有 prototype 属性，指向其作为构造函数创建的实例的原型。
  • Object.create() 可以创建具有指定原型的新对象。
14. 以下代码的输出是什么？
console.log(3+2+"7")

“57”

15. 如何在 JavaScript 中克隆对象？

在 JavaScript 中克隆对象是一个常见的需求，但需要注意的是，“克隆”这个概念根据不同的场景有不同的含义，分为浅拷贝和深拷贝。理解这两种拷贝方式的区别非常重要。

1. 浅拷贝 (Shallow Copy)：

浅拷贝创建一个新对象，这个新对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型（如数字、字符串、布尔值），拷贝的就是基本类型的值；如果属性是引用类型（如对象、数组），拷贝的就是内存地址，也就是说新对象和原始对象共享同一个内存地址。因此，修改其中一个对象的引用类型属性，会影响到另一个对象。

以下是一些浅拷贝的方法：

  • Object.assign()： 将所有可枚举属性的值从一个或多个源对象复制到目标对象。

    JavaScript

    const originalObject = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, originalObject);

shallowCopy.a = 3;
console.log(originalObject.a); // 输出 1 (基本类型不受影响)

shallowCopy.b.c = 4;
console.log(originalObject.b.c); // 输出 4 (引用类型受影响)

  • 展开运算符 (...)： 使用展开运算符可以快速创建一个对象的浅拷贝。

    const originalObject = { a: 1, b: { c: 2 } };
const shallowCopy = { ...originalObject };

shallowCopy.a = 3;
console.log(originalObject.a); // 输出 1

shallowCopy.b.c = 4;
console.log(originalObject.b.c); // 输出 4

  • 使用 slice() 或 concat() 复制数组： 这两个方法对于数组来说是浅拷贝。

    const originalArray = [1, { a: 2 }];
const shallowCopyArray = originalArray.slice(); // 或 originalArray.concat();

shallowCopyArray[0] = 3;
console.log(originalArray[0]); // 输出 1

shallowCopyArray[1].a = 4;
console.log(originalArray[1].a); // 输出 4

2. 深拷贝 (Deep Copy)：

深拷贝会创建一个全新的对象，所有属性都会被递归地复制，包括嵌套的对象和数组。新对象和原始对象完全独立，修改其中一个对象不会影响到另一个对象。

以下是一些深拷贝的方法：

  • JSON.parse(JSON.stringify())： 这是最简单的一种深拷贝方法，但有一些限制。

    const originalObject = { a: 1, b: { c: 2 }, d: function() {} }; //包含函数
const deepCopy = JSON.parse(JSON.stringify(originalObject));

deepCopy.a = 3;
console.log(originalObject.a); // 输出 1

deepCopy.b.c = 4;
console.log(originalObject.b.c); // 输出 2

console.log(deepCopy.d) // undefined  函数丢失

    这个方法的主要缺点是：

    • 无法复制函数： 函数会被忽略。
    • 无法复制 Date 对象： 会被转换为字符串。
    • 无法复制循环引用的对象： 会导致错误。
    • 无法复制 RegExp、Error 对象： 会被转换为普通对象。

  • 递归函数： 手写递归函数可以实现更完善的深拷贝。

    function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) {
    // 如果是基本类型或 null，直接返回
    return obj;
  }

  const clonedObj = Array.isArray(obj) ? [] : {}; // 创建新对象或数组

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) { // 只复制自身属性，不复制原型链上的属性
      clonedObj[key] = deepClone(obj[key]); // 递归调用
    }
  }

  return clonedObj;
}

const originalObject = { a: 1, b: { c: 2 }, d: [1,2,3], e: new Date(), f: /test/i};
const deepCopy = deepClone(originalObject);
deepCopy.b.c = 4;
console.log(originalObject.b.c); // 输出 2
deepCopy.d[0] = 5;
console.log(originalObject.d[0]); // 输出 1

console.log(deepCopy.e); // Date 对象被正确复制
console.log(deepCopy.f); // RegExp 对象被正确复制

    这个方法可以处理嵌套对象、数组、日期和正则表达式，但仍然无法处理循环引用的对象。

  • structuredClone()： 这是最新的、也是推荐的深拷贝方法，它使用结构化克隆算法，可以处理包括循环引用在内的各种数据类型。

    const originalObject = { a: 1, b: { c: 2 }, d: [1,2,3], e: new Date(), f: /test/i};
    originalObject.g = originalObject; // 创建循环引用
    const deepCopy = structuredClone(originalObject);
    deepCopy.b.c = 4;
    console.log(originalObject.b.c); // 输出 2
    deepCopy.d[0] = 5;
    console.log(originalObject.d[0]); // 输出 1
    console.log(deepCopy.g === deepCopy); // true, 正确处理循环引用
    console.log(deepCopy.e); // Date 对象被正确复制
    console.log(deepCopy.f); // RegExp 对象被正确复制

    structuredClone() 的兼容性相对较好，现代浏览器和 Node.js 环境都支持。

总结：

  • 如果只需要拷贝对象的第一层属性，且属性中不包含引用类型，可以使用浅拷贝。
  • 如果需要完全独立的副本，包括所有嵌套的对象和数组，应该使用深拷贝。
  • 对于简单的对象，JSON.parse(JSON.stringify()) 是一个快速的解决方案，但需要注意其局限性。
  • 对于需要处理复杂数据类型（包括循环引用）的情况，推荐使用 structuredClone()。如果需要兼容旧版本浏览器，则需要使用递归函数或者使用第三方库（例如 Lodash 的 cloneDeep 方法）。

选择哪种拷贝方式取决于你的具体需求。理解浅拷贝和深拷贝的区别，以及各种方法的优缺点，可以帮助你更好地处理 JavaScript 中的对象复制问题。

16. JavaScript 中的错误有哪些不同类型？

  • JavaScript 中有几种不同类型的错误，它们分别代表了代码中不同性质的问题。理解这些错误类型对于调试和编写健壮的代码至关重要。以下是 JavaScript 中常见的错误类型：

    1. Error (错误)

    • Error 是所有其他错误类型的基类。它本身很少直接使用，通常用于自定义错误类型。
    • 它包含一个 message 属性，用于描述错误信息，以及一个 name 属性，值为 "Error"。

    2. SyntaxError (语法错误)

    • 当 JavaScript 代码违反了语法规则时，会抛出 SyntaxError。这是最常见的错误类型之一。

    • 例如：缺少括号、引号不匹配、使用了保留字等。

      // 缺少闭合括号
console.log("Hello, world!"
// Uncaught SyntaxError: Unexpected end of input

    3. TypeError (类型错误)

    • 当操作或函数接收到预期之外的类型的值时，会抛出 TypeError。

    • 例如：调用不存在的方法、对非对象使用点运算符、将数字作为函数调用等。

      let num = 10;
num.toUpperCase(); // Uncaught TypeError: num.toUpperCase is not a function

null.property // Uncaught TypeError: Cannot read properties of null (reading 'property')

    4. ReferenceError (引用错误)

    • 当尝试访问未声明的变量或不存在的属性时，会抛出 ReferenceError。

    • 例如：使用未定义的变量、访问对象上不存在的属性。

      console.log(undeclaredVariable); // Uncaught ReferenceError: undeclaredVariable is not defined

    5. RangeError (范围错误)

    • 当数值超出允许的范围时，会抛出 RangeError。

    • 例如：数组长度为负数、数值超出数值类型的最大或最小值。

      let arr = new Array(-1); // Uncaught RangeError: Invalid array length

    6. URIError (URI 错误)

    • 当使用 encodeURI() 或 decodeURI() 等 URI 处理函数时，如果 URI 格式不正确，会抛出 URIError。

      decodeURI("%"); // Uncaught URIError: URI malformed

    7. EvalError (Eval 错误)

    • 在过去，当使用 eval() 函数发生错误时，会抛出 EvalError。但现在，eval() 中发生的语法错误会抛出 SyntaxError，其他错误类型则保持不变，因此 EvalError 在现代 JavaScript 中几乎不再使用。

    8. InternalError (内部错误)

    • 当 JavaScript 引擎内部发生错误时，会抛出 InternalError。这通常是由于代码中存在非常复杂的操作，例如过深的递归调用或过多的 switch 语句等，导致引擎资源耗尽。在现代 JavaScript 引擎中，这种情况比较少见。
17. JavaScript 中的记忆化是什么？

记忆化（Memoization）是一种优化技术，主要用于加速计算机程序，尤其是在函数式编程中非常常见。它通过存储耗时函数或计算的结果，当相同的输入再次出现时，直接返回缓存的结果，从而避免重复计算，提高性能。

记忆化的核心思想：

  1. 缓存结果： 将函数或计算的输出结果存储在一个缓存（通常是对象或Map）中。
  2. 检查缓存： 在执行函数或计算之前，先检查缓存中是否已经存在该输入对应的结果。
  3. 返回缓存或计算： 如果缓存中存在结果，则直接返回缓存的结果；否则，执行函数或计算，并将结果存储到缓存中，然后返回。

记忆化的优点：

  • 提高性能： 避免重复计算，特别是对于计算密集型或耗时的函数，可以显著提高程序的执行速度。
  • 减少资源消耗： 减少了CPU和内存的使用。

记忆化的缺点：

  • 空间换时间： 需要额外的内存空间来存储缓存。
  • 缓存失效问题： 如果函数的计算结果依赖于外部状态的变化，缓存可能会失效，导致返回错误的结果。需要考虑缓存的更新或失效策略。

JavaScript 中实现记忆化的方式：

  1. 使用对象作为缓存：

    function memoize(func) {
  const cache = {};
  return function (...args) {
    const key = JSON.stringify(args); // 将参数转换为字符串作为键
    if (cache[key]) {
      return cache[key]; // 从缓存中返回结果
    } else {
      const result = func.apply(this, args); // 执行函数
      cache[key] = result; // 将结果存储到缓存中
      return result;
    }
  };
}

function factorial(n) { // 计算阶乘的函数
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

const memoizedFactorial = memoize(factorial); // 创建记忆化后的函数

console.time("First call");
console.log(memoizedFactorial(10)); // 第一次调用，需要计算
console.timeEnd("First call");

console.time("Second call");
console.log(memoizedFactorial(10)); // 第二次调用，直接从缓存中获取结果
console.timeEnd("Second call");

console.time("Third call");
console.log(memoizedFactorial(7)); // 新的参数，需要计算
console.timeEnd("Third call");

console.time("Forth call");
console.log(memoizedFactorial(7)); // 直接从缓存中获取结果
console.timeEnd("Forth call");

  2. 使用 Map 作为缓存（更健壮的方式）：

    使用 Map 可以避免使用 JSON.stringify 带来的潜在问题，例如参数中包含对象时的顺序问题。

    function memoize(func) {
  const cache = new Map();
  return function (...args) {
    const key = args.join(','); // 将参数转换为字符串作为键
    if (cache.has(key)) {
      return cache.get(key);
    } else {
      const result = func.apply(this, args);
      cache.set(key, result);
      return result;
    }
  };
}

// ... (factorial 函数同上)

  3. 使用 Lodash 的 memoize 函数：

    Lodash 提供了一个方便的 memoize 函数，可以更简洁地实现记忆化。

    const _ = require('lodash'); // 引入 Lodash

function factorial(n) { // 计算阶乘的函数
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

const memoizedFactorial = _.memoize(factorial);

// ... (调用方式同上)

适用场景：

  • 纯函数： 函数的输出只依赖于输入，没有副作用。
  • 重复调用： 函数会被多次使用相同的参数调用。
  • 计算密集型函数： 函数的计算过程比较耗时。
  • 递归函数： 可以显著提高递归函数的性能，例如斐波那契数列。

不适用场景：

  • 非纯函数： 函数的输出依赖于外部状态或有副作用。
  • 很少重复调用： 函数很少或只会被调用一次。
  • 缓存占用过多内存： 如果函数的输入值非常多且分散，缓存可能会占用大量的内存空间。
18. JavaScript 中的递归是什么？

递归是一种在编程中常用的解决问题的方法，它将一个大问题分解成一个或多个与原问题相似但规模较小的子问题，然后通过重复调用自身来解决这些子问题。在 JavaScript 中，递归主要体现在函数调用自身。

递归的基本概念

  • 递归函数： 一个函数通过名字调用自身，这样的函数称为递归函数。
  • 基本情况（Base Case）： 递归函数必须有一个或多个终止条件，当满足这些条件时，递归停止，避免无限循环调用，导致栈溢出。
  • 递归步骤（Recursive Step）： 函数调用自身的部分，每次调用都会将问题规模缩小，直到达到基本情况。

递归的工作原理

当一个函数被调用时，计算机会为其分配一块内存空间，称为“调用栈”（Call Stack）。每次函数调用自身时，都会创建一个新的栈帧（Stack Frame）并压入调用栈中，用于存储本次调用的参数、局部变量和返回地址等信息。当函数执行完毕并返回时，对应的栈帧会从调用栈中弹出。

递归的过程就像一层层地深入，直到达到基本情况，然后一层层地返回，最终得到结果。

一个简单的例子：计算阶乘

function factorial(n) {
  // 基本情况：当 n 为 0 时，阶乘为 1
  if (n === 0) {
    return 1;
  } else {
    // 递归步骤：n 的阶乘等于 n 乘以 (n-1) 的阶乘
    return n * factorial(n - 1);
  }
}

console.log(factorial(5)); // 输出 120

在这个例子中：

  • factorial(0) 是基本情况，直接返回 1。
  • factorial(n) 调用 factorial(n - 1) 是递归步骤，每次调用都会使 n 的值减小，直到达到基本情况。

递归的优缺点

优点：

  • 代码简洁： 对于某些问题，递归的实现比循环更简洁、易懂。
  • 符合人类思维： 递归的思维方式更接近于人类解决问题的自然方式，将大问题分解成小问题。

缺点：

  • 性能问题： 每次函数调用都会占用一定的内存空间，如果递归深度过大，可能会导致栈溢出。
  • 调试困难： 递归的执行过程相对复杂，调试起来比较困难。

使用递归的注意事项

  • 确保有基本情况： 必须定义清晰的终止条件，避免无限递归。
  • 控制递归深度： 尽量避免过深的递归，可以使用循环或其他方式进行优化。
  • 注意性能问题： 递归可能会占用较多的内存和时间，需要根据实际情况进行权衡。

递归的应用场景

  • 树的遍历： 例如二叉树的前序、中序、后序遍历。
  • 图的遍历： 例如深度优先搜索（DFS）。
  • 分治算法： 例如归并排序、快速排序。
  • 一些数学问题： 例如斐波那契数列、汉诺塔问题。
  • DOM 树的遍历： 在 Web 开发中，可以使用递归遍历 DOM 树。
19. JavaScript 中构造函数有什么用？

在 JavaScript 中，构造函数是用于创建和初始化对象的特殊函数。它们提供了一种模板，可以用来生成多个具有相似属性和方法的对象实例。理解构造函数对于深入理解 JavaScript 的面向对象编程至关重要。

构造函数的定义

构造函数本质上也是函数，但它们通常以大写字母开头（这是一个约定俗成的规范，并非强制要求），并且与 new 关键字一起使用。当使用 new 关键字调用一个函数时，该函数就成为了一个构造函数。

构造函数的作用

  1. 创建对象实例： 构造函数的主要作用是创建新的对象实例。通过 new 关键字调用构造函数，可以创建一个全新的对象，该对象拥有构造函数中定义的属性和方法。
  2. 初始化对象属性： 构造函数可以接收参数，并在创建对象时初始化对象的属性。这使得我们可以在创建对象的同时为其赋予初始值。
  3. 定义对象的方法： 构造函数可以定义对象的方法。这些方法会被所有通过该构造函数创建的对象实例共享。

构造函数的工作原理

当使用 new 关键字调用构造函数时，会发生以下步骤：

  1. 创建一个新的空对象： 首先，会创建一个新的空对象，该对象继承自构造函数的 prototype 属性。
  2. 将 this 指向新对象： 构造函数内部的 this 关键字会被绑定到新创建的对象。
  3. 执行构造函数中的代码： 构造函数中的代码会被执行，可以用来初始化对象的属性和方法。
  4. 返回新对象： 如果构造函数没有显式地返回一个对象，则会自动返回新创建的对象。如果构造函数显式地返回一个对象，则返回该对象，而不是新创建的对象（这种情况比较少见）。

一个简单的例子

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  };
}

const person1 = new Person("Alice", 30);
const person2 = new Person("Bob", 25);

person1.greet(); // 输出：Hello, my name is Alice and I am 30 years old.
person2.greet(); // 输出：Hello, my name is Bob and I am 25 years old.

在这个例子中：

  • Person 是一个构造函数，用于创建 Person 对象。
  • this.name = name; 和 this.age = age; 用于初始化对象的 name 和 age 属性。
  • this.greet = function() { ... }; 用于定义对象的 greet 方法。
  • new Person("Alice", 30) 和 new Person("Bob", 25) 分别创建了两个 Person 对象实例。

构造函数与普通函数的区别

特征构造函数普通函数
调用方式使用new 关键字调用直接调用
命名约定通常以大写字母开头通常以小写字母开头
this 指向指向新创建的对象取决于调用方式，可能指向全局对象或undefined
返回值默认返回新创建的对象，或显式返回的对象返回函数执行的结果或undefined
主要用途创建和初始化对象执行特定的任务

使用构造函数的优点

  • 代码复用： 可以通过构造函数创建多个具有相同属性和方法的对象，避免重复编写代码。
  • 对象类型化： 可以通过构造函数定义对象的类型，方便进行类型检查和管理。
  • 封装性： 可以通过构造函数将对象的属性和方法封装在一起，提高代码的可维护性和安全性。
20. JavaScript 中函数声明和函数表达式有什么区别？

JavaScript 中定义函数有两种主要方式：函数声明（Function Declaration）和函数表达式（Function Expression）。它们在语法上有些相似，但在执行和提升（hoisting）等方面存在重要的区别。理解这些区别对于编写高质量的 JavaScript 代码至关重要。

1. 语法上的区别

  • 函数声明： 以 function 关键字开头，后面跟着函数名，然后是参数列表和函数体。

    function functionName(parameter1, parameter2) {
  // 函数体
  return someValue;
}

  • 函数表达式： 将一个函数赋值给一个变量。函数可以是匿名的（没有函数名），也可以有一个可选的函数名（命名函数表达式）。

    // 匿名函数表达式
const functionName = function(parameter1, parameter2) {
  // 函数体
  return someValue;
};

// 命名函数表达式
const functionName = function namedFunction(parameter1, parameter2) {
  // 函数体
  return someValue;
};

2. 提升（Hoisting）的区别

这是函数声明和函数表达式最关键的区别。

  • 函数声明提升： JavaScript 引擎在执行代码之前，会将函数声明提升到当前作用域的顶部。这意味着你可以在函数声明之前调用该函数。

    console.log(add(2, 3)); // 输出 5，即使 add 函数在后面才声明

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

  • 函数表达式不提升： 只有变量声明会被提升，而赋值操作则保留在原地。因此，你不能在函数表达式赋值之前调用该函数。

    console.log(multiply(2, 3)); // Uncaught ReferenceError: Cannot access 'multiply' before initialization

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

3. 命名函数表达式的优势

虽然匿名函数表达式更简洁，但在某些情况下，命名函数表达式更有用：

  • 调试： 在调试器中，命名函数表达式更容易识别和跟踪。

  • 递归： 在函数内部需要调用自身时，命名函数表达式是必需的（虽然你也可以使用 arguments.callee，但不推荐使用）。

    const factorial = function fact(n) {
  if (n === 0) {
    return 1;
  }
  return n * fact(n - 1); // 使用函数名 fact 进行递归调用
};

4. 何时使用哪种方式

  • 需要提前调用函数时： 使用函数声明。
  • 需要将函数作为参数传递给其他函数时（例如回调函数）： 通常使用函数表达式。
  • 需要创建闭包时： 函数表达式通常更方便。
  • 需要递归调用且不使用arguments.callee时： 使用命名函数表达式。
  • 模块化和代码组织： 在模块化编程中，函数表达式更灵活，可以更好地控制函数的可见性和作用域。
特性函数声明函数表达式
语法function name() {}const name = function() {} 或 const name = function named() {}
提升提升不提升（仅变量声明提升）
命名强制命名可匿名或命名
主要用途定义函数，可在定义前调用将函数赋值给变量，用于回调、闭包等

理解函数声明和函数表达式之间的区别是 JavaScript 基础知识的重要组成部分。选择哪种方式取决于具体的应用场景和编码风格。在现代 JavaScript 开发中，函数表达式，尤其是结合箭头函数的用法，越来越常见，因为它们提供了更大的灵活性和更简洁的语法。

21. JavaScript 中的回调函数是什么？

在 JavaScript 中，回调函数（Callback Function）是一个被作为参数传递给另一个函数的函数，并在该外部函数内部执行。简单来说，就是把一个函数“放”到另一个函数里，让它在特定的时候“回来”执行。

回调函数的核心概念：

  • 函数作为参数： JavaScript 中，函数是一等公民，可以像其他数据类型（例如数字、字符串）一样作为参数传递。
  • 稍后执行： 回调函数不会立即执行，而是在外部函数执行到某个特定时刻或满足某个条件时才会被调用。
  • 异步编程的重要组成部分： 回调函数常用于处理异步操作，例如网络请求、定时器、事件处理等。

回调函数的作用：

  1. 处理异步操作： JavaScript 是单线程的，这意味着它一次只能执行一个任务。对于耗时的操作（例如从服务器获取数据），如果同步执行会导致程序阻塞。使用回调函数可以使这些操作异步执行，避免阻塞主线程。
  2. 提高代码的灵活性和可复用性： 通过将函数作为参数传递，可以使代码更加灵活，可以根据不同的需求传递不同的回调函数。
  3. 实现事件驱动编程： 在浏览器环境中，事件处理程序就是一种回调函数，当用户触发某个事件（例如点击按钮）时，相应的回调函数会被执行。

回调函数的示例：

1. 同步回调：

虽然回调通常与异步操作相关联，但它也可以在同步操作中使用。

function greet(name, callback) {
  console.log("Hello, " + name + "!");
  callback(); // 执行回调函数
}

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

greet("Alice", sayGoodbye); // 输出：Hello, Alice! Goodbye!

在这个例子中，sayGoodbye 函数作为回调函数传递给 greet 函数，并在 greet 函数内部被调用。

2. 异步回调（setTimeout）：

function doSomethingAsync(callback) {
  setTimeout(function() { // 模拟异步操作
    console.log("Async operation completed!");
    callback("Result from async operation"); // 执行回调函数并传递结果
  }, 1000); // 1 秒后执行
}

function handleResult(result) {
  console.log("Handling the result: " + result);
}

doSomethingAsync(handleResult); // 输出：Async operation completed! Handling the result: Result from async operation (1秒后)

在这个例子中，setTimeout 函数模拟了一个异步操作。handleResult 函数作为回调函数传递给 doSomethingAsync 函数，并在异步操作完成后被调用。

3. 事件处理：

<!DOCTYPE html>
<html>
<head>
  <title>Callback Example</title>
</head>
<body>
  <button id="myButton">Click me</button>
  <script>
    const button = document.getElementById("myButton");

    button.addEventListener("click", function() { // 回调函数
      alert("Button clicked!");
    });
  </script>
</body>
</html>

在这个例子中，当用户点击按钮时，addEventListener 方法注册的回调函数会被执行。

回调地狱（Callback Hell）：

当多个异步操作需要按顺序执行，并且每个操作都依赖前一个操作的结果时，就会出现回调地狱。这会导致代码嵌套过深，难以阅读和维护。

asyncOperation1(function(result1) {
  asyncOperation2(result1, function(result2) {
    asyncOperation3(result2, function(result3) {
      // ... 更多嵌套
    });
  });
});

解决回调地狱的方法：

  • 命名函数： 将匿名回调函数提取为命名函数，可以提高代码的可读性。
  • Promises： Promises 提供了一种更优雅的方式来处理异步操作，可以避免回调地狱。
  • async/await： async/await 是基于 Promises 的语法糖，使异步代码看起来更像同步代码。
22. JavaScript 中的 Promise 是什么？

在 JavaScript 中，Promise 是一种处理异步操作的对象。它代表了一个异步操作的最终结果，可以让我们以更清晰、更易于管理的方式处理异步代码，避免了传统回调函数可能导致的回调地狱问题。

Promise 的状态

一个 Promise 对象有三种状态：

  • Pending（进行中）： 初始状态，表示异步操作尚未完成。
  • Fulfilled（已完成/已兑现）： 表示异步操作成功完成。
  • Rejected（已拒绝）： 表示异步操作失败。

Promise 的基本用法

创建一个 Promise 对象使用 new Promise() 构造函数，它接收一个函数作为参数，这个函数被称为 executor（执行器）。executor 函数接收两个参数：

  • resolve：一个函数，用于将 Promise 的状态从 Pending 变为 Fulfilled，并将结果传递给后续的处理程序。
  • reject：一个函数，用于将 Promise 的状态从 Pending 变为 Rejected，并将错误信息传递给后续的处理程序。
const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const success = true; // 模拟异步操作的结果
    if (success) {
      resolve("操作成功！"); // 将 Promise 状态改为 Fulfilled，并传递结果
    } else {
      reject("操作失败！"); // 将 Promise 状态改为 Rejected，并传递错误信息
    }
  }, 1000); // 1 秒后执行
});

处理 Promise 的结果

可以使用 .then() 方法处理 Promise 成功完成后的结果，使用 .catch() 方法处理 Promise 失败后的错误。

myPromise
  .then(result => {
    console.log("成功：", result); // 输出：成功： 操作成功！
    return "then的返回值"
  })
  .then(result2 => {
    console.log("then 链式调用：", result2) // 输出：then 链式调用： then的返回值
  })
  .catch(error => {
    console.error("失败：", error);
  });

.then() 方法接收一个函数作为参数，该函数会在 Promise 状态变为 Fulfilled 时被调用，并将 Promise 传递的结果作为参数传递给该函数。.catch() 方法接收一个函数作为参数，该函数会在 Promise 状态变为 Rejected 时被调用，并将 Promise 传递的错误信息作为参数传递给该函数。

Promise 的链式调用

.then() 方法会返回一个新的 Promise 对象，这使得我们可以进行链式调用，按顺序处理多个异步操作。

function asyncOperation1() {
  return new Promise(resolve => {
    setTimeout(() => resolve(1), 500);
  });
}

function asyncOperation2(value) {
  return new Promise(resolve => {
    setTimeout(() => resolve(value + 1), 500);
  });
}

asyncOperation1()
  .then(value => {
    console.log("Operation 1:", value); // 输出：Operation 1: 1
    return asyncOperation2(value); // 返回一个新的 Promise
  })
  .then(value => {
    console.log("Operation 2:", value); // 输出：Operation 2: 2
  })
  .catch(error => {
    console.error("Error:", error);
  });

Promise.all() 和 Promise.race()

  • Promise.all(promises)： 接收一个 Promise 数组作为参数，当所有 Promise 都成功完成时，返回一个新的 Promise，该 Promise 的结果是一个包含所有 Promise 结果的数组。如果其中任何一个 Promise 失败，则返回的 Promise 也会立即失败，并返回第一个失败的 Promise 的错误信息。

    const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // 输出：Array [3, 42, "foo"]
});

  • Promise.race(promises)： 接收一个 Promise 数组作为参数，返回一个新的 Promise，该 Promise 的结果是第一个完成（无论是成功还是失败）的 Promise 的结果。

    const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value); // 输出：two
  // promise2 更快 resolve
});

async/await

async 和 await 是 ES8 引入的用于更简洁地处理 Promise 的语法糖。async 关键字用于定义一个异步函数，await 关键字用于等待一个 Promise 的结果。

async function myFunction() {
  try {
    const result1 = await asyncOperation1();
    console.log("Operation 1:", result1);
    const result2 = await asyncOperation2(result1);
    console.log("Operation 2:", result2);
  } catch (error) {
    console.error("Error:", error);
  }
}

myFunction();

使用 async/await 可以使异步代码看起来更像同步代码，提高了代码的可读性和可维护性。

23. 同步和异步编程有什么区别？

同步和异步是描述程序执行方式的两种重要概念，它们主要区别在于程序是否需要等待操作完成才能继续执行后续代码。理解同步和异步对于编写高效、响应迅速的程序至关重要，尤其是在处理I/O操作、网络请求等耗时任务时。

同步编程（Synchronous Programming）

  • 执行方式： 代码按照编写的顺序依次执行，每个操作必须等待前一个操作完成后才能进行。就像排队取餐，你必须等服务员把餐点给你后才能离开。
  • 特点：
    • 简单直接： 代码逻辑清晰，易于理解和调试。
    • 阻塞执行： 如果某个操作耗时较长，程序会被阻塞，无法执行其他任务，导致响应缓慢甚至卡顿。
  • 适用场景：
    • 任务之间存在依赖关系，必须按顺序执行。
    • 计算密集型任务，不需要等待I/O操作。
    • 对实时性要求不高，可以容忍一定的延迟。

举例说明：

假设你需要从硬盘读取两个文件，然后分别处理它们的内容。在同步编程中，你需要先读取第一个文件，等待读取完成后再读取第二个文件，最后分别处理它们。

// 同步读取文件
const fs = require('fs');

try {
  const file1Content = fs.readFileSync('file1.txt', 'utf-8');
  console.log('File 1 read complete.');
  // 处理 file1Content

  const file2Content = fs.readFileSync('file2.txt', 'utf-8');
  console.log('File 2 read complete.');
  // 处理 file2Content

  console.log('All tasks complete.');
} catch (error) {
  console.error('Error:', error);
}

在这个例子中，如果 file1.txt 文件很大，读取操作会阻塞程序，直到读取完成才能继续执行后续代码。

异步编程（Asynchronous Programming）

  • 执行方式： 代码不需要等待某个操作完成后才能继续执行，可以同时执行多个任务。就像扫码点餐，你点完餐后就可以去做其他事情，等餐做好了会通知你。
  • 特点：
    • 非阻塞执行： 程序在等待I/O操作或其他耗时操作时，可以继续执行其他任务，提高了程序的响应速度和并发性。
    • 较为复杂： 需要处理回调函数、Promise、async/await等机制，代码逻辑相对复杂。
  • 适用场景：
    • 需要处理I/O操作、网络请求等耗时操作。
    • 需要提高程序的响应速度和并发性。
    • 事件驱动编程，例如用户界面交互、网络服务器等。

举例说明：

使用异步编程，你可以同时读取两个文件，并在读取完成后分别处理它们的内容，而不需要等待其中一个文件读取完成后再读取另一个。

// 异步读取文件
const fs = require('fs');

fs.readFile('file1.txt', 'utf-8', (err, file1Content) => {
  if (err) {
    console.error('Error reading file 1:', err);
    return;
  }
  console.log('File 1 read complete.');
  // 处理 file1Content
});

fs.readFile('file2.txt', 'utf-8', (err, file2Content) => {
  if (err) {
    console.error('Error reading file 2:', err);
    return;
  }
  console.log('File 2 read complete.');
  // 处理 file2Content
});

console.log('Continuing with other tasks...'); // 这行代码会在文件读取完成之前执行

在这个例子中，fs.readFile 是异步操作，它会立即返回，程序会继续执行后面的代码。当文件读取完成后，相应的回调函数会被执行。

同步与异步的区别总结

特性同步异步
执行方式顺序执行，阻塞等待非阻塞执行，无需等待
效率简单任务效率高，但耗时任务效率低耗时任务效率高，提高了程序的响应速度和并发性
复杂度简单易懂相对复杂，需要处理回调、Promise等机制
适用场景任务之间存在依赖关系，计算密集型任务I/O操作、网络请求、事件驱动编程等

阻塞与非阻塞（与同步/异步的区别）

阻塞和非阻塞通常与I/O操作相关，它们描述的是程序在等待I/O操作时的状态：

  • 阻塞： 程序在等待I/O操作完成时会被挂起，无法执行其他任务。同步I/O通常是阻塞的。
  • 非阻塞： 程序在发起I/O操作后可以立即返回，继续执行其他任务，而无需等待I/O操作完成。异步I/O通常是非阻塞的。

需要注意的是，同步和异步关注的是程序执行方式，而阻塞和非阻塞关注的是程序在等待I/O操作时的状态，它们是不同的概念，但通常会一起使用。例如，同步I/O通常是阻塞的，而异步I/O通常是非阻塞的。

24. 如何处理 JavaScript 中的错误？

在 JavaScript 中，错误处理是编写健壮、可靠代码的重要组成部分。良好的错误处理机制可以帮助我们捕获并处理程序运行过程中可能出现的各种异常情况，防止程序崩溃，并提供友好的用户提示。JavaScript 提供了多种错误处理方式，下面将详细介绍。

1. try...catch 语句

try...catch 语句是 JavaScript 中最基本的错误处理机制。它允许我们尝试执行一段代码，并在发生错误时捕获并处理该错误。

try {
  // 可能会抛出错误的代码
  let result = 10 / 0; // 除以 0 会抛出错误
  console.log("Result:", result); // 如果发生错误，这行代码不会执行
} catch (error) {
  // 捕获错误并进行处理
  console.error("发生错误:", error.message); // 输出错误信息
  // 可以进行其他错误处理操作，例如记录日志、显示错误提示等
} finally {
  // 可选的 finally 代码块，无论是否发生错误都会执行
  console.log("Finally block executed.");
}
  • try 代码块： 包含可能会抛出错误的代码。
  • catch 代码块： 用于捕获并处理 try 代码块中抛出的错误。catch 代码块接收一个参数（通常命名为 error），该参数是一个包含错误信息的对象。
  • finally 代码块： 是可选的，包含无论是否发生错误都需要执行的代码。例如，释放资源、关闭文件等。

错误对象

当发生错误时，JavaScript 会创建一个错误对象，该对象包含有关错误的各种信息。常见的错误对象属性包括：

  • name：错误类型名称，例如 TypeError、ReferenceError、SyntaxError 等。
  • message：错误信息，描述错误的具体内容。
  • stack：错误堆栈信息，显示错误发生的调用堆栈。

2. throw 语句

throw 语句用于手动抛出一个错误。我们可以抛出 JavaScript 内置的错误类型，也可以抛出自定义的错误对象。

function checkInput(value) {
  if (typeof value !== 'number') {
    throw new TypeError("Input must be a number."); // 抛出 TypeError
  }
  if (value < 0) {
    throw new Error("Input must be positive."); // 抛出 Error
  }
  return value * 2;
}

try {
  let result = checkInput("abc");
  console.log("Result:", result);
} catch (error) {
  console.error("Error:", error.name, error.message);
}

try {
    let result = checkInput(-1);
    console.log("Result:", result);
  } catch (error) {
    console.error("Error:", error.name, error.message);
  }

3. 内置错误类型

JavaScript 提供了一些内置的错误类型，用于表示不同类型的错误：

  • Error：通用错误类型。
  • TypeError：类型错误，例如将函数用于不兼容的类型。
  • ReferenceError：引用错误，例如访问未声明的变量。
  • SyntaxError：语法错误，例如代码中存在语法错误。
  • RangeError：范围错误，例如数值超出允许的范围。
  • URIError：URI 错误，例如使用了无效的 URI。
  • EvalError：eval() 函数执行错误 (已废弃)。

4. 自定义错误类型

我们可以通过继承 Error 对象来创建自定义的错误类型：

class MyCustomError extends Error {
  constructor(message, errorCode) {
    super(message); // 调用父类构造函数
    this.name = "MyCustomError";
    this.errorCode = errorCode;
  }
}

try {
  throw new MyCustomError("Something went wrong.", 1001);
} catch (error) {
  console.error("Error:", error.name, error.message, error.errorCode);
}

5. 异步错误处理

对于异步操作，例如 Promise 和 async/await，错误处理方式略有不同：

  • Promise： 使用 .catch() 方法捕获错误。

    fetch('/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error fetching data:", error));

  • async/await： 使用 try...catch 语句捕获错误。

    async function fetchData() {
  try {
    const response = await fetch('/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

6. 错误处理的最佳实践

  • 尽早捕获错误： 尽量在错误发生的地方附近捕获并处理错误，避免错误蔓延到程序的其他部分。
  • 提供有意义的错误信息： 错误信息应该清晰地描述错误的类型和原因，方便调试和排查问题。
  • 不要吞噬错误： 除非有充分的理由，否则不要捕获错误后不做任何处理，这会导致错误被隐藏起来，难以发现。
  • 使用合适的错误类型： 根据错误的类型选择合适的内置错误类型或自定义错误类型。
  • 在开发阶段输出详细的错误信息，在生产环境中使用更友好的提示信息。
  • 使用日志记录错误： 将错误信息记录到日志文件中，方便后续分析和排查问题。
25. 解释 JavaScript 中事件冒泡的概念。

在 JavaScript 中，事件冒泡（Event Bubbling）是一种事件传播机制，它描述了当一个 HTML 元素上的事件被触发时，事件是如何在 DOM 树中传播的。简单来说，当你在一个嵌套的 HTML 元素结构中触发一个事件（例如点击一个按钮），这个事件会从最内层的元素开始，逐级向外传播，直到根元素（通常是 window 或 document 对象）。这个过程就像水底冒出的气泡一样，所以被称为“冒泡”。

事件冒泡的工作原理：

  1. 事件发生： 当用户在页面上执行某个操作（例如点击、鼠标悬停等）时，相应的事件会在目标元素上触发。这个目标元素就是事件的“目标对象”（target）。
  2. 冒泡阶段： 事件会沿着 DOM 树向上冒泡，依次触发父元素、祖父元素，直到根元素上绑定的相同事件类型的事件处理程序。

举例说明：

假设有以下 HTML 结构：

<div id="grandparent">
  <div id="parent">
    <button id="child">Click me</button>
  </div>
</div>

并有以下 JavaScript 代码：

const grandparent = document.getElementById('grandparent');
const parent = document.getElementById('parent');
const child = document.getElementById('child');

grandparent.addEventListener('click', function(event) {
  console.log('Grandparent clicked!');
  console.log('Target:', event.target.id);
  console.log('CurrentTarget:', event.currentTarget.id)
});

parent.addEventListener('click', function(event) {
  console.log('Parent clicked!');
  console.log('Target:', event.target.id);
  console.log('CurrentTarget:', event.currentTarget.id)
});

child.addEventListener('click', function(event) {
  console.log('Child clicked!');
    console.log('Target:', event.target.id);
    console.log('CurrentTarget:', event.currentTarget.id)
});

当你点击按钮（#child）时，控制台的输出将是：

Child clicked!
Target: child
CurrentTarget: child
Parent clicked!
Target: child
CurrentTarget: parent
Grandparent clicked!
Target: child
CurrentTarget: grandparent

可以看到，事件首先在 child 元素上触发，然后依次冒泡到 parent 元素和 grandparent 元素，并分别执行了它们绑定的 click 事件处理程序。

event.target 和 event.currentTarget 的区别：

  • event.target：始终指向触发事件的原始元素，即事件最初发生的元素。在上面的例子中，无论事件冒泡到哪个父元素，event.target 始终是 child 元素。
  • event.currentTarget：指向当前正在处理事件的元素。在上面的例子中，当事件在 parent 元素上处理时，event.currentTarget 是 parent 元素；当事件在 grandparent 元素上处理时，event.currentTarget 是 grandparent 元素。

阻止事件冒泡：event.stopPropagation()

有时候，我们可能需要阻止事件继续冒泡到父元素。这时可以使用 event.stopPropagation() 方法。

修改上面的 JavaScript 代码，在 child 元素的事件处理程序中添加 event.stopPropagation()：

child.addEventListener('click', function(event) {
  console.log('Child clicked!');
  event.stopPropagation(); // 阻止事件冒泡
});

现在，当你点击按钮时，控制台的输出将只有：

Child clicked!

事件只在 child 元素上触发，不会继续冒泡到 parent 和 grandparent 元素。

事件捕获（Event Capturing）：

与事件冒泡相反，事件捕获是从根元素开始，逐级向下传播到目标元素。虽然事件捕获不太常用，但它也是事件传播机制的一部分。要使用事件捕获，需要在 addEventListener 方法的第三个参数中传入 true：

element.addEventListener('click', function(event) {
  // 事件处理程序
}, true); // true 表示使用捕获阶段

如果没有指定第三个参数，或者传入 false，则默认使用冒泡阶段。

事件委托（Event Delegation）：

事件冒泡的一个重要应用是事件委托。事件委托利用事件冒泡的机制，将事件监听器添加到父元素上，而不是每个子元素都添加一个监听器。这样做可以减少事件监听器的数量，提高性能，尤其是在子元素数量很多或者动态添加的情况下。

例如，如果一个列表有很多列表项，可以把 click 事件监听器添加到ul父元素上，通过 event.target 来判断点击的是哪个列表项。

26.JavaScript 中的箭头函数是什么？

JavaScript 中的箭头函数（Arrow Functions）是 ES6（ECMAScript 2015）引入的一种更简洁的函数定义语法。它提供了一种更短、更清晰的方式来编写函数，尤其适用于简短的回调函数和匿名函数。

箭头函数的基本语法：

(参数) => 表达式

如果只有一个参数，可以省略参数的括号：

参数 => 表达式

如果没有参数，则需要使用空括号：

() => 表达式

如果函数体包含多条语句，则需要使用花括号 {}，并使用 return 语句返回值：

(参数) => {
  // 多条语句
  return 表达式;
}

示例：

  • 普通函数：

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

  • 箭头函数：

    const add = (a, b) => a + b;
// 或者
const add = (a, b) => { return a + b; };

  • 只有一个参数：

    const square = x => x * x;

  • 没有参数：

    const greet = () => console.log("Hello!");

  • 多条语句：

    const multiplyAndAdd = (a, b, c) => {
  const product = a * b;
  return product + c;
};

箭头函数与普通函数的区别：

  1. 更简洁的语法： 箭头函数提供了一种更简洁的语法，可以减少代码量。

  2. this 指向不同： 这是箭头函数最重要的一个区别。

    • 普通函数： this 的值取决于函数是如何被调用的。它可以是全局对象（在浏览器中是 window，在 Node.js 中是 global），也可以是调用函数的对象，或者在使用 call、apply 或 bind 方法显式指定的值。
    • 箭头函数： 箭头函数没有自己的 this，它会继承定义时所在作用域的 this 值。换句话说，箭头函数中的 this 指向的是包含箭头函数的外部函数（或全局作用域）的 this 值。

    这个区别在处理对象方法和回调函数时尤为重要。

    // 普通函数中的 this
const obj = {
  value: 10,
  getValue: function() {
    setTimeout(function() {
      console.log(this.value); // this 指向 window 或 undefined (严格模式)
    }, 1000);
  }
};
obj.getValue(); // 输出 undefined 或报错

// 箭头函数中的 this
const obj2 = {
    value: 10,
    getValue: function() {
      setTimeout(() => {
        console.log(this.value); // this 指向 obj2
      }, 1000);
    }
  };
  obj2.getValue(); // 输出 10

  3. 不能用作构造函数： 箭头函数不能使用 new 关键字来创建实例，否则会抛出 TypeError。

  4. 没有 arguments 对象： 箭头函数没有自己的 arguments 对象，如果需要访问所有参数，可以使用剩余参数语法（rest parameters）：

    const sum = (...args) => {
  let total = 0;
  for (let arg of args) {
    total += arg;
  }
  return total;
};

console.log(sum(1, 2, 3)); // 输出 6

  5. 没有 prototype 属性： 箭头函数没有 prototype 属性，因此不能用作构造函数。

箭头函数的适用场景：

  • 简短的回调函数： 例如数组的 map、filter、reduce 等方法的回调函数。

    const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(x => x * 2);
console.log(doubledNumbers); // 输出 [2, 4, 6, 8, 10]

  • 匿名函数： 当需要一个简单的匿名函数时。

  • 需要绑定外部 this 的情况： 例如在对象方法中使用 setTimeout 或事件处理程序时。

箭头函数的注意事项：

  • 由于箭头函数没有自己的 this，因此不能使用 call、apply 或 bind 方法来改变其 this 指向。
  • 过度使用箭头函数可能会降低代码的可读性，特别是当函数体比较复杂时。
28. JavaScript 中 setTimeout() 函数的用途是什么？

setTimeout() 函数是 JavaScript 中一个非常重要的定时器函数，用于在指定的延迟时间后执行一次函数或一段代码。它属于 window 对象的方法，但通常可以直接调用。

setTimeout() 的基本语法：

setTimeout(function/code, delay, arg1, arg2, ...);
  • function/code：必需。要执行的函数或一段代码的字符串。推荐使用函数，避免使用字符串形式的代码，因为使用字符串形式的代码会导致性能问题，并且不易调试。
  • delay：必需。延迟的毫秒数（1秒 = 1000毫秒）。
  • arg1, arg2, ...：可选。传递给函数的额外参数。

setTimeout() 的用途：

  1. 延迟执行代码： 这是 setTimeout() 最主要的功能。可以用于实现各种需要延迟执行的场景，例如：

    • 提示信息延时消失： 在用户执行某个操作后，显示一个提示信息，并在几秒后自动消失。

      function showMessage() {
  const message = document.getElementById('message');
  message.style.display = 'block';
  setTimeout(() => {
    message.style.display = 'none';
  }, 3000); // 3秒后隐藏提示信息
}

    • 动画效果： 通过 setTimeout() 配合 CSS 或 JavaScript 动画，可以实现各种动画效果，例如淡入淡出、元素移动等。

    • 表单提交后的提示： 在用户提交表单后，延迟显示提交成功的提示信息。

  2. 异步执行代码： JavaScript 是单线程的，这意味着它一次只能执行一个任务。setTimeout() 可以将代码放入事件队列，在主线程空闲时异步执行，避免阻塞主线程，提高程序的响应速度。即使 delay 设置为 0，回调函数也会在当前代码执行完毕后异步执行。

    console.log("First");

setTimeout(() => {
  console.log("Second (from setTimeout)");
}, 0);

console.log("Third");

// 输出顺序：
// First
// Third
// Second (from setTimeout)

    这个例子展示了即使延迟时间为 0，setTimeout 中的代码也会异步执行，在其他同步代码执行完毕后才执行。

  3. 函数节流（Throttling）： 通过 setTimeout() 可以控制函数执行的频率，防止函数在短时间内被多次调用，例如在 scroll、resize 等事件处理中，可以避免频繁触发事件处理函数导致性能问题。

    let timeoutId;

function handleScroll() {
  if (timeoutId) {
    clearTimeout(timeoutId); // 清除之前的定时器
  }
  timeoutId = setTimeout(() => {
    // 执行实际的处理逻辑
    console.log("Scroll event handled.");
    timeoutId = null; // 重置 timeoutId
  }, 250); // 250 毫秒内只执行一次
}

window.addEventListener('scroll', handleScroll);

clearTimeout()：

可以使用 clearTimeout() 函数来取消 setTimeout() 设置的定时器。clearTimeout() 接收一个参数，即 setTimeout() 返回的定时器 ID。

const timeoutId = setTimeout(() => {
  console.log("This will not be executed.");
}, 5000);

clearTimeout(timeoutId); // 取消定时器

需要注意的点：

  • setTimeout() 只执行一次指定的函数或代码。如果需要重复执行，可以使用 setInterval() 函数。
  • setTimeout() 是异步的，它不会阻塞代码的执行。
  • 使用箭头函数作为 setTimeout() 的回调函数时，需要注意 this 的指向问题。箭头函数没有自己的 this，它会继承定义时所在作用域的 this。
  • 避免在 setTimeout() 中使用字符串形式的代码，这会导致性能问题，并且不易调试。
  • setTimeout 的最小延迟时间受到浏览器和操作系统的限制，通常在 4ms 左右。

总结：

setTimeout() 是 JavaScript 中一个非常实用的定时器函数，它可以用于延迟执行代码、实现动画效果、异步执行代码、函数节流等多种场景。理解 setTimeout() 的工作原理和使用方法，可以帮助我们编写更高效、更灵活的 JavaScript 代码。同时，也要注意 setTimeout() 的一些特性和限制，避免在使用过程中出现问题。

avatar
文章
阅读
粉丝