JS相关知识5.0

DOM节点类型列举

在 JavaScript 中，DOM（Document Object Model）节点是 HTML 或 XML 文档的基本构建块。每个节点都有一个 nodeType 属性，用于标识节点的类型。以下是常见的 DOM 节点类型及其对应的 nodeType 值：

元素节点 (Element)

nodeType: 1
描述: 表示 HTML 或 XML 文档中的元素（标签），如 <div>、<p>、<a> 等。

示例:

html

<div id="example">Hello, World!</div>

javascript

const element = document.getElementById("example");
console.log(element.nodeType); // 输出: 1

属性节点 (Attr)

nodeType: 2
描述: 表示元素的属性，如 id、class、href 等。

示例:

html

<a href="https://example.com">Link</a>

javascript

const link = document.querySelector("a");
const attr = link.getAttributeNode("href");
console.log(attr.nodeType); // 输出: 2

文本节点 (Text)

nodeType: 3
描述: 表示元素或属性中的文本内容。

示例:

html

<p>Hello, World!</p>

javascript

const paragraph = document.querySelector("p");
const textNode = paragraph.childNodes[0]; // 获取文本节点
console.log(textNode.nodeType); // 输出: 3

注释节点 (Comment)

nodeType: 8
描述: 表示 HTML 或 XML 文档中的注释。

示例:

html

<!-- This is a comment -->

javascript

const comment = document.body.childNodes[0]; // 假设注释是第一个子节点
console.log(comment.nodeType); // 输出: 8

文档节点 (Document)

nodeType: 9
描述: 表示整个文档（根节点）。

示例:

javascript

console.log(document.nodeType); // 输出: 9

文档类型节点 (DocumentType)

nodeType: 10
描述: 表示文档类型声明（如 <!DOCTYPE html>）。

示例:

html

<!DOCTYPE html>

javascript

const doctype = document.doctype;
console.log(doctype.nodeType); // 输出: 10

文档片段节点 (DocumentFragment)

nodeType: 11
描述: 表示一个轻量级的文档片段，用于高效地操作和插入多个节点。

示例:

javascript

const fragment = document.createDocumentFragment();
console.log(fragment.nodeType); // 输出: 11

CDATA 节点 (CDATASection)

nodeType: 4
描述: 表示 XML 文档中的 CDATA 部分（不解析的文本数据）。

示例:

xml

<![CDATA[<message>Hello, World!</message>]]>

实体引用节点 (EntityReference)

nodeType: 5
描述: 表示 XML 文档中的实体引用（如 &）。
注意: 在 HTML 中不常用。

实体节点 (Entity)

nodeType: 6
描述: 表示 XML 文档中的实体定义。
注意: 在 HTML 中不常用。

处理指令节点 (ProcessingInstruction)

nodeType: 7
描述: 表示 XML 文档中的处理指令（如 <?xml-stylesheet ...?>）。
注意: 在 HTML 中不常用。

总结

以下是常见的 DOM 节点类型及其 nodeType 值：

`nodeType`	节点类型	描述
`1`	元素节点 (`Element`)	HTML 或 XML 元素
`2`	属性节点 (`Attr`)	元素的属性
`3`	文本节点 (`Text`)	元素或属性中的文本内容
`4`	CDATA 节点 (`CDATASection`)	XML 中的 CDATA 部分
`5`	实体引用节点 (`EntityReference`)	XML 中的实体引用
`6`	实体节点 (`Entity`)	XML 中的实体定义
`7`	处理指令节点 (`ProcessingInstruction`)	XML 处理指令
`8`	注释节点 (`Comment`)	HTML 或 XML 注释
`9`	文档节点 (`Document`)	整个文档
`10`	文档类型节点 (`DocumentType`)	文档类型声明
`11`	文档片段节点 (`DocumentFragment`)	轻量级文档片段

在实际开发中，最常用的是元素节点 (1)、文本节点 (3) 和注释节点 (8)。通过 nodeType 可以快速判断节点的类型，从而进行相应的操作。

