JS 相关问题 - ChatGPT ​

JS 执行流程 ​

当然，让我们更详细地探讨JavaScript的执行流程中的每个步骤：

1. 解析（Parsing）:

   • 这是JavaScript代码被浏览器或JavaScript引擎首次处理的阶段。解析器读取源代码并检查其语法是否正确。如果代码中存在语法错误，解析器将抛出错误，停止进一步执行。
   • 在解析过程中，解析器会构建一个抽象语法树（AST）。AST是源代码的树形表示，展示了代码中的各个元素及其之间的关系，如变量声明、函数调用、循环、条件语句等。

2. 编译（Compilation）:

   • 现代JavaScript引擎（如V8、SpiderMonkey、JavaScriptCore）通常采用即时编译（JIT）方法。在JIT编译中，JavaScript代码被编译成中间字节码或直接编译成机器码。
   • 初始编译通常是快速的，目的是尽快开始执行代码。引擎可能不会立即进行所有的优化，以避免编译时间过长。

3. 执行（Execution）:

   • 在编译之后，代码开始执行。JavaScript是单线程的，意味着一次只能执行一个任务。但它也支持异步编程模式，允许在背景中处理某些任务，如网络请求或定时器。
   • 在执行阶段，JavaScript的运行环境（如浏览器或Node.js）会为代码提供一个执行上下文（Execution Context），包括变量对象、作用域链等。

4. 事件循环和异步处理（Event Loop & Asynchronous Handling）:

   • JavaScript使用事件循环来处理异步操作。代码的执行不会被阻塞等待异步操作（如setTimeout或网络请求）的完成。
   • 当异步操作完成时，其回调函数被加入到一个任务队列。一旦当前执行栈为空，事件循环就会从队列中取出任务并执行。

5. 垃圾回收（Garbage Collection）:

   • JavaScript引擎负责管理内存的分配和释放。当对象不再被引用时，它们会被标记为垃圾并在垃圾回收过程中被清除。
   • 垃圾回收机制的目的是防止内存泄露，确保不再使用的内存得到回收。

6. 优化（Optimization）:

   • JavaScript引擎在代码运行时可能会进行进一步优化。例如，如果某段代码被频繁执行，引擎可能会将其编译为更高效的机器码。
   • 优化过程是动态的，并且依赖于代码的运行特性。引擎可能会在运行时重新编译并优化某些代码段，这称为即时编译优化。

以上步骤共同构成了JavaScript的执行流程，每个步骤都对整体性能和效率有着重要的影响。现代JavaScript引擎的设计目标是尽可能高效地执行代码，同时提供强大的功能和灵活性。

事件代理 (Event Delegation) ​

事件代理是一种前端开发技术，用于管理和处理大量相似元素的事件监听器，而不必为每个元素单独添加事件处理程序。它通过将事件监听器附加到容器元素，然后利用事件冒泡机制来捕获和处理事件，从而实现了更高效的事件管理。

工作原理 ​

1. 事件冒泡：事件代理依赖于事件冒泡，即当在嵌套的元素上触发事件时，事件会从最深的嵌套元素向外传播到根元素。这意味着你可以在一个父元素上监听事件，然后在子元素上触发该事件，父元素的事件监听器仍然能够捕获并处理事件。

2. 选择合适的容器：你选择一个共同的祖先元素（通常是父元素），这个容器包含了你想要处理事件的所有子元素。这个容器通常具有更高的层次结构，可以是一个 div、ul、table 或任何包含子元素的元素。

3. 事件监听器：在容器元素上附加一个事件监听器，用于捕获事件。这可以是点击事件、鼠标移动事件、键盘事件等，具体取决于你的需求。

4. 事件处理：当事件在容器内的任何子元素上触发时，事件冒泡会将事件传播到容器元素。然后，容器元素的事件监听器捕获事件，并通过事件对象（通常是event）来确定触发事件的子元素。

5. 条件判断：基于事件对象中的信息，你可以确定哪个子元素触发了事件，然后执行相应的操作。这通常涉及到检查事件目标（event.target）或其他属性以确定需要执行的逻辑。

优点 ​

• 性能优化：事件代理可以减少事件监听器的数量，从而降低内存占用和提高性能，特别是当你需要处理大量相似元素时。

• 动态元素：如果页面上的元素是动态生成的，事件代理可以确保新元素也受到事件处理。

• 简化代码：减少事件监听器的数量，简化了代码维护，使代码更加模块化和可读。

• 减少内存占用：减少监听器数量还有助于减少内存占用，特别是在长时间运行的单页面应用中。

示例 ​

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

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

const myList = document.getElementById('myList');

myList.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('You clicked on ' + event.target.innerText);
  }
});

const myList = document.getElementById('myList');

myList.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('You clicked on ' + event.target.innerText);
  }
});

在这个示例中，我们只需在<ul>元素上添加一个点击事件监听器，即可处理所有<li>元素的点击事件，而不必为每个<li>元素添加监听器。

事件代理是前端开发中的常见技术之一，可以改善性能并简化代码，特别是在需要处理大量元素的情况下。

JavaScript 中 "this" 的工作原理 ​

在 JavaScript 中，"this" 是一个特殊关键字，它用于引用当前执行上下文中的对象。理解 "this" 的工作原理对于编写复杂的 JavaScript 代码至关重要，因为它可以影响函数的行为，特别是在对象和事件处理程序中。以下是 "this" 的工作原理的关键概念：

1. 全局上下文 ​

在全局上下文中，"this" 指向全局对象，通常是浏览器环境中的 "window" 对象。在 Node.js 环境中，它指向 "global" 对象。

console.log(this === window); // 在浏览器环境中返回 true

console.log(this === window); // 在浏览器环境中返回 true

2. 函数上下文 ​

在函数内部，"this" 的值取决于如何调用该函数。有以下几种常见情况：

• 普通函数调用：在普通函数中，"this" 默认指向全局对象（在浏览器中通常是 "window"）。

function sayHello() {
  console.log(this); // 指向全局对象
}

sayHello();

function sayHello() {
  console.log(this); // 指向全局对象
}

sayHello();

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

const person = {
  name: 'John',
  greet: function() {
    console.log(this.name); // 指向包含该方法的对象
  }
};

person.greet(); // 输出 'John'

const person = {
  name: 'John',
  greet: function() {
    console.log(this.name); // 指向包含该方法的对象
  }
};

person.greet(); // 输出 'John'

• 构造函数调用：当函数用 "new" 关键字创建对象的实例时，"this" 指向新创建的对象。

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

const john = new Person('John');
console.log(john.name); // 输出 'John'

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

const john = new Person('John');
console.log(john.name); // 输出 'John'

• 函数的 "call" 和 "apply" 方法：可以使用 "call" 或 "apply" 方法来显式设置函数内部 "this" 的值。

function sayHi() {
  console.log(this.message);
}

const context = { message: 'Hello' };
sayHi.call(context); // 输出 'Hello'

function sayHi() {
  console.log(this.message);
}

const context = { message: 'Hello' };
sayHi.call(context); // 输出 'Hello'

3. 箭头函数 ​

箭头函数中的 "this" 不会改变，它会捕获当前作用域的 "this" 值，通常是定义箭头函数时的外部函数的 "this" 值。

const obj = {
  name: 'Alice',
  sayName: () => {
    console.log(this.name); // 这里的 "this" 指向全局对象
  }
};

obj.sayName();

const obj = {
  name: 'Alice',
  sayName: () => {
    console.log(this.name); // 这里的 "this" 指向全局对象
  }
};

obj.sayName();

理解 "this" 的工作原理对于正确编写 JavaScript 代码非常重要，因为它可以影响函数的行为和数据的访问。在不同的上下文中，"this" 的含义可能不同，因此开发人员需要谨慎使用，以确保代码的正确性。

原型继承 (Prototypal Inheritance) ​

原型继承是 JavaScript 中一种重要的面向对象编程概念，它允许对象通过继承其他对象的属性和方法来创建层次结构。这种继承方式依赖于对象的原型链，让一个对象能够访问另一个对象的属性和方法，从而实现代码的重用和抽象。

原理 ​

1. 原型对象 (Prototype Object)：每个 JavaScript 对象都有一个指向其原型对象的链接。原型对象是一个普通对象，它包含了共享的属性和方法。通过这个链接，对象可以访问其原型对象的属性和方法。

2. 构造函数 (Constructor Function)：构造函数是用来创建对象的函数，它可以定义对象的属性和方法。构造函数也有一个属性，称为 prototype，它指向一个原型对象。当你通过构造函数创建对象时，新对象的原型链将指向构造函数的 prototype 对象。

3. 原型链 (Prototype Chain)：对象通过原型链继承属性和方法。如果一个对象尝试访问一个属性或方法，但它自身没有定义，JavaScript 将会沿着原型链向上查找，直到找到一个包含该属性或方法的对象。

代码示例 ​

// 创建一个构造函数
function Person(name) {
  this.name = name;
}

// 通过构造函数的原型属性添加方法
Person.prototype.greet = function() {
  console.log('Hello, my name is ' + this.name);
};

// 创建对象实例
const person1 = new Person('Alice');
const person2 = new Person('Bob');

// 通过原型继承调用方法
person1.greet(); // 输出 'Hello, my name is Alice'
person2.greet(); // 输出 'Hello, my name is Bob'

// 查看对象的原型链
console.log(Object.getPrototypeOf(person1) === Person.prototype); // true
console.log(Object.getPrototypeOf(Person.prototype) === Object.prototype); // true
console.log(Object.getPrototypeOf(Object.prototype) === null); // true

// 创建一个构造函数
function Person(name) {
  this.name = name;
}

// 通过构造函数的原型属性添加方法
Person.prototype.greet = function() {
  console.log('Hello, my name is ' + this.name);
};

// 创建对象实例
const person1 = new Person('Alice');
const person2 = new Person('Bob');

// 通过原型继承调用方法
person1.greet(); // 输出 'Hello, my name is Alice'
person2.greet(); // 输出 'Hello, my name is Bob'

