前端

服务端

计算机基础

JavaScript 是一种基于脚本的编程语言，主要用于在 Web 页面上实现交互式的效果和动态的内容。JavaScript 是一种解释性语言，不需要编译就可以直接在浏览器中运行。

JavaScript 的主要特点包括：

轻量级：JavaScript 代码通常比较短小，可以快速加载和执行。

可移植性：JavaScript 可以在各种不同的浏览器和操作系统上运行。

面向对象编程：JavaScript 支持面向对象编程，包括对象、继承、封装等特性，可以用于构建复杂的软件系统。

客户端脚本语言：JavaScript 主要用于在 Web 页面上实现交互式的效果和动态的内容，可以与 HTML 和 CSS 一起使用。

异步编程：JavaScript 支持异步编程，可以利用回调函数、Promise、async/await 等方式实现异步操作，提高程序的性能和响应能力。

JavaScript 在 Web 开发中扮演着非常重要的角色，它可以用于实现各种交互式的效果和动态的内容，如表单验证、动画效果、AJAX 等。同时，JavaScript 也可以用于开发各种类型的应用程序，如桌面应用程序、移动应用程序等。

如果您想成为一名 Web 开发人员，JavaScript 是必不可少的编程语言之一，需要掌握 JavaScript 的基本语法和常用的开发框架和库，如 React、Angular、Vue 等。掌握 JavaScript 可以帮助您更加高效和灵活地实现 Web 开发中的各种功能和效果，为自己的职业发展和个人成长打下坚实的基础。

JavaScript

在JavaScript中，对象可以被分为可变对象和不可变对象两类。

**可变对象**是指那些可以在创建后改变其内容和结构的对象。在JavaScript中，所有的对象（`Object`）、数组（`Array`）以及函数（`Function`）都是可变的。这意味着我们可以在创建这些对象后，添加新的属性或方法、改变其属性值、或者从对象中删除属性。

例如，当我们创建一个数组时，我们可以通过各种方法来改变这个数组：

```javascript
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`）是不可变的。这意味着这些类型的值一旦创建，就不能被改变；如果需要一个改变后的值，实际上是创建了一个新的值。

举个例子，字符串的不可变性如下所示：

```javascript
let myString = "Hello"; // 创建一个字符串
myString[0] = "M"; // 尝试改变字符串的第一个字符
console.log(myString); // 输出: "Hello"
```

在这个例子中，尽管我们尝试改变字符串`myString`的第一个字符，最终字符串仍然是原来的"Hello"。这表明尽管我们尝试对字符串进行了操作，但实际上字符串本身并没有改变，因为字符串是不可变的。如果我们想要一个不同的字符串，我们需要创建一个全新的字符串：

```javascript
let myString = "Hello";
let newString = "M" + myString.substring(1); // 创建一个新字符串
console.log(newString); // 输出: "Mello"
```

在上面的例子中，`newString`是一个新的字符串，它是通过组合一个新的字符和原有字符串的一部分创建的，而原始的`myString`并未改变。

可变对象和不可变对象之间的这种区别对于理解如何在JavaScript中管理数据及其引用非常重要。不可变对象提供了值的稳定性，而可变对象提供了灵活性。在编写代码时，理解这些概念可以帮助避免一些常见的错误，例如因直接修改对象或数组而导致的意外副作用。

JavaScript 中可变对象和不可变对象之间的区别是什么？


回文字符串是一个正向和反向都相同的字符串。比如 "madam" 或者 "racecar" 就是回文字符串。

以下是一个用Python编写的简单函数，用于检测一个字符串是否是回文：

```python
def is_palindrome(s):
    # 首先，我们将字符串转为小写，并移除非字母字符
    clean_s = ''.join(c for c in s.lower() if c.isalnum())

    # 然后我们比较字符串与其翻转后的版本是否相同
    return clean_s == clean_s[::-1]
```

在这个函数中，我们首先将输入字符串转换为全部小写，并且移除了所有非字母和非数字字符，这样我们就能只关注字母和数字，忽略掉标点和空白。然后我们简单地将处理过的字符串与其自身的倒序版本进行比较，来判断它是否是回文。

让我们用一些例子来测试这个函数：