为什么不建议在JavaScript中使用innerHTML

在 JavaScript 中，innerHTML 是一种常用的操作 DOM 的方式，它可以快速设置或获取元素的 HTML 内容。然而，尽管 innerHTML 方便易用，但在某些情况下不建议使用它，因为它可能带来一些安全性和性能问题。以下是主要原因：

安全风险（XSS 攻击）

innerHTML 会将字符串作为 HTML 解析并插入到 DOM 中，如果字符串中包含用户输入的内容，可能会被恶意用户注入脚本代码，导致 跨站脚本攻击（XSS）。

示例

javascript

const userInput = "<img src='x' onerror='alert(\"XSS Attack!\")'>";
document.getElementById("content").innerHTML = userInput;

如果 userInput 是用户输入的内容，恶意代码会被执行。

解决方法

使用 textContent 或 innerText 来插入纯文本内容。
对用户输入的内容进行转义（如使用 DOMPurify 等库）。

性能问题

每次使用 innerHTML 都会导致浏览器重新解析和渲染整个 HTML 片段，即使只修改了一小部分内容。这可能会导致性能问题，尤其是在频繁操作 DOM 时。

示例

javascript

const list = document.getElementById("list");
for (let i = 0; i < 1000; i++) {
    list.innerHTML += `<li>Item ${i}</li>`; // 每次都会重新解析和渲染
}

这种方式会频繁触发浏览器的重绘和重排，性能较差。

解决方法

使用 DocumentFragment 或字符串拼接，最后一次性插入 DOM。
使用专门的 DOM 操作方法（如 appendChild、insertBefore 等）。

破坏现有元素和事件

使用 innerHTML 替换元素内容时，会移除元素的所有子节点和事件监听器，这可能会导致意外的行为。

示例

javascript

const button = document.getElementById("myButton");
button.addEventListener("click", () => alert("Clicked!"));
button.innerHTML = "<span>Click Me</span>"; // 事件监听器被移除

替换 innerHTML 后，按钮的点击事件会失效。

解决方法

使用 DOM 操作方法（如 appendChild、replaceChild）来更新内容，而不是直接替换 innerHTML。

不符合语义化

innerHTML 直接将字符串作为 HTML 解析，可能会导致生成的 DOM 结构不符合语义化或最佳实践。

示例

javascript

document.getElementById("content").innerHTML = "<div><p>Hello</p></div>";

如果字符串格式不正确（如缺少闭合标签），可能会导致意外的 DOM 结构。

解决方法

使用 DOM API 创建和插入元素，确保生成的 DOM 结构符合预期。

浏览器兼容性问题

在某些旧版浏览器中，innerHTML 的行为可能不一致，尤其是在处理表格、表单等特殊元素时。

替代方案

使用 textContent 或 innerText

如果需要插入纯文本内容，可以使用 textContent 或 innerText，它们不会解析 HTML 标签。

javascript

document.getElementById("content").textContent = "Hello, World!";

使用 DOM 操作方法

使用 createElement、appendChild、insertBefore 等 DOM 操作方法，可以更安全地操作 DOM。

javascript

const newElement = document.createElement("div");
newElement.textContent = "Hello, World!";
document.getElementById("content").appendChild(newElement);

使用 DocumentFragment

如果需要插入大量节点，可以使用 DocumentFragment 来提高性能。

javascript

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const li = document.createElement("li");
    li.textContent = `Item ${i}`;
    fragment.appendChild(li);
}
document.getElementById("list").appendChild(fragment);

使用模板引擎或框架

在现代开发中，可以使用模板引擎（如 Handlebars、EJS）或前端框架（如 React、Vue）来更安全、高效地操作 DOM。

总结

虽然 innerHTML 方便易用，但由于其潜在的安全风险、性能问题和破坏性行为，建议在以下情况下避免使用：

插入用户输入的内容时。
需要频繁操作 DOM 时。
需要保留现有事件监听器时。