// 查看对象的原型链
console.log(Object.getPrototypeOf(person1) === Person.prototype); // true
console.log(Object.getPrototypeOf(Person.prototype) === Object.prototype); // true
console.log(Object.getPrototypeOf(Object.prototype) === null); // true

在这个示例中，我们定义了一个 Person 构造函数，并通过构造函数的原型属性 prototype 添加了一个 greet 方法。当我们使用构造函数创建对象实例时，这些实例会继承 greet 方法。同时，我们还展示了对象的原型链，它连接了 person1、Person.prototype 和 Object.prototype。

原型继承是 JavaScript 中实现对象复用和继承的核心机制，它允许开发人员创建可维护和扩展的代码，实现了面向对象编程的基本概念。

请解释原型继承（prototypal inheritance）的工作原理 ​

这是一个非常常见的 JavaScript 问题。所有 JS 对象都有一个__proto__属性，指向它的原型对象。当试图访问一个对象的属性时，如果没有在该对象上找到，它还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。这种行为是在模拟经典的继承，但是与其说是继承，不如说是委托（delegation）。

原型继承是 JavaScript 中一种实现对象之间继承关系的机制。要理解原型继承的工作原理，首先需要明白几个基本概念：

1. 原型对象（Prototype）：JavaScript 中的每一个对象都可以通过一个内部链接指向另一个对象，这个被指向的对象就是原型对象。原型对象本身也是一个普通的对象，它包含了可以被其他对象继承的属性和方法。

2. __proto__属性：这是对象的一个内部属性，指向它的原型对象。注意，__proto__是一个非标准但被广泛支持的方式来访问一个对象的原型。在现代 JavaScript 开发中，推荐使用Object.getPrototypeOf()方法来获取对象的原型。

原型继承的工作原理可以分为以下几个步骤：

1. 属性查找：当你试图访问一个对象的属性或方法时，JavaScript 首先会在当前对象上查找这个属性或方法。如果在当前对象上没有找到，JavaScript 会沿着原型链向上查找。

2. 原型链（Prototype Chain）：如果当前对象的原型（proto__所指向的对象）也没有找到该属性或方法，JavaScript 会继续查找这个原型的原型，依此类推，形成一个“原型链”。这个查找过程会一直进行，直到找到匹配的属性或方法，或者达到原型链的末端（即原型链上的某个原型的__proto__属性为 null，通常是 Object.prototype 的__proto）。

3. 委托机制（Delegation）：原型继承实际上是一种委托机制。如果一个对象自身没有某个属性或方法，它会委托给它的原型，让原型去处理。这种机制允许对象共享原型上的属性和方法，而不是在每个对象上都复制一份。

这种继承机制与传统的基于类的继承机制不同，它更加灵活。在基于类的继承中，属性和方法的继承是在创建对象时通过复制类定义来实现的。而在原型继承中，继承是在运行时通过原型链查找来实现的，这种方式也被称为“行为委托”。

总结来说，原型继承利用了原型链的机制，通过对象间的原型链接实现属性和方法的继承，这种继承更加动态，允许运行时修改原型链，从而改变对象间的继承关系。

委托（Delegation）是一种常见的设计模式，它允许对象外部的某些操作被另一个对象内部处理。在 JavaScript 的原型继承中，委托是指一个对象在自身上找不到某个属性或方法时，会自动去其原型对象上查找，如果原型对象上也找不到，继续向上查找，直至原型链的末端。这个过程体现了委托的概念——即对象将操作委托给其原型链上的其他对象。

委托的工作原理 ​

• 查找机制：当访问对象的某个属性或方法时，首先在当前对象上进行查找。
• 委托行为：如果当前对象上没有找到，就会查找对象的原型（即__proto__属性指向的对象），这一步骤实际上是一种委托行为，当前对象将查找任务委托给了它的原型。
• 原型链：如果对象的原型上仍未找到，继续沿着原型链向上查找，直到找到为止或查找到原型链的末端（Object.prototype的原型是null）。

委托的优势 ​

1. 减少资源消耗：通过委托机制，多个对象可以共享原型上的属性和方法，而不需要在每个对象上都创建这些属性和方法，这样可以节省内存资源。

2. 提高代码复用性：将公共的方法定义在原型对象上，可以被多个实例共享，提高了代码的复用性。

3. 动态性：由于委托基于原型链的动态查找，可以在运行时动态地改变对象的原型，从而改变对象的行为和能力。

委托的示例 ​

假设有一个构造函数Person和它的一个实例person1，Person的原型上定义了一个方法sayHello。

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

Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('Alice');
person1.sayHello(); // 输出: Hello, my name is Alice

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

Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('Alice');
person1.sayHello(); // 输出: Hello, my name is Alice

在这个示例中，当调用person1.sayHello()时，首先在person1对象上查找sayHello方法。由于person1上没有定义这个方法，查找过程就会委托给person1的原型，也就是Person.prototype。在Person.prototype上找到了sayHello方法，然后执行它。

这个过程展示了委托的典型应用：实例对象利用原型链向其原型对象委托属性和方法的查找和执行。这种机制使得原型上的属性和方法可以被不同的实例共享，同时也保持了各实例之间的独立性。

模块规范 ​

1. CommonJS (CJS) ​

特点:

• 同步加载: 主要为服务器设计，因为在服务器上读取文件是非常快的。
• 简洁的语法: 使用 require 加载依赖，module.exports 导出模块内容。

优势:

• 适合服务器端（如 Node.js）。
• 大量的 NPM 库使用它。

劣势:

• 同步的加载方式不适合浏览器环境，因为这会阻塞浏览器，导致加载时间增加。
• 不易进行静态分析。

// 定义 math.js
const add = (a, b) => a + b;
module.exports = add;

// 使用
const add = require('./math.js');
console.log(add(2, 3));  // 输出：5

// 定义 math.js
const add = (a, b) => a + b;
module.exports = add;

// 使用
const add = require('./math.js');
console.log(add(2, 3));  // 输出：5

2. Asynchronous Module Definition (AMD) ​

特点:

• 异步加载: 专为浏览器设计。
• 使用 define 方法: 用于定义模块和其依赖。

优势:

• 非阻塞加载，适合大型应用和网络延迟环境。
• 可以并行加载多个模块。

劣势:

• 语法相对复杂。
• 需要额外的库（如 RequireJS）来实现。

// 定义 math.js
define([], function() {
  return {
    add: function(a, b) {
      return a + b;
    }
  };
});

// 使用
require(['math'], function(math) {
  console.log(math.add(2, 3));  // 输出：5
});

// 定义 math.js
define([], function() {
  return {
    add: function(a, b) {
      return a + b;
    }
  };
});

// 使用
require(['math'], function(math) {
  console.log(math.add(2, 3));  // 输出：5
});

3. Universal Module Definition (UMD) ​

UMD 是一种尝试合并 CommonJS、AMD 和全局变量声明为一个通用解决方案的设计模式。它允许你的 JavaScript 模块在各种环境中运行，包括浏览器、Node.js 和其他类似的环境。

UMD 的核心思想是首先尝试提供模块给 CommonJS（例如 Node.js 环境）；如果 CommonJS 不可用，它会尝试 AMD（例如浏览器中的 RequireJS）；如果都不可用，它会将模块暴露为一个全局变量。

特点:

• 兼容性: 尝试提供一个兼容 CommonJS 和 AMD 的模式。

优势:

• 可以在多种环境中使用，无论是服务器还是浏览器。
• 对开发者友好，不需要关心目标环境。

劣势:

• 代码可能会比单一的 CJS 或 AMD 更加冗长和复杂。

这个 UMD 模块的解释：

1.使用立即调用的函数表达式 (IIFE) 来创建一个封闭的作用域，防止模块内部的变量或函数污染全局命名空间。
2.这个 IIFE 接受两个参数：root 和 factory。root 是当前环境的全局对象， factory 是模块的工厂函数。
3.通过检测 define 函数的存在及其 amd 属性来确定是否处于 AMD 环境。
4.如果不是 AMD 环境，再通过检测 exports 的类型来确定是否处于 CommonJS 或类似 CommonJS 的环境。
5.如果都不是上述的环境，就将模块的导出值附加到全局对象上。

// 定义 math.js
(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define([], factory);
  } else if (typeof exports === 'object') {
    // Node, CommonJS
    module.exports = factory();
  } else {
    // Browser global
    root.returnExports = factory();
  }
}(this, function() {
  return {
    add: function(a, b) {
      return a + b;
    }
  };
}));

// 在 CommonJS 环境中使用
const add = require('./path-to-umd-module');
console.log(add(2, 3));  // 输出：5

// 在 AMD (RequireJS) 环境中使用
require(['path-to-umd-module'], function(add) {
    console.log(add(2, 3));  // 输出：5
});

// 在浏览器环境中使用
<script src="path-to-umd-module.js"></script>
<script>
  console.log(add(2, 3));  // 输出：5
</script>

// 定义 math.js
(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define([], factory);
  } else if (typeof exports === 'object') {
    // Node, CommonJS
    module.exports = factory();
  } else {
    // Browser global
    root.returnExports = factory();
  }
}(this, function() {
  return {
    add: function(a, b) {
      return a + b;
    }
  };
}));

// 在 CommonJS 环境中使用
const add = require('./path-to-umd-module');
console.log(add(2, 3));  // 输出：5

// 在 AMD (RequireJS) 环境中使用
require(['path-to-umd-module'], function(add) {
    console.log(add(2, 3));  // 输出：5
});

// 在浏览器环境中使用
<script src="path-to-umd-module.js"></script>
<script>
  console.log(add(2, 3));  // 输出：5
</script>

4. ECMAScript Modules (ESM) ​

特点:

• 官方标准: 是 ES6（ES2015）的一部分。
• 支持静态导入/导出: 使用 import 和 export 关键字。

优势:

• 语法简洁且易于理解。
• 支持静态分析，这使得诸如 Tree Shaking（摇树优化）这样的技术成为可能，可以在构建时去除未使用的代码。
• 有望成为前端和后端通用的模块系统。

