JavaScript面试题手册

LocalStorage 是 Web Storage API 的一部分，它允许网页在用户浏览器本地存储数据。下面是 LocalStorage 对象常用的 API 方法：setItem(key, value): 该方法用于在 LocalStorage 中存储数据。它接收两个参数，key（键）表示存储数据的名称，而 value（值）则是实际存储的数据。例如：localStorage.setItem('username', 'JohnDoe');getItem(key): 通过 key（键）检索存储在 LocalStorage 中的值。如果指定的键不存在，它将返回 null。例如：let userName = localStorage.getItem('username');console.log(userName); // 输出: JohnDoeremoveItem(key): 删除 LocalStorage 中的指定 key（键）的数据。例如：localStorage.removeItem('username');clear(): 清除 LocalStorage 中的所有数据。例如：localStorage.clear();length: 一个只读属性，返回 LocalStorage 中的数据项数。例如：let numberOfItems = localStorage.length;console.log(numberOfItems);key(index): 根据索引来获取 LocalStorage 中的键。索引从 0 开始。如果索引超出了范围，将返回 null。例如：let firstKeyName = localStorage.key(0);console.log(firstKeyName);LocalStorage 的数据会以字符串的形式存储，即使你存储的是数字或是对象。如果需要存储对象，通常会使用 JSON.stringify 方法将对象转换为字符串格式存储，检索时再用 JSON.parse 方法将字符串转换回对象。例如：let user = { name: 'John', age: 30 };localStorage.setItem('user', JSON.stringify(user));let retrievedUser = JSON.parse(localStorage.getItem('user'));console.log(retrievedUser); // 输出: { name: 'John', age: 30 }以上就是 LocalStorage 对象的主要 API。需要注意的是，虽然 LocalStorage 提供了方便的本地存储机制，但它并不适合存储敏感信息，因为这些信息是以明文形式存储的，且没有到期时间，容易受到跨站脚本（XSS）攻击的影响。

闭包是一个函数以及创建该函数的词法环境的组合。闭包使得一个函数可以访问到它被定义时的作用域中的变量，即使该函数在其定义环境外被执行。这个概念在JavaScript等支持一等函数的编程语言中尤为重要。闭包的原理当你在JavaScript中创建一个函数时，该函数会记住它被创建时候的环境。在函数中定义的变量，以及它的父作用域中的变量，都会被闭包保留。在函数执行时，如果它访问了这些外部变量，即便父作用域已经执行完毕，这些变量依然可以被访问，因为闭包中保留了它们的引用。应用场景闭包在JavaScript编程中非常有用，它们有许多的应用场景：数据封装闭包可以用于创建私有变量，这样你就可以封装数据，只暴露必要的操作接口。function createCounter() { let count = 0; return { increment() { count++; }, get() { return count; }, };}const counter = createCounter();counter.increment();console.log(counter.get()); // 输出 1在上面的例子中，count 是一个私有变量，通过闭包的形式封装在 createCounter 函数中。外部代码无法直接访问 count 变量，只能通过 increment 和 get 方法间接操作它。回调函数与异步操作异步操作，如定时器、网络请求或事件处理中，闭包常用于保持对某个变量的引用。function delayedGreeting(name) { setTimeout(function() { console.log('Hello, ' + name); }, 1000);}delayedGreeting('Alice');在这个例子里，即使 delayedGreeting 函数的执行已经结束，传给 setTimeout 的匿名函数依然能够访问 name 变量。循环中创建闭包循环中创建函数时，闭包可以帮助每个函数记住它们各自的环境。for (var i = 0; i < 3; i++) { (function(index) { setTimeout(function() { console.log('Value is ' + index); }, 1000); })(i);}在这个例子中，立即执行的函数表达式（IIFE）创建了一个新的词法作用域，这样每次迭代都会保存各自的索引值 index。函数柯里化闭包可以用来实现函数柯里化，即创建已经设置了一些固定参数的新函数。function multiply(a, b) { return a * b;}function curriedMultiply(a) { return function(b) { return multiply(a, b); };}const double = curriedMultiply(2);console.log(double(5)); // 输出 10在这个例子中，curriedMultiply 函数通过闭包记住了参数 a，并返回了一个新函数，这个新函数接受参数 b 并调用原本的 multiply 函数。结论闭包是函数编程中的一个强大特性，它不仅允许你访问定义函数时的作用域，而且能够在数据隐藏、封装和柯里化中发挥重要作用。了解和利用闭包，可以让你编写出更加灵活和强大的代码。