替代方案包括使用 textContent、DOM 操作方法、DocumentFragment 或现代前端框架。根据具体需求选择合适的方式，可以提高代码的安全性和性能。

如何在不支持JavaScript的旧浏览器中隐藏JavaScript代码

在不支持 JavaScript 的旧浏览器中隐藏 JavaScript 代码，可以通过以下几种方法实现。这些方法的核心思想是让旧浏览器忽略 JavaScript 代码，而现代浏览器则正常执行。

使用 HTML 注释

在旧浏览器中，HTML 注释可以用于隐藏 JavaScript 代码，因为旧浏览器会将 <script> 标签内的内容视为文本，而现代浏览器会忽略 HTML 注释并正常执行 JavaScript。

示例

html

<script type="text/javascript">
<!--
    // JavaScript 代码
    alert("Hello, World!");
// -->
</script>

旧浏览器：将  之间的内容视为注释，忽略 JavaScript 代码。
现代浏览器：忽略 HTML 注释，正常执行 JavaScript。

使用 <noscript> 标签

<noscript> 标签用于在不支持 JavaScript 的浏览器中显示替代内容。虽然它不能直接隐藏 JavaScript 代码，但可以用来提示用户浏览器不支持 JavaScript。

示例

html

<script type="text/javascript">
    alert("Hello, World!");
</script>
<noscript>
    <p>您的浏览器不支持 JavaScript，请升级浏览器或启用 JavaScript。</p>
</noscript>

支持 JavaScript 的浏览器：执行 <script> 中的代码，忽略 <noscript> 内容。
不支持 JavaScript 的浏览器：显示 <noscript> 中的内容。

使用外部 JavaScript 文件

将 JavaScript 代码放在外部文件中，并通过 <script> 标签引入。旧浏览器会忽略无法识别的 <script> 标签。

示例

html

<script src="script.js"></script>

旧浏览器：忽略 <script> 标签，不加载外部文件。
现代浏览器：加载并执行外部 JavaScript 文件。

使用 JavaScript 特性检测

通过 JavaScript 检测浏览器是否支持某些特性，从而决定是否执行代码。这种方法适用于需要兼容性处理的场景。

示例

html

<script type="text/javascript">
    if (typeof window !== "undefined" && window.document) {
        // 现代浏览器支持的代码
        alert("Hello, World!");
    }
</script>

旧浏览器：可能不支持 typeof 或 window 对象，因此不会执行代码。
现代浏览器：正常执行代码。

使用 type="module"

现代浏览器支持 type="module"，用于加载 ES6 模块。旧浏览器会忽略这种类型的 <script> 标签。

示例

html

<script type="module">
    // 现代浏览器支持的 ES6 代码
    alert("Hello, World!");
</script>

旧浏览器：忽略 type="module" 的 <script> 标签。
现代浏览器：正常执行 ES6 模块代码。

使用 defer 或 async 属性

defer 和 async 属性用于控制脚本的加载和执行行为。旧浏览器会忽略这些属性，但现代浏览器会正常处理。

示例

html

<script defer src="script.js"></script>
<script async src="script.js"></script>

旧浏览器：忽略 defer 和 async 属性，按照默认行为加载脚本。
现代浏览器：根据 defer 或 async 属性加载和执行脚本。

使用 CSS 隐藏内容

如果 JavaScript 用于动态显示内容，可以通过 CSS 隐藏内容，然后在 JavaScript 中显示。

示例

html

<style>
    .js-content { display: none; }
</style>
<div class="js-content">Hello, World!</div>
<script type="text/javascript">
    document.querySelector(".js-content").style.display = "block";
</script>

支持 JavaScript 的浏览器：显示内容。
不支持 JavaScript 的浏览器：内容保持隐藏。

总结

在不支持 JavaScript 的旧浏览器中隐藏 JavaScript 代码，可以通过以下方法实现：