劣势:

• 虽然现代浏览器都支持 ESM，但旧版本浏览器不支持。
• 动态导入较为复杂。

// 定义 math.js
export const add = (a, b) => a + b;

// 使用
import { add } from './math.js';
console.log(add(2, 3));  // 输出：5

// 定义 math.js
export const add = (a, b) => a + b;

// 使用
import { add } from './math.js';
console.log(add(2, 3));  // 输出：5

5. System.register ​

特点:

• SystemJS 模块格式: 提供一个针对未来的模块加载系统，可用于加载 ESM、AMD 和 CJS。

优势:

• 高度灵活，兼容多种模块格式。
• 适合在浏览器中异步加载模块。

劣势:

• 需要额外的库（SystemJS）。
• 与原生 ESM 相比，可能增加了一些复杂性。

// 定义
System.register([], function(exports, module) {
  return {
    setters: [],
    execute: function() {
      function add(a, b) {
        return a + b;
      }
      exports('add', add);
    }
  };
});

// 使用
System.import('math').then(function(math) {
  console.log(math.add(2, 3));  // 输出：5
});

// 定义
System.register([], function(exports, module) {
  return {
    setters: [],
    execute: function() {
      function add(a, b) {
        return a + b;
      }
      exports('add', add);
    }
  };
});

// 使用
System.import('math').then(function(math) {
  console.log(math.add(2, 3));  // 输出：5
});

总结:

• 对于浏览器中的现代开发，ESM 逐渐成为主流选择，因为它是语言的官方标准，且大多数现代工具（如 Webpack, Rollup 等）都提供了对其的支持。
• 对于 Node.js，虽然它的模块系统最初是基于 CommonJS 的，但最新版本也开始支持 ESM。
• 对于需要兼容多种模块系统或旧版本浏览器的场景，UMD 和 System.register 仍然很有价值。

为什么这段代码不是 IIFE ​

下面这段代码 function foo() { }(); 不是一个 IIFE（立即调用的函数表达式），原因是它在函数声明后没有立即调用，而是在函数声明之后使用了函数调用运算符 ()。JavaScript 引擎在解释这段代码时会引发语法错误。

要将这段代码转变为 IIFE，需要将函数声明转换为函数表达式。通常，这可以通过以下两种方式实现：

1. 使用括号包裹函数 ​

(function foo() { })();

(function foo() { })();

这里我们将函数声明包裹在括号中，将其变为一个函数表达式，然后立即调用它。

2. 移除函数名称 ​

(function() { })();

(function() { })();

如果不需要函数名称，可以直接移除函数名称，并将函数声明转换为匿名函数表达式。

这两种方式都可以将代码转变为 IIFE，允许在函数声明后立即调用函数。 IIFE 在许多情况下都非常有用，因为它们创建了一个独立的作用域，可以用于封装变量，避免全局命名冲突，以及执行一些初始化操作。

变量的区别和检测 ​

在 JavaScript 中，null，undefined 和 "undeclared"（未声明） 是不同的概念，它们具有不同的含义和用途。下面是它们的区别以及如何检测它们的方法：

1. null ​

• 含义：null 表示一个已经存在但没有值的对象。它是一个特殊的值，通常用于表示空值或占位符。

• 检测：要检测一个变量是否为 null，可以使用严格相等运算符（===）。

let myVar = null;
if (myVar === null) {
  console.log('myVar is null');
}

let myVar = null;
if (myVar === null) {
  console.log('myVar is null');
}

2. undefined ​

• 含义：undefined 表示一个变量已声明但尚未赋值。它也是一个特殊的值，用于表示缺失值或未初始化的变量。

• 检测：要检测一个变量是否为 undefined，同样可以使用严格相等运算符（===）。

let myVar;
if (myVar === undefined) {
  console.log('myVar is undefined');
}

let myVar;
if (myVar === undefined) {
  console.log('myVar is undefined');
}

3. "undeclared"（未声明） ​

• 含义："undeclared" 意味着变量根本没有被声明或定义在当前作用域中。尝试访问未声明的变量会导致 ReferenceError。

• 检测：要检测一个变量是否为 "undeclared"，可以尝试访问该变量并使用 try...catch 块来捕获潜在的 ReferenceError。

try {
  if (undeclaredVar === undefined) {
    console.log('undeclaredVar is undefined');
  }
} catch (error) {
  console.log('undeclaredVar is undeclared');
}

try {
  if (undeclaredVar === undefined) {
    console.log('undeclaredVar is undefined');
  }
} catch (error) {
  console.log('undeclaredVar is undeclared');
}

请注意，检测 "undeclared" 变量通常不是常见的操作，因为在编写代码时应该明确定义变量，以避免潜在的错误。在严格模式下，尝试访问 "undeclared" 变量会导致全局对象（如 window 或 global）上的属性，这可能会导致意外行为。

总结来说，null 用于表示空值，undefined 用于表示未赋值的变量，而 "undeclared" 表示变量根本没有被声明。检测它们的方法通常是使用 === 运算符来比较值，或者使用 try...catch 来捕获异常。

闭包 (Closure) ​

什么是闭包？ ​

闭包是一个重要的 JavaScript 概念，它指的是一个函数与其包含的词法作用域形成的组合。具体而言，当一个函数在其外部函数中定义，并且引用了外部函数的变量，这个函数就成为闭包。闭包允许函数捕获并维持其所在作用域的状态，即使外部函数已经执行完毕。

如何使用闭包？ ​

要创建闭包，你需要在一个函数内部定义另一个函数，并且内部函数引用了外部函数的变量。这个内部函数可以被返回，或者作为参数传递给其他函数。闭包通常用于以下场景：

1. 封装变量：闭包可以用于封装变量，使其不受外部访问，提供了一种封装的方式。

2. 保存状态：闭包允许函数保持对其定义时作用域的状态的引用，即使外部函数已经执行完毕。

3. 模块化：使用闭包可以模拟私有变量，从而创建模块化的代码结构。

为什么要使用闭包？ ​

使用闭包有以下几个重要的原因：

1. 数据封装：闭包允许将变量封装在函数内，以防止外部代码意外修改它们，从而提高数据的安全性。

2. 保持状态：通过闭包，函数可以保持其上下文状态，即使函数已经执行完毕。这对于事件处理、计时器和回调等情况非常有用。

3. 模块化：闭包可以模拟模块化的编程风格，允许你创建独立的、有状态的代码块，这有助于代码的可维护性和复用性。

下面是一个示例，演示如何创建闭包以封装变量：

function createCounter() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  return increment;
}

const counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2

function createCounter() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  return increment;
}

const counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2

在这个示例中，createCounter 函数返回了内部的 increment 函数，该函数保持对外部作用域中的 count 变量的引用，形成了一个闭包。这使我们能够创建一个计数器，保持状态并在每次调用时递增。

匿名函数的典型用例 ​

匿名函数在 JavaScript 中有多种用途，其中一些典型用例包括：

1. 立即执行的函数表达式 (IIFE)：匿名函数经常用于创建 IIFE，它们可以用于创建私有作用域、模块化代码和初始化代码块。

   javascript

   (function() {
     // 这里的代码在立即执行时创建的闭包中执行
     var privateVar = '私有变量';
   })();

   (function() {
     // 这里的代码在立即执行时创建的闭包中执行
     var privateVar = '私有变量';
   })();

   1
   2
   3
   4
   

2. 回调函数：匿名函数可以用作回调函数，作为参数传递给其他函数，以处理异步操作的结果或事件处理。

   javascript

   setTimeout(function() {
     console.log('定时器完成');
   }, 1000);

   setTimeout(function() {
     console.log('定时器完成');
   }, 1000);

   1
   2
   3
   

3. 事件处理程序：匿名函数经常用于将事件处理程序附加到 DOM 元素。

   javascript

   document.getElementById('myButton').addEventListener('click', function() {
     alert('按钮被点击了');
   });

   document.getElementById('myButton').addEventListener('click', function() {
     alert('按钮被点击了');
   });

   1
   2
   3
   

4. 迭代和循环：匿名函数可用于迭代方法（例如 forEach）的回调函数，以对数组中的元素执行操作。

   javascript

   var numbers = [1, 2, 3];
   numbers.forEach(function(number) {
     console.log(number);
   });

   var numbers = [1, 2, 3];
   numbers.forEach(function(number) {
     console.log(number);
   });

   1
   2
   3
   4
   

代码组织 - 模块模式 vs. 经典继承 ​

代码组织方式取决于项目需求和个人偏好。通常，以下两种方式用于不同目的：

1. 模块模式：模块模式通常用于组织代码，以创建模块化的结构，封装变量和功能，从而提高代码的可维护性和可重用性。它常用于前端开发，可以使用对象字面量、构造函数和闭包来创建模块。

   javascript

   var myModule = (function() {
     var privateVar = '私有变量';
   
     function privateFunction() {
       // 私有函数
     }
   
     return {
       publicFunction: function() {
         // 公共函数
       }
     };
   })();

   var myModule = (function() {
     var privateVar = '私有变量';
   
     function privateFunction() {
       // 私有函数
     }
   
     return {
       publicFunction: function() {
         // 公共函数
       }
     };
   })();

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   

2. 经典继承：经典继承通常用于创建对象之间的继承关系，例如通过构造函数和原型链来实现对象的继承。这通常在 JavaScript 中用于构建对象的层次结构，如构造函数继承、原型继承和组合继承。

   javascript

   function Animal(name) {
     this.name = name;
   }
   
   function Dog(name, breed) {
     Animal.call(this, name);
     this.breed = breed;
   }
   
   Dog.prototype = Object.create(Animal.prototype);
   Dog.prototype.constructor = Dog;

   function Animal(name) {
     this.name = name;
   }
   
   function Dog(name, breed) {
     Animal.call(this, name);
     this.breed = breed;
   }
   
   Dog.prototype = Object.create(Animal.prototype);
   Dog.prototype.constructor = Dog;

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   