```python
print(is_palindrome("Madam"))    # 应该输出: True
print(is_palindrome("racecar"))  # 应该输出: True
print(is_palindrome("hello"))    # 应该输出: False
print(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）这一数据结构来辅助实现。以下是一个简单的例子：

```javascript
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)`来进行转换。

如何广度优先遍历DOM树？

在判断一个JavaScript文件是用于Node.js环境还是浏览器环境时，可以从以下几个方面进行分析： 

1. **模块系统**:
 * **Node.js**: 使用 `require`和 `module.exports`或者 `import/export`（在启用了ES模块的情况下）来处理模块。如果你看到这样的代码，很可能该文件是为Node.js环境编写的。例如:
 <pre><section class="markdown-code"><div class="markdown-code__head"><div class="markdown-code__head-language">javascript<svg width="16" height="16" viewBox="0 0 48 48" fill="none"><path d="M13 12.4316V7.8125C13 6.2592 14.2592 5 15.8125 5H40.1875C41.7408 5 43 6.2592 43 7.8125V32.1875C43 33.7408 41.7408 35 40.1875 35H35.5163" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M32.1875 13H7.8125C6.2592 13 5 14.2592 5 15.8125V40.1875C5 41.7408 6.2592 43 7.8125 43H32.1875C33.7408 43 35 41.7408 35 40.1875V15.8125C35 14.2592 33.7408 13 32.1875 13Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"></path></svg></div></div><div><code class="language-javascript">const fs = require('fs');
 module.exports = function() { /* ... */ };</code></div></section></pre>
 * **浏览器**: 传统的浏览器环境使用 `<script>`标签来加载JavaScript文件，而现代浏览器支持ES模块，使用 `import/export`。如果文件中存在如 `document`或 `window`这样的全局对象，说明它是为浏览器环境编写的。例如:
 <pre><section class="markdown-code"><div class="markdown-code__head"><div class="markdown-code__head-language">javascript<svg width="16" height="16" viewBox="0 0 48 48" fill="none"><path d="M13 12.4316V7.8125C13 6.2592 14.2592 5 15.8125 5H40.1875C41.7408 5 43 6.2592 43 7.8125V32.1875C43 33.7408 41.7408 35 40.1875 35H35.5163" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M32.1875 13H7.8125C6.2592 13 5 14.2592 5 15.8125V40.1875C5 41.7408 6.2592 43 7.8125 43H32.1875C33.7408 43 35 41.7408 35 40.1875V15.8125C35 14.2592 33.7408 13 32.1875 13Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"></path></svg></div></div><div><code class="language-javascript">document.getElementById('example');</code></div></section></pre>
2. **全局对象**:
 * **Node.js**: 具有特定的全局对象，如 `global`, `process`, `__dirname`和 `__filename`。如果代码中使用了这些对象，说明它是为Node.js环境设计的。
 * **浏览器**: 浏览器具有自己的全局对象，如 `window`, `document`, `navigator`等。这些通常不会在Node.js环境中出现。
3. **内置模块/包**:
 * **Node.js**: Node.js有一些内置模块，如 `fs`, `http`, `path`等，这些模块只存在于Node.js中。
 * **浏览器**: 浏览器则提供了如 `DOM API`, `WebAPIs`等，它们不是Node.js的一部分。
4. **API的使用**:
 * **Node.js**: Node.js有一些专有的API，例如与文件系统交互、创建服务端网络应用等。
 * **浏览器**: 浏览器则提供了DOM操作、事件监听、Web存储等API。
5. **注释和文档**:
 * **代码注释**: 有时候开发者会在文件顶部留下注释说明这段代码的用途。
 * **项目文档**: 查看包含该文件的项目的 `README.md`或其他文档文件，通常会有环境要求的说明。
6. **构建工具和配置文件**:
 * 项目中的构建工具配置文件（如 `webpack.config.js`, `Gruntfile.js`, `Gulpfile.js`等）会提供关于目标环境的线索。这些工具常用于浏览器环境中的JavaScript代码打包。
7. **文件扩展名**:
 * 尽管这不是一个强制规则，有时候Node.js模块会使用 `.mjs`来指明它是一个ES模块。而传统的浏览器脚本可能会使用 `.js`。

**示例**: 假设我们有以下代码：

<pre><section class="markdown-code"><div class="markdown-code__head"><div class="markdown-code__head-language">javascript<svg width="16" height="16" viewBox="0 0 48 48" fill="none"><path d="M13 12.4316V7.8125C13 6.2592 14.2592 5 15.8125 5H40.1875C41.7408 5 43 6.2592 43 7.8125V32.1875C43 33.7408 41.7408 35 40.1875 35H35.5163" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M32.1875 13H7.8125C6.2592 13 5 14.2592 5 15.8125V40.1875C5 41.7408 6.2592 43 7.8125 43H32.1875C33.7408 43 35 41.7408 35 40.1875V15.8125C35 14.2592 33.7408 13 32.1875 13Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"></path></svg></div></div><div><code class="language-javascript">const 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/');</code></div></section></pre>

这个例子中，代码使用了 `require`来加载Node.js的 `http`模块，创建了一个服务器，并打印了一个消息表明服务器正在运行。从这些信息中可以明确地看出这是一个为Node.js环境编写的JavaScript文件。

JavaScript面试题手册

JavaScript 中可变对象和不可变对象之间的区别是什么？

实现一个函数，判断输入是不是回文字符串

如何广度优先遍历DOM树？

如何判断一个 JS 文件是用于Node.js 还是普通浏览器？