HTML 注释：让旧浏览器忽略 JavaScript 代码。
<noscript> 标签：显示替代内容。
外部 JavaScript 文件：旧浏览器忽略 <script> 标签。
特性检测：通过 JavaScript 检测浏览器支持情况。
type="module"：旧浏览器忽略模块脚本。
defer 或 async：旧浏览器忽略这些属性。
CSS 隐藏内容：通过 JavaScript 动态显示内容。

根据具体需求选择合适的方法，可以确保代码在旧浏览器中优雅降级，同时在现代浏览器中正常运行。

JavaScript中读取文件的方法

在 JavaScript 中，读取文件的方法取决于运行环境。以下是常见的几种场景及其对应的文件读取方法：

浏览器环境

在浏览器中，可以通过 <input type="file"> 元素让用户选择文件，然后使用 FileReader API 读取文件内容。

示例：读取文本文件

html

<input type="file" id="fileInput">
<p id="fileContent"></p>

<script>
    document.getElementById("fileInput").addEventListener("change", function(event) {
        const file = event.target.files[0]; // 获取用户选择的文件
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById("fileContent").textContent = e.target.result;
            };
            reader.readAsText(file); // 以文本形式读取文件
        }
    });
</script>

示例：读取二进制文件

javascript

reader.readAsArrayBuffer(file); // 以二进制形式读取文件

示例：读取 Data URL

javascript

reader.readAsDataURL(file); // 读取文件并转换为 Data URL

Node.js 环境

在 Node.js 中，可以使用内置的 fs 模块来读取文件。

示例：同步读取文件

javascript

const fs = require("fs");

try {
    const data = fs.readFileSync("example.txt", "utf8"); // 同步读取文件
    console.log(data);
} catch (err) {
    console.error("读取文件时出错:", err);
}

示例：异步读取文件

javascript

const fs = require("fs");

fs.readFile("example.txt", "utf8", (err, data) => {
    if (err) {
        console.error("读取文件时出错:", err);
    } else {
        console.log(data);
    }
});

示例：流式读取大文件

javascript

const fs = require("fs");

const readStream = fs.createReadStream("example.txt", "utf8");

readStream.on("data", (chunk) => {
    console.log("读取到数据块:", chunk);
});

readStream.on("end", () => {
    console.log("文件读取完成");
});

readStream.on("error", (err) => {
    console.error("读取文件时出错:", err);
});

Deno 环境

Deno 是一个现代 JavaScript/TypeScript 运行时，支持直接读取文件。

示例：同步读取文件

javascript

const data = Deno.readTextFileSync("example.txt"); // 同步读取文件
console.log(data);

示例：异步读取文件

javascript

const data = await Deno.readTextFile("example.txt"); // 异步读取文件
console.log(data);

Electron 环境

Electron 是一个用于构建桌面应用程序的框架，结合了 Node.js 和浏览器环境。

示例：使用 Node.js 的 fs 模块

javascript

const fs = require("fs");
const { app, BrowserWindow } = require("electron");

function createWindow() {
    const win = new BrowserWindow();
    win.loadFile("index.html");

    fs.readFile("example.txt", "utf8", (err, data) => {
        if (err) {
            console.error("读取文件时出错:", err);
        } else {
            console.log(data);
        }
    });
}

app.whenReady().then(createWindow);

React Native 环境

在 React Native 中，可以使用 react-native-fs 库来读取文件。

安装库

bash

npm install react-native-fs

示例：读取文件

javascript

import RNFS from "react-native-fs";

const path = RNFS.DocumentDirectoryPath + "/example.txt";

RNFS.readFile(path, "utf8")
    .then((data) => {
        console.log(data);
    })
    .catch((err) => {
        console.error("读取文件时出错:", err);
    });

总结

环境	方法	适用场景
浏览器	`FileReader` API	用户上传文件
Node.js	`fs` 模块（同步/异步/流式）	服务器端文件操作
Deno	`Deno.readTextFile`	现代 JavaScript 运行时
Electron	`fs` 模块	桌面应用程序
React Native	`react-native-fs` 库	移动应用程序

根据运行环境选择合适的方法来读取文件。

JavaScript语句的基本规范