JavaScript 宿主对象和原生对象的区别 ​

JavaScript 中的对象可以分为两类：宿主对象（Host Objects）和原生对象（Native Objects）。

1. 宿主对象：宿主对象是由宿主环境提供的对象，通常是浏览器或 Node.js 运行时环境提供的对象。这些对象用于操作 DOM、执行网络请求、处理定时器等。宿主对象的行为和特性取决于宿主环境，因此在不同环境中它们可能有所不同。

   javascript

   // 在浏览器环境中，document 是宿主对象
   var body = document.body;

   // 在浏览器环境中，document 是宿主对象
   var body = document.body;

   1
   2
   

2. 原生对象：原生对象是 JavaScript 语言本身提供的对象，例如 Array、String、Object、Function 等。这些对象是 JavaScript 核心的一部分，其行为在所有 JavaScript 环境中都是一致的。

   javascript

   var numbers = [1, 2, 3]; // 数组是原生对象
   var message = 'Hello, world!'; // 字符串是原生对象

   var numbers = [1, 2, 3]; // 数组是原生对象
   var message = 'Hello, world!'; // 字符串是原生对象

   1
   2
   

区别在于宿主对象是由运行时环境提供的，具体行为可能因环境而异，而原生对象是 JavaScript 语言的一部分，行为在所有环境中都一致。

JavaScript 中的函数和 .call、.apply、.bind ​

区分 function Person() {}、var person = Person() 和 var person = new Person() ​

1. function Person() {}：这是一个函数声明，用于定义一个构造函数 Person。它只是定义了构造函数，并没有创建对象实例。

2. var person = Person()：这是调用了构造函数 Person，但没有使用 new 关键字。这会导致 Person 函数的执行，但不会创建新的对象实例，person 将接收 Person 函数的返回值（如果有的话）。

3. var person = new Person()：这是使用 new 关键字创建了 Person 的新对象实例。它会调用 Person 构造函数，并将新创建的对象分配给 person 变量。

.call 和 .apply 的区别 ​

.call 和 .apply 都是 JavaScript 中函数对象的方法，用于调用函数，并允许你指定函数的执行上下文（this 的值）和参数。它们的主要区别在于参数的传递方式：

• .call(context, arg1, arg2, ...)：.call 方法接受一个函数的执行上下文作为第一个参数，后续参数是要传递给函数的参数。参数通过逗号分隔。

• .apply(context, [arg1, arg2, ...])：.apply 方法也接受一个函数的执行上下文作为第一个参数，但参数是以数组的形式传递的。

例如：

function greet(message) {
  console.log(message + ' ' + this.name);
}

var person = { name: 'Alice' };

greet.call(person, 'Hello'); // 输出 'Hello Alice'
greet.apply(person, ['Hi']); // 输出 'Hi Alice'

function greet(message) {
  console.log(message + ' ' + this.name);
}

var person = { name: 'Alice' };

greet.call(person, 'Hello'); // 输出 'Hello Alice'
greet.apply(person, ['Hi']); // 输出 'Hi Alice'

Function.prototype.bind ​

Function.prototype.bind 是 JavaScript 中的内置方法，用于创建一个新的函数，该函数在调用时具有特定的执行上下文（this 的值），并且某些参数被预置。它的语法如下：

var newFunction = oldFunction.bind(thisArg, arg1, arg2, ...);

var newFunction = oldFunction.bind(thisArg, arg1, arg2, ...);

• thisArg 是在新函数中的执行上下文。
• arg1, arg2, ... 是要预置的参数。

bind 方法不会立即调用函数，而是返回一个新的函数，当调用新函数时，它会在指定的上下文中执行，并将预置的参数传递给原函数。

function greet(message) {
  console.log(message + ' ' + this.name);
}

var person = { name: 'Bob' };
var greetPerson = greet.bind(person, 'Hi');
greetPerson(); // 输出 'Hi Bob'

function greet(message) {
  console.log(message + ' ' + this.name);
}

var person = { name: 'Bob' };
var greetPerson = greet.bind(person, 'Hi');
greetPerson(); // 输出 'Hi Bob'

bind 通常用于创建具有确定执行上下文的函数，例如事件处理程序或回调函数。这有助于确保函数在执行时具有正确的上下文，而不会受到外部因素的影响。

使用 document.write() ​

document.write() 是 JavaScript 中的一个函数，通常用于将文本或 HTML 写入到文档中。然而，它在现代 web 开发中的使用非常有限，通常在以下情况下可能会使用它：

1. 早期的网页生成：在过去，开发人员可能会使用 document.write() 来在 HTML 中生成动态内容。这是因为在早期的 web 开发中，JavaScript 是一种主要用于生成和操纵页面内容的工具。

   javascript

   document.write('<h1>Hello, World!</h1>');

   document.write('<h1>Hello, World!</h1>');

   1
   

2. 简单的调试和测试：在某些情况下，开发人员可能会在控制台中使用 document.write() 来进行简单的调试和测试，以输出信息并查看结果。

   javascript

   document.write('Debug info: ' + someVariable);

   document.write('Debug info: ' + someVariable);

   1
   

请注意，document.write() 有一些限制和潜在问题。在现代 web 开发中，通常更推荐使用 DOM 操作、innerHTML 属性或其他技术来操作页面内容，以避免潜在的问题，如覆盖整个文档。

浏览器特性检测、特性推断和浏览器 UA 字符串嗅探的区别 ​

这三种技术都用于检测浏览器的能力，但它们有不同的实现方式和目的：

1. 浏览器特性检测（Feature Detection）：这是一种现代的、推荐的方式，用于检测浏览器是否支持特定的功能、API 或属性。开发人员通过检测实际的特性来决定采取什么行动，而不是依赖于浏览器的名称或版本号。

   javascript

   if (typeof window.localStorage !== 'undefined') {
     // 浏览器支持本地存储
   }

   if (typeof window.localStorage !== 'undefined') {
     // 浏览器支持本地存储
   }

   1
   2
   3
   

2. 特性推断（Feature Inference）：这种方法基于一个已知的特性来推断其他特性是否也存在。通常，它不如特性检测准确，容易出现错误。

   javascript

   if (window.localStorage) {
     // 推断浏览器支持本地存储
   }

   if (window.localStorage) {
     // 推断浏览器支持本地存储
   }

   1
   2
   3
   

3. 浏览器 UA 字符串嗅探（User Agent String Sniffing）：这是一种不推荐使用的方法，它涉及检查浏览器的用户代理字符串来确定浏览器的名称和版本。这种方法容易受到 UA 字符串的篡改，不稳定且不准确。

   javascript

   if (navigator.userAgent.indexOf('MSIE') !== -1) {
     // 判断浏览器是否是 Internet Explorer
   }

   if (navigator.userAgent.indexOf('MSIE') !== -1) {
     // 判断浏览器是否是 Internet Explorer
   }

   1
   2
   3
   

通常，浏览器特性检测是首选的方法，因为它更可靠，能够准确检测浏览器的功能，而不依赖于浏览器的名称或版本。这有助于确保代码在多种浏览器和平台上正确运行。

Ajax 的工作原理 ​

Ajax（Asynchronous JavaScript and XML）是一种用于在不重新加载整个网页的情况下从服务器异步请求数据的技术。以下是 Ajax 的工作原理：

1. 用户触发事件：通常是用户在网页上执行某种操作，如单击按钮或输入文本。

2. 创建 XMLHttpRequest 对象：在 JavaScript 中，通过创建 XMLHttpRequest 对象（或使用 Fetch API）来发起 HTTP 请求。这个对象允许你发送请求并接收响应。

   javascript

   var xhr = new XMLHttpRequest();

   var xhr = new XMLHttpRequest();

   1
   

3. 配置请求：设置请求的方法（GET、POST、等）、URL 和其他参数（如请求头和数据）。

   javascript

   xhr.open('GET', 'https://example.com/api/data', true);

   xhr.open('GET', 'https://example.com/api/data', true);

   1
   

4. 发送请求：使用 send 方法发送请求到服务器。

   javascript

   xhr.send();

   xhr.send();

   1
   

5. 服务器处理请求：服务器接收请求，处理它，并生成响应。

6. 服务器发送响应：服务器将响应数据发送回客户端，通常以 JSON、XML 或文本等格式。

7. 客户端接收响应：客户端通过事件监听器（如 onload）来检测响应是否已经到达。

   javascript

   xhr.onload = function() {
     if (xhr.status === 200) {
       // 响应已经到达，可以处理数据
       var response = xhr.responseText;
     }
   };

   xhr.onload = function() {
     if (xhr.status === 200) {
       // 响应已经到达，可以处理数据
       var response = xhr.responseText;
     }
   };

   1
   2
   3
   4
   5
   6
   

8. 处理响应：客户端接收到响应后，可以解析响应数据并在网页上更新内容，而无需重新加载整个页面。

Ajax 允许网页与服务器进行异步通信，以获取数据或执行操作，而不会中断用户的浏览体验。这使得网页可以实现动态加载数据、实时更新和交互性。常见的 Ajax 库和框架，如 jQuery 和 Axios，简化了 Ajax 请求的处理。

优势 ​

1. 异步通信：Ajax 允许在不刷新整个页面的情况下与服务器进行异步通信，提高了用户体验。

2. 减少带宽消耗：Ajax 只传输数据，而不传输整个页面，因此可以减少带宽消耗，特别适用于移动设备和慢速连接。

3. 实时性：Ajax 支持实时性操作，如聊天应用和在线游戏，可以快速传递数据。

4. 更好的用户界面：通过使用 Ajax，可以创建更动态、交互性的用户界面，提供更好的用户体验。

5. 局部更新：可以使用 Ajax 更新页面的一部分，而不必刷新整个页面，这在单页面应用（SPA）中特别有用。

不足 ​

1. 安全性：Ajax 请求可以受到跨站脚本攻击（XSS）和跨站请求伪造攻击（CSRF）等安全威胁。

2. 浏览器限制：某些浏览器实施了“同源策略”，限制了从不同源的服务器获取数据的能力，需要使用跨域解决方案。