在JavaScript中，对象可以被分为可变对象和不可变对象两类。可变对象是指那些可以在创建后改变其内容和结构的对象。在JavaScript中，所有的对象（Object）、数组（Array）以及函数（Function）都是可变的。这意味着我们可以在创建这些对象后，添加新的属性或方法、改变其属性值、或者从对象中删除属性。例如，当我们创建一个数组时，我们可以通过各种方法来改变这个数组：let myArray = [1, 2, 3]; // 创建一个数组myArray.push(4); // 向数组添加一个新元素myArray[0] = 10; // 改变数组中第一个元素的值console.log(myArray); // 输出: [10, 2, 3, 4]在上面的例子中，我们创建了一个数组myArray，然后通过push方法添加了一个新元素，接着又修改了数组的第一个元素的值。这种改变数组内容的行为展示了数组是一个可变对象。不可变对象，相对地，是指那些一旦创建后其内容就不能更改的对象。在JavaScript中，原始数据类型（如Number、String、Boolean、Null、Undefined、Symbol和BigInt）是不可变的。这意味着这些类型的值一旦创建，就不能被改变；如果需要一个改变后的值，实际上是创建了一个新的值。举个例子，字符串的不可变性如下所示：let myString = "Hello"; // 创建一个字符串myString[0] = "M"; // 尝试改变字符串的第一个字符console.log(myString); // 输出: "Hello"在这个例子中，尽管我们尝试改变字符串myString的第一个字符，最终字符串仍然是原来的"Hello"。这表明尽管我们尝试对字符串进行了操作，但实际上字符串本身并没有改变，因为字符串是不可变的。如果我们想要一个不同的字符串，我们需要创建一个全新的字符串：let myString = "Hello";let newString = "M" + myString.substring(1); // 创建一个新字符串console.log(newString); // 输出: "Mello"在上面的例子中，newString是一个新的字符串，它是通过组合一个新的字符和原有字符串的一部分创建的，而原始的myString并未改变。可变对象和不可变对象之间的这种区别对于理解如何在JavaScript中管理数据及其引用非常重要。不可变对象提供了值的稳定性，而可变对象提供了灵活性。在编写代码时，理解这些概念可以帮助避免一些常见的错误，例如因直接修改对象或数组而导致的意外副作用。

回文字符串是一个正向和反向都相同的字符串。比如 "madam" 或者 "racecar" 就是回文字符串。以下是一个用Python编写的简单函数，用于检测一个字符串是否是回文：def is_palindrome(s): # 首先，我们将字符串转为小写，并移除非字母字符 clean_s = ''.join(c for c in s.lower() if c.isalnum()) # 然后我们比较字符串与其翻转后的版本是否相同 return clean_s == clean_s[::-1]在这个函数中，我们首先将输入字符串转换为全部小写，并且移除了所有非字母和非数字字符，这样我们就能只关注字母和数字，忽略掉标点和空白。然后我们简单地将处理过的字符串与其自身的倒序版本进行比较，来判断它是否是回文。让我们用一些例子来测试这个函数：print(is_palindrome("Madam")) # 应该输出: Trueprint(is_palindrome("racecar")) # 应该输出: Trueprint(is_palindrome("hello")) # 应该输出: Falseprint(is_palindrome("A man, a plan, a canal, Panama")) # 应该输出: True在最后一个例子中，尽管原始字符串包含了空格和标点符号，但是在我们的 is_palindrome函数中，这些字符都被移除了，所以最终验证的字符串是"amanaplanacanalpanama"，这是一个回文字符串。