在 JavaScript 中，遵循一定的代码规范可以提高代码的可读性、可维护性和团队协作效率。以下是 JavaScript 语句的一些基本规范：

分号

推荐使用分号：尽管 JavaScript 有自动分号插入（ASI）机制，但显式使用分号可以避免潜在的错误。

示例：

javascript

const name = "Alice";
console.log(name);

缩进

使用 2 或 4 个空格：避免使用 Tab 键，保持代码风格一致。

示例：

javascript

function greet(name) {
    console.log(`Hello, ${name}!`);
}

空格

操作符前后加空格：使代码更清晰。
逗号后加空格：提高可读性。

示例：

javascript

const sum = 1 + 2;
const arr = [1, 2, 3];

换行

每行一条语句：避免将多条语句写在一行。
示例：
javascript
```
const a = 1;
const b = 2;
```

变量命名

使用驼峰命名法：变量名和函数名使用小驼峰（camelCase），类名使用大驼峰（PascalCase）。

示例：

javascript

const userName = "Alice";
function getUserInfo() {}
class UserProfile {}

常量命名

使用全大写字母和下划线：常量名使用 UPPER_CASE。
示例：
javascript
```
const MAX_COUNT = 100;
```

字符串

优先使用单引号：保持一致性。
示例：
javascript
```
const message = 'Hello, World!';
```

对象

对象字面量简写：属性名和变量名相同时，使用简写语法。

示例：

javascript

const name = "Alice";
const age = 25;
const user = { name, age };

数组

使用字面量创建数组：避免使用 new Array()。
示例：
javascript
```
const numbers = [1, 2, 3];
```

函数

优先使用函数声明：避免使用函数表达式。

示例：

javascript

function greet(name) {
    console.log(`Hello, ${name}!`);
}

箭头函数

单行箭头函数省略大括号和 return：使代码更简洁。
示例：
javascript
```
const add = (a, b) => a + b;
```

条件语句

使用严格相等：避免使用 ==，优先使用 ===。

示例：

javascript

if (age === 18) {
    console.log("You are 18 years old.");
}

循环

优先使用 for...of 和 forEach：避免使用传统的 for 循环。

示例：

javascript

const numbers = [1, 2, 3];
for (const num of numbers) {
    console.log(num);
}

模块化

使用 import 和 export：避免使用全局变量。

示例：

javascript

// math.js
export function add(a, b) {
    return a + b;
}

// main.js
import { add } from './math.js';
console.log(add(1, 2));

注释

使用 JSDoc 注释：为函数和类添加注释。

示例：

javascript

/**
 * 计算两个数的和
 * @param {number} a - 第一个数
 * @param {number} b - 第二个数
 * @returns {number} 两数之和
 */
function add(a, b) {
    return a + b;
}

错误处理

使用 try...catch 捕获错误：避免程序崩溃。

示例：

javascript

try {
    const result = riskyOperation();
} catch (error) {
    console.error("An error occurred:", error);
}

代码格式化工具

使用 Prettier 或 ESLint：自动格式化代码并检查潜在问题。

示例：

bash

# 安装 Prettier
npm install --save-dev prettier

# 格式化代码
npx prettier --write .

总结

遵循 JavaScript 代码规范可以提高代码质量，以下是一些关键点：

使用分号、缩进和空格保持代码整洁。
使用一致的命名规则（如驼峰命名法）。
优先使用现代语法（如箭头函数、for...of、模块化）。
使用工具（如 Prettier、ESLint）自动格式化和检查代码。

通过遵循这些规范，可以编写出更易读、易维护的 JavaScript 代码。

不同浏览器关于JavaScript兼容的常见问题

不同浏览器对 JavaScript 的实现可能存在差异，导致兼容性问题。以下是一些常见的兼容性问题及其解决方法：

ES6+ 新特性支持

现代 JavaScript 特性（如 let、const、箭头函数、模板字符串、Promise、async/await 等）在旧版浏览器中可能不被支持。

解决方法

使用 Babel：将 ES6+ 代码转换为 ES5 代码。