3. SEO：由于 Ajax 页面通常在客户端渲染，搜索引擎可能无法正确索引内容，对搜索引擎优化有挑战。

4. 复杂性：处理 Ajax 请求的代码可能变得复杂，需要谨慎处理错误和状态管理。

5. 兼容性：不同浏览器对于 Ajax 和相关 API 的支持程度不同，可能需要额外的工作来处理兼容性问题。

JSONP 的工作原理和不是真正的 Ajax ​

JSONP 的工作原理 ​

JSONP（JSON with Padding）是一种跨域数据请求技术，它允许在浏览器中从不同域的服务器获取数据。它的工作原理如下：

1. 客户端创建一个 <script> 标签，其中包含要请求的 URL，该 URL 返回 JSON 数据。

2. 这个 URL 中通常包括一个回调函数的名称，如 callback=processData。

3. 服务器接收到请求后，将数据包装在回调函数中，并返回给客户端。响应的内容实际上是 JavaScript 代码，如 processData({ data: ... })。

4. 客户端定义一个与服务器指定的回调函数名称相同的函数，以处理响应数据。

5. 当脚本加载并执行时，它会调用客户端定义的回调函数，将数据传递给该函数。

为什么 JSONP 不是真正的 Ajax ​

JSONP 的工作原理虽然允许从不同域的服务器获取数据，但它实际上不使用 XMLHttpRequest 或 Fetch API，因此不符合传统的 Ajax 定义。主要区别包括：

1. JSONP 使用 <script> 标签来发出请求，而不是 XMLHttpRequest 或 Fetch。

2. JSONP 利用回调函数和动态脚本加载来处理响应，而不是使用 XMLHttpRequest 的状态和事件处理程序。

3. JSONP 只能用于获取 JSON 数据，且需要服务器支持 JSONP 回调。

尽管 JSONP 具有一些限制，但它是早期跨域数据请求的一种解决方案，它通常在不支持 CORS 的环境中使用。然而，现代 web 开发更倾向于使用 CORS、代理服务器或其他安全的跨域解决方案，以替代 JSONP。

JavaScript 模板系统 ​

使用 JavaScript 模板系统 ​

JavaScript 模板系统是一种用于生成动态 HTML 内容的工具，它通常用于将数据与 HTML 模板结合，以生成最终的用户界面。我可以提供一些常见的 JavaScript 模板库和框架，尽管我无法直接使用它们。以下是一些常见的 JavaScript 模板库和框架：

1. Mustache：Mustache 是一个简单且轻量级的模板系统，支持多种编程语言。

2. Handlebars：Handlebars 是基于 Mustache 的模板系统，提供了更多功能，如条件、循环和局部模板。

3. EJS (Embedded JavaScript)：EJS 是一种嵌入式 JavaScript 模板引擎，它允许在模板中直接嵌入 JavaScript 代码。

4. Vue.js：Vue.js 是一款流行的 JavaScript 框架，它具有强大的模板系统，支持声明式渲染和组件化开发。

5. React：React 是另一个流行的 JavaScript 框架，它使用 JSX 语法来创建组件，其中包括模板内容。

变量声明提升 (Hoisting) ​

变量声明提升（Hoisting）是 JavaScript 中的一个概念，它指的是在代码执行阶段，变量和函数声明会被提升到它们所在作用域的顶部。这意味着在声明之前可以引用变量，但变量的赋值操作会保留在原始位置。

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

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

在这个示例中，变量 x 被提升到作用域的顶部，因此 console.log(x) 不会引发错误，但它输出 undefined，因为赋值操作在后面的位置。

函数声明也会被提升：

sayHello(); // 输出 "Hello"
function sayHello() {
  console.log("Hello");
}

sayHello(); // 输出 "Hello"
function sayHello() {
  console.log("Hello");
}

在这个示例中，sayHello 函数声明被提升，因此可以在声明之前调用它。

需要注意的是，只有声明本身会被提升，赋值操作不会提升。因此，函数表达式和变量声明的差异在于函数表达式不会被提升：

sayHi(); // 引发错误：sayHi is not a function
var sayHi = function() {
  console.log("Hi");
};

sayHi(); // 引发错误：sayHi is not a function
var sayHi = function() {
  console.log("Hi");
};

在这个示例中，sayHi 变量被提升，但由于它是一个函数表达式，赋值操作保留在原始位置，因此调用 sayHi 时会引发错误。

事件冒泡机制 (Event Bubbling) ​

事件冒泡是指在 DOM 结构中，当一个元素上触发了特定事件（如点击事件），事件将从最具体的元素（最内部的元素）开始，然后逐级向上传播到最不具体的元素（最外部的元素）。这使得可以在一个元素上捕获事件，并在它的祖先元素上处理它。

例如，假设有一个嵌套的 HTML 结构：

<div id="outer">
  <div id="middle">
    <button id="inner">Click me</button>
  </div>
</div>

<div id="outer">
  <div id="middle">
    <button id="inner">Click me</button>
  </div>
</div>

如果点击了按钮元素（id 为 "inner"），事件将首先触发在按钮上，然后向上冒泡到中间元素，最后冒泡到外部元素。这意味着可以在每个级别上捕获和处理事件。

document.getElementById("outer").addEventListener("click", function() {
  console.log("Outer div clicked");
});

document.getElementById("middle").addEventListener("click", function() {
  console.log("Middle div clicked");
});

document.getElementById("inner").addEventListener("click", function() {
  console.log("Button clicked");
});

document.getElementById("outer").addEventListener("click", function() {
  console.log("Outer div clicked");
});

document.getElementById("middle").addEventListener("click", function() {
  console.log("Middle div clicked");
});

document.getElementById("inner").addEventListener("click", function() {
  console.log("Button clicked");
});

在这个示例中，如果点击按钮，将会触发 "Button clicked"、"Middle div clicked" 和 "Outer div clicked" 的日志，因为事件冒泡导致它们在各个元素上依次执行。

"attribute" 和 "property" 的区别 ​

在 JavaScript 中，有两个术语：“attribute” 和 “property”，它们通常用于描述 HTML 元素的特性和属性。

• Attribute（特性）：Attributes 是 HTML 元素在文档中的初始特性，它们通常在 HTML 标记中定义。Attributes 包括元素的 id、class、href、src 等。它们可以通过 JavaScript 中的 getAttribute 方法来访问。

  javascript

  var element0 = document.getElementById("myElement");
  var idAttribute = element0.getAttribute("id");

  var element0 = document.getElementById("myElement");
  var idAttribute = element0.getAttribute("id");

  1
  2
  

• Property（属性）：Properties 是 JavaScript 对象的属性，它们代表 HTML 元素的当前状态。Properties 包括元素的 innerHTML、value、className 等。它们可以直接通过 JavaScript 访问。

  javascript

  var element1 = document.getElementById("myElement");
  var innerHTMLProperty = element1.innerHTML;

  var element1 = document.getElementById("myElement");
  var innerHTMLProperty = element1.innerHTML;

  1
  2
  

区别在于 Attributes 是元素的初始特性，而 Properties 是 JavaScript 对象的属性。在某些情况下，它们的值是一致的，但在其他情况下，它们可能会有差异。例如，如果通过 JavaScript 修改了元素的属性，Properties 将反映这些更改，而 Attributes 保持不变。

var element2 = document.getElementById("myElement");
element.setAttribute("id", "newId"); // 修改 Attribute
console.log(element2.id); // 输出 "newId"，因为 Propserty 被更新

var element2 = document.getElementById("myElement");
element.setAttribute("id", "newId"); // 修改 Attribute
console.log(element2.id); // 输出 "newId"，因为 Propserty 被更新

需要注意的是，并非所有 HTML 特性都有对应的属性，而且不同浏览器的处理方式也有所不同。因此，在编写 JavaScript 时，通常需要注意 Attributes 和 Properties 之间的区别。

扩展 JavaScript 内置对象的问题 ​

扩展 JavaScript 内置对象（如 Array、String、Object 等）通常被认为是不好的做法，因为它可能引发以下问题：

1. 不可预测性：扩展内置对象可能导致命名冲突，因为你的扩展方法可能与未来 JavaScript 版本或其他库中的方法重名，从而导致意外行为。

2. 可维护性：代码扩展内置对象会增加代码的复杂性，降低可维护性，因为其他开发人员可能不清楚你的扩展，这会导致团队合作问题。

3. 兼容性：不同的 JavaScript 引擎和环境可能对内置对象扩展的支持有所不同，可能导致跨浏览器兼容性问题。

4. 安全性：扩展内置对象可能引入安全漏洞，因为你可以改变内置对象的原型，这可能导致恶意代码注入和执行。

代替扩展内置对象，推荐的做法是创建自定义的工具函数或类，以避免这些潜在问题，并将功能封装在自己的命名空间中。

document load 和 document DOMContentLoaded 事件的区别 ​

document load 和 document DOMContentLoaded 是两个用于监听页面加载事件的事件。

• document load 事件：这是 window 对象上的事件，当整个页面及其所有依赖项（如图像和样式表）都加载完成后触发。这意味着在此事件触发时，整个文档已经完全加载，包括所有资源。

• document DOMContentLoaded 事件：这是 document 对象上的事件，当文档的 HTML 结构已经解析完成，但外部资源如图像和样式表可能尚未加载完成时触发。这是在页面加载的早期阶段，允许执行与 DOM 结构有关的操作。

主要区别在于触发时机和性能。DOMContentLoaded 事件在页面加载早期触发，允许在页面结构准备好之后执行脚本，而不必等待所有资源的加载。这有助于提高性能和响应性，特别是对于大型网页。

document.addEventListener("DOMContentLoaded", function() {
  // 在 DOMContentLoaded 事件触发时执行的代码
});

window.addEventListener("load", function() {
  // 在页面完全加载后执行的代码
});

document.addEventListener("DOMContentLoaded", function() {
  // 在 DOMContentLoaded 事件触发时执行的代码
});

