JavaScript面试题手册

什么是闭包？在计算机科学中，闭包（Closure）是指一个函数绑定了其外部作用域的变量，因此这个函数可以在其定义环境之外被调用时仍能访问到那些绑定的变量。简单来说，闭包让你可以从一个函数内部访问到其外部函数作用域的变量。闭包的特点是：函数嵌套：通常闭包包含一个函数内定义的另一个函数。环境捕获：内部函数会捕获定义它的外部函数的作用域中的变量。作用域链：内部函数可以访问外部函数的变量，即使外部函数已经执行完毕。在 JavaScript 中，闭包是一种非常常见和强大的特性，因为 JavaScript 是词法作用域的语言，函数的作用域在函数定义时就已经确定了。什么场景需要使用闭包？闭包通常用于以下几种场景：数据封装和私有化：使用闭包可以创建私有变量，这些变量只能被特定的函数访问和修改，从而模拟出类似私有属性的效果。这在模块模式中尤其常见。例子：一个简单的计数器函数，利用闭包可以隐藏计数器的值，只能通过特定的函数来操作。 function createCounter() { let count = 0; return { increment: function() { count += 1; }, decrement: function() { count -= 1; }, getCount: function() { return count; } }; } const counter = createCounter(); counter.increment(); console.log(counter.getCount()); // 输出 1回调函数：在异步编程中，闭包常用于回调函数中，以确保异步操作完成时能够访问到定义回调时的环境状态。例子：在一个异步请求中使用闭包记住请求开始时的状态。 function fetchData(url, callback) { // 假设这里发起了一个异步请求 setTimeout(() => { // 模拟异步操作 const data = 'fetched data'; // 假设这是响应数据 callback(data); }, 1000); } function requestData() { const requestTimestamp = Date.now(); fetchData('https://example.com/data', function(data) { console.log(`Request took ${Date.now() - requestTimestamp} ms`); console.log(`Data received: ${data}`); }); } requestData();函数工厂：闭包可以用来创建可以记住和操作环境状态的函数，这些函数根据不同的参数创建出来，具有不同的行为。例子：根据不同的倍数创建乘法函数。 function createMultiplier(multiplier) { return function(x) { return x * multiplier; }; } const double = createMultiplier(2); const triple = createMultiplier(3); console.log(double(5)); // 输出 10 console.log(triple(5)); // 输出 15节流和防抖：在 JavaScript 的 DOM 事件处理中，为了优化性能，防止过多的事件处理函数被频繁触发，会使用闭包来实现函数节流（throttle）和防抖（debounce）。例子：使用防抖确保事件处理函数在特定时间内只执行一次。