bash

npm install --save-dev @babel/core @babel/preset-env

配置 .babelrc：

json

{
  "presets": ["@babel/preset-env"]
}

使用 Polyfill：为旧浏览器提供缺失的功能。

bash

npm install core-js regenerator-runtime

在代码中引入：

javascript

import "core-js/stable";
import "regenerator-runtime/runtime";

DOM API 差异

不同浏览器对 DOM API 的实现可能存在差异。

示例：addEventListener 和 attachEvent

现代浏览器支持 addEventListener。
旧版 IE（IE8 及以下）使用 attachEvent。

解决方法

javascript

if (element.addEventListener) {
    element.addEventListener("click", handler);
} else if (element.attachEvent) {
    element.attachEvent("onclick", handler);
} else {
    element.onclick = handler;
}

事件对象差异

不同浏览器中事件对象的属性和方法可能不同。

示例：获取事件目标

现代浏览器使用 event.target。
旧版 IE 使用 event.srcElement。

解决方法

javascript

function handleClick(event) {
    const target = event.target || event.srcElement;
    console.log(target);
}

XMLHttpRequest 和 Fetch

现代浏览器支持 Fetch API。
旧版浏览器仅支持 XMLHttpRequest。

解决方法

javascript

if (window.fetch) {
    fetch(url)
        .then(response => response.json())
        .then(data => console.log(data));
} else {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = function() {
        console.log(JSON.parse(xhr.responseText));
    };
    xhr.send();
}

CSSOM 差异

JavaScript 操作 CSS 时，不同浏览器可能表现不同。

示例：获取计算样式

现代浏览器使用 window.getComputedStyle。
旧版 IE 使用 element.currentStyle。

解决方法

javascript

function getStyle(element, property) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(element)[property];
    } else if (element.currentStyle) {
        return element.currentStyle[property];
    }
    return null;
}

JSON 支持

现代浏览器原生支持 JSON.parse 和 JSON.stringify。
旧版 IE（IE7 及以下）不支持。

解决方法

使用 JSON2.js 或 JSON3.js 作为 Polyfill。

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>

classList 支持

现代浏览器支持 element.classList。
旧版 IE（IE9 及以下）不支持。

解决方法

使用 className 操作类名。

javascript

function addClass(element, className) {
    if (element.classList) {
        element.classList.add(className);
    } else {
        element.className += " " + className;
    }
}

requestAnimationFrame 支持

现代浏览器支持 requestAnimationFrame。
旧版浏览器需要降级为 setTimeout。

解决方法

javascript

const requestAnimFrame = window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        function(callback) {
                            window.setTimeout(callback, 1000 / 60);
                        };

localStorage 和 sessionStorage

现代浏览器支持 localStorage 和 sessionStorage。
旧版 IE（IE7 及以下）不支持。

解决方法

使用 cookie 作为降级方案。

检查浏览器是否支持：

javascript

if (window.localStorage) {
    localStorage.setItem("key", "value");
} else {
    console.log("localStorage not supported");
}

<canvas> 支持

现代浏览器支持 <canvas>。
旧版 IE（IE8 及以下）不支持。

解决方法

使用 excanvas.js 作为 Polyfill。

html

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/excanvas/3.0.0/excanvas.min.js"></script>
<![endif]-->

<video> 和 <audio> 支持

不同浏览器支持的音视频格式可能不同。

解决方法

提供多种格式的源文件：

html

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    您的浏览器不支持视频播放。
</video>

<input> 类型支持

现代浏览器支持新的输入类型（如 date、email、number 等）。
旧版浏览器会降级为 text。

解决方法

使用 JavaScript 库（如 jQuery UI 或 Flatpickr）提供兼容性支持。

总结

解决浏览器兼容性问题的方法包括：

使用 Polyfill：为旧浏览器提供缺失的功能。
特性检测：根据浏览器支持情况选择不同的实现。
使用 Babel：将现代 JavaScript 转换为兼容性更好的代码。
提供多种格式：如音视频、图片等。