window.addEventListener("load", function() {
  // 在页面完全加载后执行的代码
});

通常，如果你需要在页面加载时执行一些初始化操作，DOMContentLoaded 事件是一个更好的选择，因为它会更早触发，而不需要等待所有资源的加载。如果你需要确保所有资源都已加载，可以使用 load 事件。选择事件取决于你的需求。

== 和 === 的区别 ​

== 和 === 是 JavaScript 中的两种比较运算符，用于比较两个值的相等性。它们之间的主要区别如下：

• ==（等于）：它执行类型转换（类型强制转换），如果比较的两个值的类型不同，会尝试将它们转换为相同的类型，然后再进行比较。

• ===（严格等于）：它不执行类型转换，只有在比较的两个值的类型和值都相同时才会返回 true，否则返回 false。

以下是一个比较的示例：

1 == "1";   // true，因为 "1" 被转换为数字 1
1 === "1";  // false，因为类型不同，不执行类型转换

1 == "1";   // true，因为 "1" 被转换为数字 1
1 === "1";  // false，因为类型不同，不执行类型转换

总结区别：

• == 允许类型转换，可能会导致一些不直观的结果。
• === 不允许类型转换，要求类型和值都相等才返回 true。

通常建议使用 === 进行比较，因为它更严格，避免了类型转换带来的潜在问题。使用 == 时，需要非常小心，确保你理解类型转换的规则，以避免出现意外的行为。

JavaScript 的同源策略 (Same-Origin Policy) ​

同源策略（Same-Origin Policy）是一项浏览器安全策略，用于限制在浏览器中运行的 JavaScript 对不同源（origin）的资源的访问。一个“源”通常由协议、主机和端口组成。同源策略的目的是保护用户的隐私和安全，防止恶意网站访问其他网站的数据。

同源策略的规则 ​

同源策略有以下主要规则：

1. 协议必须匹配：JavaScript 只能访问与包含它的网页相同协议的资源。例如，如果网页使用 HTTPS 协议加载，那么它只能访问其他使用 HTTPS 协议的资源。

2. 主机必须匹配：JavaScript 只能访问与包含它的网页相同主机的资源。例如，如果网页加载自 example.com，那么它只能访问 example.com 上的资源。

3. 端口必须匹配：JavaScript 只能访问与包含它的网页相同端口的资源。默认端口（HTTP: 80、HTTPS: 443）通常被隐式指定。

4. Cookies：Cookies 也受同源策略限制，它们只能被同一源的页面读取。这有助于保护用户的隐私。

5. XMLHttpRequest 和 Fetch：AJAX 请求（使用 XMLHttpRequest 或 Fetch API）受同源策略的限制，只能向同一源的地址发送请求。跨域请求需要使用 CORS（跨源资源共享）等机制来允许跨源请求。

如何处理同源策略 ​

为了处理同源策略的限制，开发人员可以采用以下方法：

1. JSONP：使用 JSONP（JSON with Padding）技术来获取跨域数据。JSONP 利用 <script> 标签不受同源策略限制的特性，允许从不同源获取数据。

2. CORS：使用 CORS（跨源资源共享）来启用跨源请求。服务器可以配置响应头来允许指定的源进行跨域访问。

3. 代理服务器：使用代理服务器将请求从客户端转发到目标服务器。代理服务器位于与目标服务器同源的位置，允许客户端绕过同源策略的限制。

4. 跨文档消息通信（PostMessage）：允许在不同窗口或 iframe 之间安全地通信，绕过同源策略的限制。

同源策略是浏览器安全的基本构建块之一，它有助于保护用户的隐私和安全。然而，在跨域数据交换方面，它也需要开发人员采取额外的步骤来允许必要的数据交流。

自定义 JavaScript 数组方法 ​

要实现给定的功能，你可以通过扩展 JavaScript 数组的原型（不推荐）或创建一个独立的函数来实现自定义的 duplicator 方法。以下是两种方法的示例：

方法一：扩展数组原型 ​

// 不推荐的方法：扩展数组原型
Array.prototype.duplicator = function() {
  return this.concat(this);
};

const originalArray = [1, 2, 3, 4, 5];
const duplicatedArray = originalArray.duplicator();
console.log(duplicatedArray); // [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

// 不推荐的方法：扩展数组原型
Array.prototype.duplicator = function() {
  return this.concat(this);
};

const originalArray = [1, 2, 3, 4, 5];
const duplicatedArray = originalArray.duplicator();
console.log(duplicatedArray); // [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

这种方法通过扩展 Array 原型，使所有数组实例都可用 duplicator 方法。尽管它可以达到你的目标，但扩展内置对象的原型通常被认为是不好的做法，因为它可能引发命名冲突和其他问题。

方法二：创建独立函数 ​

// 推荐的方法：创建独立函数
function duplicator(arr) {
  return arr.concat(arr);
}

const originalArray = [1, 2, 3, 4, 5];
const duplicatedArray = duplicator(originalArray);
console.log(duplicatedArray); // [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

// 推荐的方法：创建独立函数
function duplicator(arr) {
  return arr.concat(arr);
}

const originalArray = [1, 2, 3, 4, 5];
const duplicatedArray = duplicator(originalArray);
console.log(duplicatedArray); // [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

这种方法通过创建一个独立的函数 duplicator，接受一个数组作为参数，并返回该数组的副本。这是更安全和推荐的方式，因为它不会影响所有数组实例，而只在需要时使用该函数。

通常，最好避免扩展内置对象的原型，以减少潜在的问题。相反，创建独立函数可以更好地控制功能的作用范围。

什么是三元表达式 (Ternary expression) ​

三元表达式是一种条件表达式，通常由三部分组成，用于根据条件的真假来返回不同的值。它通常采用以下语法：

condition ? expression1 : expression2

condition ? expression1 : expression2

其中，condition 是一个布尔表达式，如果为真，将返回 expression1 的值，否则返回 expression2 的值。

什么是 "use strict"; ? 使用它的好处和坏处分别是什么？ ​

"use strict"; 是 JavaScript 中的严格模式声明。它的作用是让 JavaScript 引擎执行更严格的代码检查，从而减少一些不安全或不规范的代码写法。好处包括：

• 更严格的错误检查：它会捕获一些在普通模式下不会引发错误的问题，有助于提前发现和修复潜在的 bug。
• 提高性能：某些优化只在严格模式下启用，可以提高代码的执行效率。
• 消除一些不安全的行为：严格模式中禁止使用全局变量，避免了一些潜在的命名冲突。

坏处包括：

• 不兼容性：某些旧的浏览器不支持严格模式，因此可能需要额外处理兼容性问题。
• 代码更加严格：可能需要修改一些已有的代码以满足严格模式的要求。

实现FizzBuzz ​

以下是一个遍历至 100 的 JavaScript for 循环，根据条件输出 "fizz"、"buzz" 或 "fizzbuzz"。

for (let i = 1; i <= 100; i++) {
    if (i % 3 === 0 && i % 5 === 0) {
        console.log("fizzbuzz");
    } else if (i % 3 === 0) {
        console.log("fizz");
    } else if (i % 5 === 0) {
        console.log("buzz");
    } else {
        console.log(i);
    }
}

for (let i = 1; i <= 100; i++) {
    if (i % 3 === 0 && i % 5 === 0) {
        console.log("fizzbuzz");
    } else if (i % 3 === 0) {
        console.log("fizz");
    } else if (i % 5 === 0) {
        console.log("buzz");
    } else {
        console.log(i);
    }
}

为何通常会认为保留网站现有的全局作用域不去改变它，是较好的选择？ ​

保留网站现有的全局作用域是一个良好的选择，因为：

1. 避免冲突：修改全局作用域可能导致不可预测的命名冲突，特别是在多个 JavaScript 库或模块共存的情况下。保持全局作用域不变有助于避免这些冲突。

2. 维护性：修改全局作用域可能导致代码的复杂性和可维护性下降。维护人员需要了解哪些全局变量被修改，以及它们如何影响其他部分的代码。

3. 第三方库兼容性：如果你使用第三方 JavaScript 库，修改全局作用域可能导致与库的兼容性问题，因为库可能依赖于全局变量的存在和结构。

4. 风险：全局作用域的修改可能引入 bug，因为全局变量在整个应用程序中都可见，任何不慎的更改都可能对应用程序的行为产生不可预测的影响。

通常，更好的做法是使用模块化的方法，将代码封装在模块或命名空间中，以减少全局作用域的污染和冲突。

为何你会使用 load 之类的事件？此事件有缺点吗？你是否知道其他替代品，以及为何使用它们？ ​

load 事件和类似的事件（如 DOMContentLoaded）通常用于处理页面的加载和准备完成事件。它们的优点包括：

• 保证安全加载：load 事件确保页面的所有资源（如图片、样式表、脚本等）都已加载完毕，可以安全地操作 DOM 元素。

• 可靠性：这些事件提供了可靠的方式来确保代码在页面完全加载后执行，从而避免在不完全加载时引起的问题。

• 好用性：它们易于使用，无需复杂的轮询或手动检测页面状态。

然而，这些事件也有一些缺点，包括：

• 延迟加载问题：使用 load 事件可能会导致页面加载速度变慢，因为脚本和资源的加载会阻塞页面的渲染。这可能对用户体验造成不利影响。

• 不适合异步加载：如果你的页面使用异步加载技术（如 AJAX 或动态加载脚本），load 事件可能无法捕捉到这些后续加载的内容。

• 代码冗余：有时候需要在多个地方使用相同的加载事件处理程序，这可能导致代码冗余和维护困难。

替代方案包括：

• 使用 DOMContentLoaded 事件：这个事件在 DOM 树构建完成后触发，但在所有资源（如图片）加载完毕前触发。它适用于需要在 DOM 准备好后执行的情况。

• 使用 defer 属性：将脚本标记为 defer，可以使脚本在页面加载完毕后执行，但不会阻塞渲染。这有助于提高页面加载性能。

• 使用现代框架和工具：许多现代前端框架和工具提供了更灵活的加载和初始化方式，可以根据需要异步加载和执行代码。