实现一个具有过期时间功能的localStorage存储函数，需要定义一个函数，它会将数据和过期时间一起存储在localStorage中。 下面是一个简单的实现示例：/** * 设置带过期时间的localStorage * @param {string} key - 存储的键名 * @param {*} value - 要存储的值，可以是任何可序列化的数据 * @param {number} ttl - 过期时间（毫秒） */function setLocalStorageWithExpiry(key, value, ttl) { const now = new Date(); // 创建一个包含数据和过期时间的对象 const item = { value: value, expiry: now.getTime() + ttl, }; // 将对象序列化之后存储到localStorage中 localStorage.setItem(key, JSON.stringify(item));}/** * 获取localStorage存储的值 * @param {string} key - 存储的键名 * @returns {*} 存储的值或者当值不存在或过期时返回null */function getLocalStorageWithExpiry(key) { const itemStr = localStorage.getItem(key); // 如果没有找到对应的存储项 if (!itemStr) { return null; } const item = JSON.parse(itemStr); const now = new Date(); // 检查过期时间 if (now.getTime() > item.expiry) { // 如果已过期，删除存储并返回null localStorage.removeItem(key); return null; } // 如果未过期，返回存储的值 return item.value;}// 示例使用// 存储一个名为 'myData' 的数据，过期时间为1小时（3600000毫秒）setLocalStorageWithExpiry('myData', { a: 1, b: 2 }, 3600000);// 获取存储的数据const myData = getLocalStorageWithExpiry('myData');console.log(myData); // 如果还未过期，则会打印出存储的对象 { a: 1, b: 2 }在这个封装的函数中，我们通过 setLocalStorageWithExpiry函数存储数据的时候，会额外添加一个过期时间戳到对象中，并将该对象序列化后保存在localStorage里。当通过 getLocalStorageWithExpiry函数获取数据的时候，我们会先检查当前时间是否已经超过了存储时设置的过期时间戳，如果已经过期，则从localStorage中删除该项，并返回 null；如果未过期，则返回保存的值。

当我们在JavaScript中使用new操作符创建一个新对象时，实际上会发生以下几个步骤：创建一个新对象。 使用new操作符时，JavaScript会自动为我们创建一个新的空对象。设置原型链。 新对象内部的[[Prototype]]（或者__proto__）属性会被赋值为构造函数的prototype属性，这样新对象就可以访问到构造函数原型上的属性和方法。绑定this并执行构造函数。 构造函数内部的this将会被绑定到新创建的对象上，然后执行构造函数中的代码，这样新对象就可以具有构造函数中定义的属性和方法。返回新对象。 如果构造函数返回的是一个对象，则返回该对象；如果没有返回对象或者返回的不是一个对象，那么将返回步骤1创建的新对象。如果我们要手写一个new的实现，可以定义一个函数来模拟这个过程。以下是一个例子：function myNew(constructor, ...args) { // 步骤1：创建一个空对象，并设置原型链 const obj = Object.create(constructor.prototype); // 步骤2：将构造函数的this绑定到新对象上，并执行构造函数 const result = constructor.apply(obj, args); // 步骤3：根据返回值判断 return result instanceof Object ? result : obj;}// 测试用例function Person(name, age) { this.name = name; this.age = age; this.sayHello = function() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); };}// 使用自定义的myNew来替代new操作符const person = myNew(Person, 'Alice', 30);person.sayHello(); // 输出: Hello, my name is Alice and I am 30 years old.以上代码中，myNew函数模拟了new操作符的所有关键步骤，能够模拟出通过new操作符创建对象的效果。

在JavaScript中实现高效的字符串前缀匹配通常可以通过以下几种方式：1. 原生字符串方法使用字符串的startsWith()方法，这是最简单直接的方法，性能也相当好。function isPrefix(str, prefix) { return str.startsWith(prefix);}// 使用示例console.log(isPrefix('javascript', 'java')); // 输出: trueconsole.log(isPrefix('javascript', 'script')); // 输出: false2. 正则表达式利用正则表达式的^锚点来匹配字符串的开头。function isPrefix(str, prefix) { let regex = new RegExp('^' + escapeRegExp(prefix)); return regex.test(str);}// 为了安全性，对特殊字符进行转义，防止注入攻击function escapeRegExp(string) { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');}// 使用示例console.log(isPrefix('javascript', 'java')); // 输出: trueconsole.log(isPrefix('javascript', 'script')); // 输出: false3. 字符串切片比较通过截取原字符串前N个字符，然后与前缀进行比较。function isPrefix(str, prefix) { return str.slice(0, prefix.length) === prefix;}// 使用示例console.log(isPrefix('javascript', 'java')); // 输出: trueconsole.log(isPrefix('javascript', 'script')); // 输出: false4. 循环比较逐个字符比较，这通常不是最高效的方法，但在某些特定情况下可能是必要的。function isPrefix(str, prefix) { if (str.length < prefix.length) return false; for (let i = 0; i < prefix.length; i++) { if (str[i] !== prefix[i]) { return false; } } return true;}// 使用示例console.log(isPrefix('javascript', 'java')); // 输出: trueconsole.log(isPrefix('javascript', 'script')); // 输出: false5. 使用内置方法 indexOf检查前缀是否在字符串的开头位置。function isPrefix(str, prefix) { return str.indexOf(prefix) === 0;}// 使用示例console.log(isPrefix('javascript', 'java')); // 输出: trueconsole.log(isPrefix('javascript', 'script')); // 输出: false每种方法都有其适用场景，一般而言，如果只需要简单的前缀匹配，推荐使用startsWith()方法，因为它简单且意图明确。如果需要对匹配进行更复杂的控制，可能会选择正则表达式。在处理大量数据或性能至关重要的情况下，可以进行基准测试以确定哪种方法最有效。

JavaScript 是一种动态类型语言，这意味着在声明变量时不需要指定数据类型，数据类型会在脚本执行时自动确定。JavaScript 的数据类型主要分为两大类：原始数据类型和对象类型。原始数据类型undefined：表示变量未定义，即声明了变量但未初始化。null：表示一个空值。boolean：布尔类型，有两个值：true 和 false。string：表示文本数据，例如 "Hello, World!"。number：可以是整数或浮点数，例如 42 或 3.14159。bigint：表示大于2^53 - 1的整数。symbol：表示唯一的、不可变的数据值。对象类型Object：JavaScript 中的对象是键值对的集合，几乎所有的 JavaScript 值都是对象类型的，包括数组、函数以及其他内置对象。类型检测的方法在 JavaScript 中，检测变量的类型常用的有几种方法：typeof 运算符：用来检测一个变量的类型，对于原始数据类型非常有效，但对于对象类型和 null，会有一些局限性。let num = 42;console.log(typeof num); // "number"let str = "Hello";console.log(typeof str); // "string"let flag = true;console.log(typeof flag); // "boolean"let bigIntNumber = 1234567890123456789012345678901234567890n;console.log(typeof bigIntNumber); // "bigint"let sym = Symbol('foo');console.log(typeof sym); // "symbol"let und;console.log(typeof und); // "undefined"let obj = { key: 'value' };console.log(typeof obj); // "object"let arr = [1, 2, 3];console.log(typeof arr); // "object", 尽管它是数组let func = function() {};console.log(typeof func); // "function", 函数是对象的一种特殊类型let nul = null;console.log(typeof nul); // "object", 这是一个历史上的错误instanceof 运算符：用来检测一个对象是否是另一个对象的实例。let arr = [1, 2, 3];console.log(arr instanceof Array); // trueconsole.log(arr instanceof Object); // truelet d = new Date();console.log(d instanceof Date); // true// 注意，instanceof 无法检测原始数据类型Array.isArray()：用来确定一个值是否是数组。let arr = [1, 2, 3];console.log(Array.isArray(arr)); // true对象的 constructor 属性：可以用来判断对象的构造函数。let arr = [1, 2, 3];console.log(arr.constructor === Array); // truelet obj = {};console.log(obj.constructor === Object); // trueObject.prototype.toString.call()：这是一个通用的类型检测方法，可以准确判断各种类型的值。let d = new Date();console.log(Object.prototype.toString.call(d)); // "[object Date]"let num = 42;console.log(Object.prototype.toString.call(num)); // "[object Number]"let str = "Hello";console.log(Object.prototype.toString.call(str)); // "[object String]"注意，当使用类型检测方法时，应当根据具体情况选择最适合的方法，因为每种方法都有其适用场景和限制。

什么是"use strict"？"use strict"; 是一个JavaScript中的指令，也称作严格模式（strict mode），它用于将整个脚本或单个函数置于一个更加严格的操作环境中。当在代码的开始处使用该指令时，它有助于捕获一些常见的编程错误，同时防止或抛出错误，以及在某些情况下提高编译器的优化水平。由于这些原因，它会改善代码的运行速度和效率。使用它有什么优点？提前捕获错误： 严格模式会在代码执行前就发现一些错误，这些在非严格模式下可能不会被检测到。例如，对不可写的属性赋值，或对只读属性（如undefined，NaN）赋值。避免意外的全局变量： 在严格模式下，如果不使用var、let或const来声明变量，将会抛出错误，这样可以避免全局变量的隐式声明，减少代码中的潜在错误。消除this的混乱： 在严格模式下，如果没有指定上下文对象，函数内的this值将是undefined，这比默认指向全局对象要安全。更安全的eval： 严格模式下，eval函数内部声明的变量不会影响到外部作用域，这使得eval的使用更加安全。提高编译器优化： 代码在执行之前可以进行更多的检查，这为JavaScript引擎的优化打下基础，可能会提高执行速度。使用它有什么缺点？兼容性问题： 在老旧的浏览器或JavaScript环境中，可能不支持严格模式，或者其行为与新版的解释器不一致。代码修改成本： 如果要在已有项目中引入严格模式，可能需要对现有代码进行较大范围的修改，以确保兼容性和正确性。学习曲线： 对于初学者来说，严格模式下的某些限制可能会增加学习难度，因为它们需要更好地理解JavaScript的工作原理。可能隐藏的问题： 在非严格模式写的代码中可能含有在严格模式中会失败的部分，如果不进行彻底的测试，这些隐藏的问题在切换到严格模式后可能会导致运行时错误。示例：以下是一个简单的例子，展示了在使用严格模式时变量必须声明，否则会抛出错误："use strict";function myFunction() { undeclaredVariable = 123; // 这里会抛出错误，因为变量没有声明}myFunction();如果没有"use strict"; 指令，上面的代码中的undeclaredVariable会被创建为一个全局变量，这可能是一个潜在的问题。使用严格模式，我们可以避免这种情况。

在实现一个JSON.stringify功能时，我们需要考虑几个关键点：正确处理不同类型的数据（如字符串、数字、对象、数组等），处理循环引用和其他边界情况，以及保证转换后的字符串格式正确。下面我们一步步来实现简化版的JSON.stringify。第一步：基础类型处理对于基础数据类型，处理相对简单：数字：直接转换为其字符串形式。字符串：需要加上引号，并处理特殊字符，如转义字符。布尔值：转换为"true"或"false"。null：直接返回"null"。第二步：数组和对象对于数组和对象，需要递归处理其内部元素：数组：遍历数组的每个元素，对每个元素应用stringify，然后将结果用逗号连接，最后加上[]。对象：遍历对象的每个可枚举属性，对键和值应用stringify，然后将结果用冒号和逗号连接，注意键名需要加引号，最后加上{}。第三步：特殊情况处理undefined、函数和symbol：在JSON中这些类型是不被允许的，通常应该返回undefined或者在数组中被转换为null。循环引用：需要维护一个已访问对象的记录，如果检测到循环引用，应抛出错误或者别的处理方式。示例实现这里是一个简化的示例实现，只包含基础的功能：function jsonStringify(obj) { const type = typeof obj; if (type !== 'object' || obj === null) { // 非对象或null直接返回文本 if (type === 'string') obj = '"' + obj + '"'; return String(obj); } else { const json = []; const isArray = Array.isArray(obj); for (const key in obj) { let value = obj[key]; const valueType = typeof value; if (valueType === 'string') { value = '"' + value + '"'; } else if (valueType === 'object' && value !== null) { value = jsonStringify(value); } json.push((isArray ? "" : '"' + key + '":') + String(value)); } return (isArray ? "[" : "{") + String(json) + (isArray ? "]" : "}"); }}测试示例console.log(jsonStringify({ x: 5, y: 6 })); // 输出：{"x":5,"y":6}console.log(jsonStringify([1, "false", false])); // 输出：[1,"false",false]console.log(jsonStringify({ x: [10, undefined, function(){}, Symbol('')] })); // 输出：{"x":[10,null,null,null]}这个实现非常基础，许多复杂情况如日期对象、正则对象、BigInt、循环引用等情况都没有处理。在实际开发中，需要根据具体需求添加更多的处理逻辑和优化。

JavaScript中有8种基本类型的值：Undefined：一个未给定值的变量的类型是undefined。例如: let x;Null：表示缺少或者空值的类型。例如：let x = null;Boolean：有两个boolean操作符：true 和 false。例如：let x = true;String：用于显示文本数据的类型。例如：let x = 'hello world';Number：用于表示整数和浮点数。例如：let x = 3.14;BigInt：一种用于存储和操作任意大小整数的类型。例如：let x = 9007199254740991n;Symbol：一种唯一并且不可变的数据类型。例如：let x = Symbol('hi');Object：对象数据类型用于存储更复杂的数据集。例如: let x = {firstName:"John", lastName:"Doe"};以上8种类型可大致分为两类：原始值（Undefined, Null, Boolean, Number, String, Symbol, BigInt对象值（Object）。

强制类型转换强制类型转换 是指开发者显式地将一种数据类型转换为另一种数据类型。强制类型转换的例子：Number转换为String：使用 toString()方法来转换数字为字符串。例如：(123).toString()，结果为 "123"。String转换为Number：使用 Number()函数将字符串转换为数字。例如：Number("123")，结果为 123。非布尔值转换为布尔值：使用 Boolean()函数将非布尔值转换为布尔值。例如：Boolean(1)，结果为 true。 隐式类型转换隐式类型转换，又被称为隐式类型强制转换，是指JavaScript引擎在处理表达式时自动完成的类型转换。隐式类型转换的两个例子：加法运算符：当通过加法运算符加入字符串和非字符串（数字，布尔值等）时，非字符串将被转换为字符串。例如："5" + 3，结果为 "53"。相等性比较：如果比较的值具有不同的类型，JavaScript会尝试通过诸如转换字符串为数字，或转换布尔值为数字等方式，来进行比较。例如："5" == 5，结果为 true。

HTML表单（form）是可以执行跨域请求的。在Web开发中，跨域请求指的是从一个源（domain、协议、端口）发起的请求试图获取另一个源上的资源。通常，出于安全考虑，浏览器会实施同源策略（Same-Origin Policy），这意味着如果使用XMLHttpRequest或Fetch API来发起Ajax请求，那么请求通常会受到限制，除非目标服务器明确允许跨源资源共享（CORS，Cross-Origin Resource Sharing）。但是，HTML表单不受同源策略的限制，因此可以向任何URL发起POST或GET请求，即使这个URL指向的是另一个域。当表单提交时，浏览器会将用户输入的数据作为请求参数发送到表单的 action属性所指定的URL。不过，使用表单进行跨域提交时，浏览器会导航到响应页面，也就是说用户的当前页面会被新页面替换。下面是一个简单的表单跨域请求的例子：<form action="https://example.com/api/submit" method="POST"> <input type="text" name="username" value="User"> <input type="text" name="password" value="Pass"> <input type="submit" value="Submit"></form>在此示例中，表单数据将提交给位于 example.com域的服务器，即使表单所在的HTML页面可能托管在不同的域上。当用户点击提交按钮时，浏览器会将表单数据作为POST请求的一部分发送到 example.com。需要注意的是，即使表单可以跨域提交，服务端仍然需要处理来自不同源的请求。此外，跨域表单提交不会提供Ajax那样的客户端JavaScript接口来访问响应内容，除非服务器在响应中包含适当的CORS头部信息。