通过以上方法，可以确保 JavaScript 代码在不同浏览器中正常运行。

JavaScript常用逻辑运算符

在 JavaScript 中，逻辑运算符用于对布尔值进行操作，或根据条件返回布尔值。以下是常用的逻辑运算符及其用法：

逻辑与 (&&)

功能：如果所有操作数都为 true，则返回 true；否则返回 false。
短路行为：如果第一个操作数为 false，则直接返回 false，不会计算第二个操作数。

示例

javascript

console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

// 短路行为
const value = null;
console.log(value && value.property); // null（不会报错）

逻辑或 (||)

功能：如果至少有一个操作数为 true，则返回 true；否则返回 false。
短路行为：如果第一个操作数为 true，则直接返回 true，不会计算第二个操作数。

示例

javascript

console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

// 短路行为
const defaultValue = "Default";
const userInput = "";
console.log(userInput || defaultValue); // "Default"

逻辑非 (!)

功能：对操作数取反。如果操作数为 true，则返回 false；反之亦然。
双非 (!!)：将值转换为布尔值。

示例

javascript

console.log(!true); // false
console.log(!false); // true

// 双非操作
console.log(!!0); // false
console.log(!!1); // true
console.log(!!"Hello"); // true

空值合并运算符 (??)

功能：如果左侧操作数为 null 或 undefined，则返回右侧操作数；否则返回左侧操作数。
与 || 的区别：?? 仅对 null 和 undefined 生效，而 || 对所有假值（如 0、""、false）生效。

示例

javascript

const value = null;
console.log(value ?? "Default"); // "Default"

const zero = 0;
console.log(zero ?? 10); // 0
console.log(zero || 10); // 10

可选链运算符 (?.)

功能：如果左侧操作数为 null 或 undefined，则返回 undefined；否则继续访问属性或调用方法。
用途：避免访问深层嵌套属性时因 null 或 undefined 导致的错误。

示例

javascript

const user = { name: "Alice", address: { city: "New York" } };

console.log(user.address?.city); // "New York"
console.log(user.contact?.phone); // undefined（不会报错）

三元运算符 (? :)

功能：根据条件返回两个值之一。
语法：条件 ? 表达式1 : 表达式2
- 如果条件为 true，返回 表达式1 的值。
- 如果条件为 false，返回 表达式2 的值。

示例

javascript

const age = 18;
const message = age >= 18 ? "成年人" : "未成年人";
console.log(message); // "成年人"

逻辑运算符的优先级

逻辑运算符的优先级从高到低依次为：

逻辑非 (!)

逻辑与 (&&)

逻辑或 (||)

三元运算符 (? :)

示例

javascript

const result = true || false && false;
console.log(result); // true（&& 优先级高于 ||）

逻辑运算符的短路行为

逻辑运算符的短路行为可以用于条件执行或默认值设置。

示例

javascript

// 条件执行
function logMessage(message) {
    message && console.log(message); // 仅在 message 为真时执行
}

// 默认值设置
const config = userConfig || defaultConfig;

总结

运算符	功能描述	示例
`&&`	逻辑与，全部为真时返回真	`true && false` → `false`
`\|\|`	逻辑或，至少一个为真时返回真	`true \|\| false` → `true`
`!`	逻辑非，取反操作	`!true` → `false`
`??`	空值合并，仅对`null` 和 `undefined` 生效	`null ?? "Default"` → `"Default"`
`?.`	可选链，避免访问`null` 或 `undefined`	`user?.address?.city` → `undefined`
`? :`	三元运算符，根据条件返回不同值	`age >= 18 ? "成年人" : "未成年人"`

逻辑运算符是 JavaScript 中处理条件逻辑的重要工具，合理使用可以提高代码的简洁性和可读性。

将JavaScript代码分解为几行

在 JavaScript 中，将代码合理分解为多行可以显著提升可读性和可维护性。以下是常见的代码分解方法及示例：

1. 语句换行