解释什么是单页应用 (single page app)，以及如何使其对搜索引擎友好 (SEO-friendly) ​

单页应用（Single Page Application，SPA是一种Web应用程序的设计方式，其中页面内容通常在加载初始页面后不再完全刷新。相反，SPA使用JavaScript来动态地加载和更新页面内容，通常通过AJAX请求从服务器获取数据，然后使用前端路由来切换视图。这导致更快的页面切换和更流畅的用户体验。

使SPA对搜索引擎友好（SEO-friendly）是一个挑战，因为搜索引擎通常依赖于页面的HTML内容来理解网页。以下是一些方法，使SPA对搜索引擎友好：

1. 服务器端渲染（SSR）：使用服务器端渲染技术，可以在服务器端生成包含内容的HTML，并将其提供给搜索引擎。这可以通过工具如Next.js（React）、Nuxt.js（Vue）等实现。

2. 预渲染：对于某些页面，可以使用预渲染技术，将页面渲染为静态HTML文件，并在每次内容更改时重新生成。这些静态文件可以由搜索引擎爬虫索引。

3. 合适的路由配置：确保SPA的路由配置使用良好，使搜索引擎可以理解应用的结构。使用可访问的URL和合理的路由层次结构。

4. 页面标题和元描述标签：设置每个页面的标题和元描述标签，这有助于搜索引擎了解页面内容。

5. Sitemap和Robots.txt：创建Sitemap文件，以指导搜索引擎爬虫索引您的SPA，并使用Robots.txt文件控制哪些页面应该被爬取。

6. Canonical标签：使用<link rel="canonical">标签来指定主要的页面URL，以防止重复内容问题。

7. HTML5推送状态：使用HTML5的推送状态（pushState）来更改URL，以使搜索引擎爬虫能够正确索引不同视图。

8. 优化加载性能：确保SPA的加载性能良好，以便搜索引擎可以快速访问和渲染内容。

SPA可以通过结合上述策略来实现对搜索引擎的友好性，使其不仅提供出色的用户体验，同时也能被搜索引擎索引和排名。

你使用过 Promises 及其 polyfills 吗? 请写出 Promise 的基本用法（ES6） ​

我了解 Promises 和它们的基本用法。Promises 是用于处理异步操作的 JavaScript 对象。以下是 Promise 的基本用法（ES6）：

// 创建一个 Promise
const myPromise = new Promise((resolve, reject) => {
  // 异步操作，例如数据获取
  setTimeout(() => {
    const data = 'Promise resolved data';
    resolve(data); // 成功时调用 resolve
    // 如果有错误，可以调用 reject
  }, 1000);
});

// 处理 Promise 结果
myPromise
  .then((result) => {
    console.log(result); // 打印 "Promise resolved data"
  })
  .catch((error) => {
    console.error(error); // 处理错误
  });

// 创建一个 Promise
const myPromise = new Promise((resolve, reject) => {
  // 异步操作，例如数据获取
  setTimeout(() => {
    const data = 'Promise resolved data';
    resolve(data); // 成功时调用 resolve
    // 如果有错误，可以调用 reject
  }, 1000);
});

// 处理 Promise 结果
myPromise
  .then((result) => {
    console.log(result); // 打印 "Promise resolved data"
  })
  .catch((error) => {
    console.error(error); // 处理错误
  });

使用 Promises 而非回调 (callbacks) 优缺点是什么？ ​

使用 Promises 相对于回调函数有以下优点和缺点：

优点：

• 可读性和可维护性更强：Promises 提供了更清晰和结构化的代码，使代码更易于理解和维护。

• 解决回调地狱问题：避免了回调地狱（Callback Hell），即多层嵌套回调导致代码难以管理的问题。

• 错误处理更容易：使用 .catch 处理错误更加直观，而不是传递错误回调。

• 支持串行和并行执行：Promises 允许轻松实现串行和并行执行，提高了代码的可组合性。

缺点：

• 需要学习：对于初学者来说，Promises 可能需要一些时间来理解和掌握。

• 不支持某些老旧环境：在某些老旧的浏览器或环境中，可能不原生支持 Promises，需要使用 polyfills 或其他解决方案。

使用一种可以编译成 JavaScript 的语言来写 JavaScript 代码有哪些优缺点？ ​

使用可以编译成 JavaScript 的语言（如 TypeScript、Babel 编译的 JSX）有以下优点和缺点：

优点：

• 类型安全：TypeScript 等语言引入了类型系统，可以帮助检测潜在的类型错误，提高代码质量和可维护性。

• 更强大的工具支持：这些语言通常具有丰富的开发工具支持，如代码补全、静态分析等，提高开发效率。

• 可读性和可维护性：类型注解和更明确的语法可以提高代码的可读性，并减少错误。

• 编译优化：编译器可以进行优化，生成更紧凑、更高效的 JavaScript 代码。

缺点：

• 学习曲线：使用这些语言需要学习新的语法和概念，可能需要一些时间适应。

• 编译步骤：编译成 JavaScript 的过程需要额外的构建步骤，增加了开发工作量。

• 性能开销：生成的 JavaScript 代码可能比手动编写的代码更复杂，从而导致一些性能开销。

• 依赖于生态系统：这些语言的生态系统可能不如原生 JavaScript 生态系统丰富，可能需要寻找第三方库来弥补缺失。

你使用哪些工具和技术来调试 JavaScript 代码？ ​

调试 JavaScript 代码通常使用以下工具和技术：

• 浏览器开发者工具：现代浏览器都提供强大的开发者工具，包括调试器、控制台、网络监视器等，用于调试前端代码。

• Node.js 调试器：对于后端 JavaScript（Node.js）代码，可以使用 Node.js 的调试器，例如通过命令行选项 --inspect 启用远程调试。

• VS Code：许多开发者使用 Visual Studio Code 编辑器，它集成了强大的调试功能，支持前端和后端 JavaScript。

• Linters 和静态分析工具：工具如 ESLint 和 JSHint 可以帮助检测潜在问题，提前发现错误。

• 日志和断点：通过在代码中插入 console.log 语句或调试器断点，可以输出变量的值或在特定位置停止执行，以进行调试。

• 测试框架：测试框架如 Jest 具有内置的调试功能，可用于调试单元测试。

• 第三方调试工具：一些第三方工具，如 Chrome DevTools Extensions，提供了额外的功能，如性能分析和代码覆盖率分析。

• 错误报告服务：使用错误报告服务如 Sentry 或 Rollbar 来监控生产环境中的错误并提供调试信息。

你会使用怎样的语言结构来遍历对象属性（object properties）和数组内容？ ​

遍历对象属性（Object Properties） ​

for...in 循环 ​

const myObject = { a: 1, b: 2, c: 3 };

for (const key in myObject) {
  if (myObject.hasOwnProperty(key)) {
    const value = myObject[key];
    console.log(key, value);
  }
}

const myObject = { a: 1, b: 2, c: 3 };

for (const key in myObject) {
  if (myObject.hasOwnProperty(key)) {
    const value = myObject[key];
    console.log(key, value);
  }
}

Object.keys() 方法 ​

const myObject = { a: 1, b: 2, c: 3 };
const keys = Object.keys(myObject);

for (const key of keys) {
  const value = myObject[key];
  console.log(key, value);
}

const myObject = { a: 1, b: 2, c: 3 };
const keys = Object.keys(myObject);

for (const key of keys) {
  const value = myObject[key];
  console.log(key, value);
}

遍历数组内容 ​

for 循环 ​

const myArray = [1, 2, 3];

for (let i = 0; i < myArray.length; i++) {
  const element = myArray[i];
  console.log(element);
}

const myArray = [1, 2, 3];

for (let i = 0; i < myArray.length; i++) {
  const element = myArray[i];
  console.log(element);
}

for...of 循环 ​

for (const element of myArray) {
  console.log(element);
}

for (const element of myArray) {
  console.log(element);
}

forEach() 方法 ​

myArray.forEach((element) => {
  console.log(element);
});

myArray.forEach((element) => {
  console.log(element);
});

这些语言结构可用于遍历对象属性和数组内容，具体选择取决于使用场景和个人偏好。

可变 (Mutable) 和不变 (Immutable) 对象的区别 ​

可变对象指的是其内容可以在创建后被修改，而不变对象则在创建后不能被更改。以下是它们的区别：

• 可变对象：允许在创建后修改其内部状态，包括添加、删除、更新属性或元素。通常由引用传递，因此多个变量可能引用相同的对象，导致副作用。

• 不变对象：在创建后不能被更改，任何操作都会返回新的对象，而不是修改原对象。它们通常通过值传递，不会导致副作用。

JavaScript 中一个不变性对象 (Immutable Object) 的例子 ​

JavaScript 中的字符串是不变对象的例子。一旦创建字符串，它的内容不可变。

const str = "Hello, World!";
const newStr = str.replace("Hello", "Hi"); // 创建了新的字符串，原字符串不变
console.log(str); // 输出 "Hello, World!"
console.log(newStr); // 输出 "Hi, World!"

const str = "Hello, World!";
const newStr = str.replace("Hello", "Hi"); // 创建了新的字符串，原字符串不变
console.log(str); // 输出 "Hello, World!"
console.log(newStr); // 输出 "Hi, World!"

不变性 (Immutability) 的优缺点 ​

优点：

• 可预测性：不变性有助于减少意外的副作用，使程序更可预测。

• 线程安全：不变对象可以被多个线程安全地访问，因为它们不会被同时修改。

• 性能优化：由于不变对象可以被缓存，因此在某些情况下可以提高性能。

缺点：

• 内存开销：不变性通常涉及创建新对象，可能导致内存开销。

• 复杂性：在某些情况下，实现不变性可能增加代码复杂性。

如何用你自己的代码来实现不变性 (Immutability) ​

在 JavaScript 中，你可以实现不变性通过创建新对象而不是修改现有对象。例如，你可以使用以下方式来创建不可变对象：