广度优先遍历（Breadth-First Traversal, BFT）是一种遍历或搜索树或图结构的算法，它从根节点开始，然后遍历所有邻近的节点，再对每个邻近节点做同样的处理，依此类推，直到遍历完所有可达的节点。在DOM树中应用广度优先遍历同样遵循这个原则，其中DOM树的根节点通常是document对象的documentElement属性，通常指向HTML文档的<html>元素。在JavaScript中执行DOM树的广度优先遍历，我们可以使用队列（Queue）这一数据结构来辅助实现。以下是一个简单的例子：function breadthFirstTraversal(root) { // 创建一个队列，并将根节点入队 let queue = [root]; // 当队列不为空时，循环执行 while (queue.length > 0) { // 出队一个节点并访问 let currentNode = queue.shift(); console.log(currentNode.tagName); // 打印当前节点的标签名 // 将当前节点的所有子节点入队 [].slice.call(currentNode.children).forEach(child => { queue.push(child); }); }}// 调用函数，传入document.documentElement作为遍历的起点breadthFirstTraversal(document.documentElement);在这个例子中，我定义了一个名为breadthFirstTraversal的函数，它接收一个DOM节点作为遍历的起点。然后，我使用一个数组作为队列来存放待访问的节点。在while循环中，我不断地从队列中取出节点，访问它，并将它的子节点加入队列末尾。通过这种方式，我能够按照广度优先的顺序访问整个DOM树的每一个节点。这个例子中，console.log(currentNode.tagName)是对当前节点的访问方式，实际应用中可以替换为其他操作，比如获取或修改节点信息等。此外，.slice.call(currentNode.children)是一种常见的技巧，用来将HTMLCollection或NodeList对象转换为数组，以便使用数组的forEach方法。在现代的JavaScript中，你也可以直接使用Array.from(currentNode.children)来进行转换。

在判断一个JavaScript文件是用于Node.js环境还是浏览器环境时，可以从以下几个方面进行分析： 模块系统:Node.js: 使用 require和 module.exports或者 import/export（在启用了ES模块的情况下）来处理模块。如果你看到这样的代码，很可能该文件是为Node.js环境编写的。例如: javascript<span class="token">const</span><span> fs </span><span class="token">=</span><span> </span><span class="token">require</span><span class="token">(</span><span class="token">'fs'</span><span class="token">)</span><span class="token">;</span><span> </span><span>module</span><span class="token">.</span><span class="token method-variable function-variable method property-access">exports</span><span> </span><span class="token">=</span><span> </span><span class="token">function</span><span class="token">(</span><span class="token">)</span><span> </span><span class="token">{</span><span> </span><span class="token">/* ... */</span><span> </span><span class="token">}</span><span class="token">;</span>浏览器: 传统的浏览器环境使用 <script>标签来加载JavaScript文件，而现代浏览器支持ES模块，使用 import/export。如果文件中存在如 document或 window这样的全局对象，说明它是为浏览器环境编写的。例如: javascript<span class="token dom">document</span><span class="token">.</span><span class="token method property-access">getElementById</span><span class="token">(</span><span class="token">'example'</span><span class="token">)</span><span class="token">;</span>全局对象:Node.js: 具有特定的全局对象，如 global, process, __dirname和 __filename。如果代码中使用了这些对象，说明它是为Node.js环境设计的。浏览器: 浏览器具有自己的全局对象，如 window, document, navigator等。这些通常不会在Node.js环境中出现。内置模块/包:Node.js: Node.js有一些内置模块，如 fs, http, path等，这些模块只存在于Node.js中。浏览器: 浏览器则提供了如 DOM API, WebAPIs等，它们不是Node.js的一部分。API的使用:Node.js: Node.js有一些专有的API，例如与文件系统交互、创建服务端网络应用等。浏览器: 浏览器则提供了DOM操作、事件监听、Web存储等API。注释和文档:代码注释: 有时候开发者会在文件顶部留下注释说明这段代码的用途。项目文档: 查看包含该文件的项目的 README.md或其他文档文件，通常会有环境要求的说明。构建工具和配置文件:项目中的构建工具配置文件（如 webpack.config.js, Gruntfile.js, Gulpfile.js等）会提供关于目标环境的线索。这些工具常用于浏览器环境中的JavaScript代码打包。文件扩展名:尽管这不是一个强制规则，有时候Node.js模块会使用 .mjs来指明它是一个ES模块。而传统的浏览器脚本可能会使用 .js。示例: 假设我们有以下代码：javascriptconst http = require('http');http.createServer((req, res) => { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n');}).listen(3000, '127.0.0.1');console.log('Server running at http://127.0.0.1:3000/');这个例子中，代码使用了 require来加载Node.js的 http模块，创建了一个服务器，并打印了一个消息表明服务器正在运行。从这些信息中可以明确地看出这是一个为Node.js环境编写的JavaScript文件。