JavaScript 允许在大多数运算符（如逗号、点号、括号等）后换行，但需注意避免自动分号插入（ASI）导致的意外错误。

示例：长表达式换行

javascript

// 在逗号后换行
const result = calculateValue(
    param1,
    param2,
    param3
);

// 在运算符后换行
const total = value1 + value2 + 
              value3 + value4;

2. 多行字符串

使用模板字符串（``）或字符串拼接（+）实现多行文本。

示例：

javascript

// 模板字符串
const message = `Hello, 
Welcome to JavaScript!`;

// 字符串拼接（旧版浏览器兼容）
const html = '<div>' +
             '<p>Content</p>' +
             '</div>';

3. 对象和数组的多行定义

对象和数组的字面量可以分解为多行，保持一致的缩进和逗号。

示例：

javascript

// 对象
const user = {
    name: "Alice",
    age: 25,
    email: "alice@example.com"
};

// 数组
const numbers = [
    1, 
    2, 
    3
];

4. 函数和方法链

将链式调用（如数组方法、Promise 链）分解为多行。

示例：

javascript

// 数组方法链
const filteredData = data
    .filter(item => item.active)
    .map(item => item.value)
    .reduce((sum, val) => sum + val, 0);

// Promise 链
fetch(url)
    .then(response => response.json())
    .then(data => processData(data))
    .catch(error => console.error(error));

5. 条件语句和循环

将复杂的条件或循环体分解为多行，增强可读性。

示例：

javascript

// 多行条件
if (
    condition1 &&
    condition2 &&
    condition3
) {
    // 执行逻辑
}

// 多行循环
for (
    let i = 0; 
    i < array.length; 
    i++
) {
    console.log(array[i]);
}

6. 解构赋值

将解构赋值分解为多行，尤其是处理复杂对象时。

示例：

javascript

const {
    name,
    age,
    address: { city, country }
} = user;

7. 函数参数列表

当函数参数较多时，将参数列表分解为多行。

示例：

javascript

function sendRequest(
    url,
    method = "GET",
    headers = {},
    body = null
) {
    // 逻辑代码
}

8. 使用工具自动格式化

借助工具（如 Prettier、ESLint）自动格式化代码，确保一致的换行风格。

示例配置（Prettier）：

json

// .prettierrc
{
    "printWidth": 80,  // 超过 80 字符自动换行
    "trailingComma": "all",  // 多行末尾逗号
    "arrowParens": "avoid"   // 箭头函数单参数省略括号
}

注意事项

分号使用：换行时需注意自动分号插入（ASI）的陷阱。

javascript

// 错误示例（ASI 插入分号导致意外行为）
const result = value1 + value2
[value3, value4].forEach(console.log); // 被解析为 value2[value3, ...]

修正：

javascript

const result = value1 + value2;
[value3, value4].forEach(console.log);

运算符换行：运算符留在行尾，而非行首。

javascript

// 正确
const total = value1 + 
              value2;

// 错误（可能引发解析问题）
const total = value1 
              + value2;

总结

通过合理分解代码行，可以显著提升代码的可读性。关键原则：

在逗号、运算符后换行。
保持一致的缩进（通常 2 或 4 空格）。
使用工具（如 Prettier）自动化格式化。

JS相关知识5.0 ​

DOM节点类型列举 ​

为什么不建议在JavaScript中使用innerHTML ​

如何在不支持JavaScript的旧浏览器中隐藏JavaScript代码 ​

JavaScript中读取文件的方法 ​

JavaScript语句的基本规范 ​

不同浏览器关于JavaScript兼容的常见问题 ​

JavaScript常用逻辑运算符 ​

将JavaScript代码分解为几行 ​

JS相关知识5.0

DOM节点类型列举

为什么不建议在JavaScript中使用innerHTML

如何在不支持JavaScript的旧浏览器中隐藏JavaScript代码

JavaScript中读取文件的方法

JavaScript语句的基本规范

不同浏览器关于JavaScript兼容的常见问题

JavaScript常用逻辑运算符

将JavaScript代码分解为几行