const originalObject = { a: 1, b: 2 };
const newObject = { ...originalObject, c: 3 }; // 创建新对象，不修改原对象
console.log(originalObject); // 输出 { a: 1, b: 2 }
console.log(newObject); // 输出 { a: 1, b: 2, c: 3 }

const originalObject = { a: 1, b: 2 };
const newObject = { ...originalObject, c: 3 }; // 创建新对象，不修改原对象
console.log(originalObject); // 输出 { a: 1, b: 2 }
console.log(newObject); // 输出 { a: 1, b: 2, c: 3 }

这种方式创建了一个新的对象 newObject，原对象 originalObject 保持不变。

同步 (Synchronous) 和异步 (Asynchronous) 函数的区别 ​

同步函数是按照程序顺序执行的函数，它会阻塞程序的执行，直到它的操作完成。在同步函数执行期间，程序通常不能执行其他任务。

异步函数是在后台执行的函数，不会阻塞程序的执行。它可以启动一个任务，然后继续执行后续代码而不等待任务完成。当任务完成时，通常会触发一个回调函数来处理结果。

什么是事件循环 (Event Loop) ​

事件循环是一种用于处理异步操作的执行模型。在 JavaScript 环境中，事件循环负责处理事件和回调函数，确保它们在适当的时间执行。

事件循环的基本概念是，它在主线程上执行同步任务，然后检查任务队列中是否有待执行的异步任务。如果有，它将执行队列中的任务，并不断重复这个过程，以便异步任务得以执行。

调用栈 (Call Stack) 和任务队列 (Task Queue) 的区别 ​

• 调用栈是一种数据结构，用于存储函数调用和执行上下文。它遵循后进先出（LIFO）原则，即最后被调用的函数最先执行完毕。调用栈用于同步任务的执行。

• 任务队列是一种数据结构，用于存储待执行的异步任务，通常包括事件处理程序、定时器回调等。任务队列遵循先进先出（FIFO）原则，即最早进入队列的任务最先执行。任务队列用于异步任务的执行。

事件循环负责在调用栈为空时，将任务队列中的任务推入调用栈执行，从而实现异步任务的处理。

function foo() {} 与 var foo = function() {} 用法的区别 ​

function foo() {} 和 var foo = function() {} 表示不同的函数定义方式：

• function foo() {} 是函数声明，它会被提升到当前作用域的顶部，因此可以在声明之前调用。

• var foo = function() {} 是函数表达式，它是在代码执行到该语句时赋值的，因此只能在赋值后调用。

这两种方式之间的主要区别在于函数声明会被提升，而函数表达式不会。以下是示例：

// 函数声明，可以在声明前调用
foo(); // 合法

function foo() {
  console.log("Hello, world!");
}

// 函数表达式，只能在赋值后调用
bar(); // 报错

var bar = function() {
  console.log("Hi, there!");
};

// 函数声明，可以在声明前调用
foo(); // 合法

function foo() {
  console.log("Hello, world!");
}

// 函数表达式，只能在赋值后调用
bar(); // 报错

var bar = function() {
  console.log("Hi, there!");
};

因此，函数声明更适用于需要在函数之前调用的情况，而函数表达式更适用于需要将函数分配给变量或作为参数传递的情况。

如何处理二进制的场景 ​

当然可以，下面为每项提供了 JavaScript 代码示例：

1. 文件上传和下载

   • 上传：

     javascript

     const input = document.querySelector('input[type="file"]');
     input.addEventListener('change', (e) => {
       const file = e.target.files[0];
       const reader = new FileReader();
       reader.readAsArrayBuffer(file);
       reader.onload = function() {
         // Do something with the buffer: reader.result
       };
     });

     const input = document.querySelector('input[type="file"]');
     input.addEventListener('change', (e) => {
       const file = e.target.files[0];
       const reader = new FileReader();
       reader.readAsArrayBuffer(file);
       reader.onload = function() {
         // Do something with the buffer: reader.result
       };
     });

     1
     2
     3
     4
     5
     6
     7
     8
     9
     

   • 下载：

     javascript

     fetch('https://example.com/somefile.zip')
       .then(response => response.blob())
       .then(blob => {
         const a = document.createElement('a');
         a.href = URL.createObjectURL(blob);
         a.download = 'somefile.zip';
         a.click();
       });

     fetch('https://example.com/somefile.zip')
       .then(response => response.blob())
       .then(blob => {
         const a = document.createElement('a');
         a.href = URL.createObjectURL(blob);
         a.download = 'somefile.zip';
         a.click();
       });

     1
     2
     3
     4
     5
     6
     7
     8
     

2. 图像操作

   javascript

   const canvas = document.getElementById('myCanvas');
   const ctx = canvas.getContext('2d');
   // ... draw something on the canvas ...
   canvas.toBlob((blob) => {
     const img = new Image();
     img.src = URL.createObjectURL(blob);
     document.body.appendChild(img);
   });

   const canvas = document.getElementById('myCanvas');
   const ctx = canvas.getContext('2d');
   // ... draw something on the canvas ...
   canvas.toBlob((blob) => {
     const img = new Image();
     img.src = URL.createObjectURL(blob);
     document.body.appendChild(img);
   });

   1
   2
   3
   4
   5
   6
   7
   8
   
   javascript

    // 选择图片后，本地预览图片
    async handleUpload(file: HTMLInputElement) {
      const reader = new FileReader()
      reader.readAsDataURL(file.file)
   
      reader.onload = (e) => {
        this.fileList = [{ name: file.file.name, src: e.target.result }]
      }
   
      reader.onerror = () => {
        console.error('加载错误')
      }
   }

    // 选择图片后，本地预览图片
    async handleUpload(file: HTMLInputElement) {
      const reader = new FileReader()
      reader.readAsDataURL(file.file)
   
      reader.onload = (e) => {
        this.fileList = [{ name: file.file.name, src: e.target.result }]
      }
   
      reader.onerror = () => {
        console.error('加载错误')
      }
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   

3. 音视频处理这是一个基本的音频捕获示例：

   javascript

   navigator.mediaDevices.getUserMedia({ audio: true })
     .then(stream => {
       const recorder = new MediaRecorder(stream);
       recorder.ondataavailable = (event) => {
         const audioBlob = event.data;
         // Do something with the audio blob
       };
       recorder.start();
       setTimeout(() => recorder.stop(), 5000);  // Record for 5 seconds
     });

   navigator.mediaDevices.getUserMedia({ audio: true })
     .then(stream => {
       const recorder = new MediaRecorder(stream);
       recorder.ondataavailable = (event) => {
         const audioBlob = event.data;
         // Do something with the audio blob
       };
       recorder.start();
       setTimeout(() => recorder.stop(), 5000);  // Record for 5 seconds
     });

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   

4. WebSocket 和 Fetch API 中的二进制数据传输

   • WebSocket:

     javascript

     const ws = new WebSocket('ws://example.com/socket');
     ws.binaryType = 'arraybuffer';
     ws.onmessage = (event) => {
       const buffer = event.data;
       // Process the buffer
     };

     const ws = new WebSocket('ws://example.com/socket');
     ws.binaryType = 'arraybuffer';
     ws.onmessage = (event) => {
       const buffer = event.data;
       // Process the buffer
     };

     1
     2
     3
     4
     5
     6
     

   • Fetch:

     javascript

     fetch('https://example.com/binarydata')
       .then(response => response.arrayBuffer())
       .then(buffer => {
         // Process the buffer
       });

     fetch('https://example.com/binarydata')
       .then(response => response.arrayBuffer())
       .then(buffer => {
         // Process the buffer
       });

     1
     2
     3
     4
     5
     

5. 处理压缩文件 (使用 JSZip 库)

   javascript

   fetch('https://example.com/archive.zip')
     .then(response => response.arrayBuffer())
     .then(buffer => {
       const zip = new JSZip();
       return zip.loadAsync(buffer);
     })
     .then(zipData => {
       // Process the decompressed files
     });

   fetch('https://example.com/archive.zip')
     .then(response => response.arrayBuffer())
     .then(buffer => {
       const zip = new JSZip();
       return zip.loadAsync(buffer);
     })
     .then(zipData => {
       // Process the decompressed files
     });

   1
   2
   3
   4
   5
   6
   7
   8
   9
   

6. 使用 WebAssembly加载和运行一个 WebAssembly 模块：

   javascript

   fetch('module.wasm')
     .then(response => response.arrayBuffer())
     .then(bytes => WebAssembly.instantiate(bytes))
     .then(result => {
       const exportedFunction = result.instance.exports.myFunction;
       exportedFunction();
     });

   fetch('module.wasm')
     .then(response => response.arrayBuffer())
     .then(bytes => WebAssembly.instantiate(bytes))
     .then(result => {
       const exportedFunction = result.instance.exports.myFunction;
       exportedFunction();
     });

   1
   2
   3
   4
   5
   6
   7
   

7. TypedArray 和 ArrayBuffer

   javascript

   const buffer = new ArrayBuffer(8);
   const view = new Uint32Array(buffer);
   view[0] = 123456789;
   console.log(view[0]);  // Outputs: 123456789

   const buffer = new ArrayBuffer(8);
   const view = new Uint32Array(buffer);
   view[0] = 123456789;
   console.log(view[0]);  // Outputs: 123456789

   1
   2
   3
   4
   

8. Crypto API计算文本的 SHA-256 哈希：

   javascript

   const text = 'Hello, World!';
   const encoder = new TextEncoder();
   const data = encoder.encode(text);
   crypto.subtle.digest('SHA-256', data)
     .then(hashBuffer => {
       const hashArray = Array.from(new Uint8Array(hashBuffer));
       const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
       console.log(hashHex);
     });

   const text = 'Hello, World!';
   const encoder = new TextEncoder();
   const data = encoder.encode(text);
   crypto.subtle.digest('SHA-256', data)
     .then(hashBuffer => {
       const hashArray = Array.from(new Uint8Array(hashBuffer));
       const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
       console.log(hashHex);
     });

   1
   2
   3
   4
   5
   6
   7
   8
   9