人们不喜欢使用速度慢的应用程序。初始加载时间对网络应用程序和网站来说至关重要。

如果应用程序的加载时间超过 3 秒，就会被视为速度缓慢，可能导致用户离开应用程序或网站。

Next.js 是一个基于 React 的框架，可以用来构建可伸缩、性能良好且速度快的网络应用程序和网站。随着 React 服务器组件 在 Next.js 应用程序路由版本中的引入，开发人员有了一个新的心智模型来“建立服务器组件的开发思维模式”。它解决了 SEO 问题，帮助创建 零打包体积（zero bundle size） 的 React 组件，最终实现 UI 组件的更快加载。

但你的应用程序可能并不总是关于服务端组件。你可能还需要使用客户端组件。此外，你可能希望将它们作为应用程序初始加载的一部分或按需加载（比如点击按钮时）。

在浏览器中加载客户端组件包括将组件代码下载到浏览器、下载所有导入到该客户端组件中的库和其他组件，以及 React 为确保你的组件正常工作而处理的一些额外事项。

根据用户的互联网连接和其他网络因素，整个客户端组件的加载可能需要一段时间，这可能会阻止用户更快地使用应用程序。

这就是 懒加载 技术可以派上用场的地方。它们可以帮助你避免在浏览器上单体加载客户端组件。

在本文中，我们将讨论在 Next.js 中用于客户端组件加载优化的几种懒加载技术。我们还会讨论一些你需要知道的边缘情况。

如果你也喜欢通过视频内容学习，本文还提供了视频教程：🙂

在我们开始之前，有几件事需要告诉你：

• 我们将编写大量代码来构建一个演示懒加载技术的应用程序。你可以从这个 GitHub 存储库找到所有源代码：https://github.com/tapascript/nextjs-lazy-load。但我强烈建议你在我们进行的过程中自己编写代码，并仅将存储库作为参考。
• 你也可以通过 Netlify 上的公开部署 访问应用程序。

让我们开始吧 🚀。哦对了，如果你是汤姆和杰瑞的卡通迷，你会更喜欢这篇文章！

目录

• 什么是懒加载
• Next.js 中的懒加载技术
• 使用 dynamic import 和 next/dynamic 进行懒加载
• 使用 React.lazy() 和 Suspense 进行懒加载
• 如何懒加载命名导出的组件
• 懒加载你的服务端组件
• 我们应该懒加载 Next.js 中的所有客户端组件吗
• 接下来是什么

什么是懒加载

在现代 Web 应用程序开发中，我们不会将所有逻辑编写到一个 JavaScript/TypeScript 文件中，或将所有样式编写到一个巨大的 CSS 文件中。而是将它们在源代码级别拆分，创建逻辑模块、业务逻辑、展示组件和样式相关文件。这帮助我们更好地组织代码。

然后我们使用一种称为打包器的工具，它在应用程序开发过程的构建阶段启动。它为我们的脚本和样式创建包。一些著名的打包器包括 Webpack、Rollup 和 Parcel 等。

打包器从源代码创建包

现在，由于我们有了包，如果尝试将它们一起加载到浏览器中，我们会遇到一些缓慢。这是因为需要将完整的包加载到浏览器中，用户界面才能正常工作。

加载大量包会导致加载体验差

因此，现代 Web 开发库和工具系统允许我们将包分块加载，而不是等待大量包加载到浏览器中。

我们可能希望立即加载一些块，因为用户可能会在应用程序加载时更早需要它们。与此同时，我们可能希望等待加载网页的某些部分，直到它们真正需要时。

拆分成块并加载所需的部分

这种等待加载网页或应用程序部分的机制，并仅在绝对必要时加载它们，被称为 懒加载。懒加载的概念并不是 React 或 Next.js 特有的。这是一种性能优化技术，你可以使用各种库和框架来实现。

Next.js 中的懒加载技术用于减少一个路径所需的 JavaScript 量。这有助于提高应用程序的初始加载性能。我们可以推迟加载客户端组件和导入的库，直到它们真正需要时。

我们可以通过两种方式在 Next.js 中实现懒加载技术：

• 使用 next/dynamic 包的动态导入。
• 使用 React.lazy() 和 Suspense 的组合。

让我们通过代码示例来理解这些技术。

使用 dynamic import 和 next/dynamic 实现懒加载

next/dynamic 是 ReactJS 中的 React.lazy() 和 Suspense 的组合。使用 next/dynamic 包进行动态导入是实现 Next.js 中懒加载的首选方法。

为了演示这一点，我们首先用以下命令创建一个 Next.js 应用：

npx create-next-app@latest

您可以使用以下命令在本地启动应用：

## 使用 npm
npm run dev

## 使用 yarn
yarn dev

## 或者使用 pnpm, bun，您喜欢的都可以！

现在在 app/ 目录下创建一个名为 components 的文件夹。我们将在这个组件文件夹下创建所有的组件。现在，在 app/components/ 下创建一个名为 tom 的文件夹。最后，在 app/components/tom/ 目录下创建一个名为 tom.jsx 的 React 组件，代码如下：

// tom.jsx

const LazyTom = () => {
  return (
    <div className="flex flex-col">
      <h1 className="text-3xl my-2">The Lazy Tom</h1>
      <p className="text-xl my-1">
        Tom, named &quot;Jasper&quot; in his debut appearance, is a gray and white
        domestic shorthair cat 🐈. &quot;Tom&quot; is a generic name for a male cat. He is
        usually but not always, portrayed as living a comfortable, or even
        pampered life. Tom is no match for Jerry&apos;s wits.
      </p>
      <p className="text-xl my-1">
        Although cats typically chase mice to eat them, it is quite rare for Tom
        to actually try to eat Jerry. He tries to hurt or compete with him just
        to taunt Jerry, even as revenge, or to obtain a reward from a human,
        including his owner(s)/master(s), for catching Jerry, or for generally
        doing his job well as a house cat. By the final &quot;fade-out&quot; of each
        cartoon, Jerry usually gets the best of Tom.
      </p>
    </div>
  );
};

export default LazyTom;

解释上述代码：

• 我们创建了一个名为 LazyTom 的 ReactJS 组件。
• 这是一个简单的展示组件，包含一个标题和几段关于著名的 Tom & Jerry 动画片中的猫 Tom 的描述。
• 最后，我们默认导出了该组件以便在其他地方导入。

现在，在 app/components/tom/ 目录下创建另一个名为 tom-story.jsx 的文件，代码如下：

// tom-story.jsx

"use client";

import { useState } from "react";
import dynamic from "next/dynamic";

const LazyTom = dynamic(() => import("./tom"), {
    loading: () => <h1>Loading Tom&apos;s Story...</h1>,
});

function TomStory() {
    const [shown, setShown] = useState(false);

    return (
        <div className="flex flex-col m-8 w-[300px]">
            <h2 className="text-xl my-1">Demonstrating <strong>dynamic</strong></h2>
            <button
                className="bg-blue-600 text-white rounded p-1"
                onClick={() => setShown(!shown)}
            >
                Load 🐈 Tom&apos;s Story
            </button>

            {shown && <LazyTom />}
        </div>
    );
}

export default TomStory;

以上代码实现了懒加载的主要部分：

• 我们创建了一个名为 TomStory 的客户端组件，并使用 "use client" 指令。
• 首先，我们导入了用于管理切换状态的 useState 钩子，以及用于懒加载我们之前创建的组件的 dynamic 函数。
• dynamic 函数接受一个返回导入组件的函数作为参数。你还可以通过提供一个可选的配置对象来配置自定义加载消息。
• dynamic() 函数返回懒加载的组件实例，即 LazyTom（可以是任何名称）。但这个组件尚未加载。
• 在 JSX 中，我们有一个切换按钮用于显示和隐藏 LazyTom 组件。请注意，该组件将在首次点击按钮时懒加载到用户浏览器中。之后，如果您再次隐藏和显示它，LazyTom 组件将不会重新加载，除非我们硬刷新浏览器或清除浏览器缓存。
• 最后，我们默认导出了 TomStory 组件。

现在我们需要测试它。为此，打开 app/ 目录下的 page.js 文件，并用以下代码替换内容：

import TomStory from "./components/tom/tom-story";

export default function Home() {
  return (
    <div className="flex flex-wrap justify-center ">
      <TomStory />
    </div>
  );
}

这是一个简单的 ReactJS 组件，导入了 TomStory 组件并在其 JSX 中使用它。现在打开您的浏览器窗口。打开浏览器的开发者工具并打开 网络 选项卡。确保选中 全部 过滤器。

LazyTom组件从 tom.jsx 文件还没有被下载，因为我们还没有点击 加载 Tom 的故事 按钮。

按钮来懒加载 Tom 的故事

现在，点击按钮。你应该会看到一个加载信息，然后组件会加载 Tom 的故事。你可以在 Network 选项卡中看到 tom.jsx 组件被列出，并且页面上也会渲染出 Tom 的故事。

现在 Tom 的故事已被懒加载

现在你已经体验了 next/dynamic 的 dynamic 函数如何帮助我们懒加载组件，让我们开始使用 React.lazy() 和 Suspense 的另一种技术。

使用 React.lazy() 和 Suspense 懒加载

为展示此技术，让我们从 Jerry 的故事开始，这是我最喜欢的《猫和老鼠》卡通角色。

首先，我们将在 app/components/ 目录下创建一个名为 jerry 的文件夹。现在，在 app/components/jerry/ 目录下创建一个名为 jerry.jsx 的文件，并添加以下代码：

// jerry.jsx

const LazyJerry = () => {
  return (
    <div className="flex flex-col justify-center">
      <h1 className="text-3xl my-2">The Lazy Jerry</h1>
      <p className="text-xl my-1">
        Jerry 🐀, whose name is not explicitly mentioned in his debut appearance,
        is a small, brown house mouse who always lives in close proximity to
        Tom. Despite being very energetic, determined and much larger, Tom is no
        match for Jerry&apos;s wits. Jerry possesses surprising strength for his
        size, approximately the equivalent of Tom&apos;s, lifting items such as
        anvils with relative ease and withstanding considerable impacts.
      </p>
      <p className="text-xl my-1">
        Although cats typically chase mice to eat them, it is quite rare for Tom
        to actually try to eat Jerry. He tries to hurt or compete with him just
        to taunt Jerry, even as revenge, or to obtain a reward from a human,
        including his owner(s)/master(s), for catching Jerry, or for generally
        doing his job well as a house cat. By the final &quot;fade-out&quot; of each
        cartoon, Jerry usually gets the best of Tom.
      </p>
    </div>
  );
};

export default LazyJerry;

jerry.jsx 的内容结构上与 tom.jsx 类似。这里我们发布了 Jerry 的故事，而不是 Tom 的，并默认导出了这个组件。

像上次一样，我们来创建一个 jerry-story.jsx 文件来展示 Jerry 的故事懒加载。将该文件创建在 app/components/jerry/ 目录下，添加以下代码：

// jerry-story.jsx

"use client";

import React, { useState, Suspense } from "react";

const LazyJerry = React.lazy(() => import('./jerry'));

function JerryStory() {
    const [shown, setShown] = useState(false);

    return (
        <div className="flex flex-col m-8 w-[300px]">
            <h2 className="text-xl my-1"> 演示 <strong>React.lazy()</strong></h2>
            <button
                className="bg-pink-600 text-white rounded p-1"
                onClick={() => setShown(!shown)}
            >
                加载 🐀 Jerry 的故事
            </button>

            {shown && <Suspense fallback={<h1>加载 Jerry 的故事</h1>}>
                <LazyJerry />
            </Suspense>}
        </div>
    );
}

export default JerryStory;

这里我们也有一个客户端组件，我们将使用 React 的 lazy() 方法和 Suspense，所以我们导入了它们。像上次的 dynamic() 函数一样，lazy() 函数也需要一个返回懒加载组件的函数作为参数。我们还提供了要加载的组件的相对路径。

注意，用 dynamic() 我们可以将加载信息作为函数的一部分进行定制。而用 lazy()，我们将在 Suspense 的 fallback 中进行处理。

Suspense 在等待数据加载时会使用 fallback。如果你想深入了解 ReactJS 的 Suspense 和 Error Boundary，可以查看这个视频教程。

在这里，由于我们的 LazyJerry 组件是懒加载的，我们提供了一个 fallback 信息，在组件代码成功下载并渲染到浏览器之前显示一个加载信息。

{shown && 
    <Suspense fallback={<h1>加载 Jerry 的故事</h1>}>
                <LazyJerry />
    </Suspense>
}

此外，正如你所看到的，我们在第一次点击按钮时加载组件。这里组件不会在每次点击按钮时重新加载，除非我们刷新浏览器或清除浏览器缓存。

现在通过将其导入 page.js 文件并将组件添加到 JSX 中来进行测试。

// page.js

import TomStory from "./components/tom/tom-story";
import JerryStory from "./components/jerry/jerry-story"; 

export default function Home() {
  return (
    <div className="flex flex-wrap justify-center ">
      <TomStory />
      <JerryStory />
    </div>
  );
}

懒加载 Jerry 故事的按钮

现在，点击按钮。你会看到组件被加载，并且你可以在网络选项卡的列表中看到它。你应该能够看到作为懒加载组件一部分渲染的 Jerry 的故事。

Jerry 的故事已经被懒加载

如何懒加载命名导出的组件

到目前为止，我们已经用两种技术导入了用 default export 导出的组件，并且懒加载了它。在 JavaScript（以及在 React 中），你可以通过两种不同的方式导入和导出模块：

• 使用 default 关键字。在这种情况下，导出的模块可以用任何名称导入。如果你想从一个模块中只导出一个功能，你会使用这种方式。
• 不使用 default 关键字，这被称为 命名导出。在这种情况下，你必须在导出和导入时保持相同的模块名称。在导入时，还需要将模块名包含在大括号（{...}）中。如果你想从一个模块中导出多个功能，你会使用这种方式。

如果你想深入了解 JavaScript 模块以及它们是如何工作的，我建议你浏览一下 freeCodeCamp YouTube 频道上发布的这门速成课。

为了演示 命名导出 组件的懒加载，让我们创建另一个简单的展示用 React 组件。这次我们将使用 Tom & Jerry 动画中的愤怒但可爱的狗 Spike。

在 app/components/ 目录下创建一个名为 spike 的文件夹。现在，在 app/components/spike/ 目录下创建一个名为 spike.jsx 的文件，并添加以下代码：

// spike.jsx

export const LazySpike = () => {
  return (
    <div className="flex flex-col">
      <h1 className="text-3xl my-2">The Lazy Spike</h1>
      <p className="text-xl my-1">
        In his attempts to catch Jerry, Tom often has to deal with Spike 🦮, known
        as &quot;Killer&quot; and &quot;Butch&quot; in some shorts, an angry, vicious but easily
        duped bulldog who tries to attack Tom for bothering him or his son Tyke
        while trying to get Jerry. Originally, Spike was unnamed and mute, aside
        from howls and biting noises as well as attacking indiscriminately, not
        caring whether it was Tom or Jerry though usually attacking Tom.
      </p>
      <p className="text-xl my-1">
      In
        later cartoons, Spike spoke often, using a voice and expressions,
        performed by Billy Bletcher and later Daws Butler, modeled after
        comedian Jimmy Durante. Spike&apos;s coat has altered throughout the years
        between gray and creamy tan. The addition of Spike&apos;s son Tyke in the
        late 1940s led to both a slight softening of Spike&apos;s character and a
        short-lived spin-off theatrical series called Spike and Tyke.
      </p>
    </div>
  );
};

同样，这个组件在结构上与之前看到的 tom.jsx 和 jerry.jsx 组件完全相同，但有两个主要区别：

1. 这里，我们没有使用默认关键词导出组件，因此它是一个 命名导出。
2. 我们在讲述的是狗，Spike。

现在，我们需要处理一个命名导出组件的懒加载，并且这与默认导出组件略有不同。

在 app/components/spike/ 目录下创建一个名为 spike-story.jsx 的文件，并添加以下代码：

// spike-story.jsx

"use client";

import { useState } from "react";
import dynamic from "next/dynamic";

const LazySpike = dynamic(() => import("./spike").then((mod) => mod.LazySpike), {
    loading: () => <h1>Loading Spike&apos;s Story...</h1>,
});

function SpikeStory() {
    const [shown, setShown] = useState(false);

    return (
        <div className="flex flex-col m-8 w-[300px]">
            <h2 className="text-xl my-1">Demonstrating <strong>Named Export</strong></h2>
            <button
                className="bg-slate-600 text-white rounded p-1"
                onClick={() => setShown(!shown)}
            >
                Load 🦮 Spike&apos;s Story
            </button>

            {shown && <LazySpike />}
        </div>
    );
}

export default SpikeStory;

像 tom-story 一样，我们使用了 next/dynamic 的动态导入。但是让我们来深入分析一下上面的代码块：

const LazySpike = dynamic(() => import("./spike").then((mod) => mod.LazySpike), {
    loading: () => <h1>加载 Spike 的故事...</h1>,
});

你会注意到的变化是我们使用 .then() 处理函数明确地从 import("./spike") 函数中解析了 promise。我们首先获取模块，然后通过其实际名称选择导出的组件——在这种情况下是 LazySpike。其余的事情与 tom-story 中的情况保持不变。

现在，为了测试它，再次将组件导入到 page.js 文件中，并像前两次那样在 JSX 中使用它。

// page.js

import TomStory from "./components/tom/tom-story";
import JerryStory from "./components/jerry/jerry-story";
import SpikeStory from "./components/spike/spike-story"; 

那里 – 你应该会在浏览器上看到新组件，并带有一个按钮，从尚未加载的 spike.jsx 文件中加载 Spike 的故事。

Lazy 加载 Spike 的故事的按钮

点击按钮将加载文件到浏览器，并渲染组件来展示 Spike 的故事。

Spike 的故事已懒加载

下面你可以看到所有三个组件侧并肩展示三种不同的技术和使用案例。你可以一起测试它们。下面的图片展示了两个组件并行地懒加载，而另一个组件已经被懒加载了。

并行懒加载多个组件

这是另一个案例，通过点击各自的按钮，所有三个组件都按需懒加载了。

所有的故事都被懒加载

懒加载你的服务器组件

我们谈到了客户端组件的懒加载技术。我们是否也可以对服务器组件使用相同的技术呢？其实你可以，但不需要，因为服务器组件已经是 代码分割 的，加载方面已经由 Next.js 处理好了。如果你尝试这样做也不会出现任何类型的错误，但这是不必要的。

如果你动态导入一个拥有一个或多个客户端组件作为子组件的服务器组件，那些客户端组件将被懒加载。但对于（父）服务器组件本身不会有任何影响。

下面是一个包含两个客户端组件作为子组件的服务器组件的示例：

// server-comp.jsx

import ComponentA from "./a-client-comp";
import ComponentB from "./b-client-comp";

import React from 'react'

const AServerComp = () => {
  return (
    <div className="flex flex-col m-8 w-[300px]">
      <ComponentA />
      <ComponentB />
    </div>
  )
}

export default AServerComp

现在，我们将动态导入服务器组件到 page.js 文件中并在 JSX 中使用它。动态导入服务器组件的子客户端组件将被懒加载，但服务器组件本身不会。

// page.js

import dynamic from "next/dynamic";

import TomStory from "./components/tom/tom-story";
import JerryStory from "./components/jerry/jerry-story";
import SpikeStory from "./components/spike/spike-story";

const AServerComp = dynamic(() => import('./components/server-comps/server-comp'), {
  loading: () => <h1>Loading Through Server Component...</h1>,
})


export default function Home() {
  return (
    <div className="flex flex-wrap justify-center ">
      <TomStory />
      <JerryStory />
      <SpikeStory />

      <AServerComp />
    </div>
  );
}

我们应该在 Next.js 中懒加载所有客户端组件吗

当我第一次开始学习懒加载时，我也有这个问题。现在我对这项技术有了更多的了解，这是我的看法：

你并不需要懒加载所有的客户端组件。优化是很好的，但过度优化可能会有反作用。你需要识别哪些地方需要这些优化。

• 你的客户端组件是否真的很笨重？
• 你是否不必要地把很多东西放进一个组件，你应该拆分并重构它吗？
• 你是否在你的客户端组件中导入了沉重的库？
• 你选择了 tree-shaking 吗？
• 你是否可以按路由标记笨重的客户端组件，并且没有问题在该路由的页面初始加载时不加载它们中的一些或全部？

如你所见，这些是在你开始优化前需要问的几个有意义的问题。一旦你有了答案，并决定需要懒加载，那么你可以实现你从这篇文章中学到的技术。

接下来是什么

暂时就这些了。你喜欢阅读这篇文章并学到了一些新东西吗？如果是这样，我很想知道内容是否对你有帮助。以下是我的社交媒体账号。

接下来，如果你愿意学习 Next.js 及其生态系统如 Next-Auth(V5) 的基本概念和项目，我有个好消息给你：你可以在我的 YouTube 频道上查看这个播放列表，目前有 20+ 个视频教程和超过 11 小时的精彩内容，免费提供。我希望你也喜欢这些内容。

欢迎和我联系。

• 订阅我的 YouTube 频道。
• 在 X (Twitter) 或者 LinkedIn 上关注我，不要错过每日技能提升的推文。
• 查看并关注我在 GitHub 上的开源作品。
• 我定期在我的 GreenRoots 博客 上发布有意义的文章，你可能也会发现它们对你有帮助。

下篇文章见。不管怎样，请照顾好自己，并保持学习。

试想一下，一个房间里衣服、书籍和各种物品散落得到处都是。在这样的凌乱环境里，你觉得要找到一样东西会不会很困难呢？

现在来想一想，当我们写出乱糟糟的代码时，它是不是也会使人感到困惑，甚至比凌乱的房间还要让人头疼呢！

相反，简洁的代码就像一个井然有序的房间：你可以轻松找到所需的内容，和快速理解正在发生的事情，使你更快地完成工作。

现在，我们来瞧瞧这个图表。该图表呈现并对照了两种不同的代码编写方式，以及它们对添加更多代码行所需要时间的影响：

1. ⚠️ 仓促 & 混乱的代码（红线）：这种代码是在没有规划和整理的情况下匆忙写出的代码。起初，这种方式看起来高效，但随着代码行数增加，代码结构变得越来越难以理解和维护。因此，随着时间推移，每添加一行代码所需的时间都会越来越长。

2. ⚡ 谨慎 & 整洁的代码（蓝线）：这种代码是经过精心规划和整理的，使其更容易理解和修改。虽然一开始可能会稍微慢一些，但随着代码的增长，它依然保持清晰易读，因此添加新代码不会变得越来越困难。

简单来说，编写整洁的代码一开始可能会缓慢一些，但从长远来看，它能节省后续所耗费的时间，让工作更轻松。同时，还能提高软件的可靠性，打造更优质的产品。

编写整洁的代码是专业开发人员培养的一种良好习惯，体现了专业人员对质量的承诺和坚定的职业操守。在本文中，我将带领你了解一些保持代码整洁的最佳实践。

我们将涵盖的内容

1. 使用有意义的名称

2. 遵循单一责任原则 (SRP)

3. 避免不必要的注释

4. 提高代码可读性

5. 编写单元测试

6. 谨慎处理依赖项

7. 合理组织项目结构

8. 保持一致的代码格式

9. 避免硬编码

10. 限制函数长度

11. 总结

编写整洁代码的 10 个实用技巧

为了帮助你开启编写整洁代码的旅程，这里为你提供了 10 个实用技巧，可以帮助你保持代码的可读性、条理性和高效性。

1. 使用有意义的名称

在为变量、函数和类命名时，选择能清晰描述其用途的名称。

不要简单地命名变量为 b，试着用 numberOfUsers这样的名称。这样，任何阅读你的代码的人都能毫不费力地理解其用途，而无需额外注释。一个有意义的名称可以减少猜测，避免产生混淆。

示例：

// 正确的例子
let numberOfUsers = 5; // 清晰易懂

// 错误的示范
let b = 5; // 含糊不清

💡 命名技巧

• 变量：使用描述数据的名词，例如 userAge 或 totalAmount。

• 函数：使用动词，如 calculateTotal() 或 fetchUserData()。

• 类：使用单数名词来表示其含义，如 User 或 Order 来表示它们的类型。

// 变量：描述其存储的数据
let userAge = 25;

// 函数：使用动词来描述其功能
function calculateTotal(price, quantity) {
    return price * quantity;
}

// 类：单数名词，表示一种对象类型
class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

2. 遵循单一责任原则（SRP）

单一职责原则意味着每个函数或方法都应该只负责一项特定的任务。

这样可以让你的函数保持简洁、专注，从而提高代码的可读性，有便于后续的测试和维护。

想象一下一个工具箱，其中每个工具都有其独特的用途——干净的代码函数也应如此运作。

例如，如果你有一个名为 calculateTotal 的函数，它就只应该负责计算总和。如果你给它添加额外的任务，可能会导致代码变得混乱，难以维护。

下面是一个示范例子，展示了为什么保持函数的单一职责很重要：

假定您期望计算一个总和并返回一个带有额外信息的对象，诸如谁进行了计算，以及何时计算的。与其直接将这些内容添加到 calculateTotal 中，不如我们创建第二个函数来处理额外的信息。

1. 优良范例（任务分离）

    // 此函数仅用于计算总和
    function calculateTotal(a, b) {
        return a + b;
    }
   
    // 此函数用于创建包含额外信息的对象
    function createCalculationRecord(a, b, user) {
        let sum = calculateTotal(a, b); // 调用上面的计算总和函数
        return {
            user: user,
            total: sum,
            timestamp: new Date()
        };
    }
   
    let record = createCalculationRecord(5, 10, "Shahan");
    console.log(record);
   

👍 为什么这样更好：这样使每个函数都有一个明确且集中的任务。其中 calculateTotal 只需负责数学运算，而 createCalculationRecord 则负责添加额外的细节。如果你想更改总数的计算方式，只需更新 calculateTotal函数；如果你想改变记录格式，只需更新 createCalculationRecord的函数。

2. 错误示例（在一个函数中混合多个任务）

    // 此函数在一个步骤中同时计算总和创建对象
    function calculateTotalAndReturnRecord(a, b, user) {
        let sum = a + b;
        return {
            user: user,
            total: sum,
            timestamp: new Date()
        };
    }
   
    let record = calculateTotalAndReturnRecord(5, 10, "Shahan");
    console.log(record);
   

👎 为什么这样不好：函数名称 calculateTotalAndReturnRecord 表明它试图完成多项任务。如果你只想使用计算部分，就无法在不涉及记录部分的情况下复用这个函数。此外，单独更新和测试每一项任务也会更困难。

3. 避免不必要的注释

一个良好的代码应该能够具有自身的解释性，而不需要过多的注释来解释。而专注于编写清晰且易于理解的代码，便使其本身就能表达出意图。

注释在解释复杂逻辑或特殊实现时很有用，但同时过多的注释会使代码显得杂乱无章，难以阅读和理解。

💬 什么时候使用注释：

• 用于说明为什么要以特定方式进行操作。

• 在处理复杂的算法或计算时。

• 添加有关潜在局限性的注释。

示例：

// 命名清晰，无需注释
let userAge = 25;

// 命名不清晰，需要注释
let a; // 用户的年龄

4. 提高代码可读性

可读性良好的代码使用缩进、换行和空格来保持整洁和有序。

可以把它想象成写一篇故事文章：段落的划分能让阅读变得更轻松，同样，在代码中，合理的换行可以起到相同的作用，使其更易于理解。

示例：

// 优良范例的代码结构
if (isLoggedIn) {
    console.log("欢迎回来!");
} else {
    console.log("请登入账号。");
}

// 错误示例的代码结构
if(isLoggedIn){console.log("欢迎回来!");}else{console.log("请登入账号。");}

在 VS Code 中，Prettier 和 Black 是常见的代码格式化工具，可以自动为多种编程语言应用整洁的代码风格。

PyCharm 和 IntelliJ 具备强大的内置格式化功能，并支持自定义规则，例如 Python 中的 PEP 8 代码风格指南和其他标准规范。这些工具可以帮助项目保持一致的代码格式，减少手动调整的工作量，从而提高代码的可读性和维护性。

5. 编写单元测试

单元测试有助于确保代码的每个部分按预期运行。

通过测试小的、独立的部分（比如函数），你可以尽早发现错误，并防止其蔓延到代码的其他部分。

具体来说，单元测试实际上是对你代码的每个部分所进行的小型质量检查，从而确保它们按预期来工作。

🍎 现实中的案例：

让我们来看一下，如何测试具有多个方法的复杂 JavaScript 对象，以 Calculator 类为例。

这种方法将帮助你明白，为何要让每个方法专注于一项任务，并通过单元测试确保每个方法都能正确运行。

这里有一个 Calculator 类，其中包含执行基本算术运算的方法：加法、减法、乘法和除法。

class Calculator {
    constructor() {
        this.result = 0;
    }

    add(a, b) {
        return a + b;
    }

    subtract(a, b) {
        return a - b;
    }

    multiply(a, b) {
        return a * b;
    }

    divide(a, b) {
        if (b === 0) throw new Error("无法除以零");
        return a / b;
    }
}

如你所见，每个方法都执行一个特定的操作。其中，divide 方法有额外的逻辑来处理除以零的情况，否则这会导致错误。

现在，我们将编写单元测试来验证每个方法是否按预期工作。🔬

🧪 为每个方法编写单元测试

为了测试我们的 Calculator 类，我们可以编写单元测试，涵盖正常情况和边缘情况。以下是如何为每个方法设置测试的示例：

// 初始化 Calculator 实例
const calculator = new Calculator();

// 测试 add 方法
console.assert(calculator.add(2, 3) === 5, '测试失败: 2 + 3 应该等于 5');
console.assert(calculator.add(-1, 1) === 0, '测试失败: -1 + 1 应该等于 0');

// 测试 subtract 方法
console.assert(calculator.subtract(5, 3) === 2, '测试失败: 5 - 3 应该等于 2');
console.assert(calculator.subtract(0, 0) === 0, '测试失败: 0 - 0 应该等于 0');

// 测试 multiply 方法
console.assert(calculator.multiply(2, 3) === 6, '测试失败: 2 * 3 应该等于 6');
console.assert(calculator.multiply(-1, 2) === -2, '测试失败: -1 * 2 应该等于 -2');

// 测试 divide 方法
console.assert(calculator.divide(6, 3) === 2, '测试失败: 6 / 3 应该等于 2');
try {
    calculator.divide(1, 0);
    console.assert(false, '测试失败: 除以零应该抛出错误');
} catch (e) {
    console.assert(e.message === "无法除以零", '测试失败: 除以零的错误信息不正确');
}

🫧 测试解释：

1. 加法（add 方法）：我们测试 add(2, 3) 返回 5，以及 add(-1, 1) 返回 0。如果这些测试通过，就说明我们的加法逻辑是正确的。

2. 减法（subtract 方法）：我们验证 subtract(5, 3) 返回 2，以及 subtract(0, 0) 返回 0。这些检查确保减法计算准确无误。

3. 乘法（multiply 方法）：我们测试乘法函数，包括正数和负数的情况，确保 multiply(2, 3) 返回 6，以及 multiply(-1, 2) 返回 -2。

4. 除法（divide 方法）：我们验证 6 除以 3 返回 2。对于除以零的情况，我们使用 try...catch 块来确保方法抛出正确的错误消息。这可以验证该方法是否能正确处理错误情况。

你可以看到，如果任何方法失败，测试都会生成清晰的错误消息，使我们能够迅速识别并修复问题。单独测试方法有助于我们在项目发展过程中尽早发现错误，并保持可靠、整洁的代码。

6. 谨慎处理依赖项

依赖项，是指你的代码所依赖的外部软件组件。🔌

想象一下，您正在构建一个能发送电子邮件的网络应用程序。与其自己编写邮件发送功能，你可以使用像 Nodemailer 这样的外部库。在这种情况下，Nodemailer就是一个依赖项——你的应用依赖它来处理邮件发送功能。

示例：

const nodemailer = require('nodemailer');

function sendEmail(to, subject, message) {
    const transporter = nodemailer.createTransport({
        service: 'gmail',
        auth: {
            user: 'your-email@gmail.com',
            pass: 'your-email-password'
        }
    });

    const mailOptions = {
        from: 'your-email@gmail.com',
        to: to,
        subject: subject,
        text: message
    };

    return transporter.sendMail(mailOptions);
}

在这段代码中，nodemailer 被引入并用于创建一个邮件发送的传输器。如果没有它，你将不得不从零编写整个邮件发送功能，这将非常复杂且耗时。通过使用 Nodemailer 作为依赖项，你的应用可以轻松实现邮件发送功能。

尽管依赖项非常有用，但过度依赖外部软件或库可能会带来问题。因此，只有当它们能简化你的工作或提供重要功能时，才应该使用依赖项。

有效管理依赖是编写简洁代码的关键。以下是一些提示：

• 限制依赖项：仅包含对项目真正必要的库或模块，避免不必要的依赖项。

• 保持版本更新：使用最新版本的库，以减少安全风险。

• 分离核心逻辑：尽可能自己编写核心功能，这样即使未来需要移除某个依赖，也不会影响你代码的正常运行。

让我用之前的 Nodemailer 代码来给你举个例子，说明如何在代码中实现逻辑分离。

你可以创建一个封装函数，将发送电子邮件的细节抽象出来。这样，你就可以更改底层的电子邮件服务或移除对 Nodemailer 的依赖，而不影响到代码的其他部分。

以下是如何组织代码以实现此目的：

const nodemailer = require('nodemailer');

// 用于发送电子邮件的核心函数
function sendEmail(to, subject, message) {
    const transporter = createTransporter();
    const mailOptions = createMailOptions(to, subject, message);
    return transporter.sendMail(mailOptions);
}

// 创建邮件发送器的函数
function createTransporter() {
    return nodemailer.createTransport({
        service: 'gmail',
        auth: {
            user: 'your-email@gmail.com',
            pass: 'your-email-password'
        }
    });
}

// 创建邮件选项的函数
function createMailOptions(to, subject, message) {
    return {
        from: 'your-email@gmail.com',
        to: to,
        subject: subject,
        text: message
    };
}

// 示例用法
sendEmail('recipient@example.com', 'Test Subject', 'Hello, this is a test email.')
    .then(() => {
        console.log('Email sent successfully!');
    })
    .catch((error) => {
        console.error('Error sending email:', error);
    });

🗝️ 关键要点：

1. 核心函数：sendEmail、createTransporter 和 createMailOptions 的函数是相互独立的，这样你就可以修改其中一个而不影响其他函数。

2. 轻松修改：如果您希望在将来切换到其它电子邮件服务，你只需修改 createTransporter 的函数即可。

3. 可维护性：这种结构使你的代码更易于维护和理解。

7. 合理组织项目结构

一个良好的项目结构与代码本身同样重要。

可以这样想，就像整理你的工作空间一样——你需要为每样东西指定位置，这样就能轻松找到它们。对于编码项目，应该为不同的部分创建专门的文件夹，例如 components、utils 和 services等格式。

📂 如何组织你的项目

为了建立一个整洁有序的项目，你应当将代码的不同部分的分类放入指定的文件夹中。以下是一个组织良好的项目结构的简单示例：

myProject # 我的项目
├── src # 资源文件夹
│   ├── components # 组件文件夹
│   ├── services # 服务文件夹
│   ├── utils # 实用工具文件夹
└── tests # 测试文件夹

项目结构解析：

1. myProject（我的项目）：这是你项目的根文件夹。包含与您的应用所有相关的内容。

2. src（资源）：此文件夹包含您项目的所有源代码。您大部分时间都将在这里编码。

3. components（组件）：此子文件夹用于存放可复用的 UI 组件。例如，如果你正在构建网络应用程序，你可能会在这里存放按钮、导航栏、表单等组件的单独文件。每个组件都应有独立的文件，以保持模块化。

   • components 中的示例结构：

    components
    ├── Button.js # 按钮组件文件
    ├── Header.js # 头部导航组件文件
    └── Form.js # 表单组件文件

4. services（服务）：此文件夹用于存放执行特定任务或处理业务逻辑的函数。例如，如果你的应用涉及发送邮件，你可以在这里创建一个专门的文件来管理所有与邮件相关的功能。

   • services 中的示例结构：

    services
    ├── emailService.js # 邮件服务文件
    ├── userService.js # 用户服务文件
    └── productService.js # 产品服务文件

5. utils（实用工具）：在这里，你可以放置一些可以跨项目使用的辅助函数。这些通常包括格式化日期、验证输入或其他不属于特定组件或服务的通用任务。

   • utils 目录内的示例结构：

    utils
    ├── formatDate.js # 格式化日期文件
    ├── validateEmail.js # 验证邮箱格式文件
    └── generateId.js # 生成客户ID号码文件

6. tests（测试）：此文件夹专用于存放测试文件。保持测试的有序排列有助于确保在构建新功能时，你可以轻松地测试它们，而无需在代码库中四处查找相关文件。

   • tests 目录内的示例结构：

    tests
    ├── emailService.test.js # 测试邮件服务的功能
    ├── userService.test.js # 测试用户服务的功能
    └── component.test.js # 测试 UI 组件的功能

📨 真实案例：使用 Nodemailer 进行邮件发送

假设你正在构建一个向用户发送电子邮件的应用程序。你可以按照以下结构组织项目：

myEmailApp # 我的邮件应用程序
├── src # 资源文件夹
│   ├── components # 存放组件的文件夹
│   │   ├── EmailForm.js # 邮件表单组件
│   │   └── SuccessMessage.js # 邮件发送成功消息的组件
│   ├── services # 存放服务组件的文件夹
│   │   └── emailService.js # 处理邮件服务功能的组件
│   ├── utils # 存放工具组件的文件夹
│   │   └── validateEmail.js  # 验证邮箱格式的组件
└── tests # 存放测试组件的文件夹
    ├── emailService.test.js # 测试邮件服务的组件
    └── EmailForm.test.js # 测试邮件表单组件

• EmailForm.js：此组件负责处理发送电子邮件的用户界面，例如收件人、主题和邮件正文的输入字段。

• SuccessMessage.js：这个组件在邮件发送成功后显示一条成功消息。

• emailService.js：该服务包含使用 Nodemailer 发送电子邮件的逻辑，使你的代码保持模块化和清晰。

• validateEmail.js：一个实用的工具函数，用于检查电子邮件地址格式是否正确。

• tests：该文件夹用于编写测试代码，以确保你的电子邮件服务和组件按预期运行。

🍱 良好项目组织的优势

1. 易于导航：查看你的项目的任何人都可以快速了解，在哪里找到特定部分的代码，帮助理解其结构。

2. 更好的协作：如果你与他人合作，清晰的结构可以帮助团队成员明确各自的贡献范围，避免相互干扰。

3. 良好的扩展性：随着项目的发展，保持清晰的结构有助于管理复杂性，并保持代码库的整洁。

4. 提高可维护性：当你需要更新或修复某些内容时，可以快速找到相关文件，从而节省时间并减少错误。

8. 保持一致的代码格式

一致的代码格式 有助于提高可读性，使代码更加清晰、有条理。

为你的项目确立一种编写代码的模式，例如使用两个空格缩进，或者在注释前始终包括一个换行符。

遵循一致的代码格式可以让代码更易读、更易维护，并提升项目的整体质量。

🛠️ 代码格式化工具

• Prettier：基于一套规则自动格式化代码，确保代码风格一致。这里有一个教程，其中讲解如何在 VSCode 中设置和使用 Prettier，从而来帮助提高你的代码的可读性。

• ESLint：用于强制执行编码规范，突出潜在问题。这里有一个教程，其中包含关于为你的项目设置 ESLint 的实用且深入的部分。

9. 避免硬编码

硬编码指的是，直接在代码中嵌入数据值，例如将用户 ID 设置为 123 而不是使用变量。

避免硬编码可以提高代码的复用性，减少手动修改的需求。相反，你应该将值存储在变量、常量或配置文件中，以便更灵活地调整和管理数据。

以下是硬编码可能导致问题的一个场景：：

// 错误示例：硬编码的用户限制
function createUser(name) {
    let numberOfUsers = 100; // 硬编码值
    if (numberOfUsers >= 100) {
        return '用户数量已达上限。';
    }
    // 创建用户的代码
    return '用户已创建。';
}

在这个错误示例中，numberOfUsers 被硬编码为 100。如果您想要更改用户限制，您必须在代码中找到并修改此值。如果这个值在多个地方被重复使用，那么修改起来会变得繁琐且容易出错。

🏗️ 使用常量的优化示例

现在，让我们对代码进行重构，使用常量来替代硬编码：

// 良好示例：使用常量
const MAX_USERS = 100; // 将限制存储在常量中

function createUser(name) {
    let numberOfUsers = getCurrentUserCount(); // 从函数或数据库获取当前计数
    if (numberOfUsers >= MAX_USERS) {
        return '用户数量已达上限。';
    }
    // 创建用户的代码
    return '用户已创建。';
}

// 获取当前用户数量的示例函数
function getCurrentUserCount() {
    // 模拟从数据库获取当前计数
    return 90; // 示例计数
}

🥣 优化示例解析：

1. 使用常量：MAX_USERS 常量被定义在代码顶部。如果未来需要更改最大用户数，只需修改这一处，而不必在代码中四处查找并修改硬编码的值

2. 动态值：getCurrentUserCount() 函数会从数据库或其他数据源中动态获取当前的用户数量。这种方法避免了对数量进行硬编码，便于轻松更改。

3. 可维护性：将值存储在常量中，使你的代码更易于维护。如果业务需求发生变化，并且您需要将用户限制增加到 150，只需将 MAX_USERS 从 100 更改为 150，整个应用程序都会反映出这一更改。

4. 清晰性：为常量使用描述性的名称（如 MAX_USERS）可提高代码的可读性。任何查看您代码的人都能迅速明白这个值所代表的含义。

🤐 何时使用配置文件

在大型应用程序中，你可能还会考虑使用配置文件（如 JSON、YAML 或环境变量）来存储在不同环境（开发、预发布、生产）之间可能会改变的值。

例如，在你的 config.json 文件中，你可以将 maxUsers 硬编码（但请注意，在 config.json 中，建议使用驼峰命名法，以保持格式一致性）：

{
    "maxUsers": 100,
    "emailService": {
        "service": "gmail",
        "user": "your-email@gmail.com",
        "pass": "your-email-password"
    }
}

🪴 在代码中使用配置文件：

const config = require('./config.json');

function createUser(name) {
    let numberOfUsers = getCurrentUserCount(); 
    if (numberOfUsers >= config.maxUsers) {
        return 'User limit reached.';
    }
    // 代码以创建用户
    return 'User created.';
}

10. 限制函数长度

较长的函数难以理解和维护。

虽然没有严格的规定，但通常来说，函数的长度最好控制在 20 到 30 行以内。如果一个函数承担了多个职责或包含过多的步骤，这往往意味着它太长了。需将这些函数拆分成为较小的“辅助”函数，可以使代码更易管理和理解。

下面是一个冗长而复杂的函数示例：

function updateCart(cart, item, discountCode) {
    // 将商品加入购物车
    cart.items.push(item);

    // 计算新的总价
    let total = 0;
    cart.items.forEach(cartItem => {
        total += cartItem.price * cartItem.quantity;
    });

    // 如果有折扣码则应用折扣
    if (discountCode) {
        total = applyDiscount(total, discountCode);
    }

    // 记录交易
    console.log(`Item added: ${item.name}, New total: $${total}`);

    return total;
}

⚠️ 这个函数执行了多个任务：

1. 将商品加入购物车。

2. 计算总价格。

3. 如果有折扣码，则应用折扣。

4. 记录交易信息。

虽然该函数目前看起来可以管理，但如果继续增加任务，它会迅速变得难以调试和维护。

让我们将这个冗长的函数拆分为更小、单一职责的函数：

function updateCart(cart, item, discountCode) {
    addItemToCart(cart, item); 
    let total = calculateTotal(cart);

    if (discountCode) {
        total = applyDiscount(total, discountCode);  
    }

    logTransaction(item, total); 
    return total;  
}

function addItemToCart(cart, item) {
    cart.items.push(item);
}

function calculateTotal(cart) {
    return cart.items.reduce((total, cartItem) => total + cartItem.price * cartItem.quantity, 0);
}

function logTransaction(item, total) {
    console.log(`Item added: ${item.name}, New total: $${total}`);
}

🧩 详细解释：

1. addItemToCart：该函数仅负责将商品添加到购物车。它简单且目标明确，不包含任何额外逻辑。

2. calculateTotal：函数计算购物车内所有商品的总价。这样代码更易读、易理解，如果你未来需要修改计算方式，只需调整这个函数即可。

3. logTransaction：负责记录详细信息。如果你以后需要更改日志内容（例如，添加时间戳），只需修改该函数，而不会影响其他部分。

4. updateCart：作为主函数，它现在更像是一个流程总结——先添加商品，然后计算总价、再应用折扣，最好记录交易结果。这种方式使代码一目了然，更清晰易懂。

📒 让我们总结一下限制函数长度的要点：

1. 🎯 专注于单一任务: 每个函数最好只执行一个任务。如果一个函数同时处理多个任务，不妨考虑将其拆分成更小的函数。。

2. 🩼 使用辅助函数: ：辅助函数是小型且专注的函数，用于执行特定任务并支持主函数的运行。例如，上述示例中的addItemToCart、calculateTotal 和 logTransaction 就是辅助函数。

3. 🪦 使用描述性命名: 函数名称应该能够清楚表达其功能（例如 addItemToCart），这样可以让代码自解释，减少对额外注释的依赖。

整洁代码的最佳实践

现在我们已经介绍了一些重要的技巧，现在让我们来看一下整洁代码背后的核心原则：

1. 🎏 简单性: 始终让代码尽可能简单，避免不必要的复杂度。

2. 🧂 一致性: 保持代码在风格和结构上的统一性，使其更易读和维护。

3. 🌾 清晰性: 代码应该清楚地表达它的功能，无需额外的解释。

4. ⛽ 高效性: 在不牺牲可读性的前提下，编写优化的代码，以提升性能。

这些原则表明，编写代码不仅仅是写代码，更是设计解决方案。整洁代码是一种需要不断练习的技能，所以请保持学习，不断提升自己！

🔌 关于依赖项的说明

与其直接在代码中硬编码依赖项，不如使用包管理工具来管理它们，如 npm（用于 JavaScript）或 pip（用于 Python）这样的包管理器来统一规划它们。这样，你可以轻松更新或移除依赖项，确保代码的灵活性和可维护性。

总结 🏁

编写整洁的代码就像为房子打下坚实的地基。它能让整个项目井然有序，使你在项目扩展时轻松添加新功能或修复问题。

掌握这些技巧后，你可以逐步养成让代码更易读、更易维护的良好习惯，同时让编写代码变得更加高效且愉悦。

建议的下一步 📘

如果你想在六个月内成为后端开发者，可以参考我的后端开发人员路线图。该路线图旨在帮助初学者按照每周目标稳步学习，其中涵盖关键的技能、工具和技术。这个路线图可以让你的学习过程更加有条理、易坚持。

你可以在 𝕏 上关注我，以获取实时更新。

期待我们的下次再见！

模板字面量是 JavaScript 中的一项特性，于 ES6 中引入。它们为在 JavaScript 中处理字符串提供了一种更灵活和可维护的方式。

在本文结束时，你将了解如何使用模板字面量。你将学习语法、优点及一些使用案例。你还将了解一种更强大的特性，叫作标记模板字面量。

目录

• 什么是模板字面量
• 模板字面量与普通字符串的比较
• 模板字面量的一些使用案例
• 标记模板字面量
• 标记模板字面量示例
• 总结

什么是模板字面量

模板字面量是 JavaScript 中的一项特性，它让开发者以一种方便的方式处理字符串。你可以使用双引号 "" 或单引号 '' 表示普通字符串。但使用模板字面量时，你可以使用反引号 `` 来表示字符串。这让你可以在字符串中嵌入变量和表达式。

以下是一个例子：

const website = 'freeCodeCamp'
const message = `Welcome to ${website}`

console.log(message)

message 变量的值是一个模板字面量的例子。它包括用于定义模板字面量的反引号。它还包括用于在字符串中嵌入变量的 ${} 语法。

模板字面量与普通字符串的比较

现在让我们看看模板字面量与普通字符串有何不同，以及使用模板字面量的一些优点。

字符串连接

在引入模板字面量之前，当你想连接字符串时，你必须使用加号 +。

const userName = 'Marie'
const balance = 10

// 使用普通字符串
const str1 = 'Hi ' + userName + ',' + ' your balance is ' + balance + '.'
console.log("Regular string: ", str1)

// 使用模板字面量
const str2 = `Hi ${userName}, your balance is ${balance}.`
console.log("Template literal: ", str2)

注意，使用普通字符串时需要添加许多加号，并且还需要在正确的位置考虑空格。这在处理较长字符串时会难上加难。

在模板字面量的示例中，不需要添加任何加号。你可以将所有内容一起写成一个字符串。使用 ${} 语法可以直接嵌入变量。

多行字符串

处理多行字符串时，模板字面量也能让字符串的处理变得更简单。对于普通字符串，你不得不使用加号 + 和 \n 的组合来表示新行，但模板字面量不需要这些。

const regularString = 
'Hello there! \n' +
'Welcome to our website. \n' +
'How can we help you today?'

const templateLiteral = 
`Hello there!
Welcome to our website.
How can we help you today?`

console.log(regularString)
console.log(templateLiteral)

regularString 和 templateLiteral 变量产生相同的输出。模板字符串会自动识别空格和换行。

可读性和可维护性

模板字面量还使你的代码更具可读性和更容易维护。正如你已经看到的，它们不需要使用加号 + 进行连接。你也无需担心转义引号。

这是一个例子：

const city = "Paris"
const str1 = 'She said, "I love ' + city + ', it\'s a beautiful place."'
const str2 = `She said, "I love ${city}, it's a beautiful place`

console.log(regularString)
console.log(templateLiteral)

与模板字面量不同，普通字符串需要以下内容：

• 使用加号 + 进行连接。
• 小心使用单引号和双引号。
• 需要在字符串中使用 \ 转义单引号。

模板字面量的一些实际使用案例

到目前为止，你已经了解了什么是模板字面量，以及它们与普通字符串的比较。现在，让我们看一些实际示例。

你会经常看到模板字面量用于生成 HTML 标记。它们允许你将 JavaScript 表达式直接嵌入到 HTML 字符串中。这使得创建动态和数据驱动的内容变得容易。

例如：

const user = {
  name: "Marie",
  age: 25,
};

const userProfile = `
<div>
  <h2>Name: ${user.name}</h2>
  <p>Age: ${user.age}</p>
</div>
`

注意 ${} 语法如何允许你在字符串中直接运行 JavaScript 表达式。在此案例中，它被用来读取 user 对象属性的值。

创建动态 SQL 查询

你还可以使用模板字面量通过直接将变量或表达式嵌入到查询字符串来创建动态 SQL 查询。这意味着你可以基于运行时值轻松创建查询。

例如：

const tableName = "users";
const columnName = "name";
const searchValue = "John";

const sqlQuery = 
  `SELECT * FROM ${tableName} WHERE ${columnName} = '${searchValue}'`

本地化和国际化

模板字面量的另一个实际用途是在应用程序中处理本地化和国际化。有了模板字面量，你就可以直接在字符串中嵌入本地化内容的变量或语言键，从而更容易管理翻译。

例如：

const user = {
  name: "Marie",
};

const locale = "fr";
const greetings = {
  en: "Hello",
  es: "Hola",
  fr: "Bonjour"
};

const localizedGreeting = `${greetings[locale]} ${user.name}!`;
console.log(localizedGreeting)

这个例子创建了一个 localizedGreeting 字符串而不依赖任何繁琐的连接。

标记模板字面量

这是 JavaScript 模板字面量的一个功能，可以用于执行高级字符串操作。

要使用此功能，你需要一个标签函数和一个标签模板。

标签函数接收一个字符串和多个变量作为参数，然后根据你设置的某些条件或规则格式化它们。

然后，你通过将标签函数放在模板字面量的反引号前面来调用（或运行）该标签函数。

标记模板字面量的语法

function taggedFunc(strings, ...values) {
  console.log(strings)
  console.log(values)
}

const name = 'Sarah'
const city = 'Rome'

taggedFunc`Hello ${name}. Welcome to ${city}.`

这里有三点需要注意。

首先，第一个参数（本例中为 strings）始终是模板字面量中所有字符串块的数组。在这种情况下，它是下面的数组。

['Hello ', '. Welcome to ', '.']

接下来，其余参数将是所有模板字面量中的变量和评估表达式。JavaScript 的剩余参数语法 ...values 使获取所有这些变得简单。

['Sarah', 'Rome']

最后，注意如何使用 taggedFunc。与常规函数不同，你不会用括号调用它，而是将其附加在模板字面量的第一个反引号之前。

taggedFunc`Hello ${name}. Welcome to ${city}.` ✅

taggedFunc(Hello ${name}. Welcome to ${city}.) ❌

标记模板字面量的实际例子

现在让我们看看一些使用标记模板字面量处理字符串操作的实际例子。

例子 1

function receiptTag(strings, ...values) {  

  let finalString = ''
  for (let i = 0; i < values.length; i++) {
    finalString += strings[i] + values[i]
  }

  // 添加最后一个字面量
  finalString += strings[strings.length - 1] 

  return finalString
}

const item = 'apple'
const price = 2.5
const quantity = 3

const message = receiptTag`
  You have ${quantity} ${item}s.
  Unit cost: $${price}. 
  Total cost: $${quantity * price}.
`

console.log(message)

在此示例中，recieptTag 函数接收一个包含四个表达式的模板字面量：

• ${quantity}
• ${item}
• ${price}
• ${quantity * price}

values 数组将包含这些表达式相应的值。

[3, 'apple', 2.5, 7.5]

你可以在标签函数中相应地处理它们。

结果，记录到控制台的是包含数量、项目、单价和总成本信息的 message。

例子 2

function greetUser(strings, name) {
  const now = new Date()
  const currentHour = now.getHours()
  
  const timeOfDay = currentHour < 12 ? 'morning' : currentHour < 17 ? 'afternoon' : 'evening'
  
  return `Good ${timeOfDay} ${name}${strings[1]}`
}

console.log(greetUser`Hello ${userName}, nice to meet you!`)

这个例子使用标记模板字面量来根据一天中的时间来确定如何问候用户。

该函数首先使用日期对象获取当前小时。然后使用三个运算符来确定一天中的时间。并返回一个带有 timeOfDay 变量的字符串，指示一天中的时间。

此外，请注意日志语句的第一个词，并将其与传递给标记的字符串的第一个词进行比较，以查看函数如何更改了字符串。

总结

模板字面量为在 JavaScript 中处理字符串提供了一种方便的方法。在本文中，你了解了语法，以及如何在项目中使用它们。

你还了解了模板字面量的一个高级功能：标记模板字面量。这些是接收字符串块和表达式数组的函数。它们根据你为函数编写的逻辑返回一个字符串。

感谢你阅读本文，happy coding！如果你需更深入的教程，请订阅我的 YouTube 频道。

在使用数组时，有时需要循环或遍历数组的值，以便输出或操作它们。

这些数组可以保存各种数据类型，包括对象、数字、字符串等。

本文将介绍如何使用 JavaScript forEach() 数组方法来遍历各种类型的数组，以及它与 for 循环方法的区别。

JavaScript 中有许多迭代方法，包括 forEach() 方法，它们几乎都执行相同的功能，只是略有不同。是否使用特定的循环方法完全取决于你自己，但重要的是我们要了解每种循环方法及其工作原理。

JavaScript forEach()

forEach() 数组方法对任意数组进行循环，对每个数组元素按升序索引顺序执行一次所提供的函数。该函数被称为回调函数。

注：数组是元素的集合，元素可以是任何数据类型。

forEach() 循环的语法和参数

以下是 forEach 循环的标准写法：

array.forEach(callbackFunction);
array.forEach(callbackFunction, thisValue);

回调函数最多可接受三个不同的参数，但并非所有参数都是必需的。下面是一些使用普通函数和 ES6 方法声明回调函数的 forEach() 循环示例：

// 只使用当前元素
array.forEach((currentElement) => { /* ... */ })
array.forEach(function(currentElement) { /* ... */ })

// 只使用当前元素和索引值
array.forEach((currentElement, index) => { /* ... */ })
array.forEach(function(currentElement, index) { /* ... */ })

// 只使用当前元素、当前元素的索引值和当前元素所属的数组对象
array.forEach((currentElement, index, array) => { /* ... */ })
array.forEach(function(currentElement, index, array){ /* ... */ })

// 使用所有参数和 thisValue（回调中 this 的值）
array.forEach((currentElement, index, array) => { /* ... */ }, thisValue)
array.forEach(function(currentElement, index, array) { /* ... */ }, thisValue)

上面的语法可能看起来有些混乱，但这是编写 forEach 循环的一般语法，具体取决于要使用的值。让我们来看看我们使用的所有参数：

1、callbackFunction：回调函数是一个对每个元素只执行一次的函数，可以接受以下参数用于回调函数中：

• currentElement：顾名思义，当前元素就是循环发生时数组中正在处理的元素。这是唯一必需的参数。
• index：这是一个可选参数，指的是 currentElement 的索引。
• array：这是一个可选参数，用于返回传递给 forEach() 方法的数组。

2、thisValue：这是一个可选参数，用于指定将在回调函数中使用的值。

总之，forEach() 数组迭代方法接受一个回调函数，该回调函数有可在回调函数中用于每个数组项的参数，如数组项、项的索引和整个数组。

JavaScript forEach() 示例

在了解其他可能的示例之前，我们先看看传入回调函数的所有参数及其用途。

如何使用 currentElement 参数

假设我们有一个雇员详细信息数组，其中包括姓名、年龄、工资金额和货币：

const staffsDetails = [
  { name: "Jam Josh", age: 44, salary: 4000, currency: "USD" },
  { name: "Justina Kap", age: 34, salary: 3000, currency: "USD" },
  { name: "Chris Colt", age: 37, salary: 3700, currency: "USD" },
  { name: "Jane Doe", age: 24, salary: 4200, currency: "USD" }
];

如果我们想单独显示所有名字，并在名字周围加上一些词语，我们可以使用 forEach() 方法，具体如下：

staffsDetails.forEach((staffDetail) => {
  let sentence = `I am ${staffDetail.name} a staff of Royal Suites.`;
  console.log(sentence);
});

输出：

"I am Jam Josh a staff of Royal Suites."
"I am Justina Kap a staff of Royal Suites."
"I am Chris Colt a staff of Royal Suites."
"I am Jane Doe a staff of Royal Suites."

注：如果 currentElement 值是一个包含键/值对的对象，我们也可以通过这种方式对其进行解构：

staffsDetails.forEach(({ name }, index) => {
  let sentence = `I am ${name} a staff of Royal Suites.`;
  console.log(sentence);
});

如何使用 index 参数

我们也可以这样使用未构建的 index 参数来获取每个数组项的索引：

staffsDetails.forEach((staffDetail, index) => {
  let sentence = `index ${index} : I am ${staffDetail.name} a staff of Royal Suites.`;
  console.log(sentence);
});

输出：

"index 0 : I am Jam Josh a staff of Royal Suites."
"index 1 : I am Justina Kap a staff of Royal Suites."
"index 2 : I am Chris Colt a staff of Royal Suites."
"index 3 : I am Jane Doe a staff of Royal Suites."

如何使用 array 参数

array 参数是第三个参数，用于保存正在迭代的原始数组。例如，我们可以尝试这样在控制台中显示数值：

staffsDetails.forEach((staffDetail, index, array) => {
  console.log(array);
});

这将输出整个数组 4 次，因为我们有 4 个项，迭代运行 4 次。让我们对一个只有几个值的数组进行迭代，这样我就可以在这里添加输出结果了：

let scores = [12, 55, 70];

scores.forEach((score, index, array) => {
  console.log(array);
});

输出：

[12,55,70]
[12,55,70]
[12,55,70]

到目前为止，我们已经使用了回调函数的所有参数。在与 for 循环方法进行快速比较之前，让我们看看其他一些示例，以充分了解它是如何工作的。

如何使用 forEach() 将数字数组中的所有值相加

假设我们有一个 scores 数组。我们可以使用 forEach() 数组方法来循环并将这些数字相加：

const scores = [12, 55, 70, 47];

let total = 0;
scores.forEach((score) => {
  total += score;
});

console.log(total);

回想一下，前面我们使用的是员工详细信息数组。现在，让我们尝试将所有员工的工资加在一起，看看如何使用对象：

let totalSalary = 0;
staffsDetails.forEach(({salary}) => {
  totalSalary += salary;
});

console.log(totalSalary + " USD"); // "14900 USD"

注：我们解构了 currentElement 对象。

如何在 forEach() 回调函数中使用条件

在遍历数组时，我们可能需要检查特定条件，这通常与 for 循环方法相同。我们可以将这些条件传递到回调函数中，或者传递到我们想在每个数组项上运行的任何其他操作中。

例如，如果我们只想从之前声明的员工详细信息数组中显示工资大于或等于 4000 的人员姓名，可以执行以下操作：

staffsDetails.forEach(({name, salary}) => {
  if(salary >= 4000){
    console.log(name);
  }
});

输出：

"Jam Josh"
"Jane Doe"

比较 forEach() 和 for 循环

for 循环与 forEach 方法非常相似，但各自都有一些独特的功能，例如：

跳出和继续循环

在循环遍历数组时，我们可能希望在满足特定条件时跳出或继续循环。这可以通过 break 和 continue 指令来实现，但在 forEach() 方法中却行不通，如下图所示：

const scores = [12, 55, 70, 47];

scores.forEach((score) => {
  console.log(score);

  if (score === 70) 
    break;
});

这将产生 Illegal break statement 的语法错误。continue 指令也是这样，它也会产生 Illegal continue statement: no surrounding iteration statement。

const scores = [12, 55, 70, 47];

scores.forEach((score) => {
  if (score === 70) 
    continue;
  
  console.log(score);
});

但幸运的是，这与 for 循环方法配合得天衣无缝：

const scores = [12, 55, 70, 47];

for (i = 0; i < scores.length; i++) {
  console.log(scores[i]);

  if (scores[i] === 70) 
    break;
}

输出：

12
55
70

continue 指令也是如此：

const scores = [12, 55, 70, 47];

for (i = 0; i < scores.length; i++) {
  if (scores[i] === 70) 
    continue;
  
  console.log(scores[i]);
}

输出：

12
55
47

元素缺失的数组

另一个需要进行比较的重要情况是，我们正在迭代的数组有一些缺失值/数组项，如下所示：

const studentsScores = [70, , 12, 55, , 70, 47];

这可能是由于开发人员的错误或其他原因造成的，但这两种方法采用了两种不同的方式来循环这些类型的数组。如果存在缺失值，for 循环会返回 undefined，而 forEach() 方法则会跳过缺失值。

For 循环

const studentsScores = [70, , 12, 55, , 70, 47];

for (i = 0; i < studentsScores.length; i++) {
  console.log(studentsScores[i]);
}

输出：

70
undefined
12
55
undefined
70
47

forEach()

const studentsScores = [70, , 12, 55, , 70, 47];

studentsScores.forEach((stundentScore) => {
  console.log(stundentScore);
});

输出：

70
12
55
70
47

注：Async/Await 对 forEach() 数组方法无效，但对 for 循环方法有效。

总结

在本文中，我们学习了如何使用 forEach() 数组方法，该方法允许我们遍历包含任何类型项的数组。与 for 循环相比，它还能让我们写出更简洁、更易读的代码。

在 JavaScript 中，你经常需要从数组中移除元素，无论是队列数据结构还是 React State。

在本文的前半部分，你将学习所有允许你在不更改原始数组的情况下从数组中移除元素的方法。事实上，这也是你最常要做的事情。例如，如果你不想更改 React State。或者在代码的其他部分使用了数组，改变数组会导致意想不到的问题。

不过，为了完整起见，本文的后半部分将列出从数组中就地移除项的方法。这些方法确实会改变数组本身。

如何在不更改数组的情况下从数组中移除元素

如果你有一个输入数组，比如作为函数参数的数组，那么根据最佳实践，你不应该更改数组，而是创建一个新数组。

有几种方法可以在不更改数组的情况下从数组中移除特定项。

为了避免对数组进行改变，我们将创建一个新的数组，但不包含要移除的元素。

你可以使用以下方法：

• Array.prototype.slice()
• Array.prototype.slice() 加上 Array.prototype.concat()
• Array.prototype.filter()
• for 循环和 Array.prototype.push()

让我们详细看看如何在不改变原有数组的情况下，使用上述每一种方法从数组中移除一个元素。

使用 slice 删除数组中的第一个元素

如果要删除数组中的第一个元素，可以在名为 arr 的数组上使用 Array.prototype.slice()：arr.slice(1)。

下面是一个完整的示例，你想从包含字母表前 6 个字母的数组中移除第一个元素。

// 初始数组
const arrayOfLetters = ['a', 'b', 'c', 'd', 'e', 'f'];

// 数组被复制，不包含第一个元素
const copyWithoutFirstElement = arrayOfLetters.slice(1);

// arrayOfLetters 没有被改变
console.log(arrayOfLetters) // ['a', 'b', 'c', 'd', 'e', 'f']

// copyWithoutFirstElement 包含字母 b 到 f
console.log(copyWithoutFirstElement) // ['b', 'c', 'd', 'e', 'f']

slice 方法可以使用一个数字作为参数，在这种情况下，它会从该索引复制到数组的末尾。因此，使用 arrayOfLetters.slice(1) 将创建一个不包含第一个元素的 arrayOfLetters 数组副本。

使用 slice 删除数组的最后一个元素

如果要删除的元素是数组的最后一个元素，可以在名为 arr 的数组上使用 Array.prototype.slice()：arr.slice(0, -1)。

下面是一个完整的示例，使用的是上面的字母数组，从包含前 6 个字母的数组开始。

const arrayOfLetters = ['a', 'b', 'c', 'd', 'e', 'f'];
const copyWithoutLastElement = arrayOfLetters.slice(0, -1);

// arrayOfLetters 没有被改变
console.log(arrayOfLetters) // ['a', 'b', 'c', 'd', 'e', 'f']

console.log(copyWithoutLastElement) // ['a', 'b', 'c', 'd', 'e']

slice 方法最多需要两个参数。slice 的第一个索引表示要从哪个索引开始复制，第二个参数表示要复制到哪个元素，但并不包含它。

slice 接受负数索引，从末尾开始计数。这意味着 -1 表示最后一个索引。因此，从 0 到 -1 意味着创建一个从索引 0 到（但不包括）最后一个索引的副本。最终的结果是，副本中不包括最后一个元素。

使用 slice 和 concat 在数组的任意位置删除元素

如果想创建一个缺少任意索引处元素的副本，可以使用 Array.prototype.slice 和 Array.prototype.concat：arrayOfLetters.slice(0, n).concat(arrayOfLetters.slice(n+1))，其中 n 是要删除元素的索引。

const arrayOfLetters = ['a', 'b', 'c', 'd', 'e', 'f'];

const halfBeforeTheUnwantedElement = arrayOfLetters.slice(0, 2)

const halfAfterTheUnwantedElement = arrayOfLetters(3);

const copyWithoutThirdElement = halfBeforeTheUnwantedElement.concat(halfAfterTheUnwantedElement);

// arrayOfLetters 没有被改变
console.log(arrayOfLetters) // ['a', 'b', 'c', 'd', 'e', 'f']

console.log(copyWithoutFifthElement) // ['a', 'b', 'd', 'e', 'f']

这次使用 slice 是将前两次使用结合起来的一种方法。

第一次使用 slice 会创建一个从开始到要删除的元素之前的数组。

第二次使用 slice 会创建一个从要删除的元素之后到数组末尾的数组。

使用 concat 将这两个数组连接在一起，形成一个与初始数组相似的数组，但没有特定的元素。

使用 filter 移除具有特定值的元素

如果想删除具有某个值的元素，可以使用 Array.prototype.filter()。让我们以同样的 arrayOfLetters 为例，创建一个不带 d 的副本。

const arrayOfLetters = ['a', 'b', 'c', 'd', 'e', 'f'];

const arrayWithoutD = arrayOfLetters.filter(function (letter) {
    return letter !== 'd';
});

// arrayOfLetters 没有被改变
console.log(arrayOfLetters); // ['a', 'b', 'c', 'd', 'e', 'f']

console.log(arrayWithoutD); // ['a', 'b', 'c', 'e', 'f']

filter 接收一个回调，并用该回调测试数组中的所有元素。它会保留回调返回 true（或真值）的元素，并排除回调返回 false（或假值）的元素。

在本例中，回调检查 letter !== "d"，因此对字母 d 返回 false，对所有其他元素返回 true，从而得到一个不包含字母 d 的数组。

filter 回调传递三个参数，依次是元素本身、元素索引和整个数组。

你可以根据需要创建比本例更复杂的条件。

使用 for 循环和 push 从数组中移除元素

在不改变原始数组的情况下从数组中移除元素的最后一种方法是使用 push 方法。

只需以下简单步骤：

• 创建一个空数组
• 遍历原始数组
• 将想要保留的元素推送到空数组中

const arrayOfLetters = ['a', 'b', 'c', 'd', 'e', 'f'];

const arrayWithoutB = [];

for (let i = 0; i < arrayOfLetters.length; i++) {
    if (arrayOfLetters[i] !== 'b') {
        arrayWithoutH.push(arrayOfLetters[i]);
    }
}

// arrayOfLetters 没有被改变
console.log(arrayOfLetters); // ['a', 'b', 'c', 'd', 'e', 'f']

console.log(arrayWithoutB); // ['a', 'c', 'd', 'e', 'f']

对于更复杂的语句，if语句条件可以同时检查索引（i）和元素值。

使用解构赋值和 rest 操作符移除数组的第一个元素

数组解构和 rest 操作符是两个有点令人困惑的概念。

如果你想深入了解这个话题，我建议你阅读《JavaScript 数组解构和对象解构》这篇文章，其中介绍了如何对数组进行解构。

你可以使用解构删除第一个元素——比方说删除一个名为 arr 的数组——然后创建一个名为 newArr 的新数组，方法是：const [ , ...newarr] = arr;。

现在，我们来看一个使用解构和 rest 操作符的实际例子。

const arrayOfFruits = ['olive', 'apricot', 'cherry', 'peach', 'plum', 'mango'];

const [ , ...arrayOfCulinaryFruits] = arrayOfFruits;

// arrayOfFruits 没有被改变
console.log(arrayOfFruits); // ['olive', 'apricot', 'cherry', 'peach', 'plum', 'mango']

console.log(arrayOfCulinaryFruits); // ['apricot', 'cherry', 'peach', 'plum', 'mango']

在 rest 运算符前加逗号表示避开数组中的第一个元素，其他所有元素都被复制到 arrayOfCulinaryFruits 数组中。

如何在改变数组的同时从数组中移除一个元素

在某些情况下，可能需要改变原始数组。在这种情况下，你也可以使用下面的方法。

• Array.prototype.pop()
• Array.prototype.shift()
• Array.prototype.splice()

使用 pop 删除数组的最后一个元素

你可以使用 Array.prototype.pop() 删除数组的最后一个元素。

如果你有一个名为 arr 的数组，则是 arr.pop()。

const arrayOfNumbers = [1, 2, 3, 4];

const previousLastElementOfTheArray = arrayOfNumbers.pop();

console.log(arrayOfNumbers); // [1, 2, 3]

console.log(previousLastElementOfTheArray); // 4

pop 方法用于数组，它通过删除数组的最后一项来改变数组。

pop 方法还会返回移除的元素。

用 shift 删除数组的第一个元素

可以在数组中使用 shift 方法移除数组的第一个元素。

如果有一个名为 arr 的数组，可以这样使用：arr.shift()。

const arrayOfNumbers = [1, 2, 3, 4];

const previousFirstElementOfTheArray = arrayOfNumbers.shift();

console.log(arrayOfNumbers); // [2, 3, 4]

console.log(previousFirstElementOfTheArray); // 1

shift 方法移除数组的第一个元素。

它还会返回移除的元素。

使用 splice 删除任意索引处的元素

使用 splice 方法可以删除任意索引处的元素。

如果你有一个名为 arr 的数组，可以使用这种方法移除任意索引处的元素：arr.splice(n, 1)，其中 n 是要移除元素的索引。

const arrayOfNumbers = [1, 2, 3, 4];

const previousSecondElementOfTheArray = arrayOfNumbers.splice(1, 1);

console.log(arrayOfNumbers); // [1, 3, 4]

console.log(previousSecondElementOfTheArray); // [2]

splice 方法可以接受多个参数。

要移除任意索引处的元素，需要给 splice 两个参数：第一个参数是要移除元素的索引，第二个参数是要移除元素的个数。

因此，如果有一个名为 arr 的数组，要删除索引为 4 的元素，使用 splice 方法的方法是：arr.splice(4, 1)。

然后，splice 方法会返回一个包含移除元素的数组。

总结

在 JavaScript 中，有许多不同的方法来做同一件事。

在本文中，你已经学会了从数组中移除元素的九种不同方法。其中六种不会改变原始数组，三种会改变原始数组。

你也许会在某个时候用到所有这些方法或者其中一种，也许你还会学到更多方法实现同样的目的。

许多操作，如网络请求，本质上是异步的。在处理异步代码时，Promise 是最有用和最强大的工具之一。在这本手册中，您将了解有关 JavaScript Promises 的所有信息以及如何使用它们。

目录

1. Promise 是什么
2. Promise 与其他异步模式的比较
3. 如何创建一个 Promise
4. 如何获取 Promise 的结果
5. 如何使用then处理错误
6. Promise 链
7. 如何创建立即兑现或拒绝的 Promises
8. 如何使用async和await
9. 反模式 Promise
10. 总结

Promise 是什么

首先，让我们了解一下什么是 Promise。

简单来说，Promise 是一个代表异步操作的对象。这个对象可以告诉你操作何时成功，或者何时失败。

当你调用一个基于 Promise 的 API 时，函数返回一个 Promise 对象来告诉你最终的操作结果。

Promise 的状态

在其生命周期中，Promise 可以处于以下三种状态之一：

• 待定（Pending）: 当操作仍在进行中时，Promise 处于待定状态。它处于闲置状态，等待最终结果或错误。
• 已兑现（Fulfilled）：返回 Promise 的异步任务成功完成。Promise 已经被一个值兑现，该值是操作的结果。
• 已拒绝（Rejected）: 如果异步操作失败，Promise 被认为是拒绝的。Promise 会有一个 拒绝理由。这通常是一个错误（Error）对象，也可以是任何错误值——可以是一个简单的数字或字符串！

Promise 一开始处于待定（pending）状态，然后根据结果，会转换到已兑现（fulfilled）或已拒绝（rejected）状态。一旦 Promise 达到已兑现或已拒绝状态，就被认为是 已敲定（settled）。

不是所有的异步任务都会最终完成。一个 Promise 可能由于异步任务的代码中存在错误而永远保持在待定状态。

Promise 与其他异步模式的比较

Promise 的工作方式与 JavaScript 的其他异步模式有点不同。在深入学习 Promise 之前，我们来简要比较一下。

回调函数

回调函数是你传递给另一个函数的函数。当你调用的函数完成其工作后，它将用结果执行你的回调函数。

想象一下，一个名为 getUsers 的函数将发起网络请求以获取用户数组。你可以将一个回调函数传递给 getUsers，一旦网络请求完成，这个回调函数就会被调用，并传入用户数组：

console.log('Preparing to get users');
getUsers(users => {
  console.log('Got users:', users);
});
console.log('Users request sent');

一个回调函数的例子

首先，上述代码会打印（在 console 中显示）“Preparing to get users（准备获取用户）”。然后它调用 getUsers来启动网络请求。但是 JavaScript 不会等待请求完成。而是会立即执行下一个 console.log 语句（Users request sent）。

稍后，一旦用户被加载成功，你的回调函数将被执行，屏幕上将会显示“已获取用户”。

一些基于回调的 API，如许多 Node.js API，使用 错误优先的回调（error-first callbacks）。这些回调函数有两个参数。第一个参数是错误（error），第二个是结果（result）。

通常来说，取决于操作的结果，这两者中只有一个会有值。这与 Promise 的已兑现和已拒绝状态类似。

回调 API 的问题在于嵌套。如果你需要按顺序进行多个异步调用，你最终需要不断嵌套函数和回调函数。

例如，如果你想异步进行 3 个任务：读取一个文件，处理该文件中的一些数据，然后写一个新文件。

readFile('sourceData.json', data => {
	processData(data, result => {
		writeFile(result, 'processedData.json', () => {
			console.log('Done processing');
		});
	});
});

嵌套回调序列

在错误处理方面，甚至会更加笨拙。假如这些函数使用错误优先的回调：

readFile('sourceData.json', (error, data) => {
	if (error) {
		console.error('Error reading file:', error);
		return;
	}
	
	processData(data, (error, result) => {
		if (error) {
			console.error('Error processing data:', error);
			return;
		}
		
		writeFile(result, 'processedData.json', error => {
			if (error) {
				console.error('Error writing file:', error);
				return;
			}
			
			console.log('Done processing');
		});
	});
});

嵌套的错误优先回调序列

现代 API 中的异步机制通常不直接使用回调函数，但它们是其他类型异步工具（如 Promise）的基础。

事件（Events）

事件是你可以监听并做出响应的东西。在 JavaScript 中，一些对象是事件的 发射器（emitters），这意味着你可以在这些对象上注册事件监听器（译者注：event listener，用来监视软件的变化，比如用户点击了鼠标）。

在 DOM 中，许多元素实现了 EventTarget 接口，它提供了 addEventListener 和 removeEventListener 方法。

一个给定类型的事件可以发生多次。例如，你可以监听按钮上的点击事件（click event）：

myButton.addEventListener('click', () => {
   console.log('button was clicked!'); 
});

监听按钮的点击

每次按钮被点击时，控制台都会打印“button was clicked!”（按钮被点击了！）。

addEventListener 本身接受一个回调函数。每当事件发生时，回调函数就会被执行。

一个对象可以发出多种类型的事件。考虑一个图像对象。如果指定 URL 的图像成功加载，加载事件（load） 将被触发。如果发生错误，错误事件（error）将被触发。

myImage.addEventListener('load', () => {
    console.log('Image was loaded');
});

myImage.addEventListener('error', error => {
   console.error('Image failed to load:', error); 
});

监听图像的加载和错误事件

假设在你添加事件监听器之前，图像已经完成了加载。那就什么也不会发生！基于事件的 API 的一个缺点是，如果你在事件发生后添加事件监听器，你的回调将不会被执行。这是有道理的——毕竟，当你向按钮添加点击监听器时，你不会想接收所有过去的点击事件。

现在我们已经探讨了回调和事件，让我们看看 Promise。

如何创建 Promiose

你可以使用 new 关键字和 Promise 构造器来创建一个 Promise。Promise 构造器接受一个回调函数，该函数带有两个参数，称为 resolve 和 reject。这两个参数都是由 Promise 提供的函数，用于将 Promise 转换到已兑现或已拒绝状态。

在你的回调中，执行你的异步工作。如果任务成功，你应该调用 resolve 函数并传递成功的结果。如果发生错误，则应该调用 reject 函数，并传递错误。

以下是一个创建 Promise 的示例，该示例包装了浏览器的 setTimeout 函数：

function wait(duration) {
	return new Promise(resolve => {
        setTimeout(resolve, duration);
    });
}

将 setTimeout 包装在 Promise 中

resolve 函数作为第一个参数传递给 setTimeout。在由 duration 指定的时间过后，浏览器会调用 resolve 函数来兑现 Promise。

注意：在这个示例中，调用 resolve 函数之前的延迟可能比 duration 指定的时间要长。这是因为 setTimeout 并不能保证在指定时间内执行。

注意，在通常情况下，你只需要处理其他 API 返回的 Promise。而不需要手动构建自己的 Promise。

如何获取 Promise 的结果

我们已经看到了如何创建一个 Promise，但你如何实际获取异步操作的结果呢？为此，你需要在 Promise 对象本身上调用 then。then 接受一个回调函数作为其参数。当 Promise 被兑现时，会执行回调函数，并传入结果。

让我们看一个这样的例子。一个名为 getUsers 的函数，它异步加载用户对象列表并返回一个 Promise。你可以通过在 getUsers 返回的 Promise 上调用 then 来获取用户列表。

getUsers()
  .then(users => {
    console.log('Got users:', users);
  });

在 Promise 上调用 then

就像处理事件或基于回调的 API 一样，你的代码将继续执行而不是等待结果。稍后，当用户数据加载完毕时，你的回调函数将被安排执行。

console.log('Loading users');
getUsers()
  .then(users => {
    console.log('Got users:', users);
  });
console.log('Continuing on');

在上面的例子中，首先会打印“Loading users（正在加载用户）”。因为 getUsers 调用仍在加载用户，所以接下来打印的将是“Continuing on（继续进行）”。稍后，你将看到打印出“Got users:（已获取用户）”。

如何使用 `then` 处理错误

我们已经看到了如何使用 then 来获取 Promise 提供的结果，但如果我们加载用户列表失败会发生什么？

then 函数还有第二个参数，另一个回调。那就是错误处理器（error handler）。如果 Promise 被拒绝，这个回调将会用拒绝/错误值执行。

getUsers()
  .then(users => {
    console.log('Got users:', users);
  }, error => {
    console.error('Failed to load users:', error);  
  });

由于一个 Promise 只能被兑现（fulfilled）或被拒绝（rejected），而不能同时是两者，所以只有其中一个回调函数会被执行。

使用 Promise 时，务必处理错误，这一点很重要。如果你有一个 Promise 拒绝的情况没有通过错误回调处理，你的控制台会出现一个未处理拒绝的异常，这会在运行时对用户造成问题。

Promise 链

如果你需要连续处理多个 Promise 怎么办？我们从一个文件加载了一些数据，进行了一些处理，然后将结果写入一个新文件。假设 readFile，processData 和 writeFile 函数使用 Promise 而不是回调。

像这样：

readFile('sourceData.json')
  .then(data => {
    processData(data)
      .then(result => {
        writeFile(result, 'processedData.json')
          .then(() => {
            console.log('Done processing');
          });
      });
  });

嵌套的 Promise

这看起来并不理想，我们仍然面临着我们在回调方法中遇到的嵌套问题。幸运的是，有一个更好的方法。你可以将 promise 以平面序列方式链接起来。

让我们更深入地看看 then 是如何工作的。关键思想是：用 then 方法返回 另一个 promise。你从 then 回调中返回的任何值都会成为这个新 promise 的兑现值。

想一下，有一个 getUsers 函数，它返回一个 Promise，当该 Promise 被兑现时，会得到一个包含用户对象的数组。假设我们在这个 Promise 上调用 then，并在回调中返回数组中的第一个用户（users[0]）：

getUsers().then(users => users[0]);

这个整个表达式会产生一个新的 Promise ，将会用第一个用户对象兑现 Promise！

getUsers()
  .then(users => users[0])
  .then(firstUser => {
    console.log('First user:', firstUser.username);
  });

从 then 返回一个值

这种返回一个 Promise，调用 then 并返回另一个值，从而产生另一个 Promise 的过程，称为链式调用。

让我们延伸这个想法。如果我们不从 then 处理程序返回一个值，而是返回另一个 Promise 会怎样？再次考虑文件处理的例子，其中 readFile 和 processData 都是返回 Promise 的异步函数：

readFile('sourceData.json')
  .then(data => processData(data));

从 then 返回另一个 Promise

then 处理程序调用 processData，并返回生成的 Promise。和之前一样，这会返回一个新的 Promise。在这种情况下，当 processData 返回的 Promise 被兑现时，新的 Promise 也会被兑现，并赋予相同的值。因此，上述示例中的代码将返回一个包含处理后的数据的 Promise。

你可以一个接一个地链式调用多个 Promises，直到你得到所需的最终值：

readFile('sourceData.json')
  .then(data => processData(data))
  .then(result => writeFile(result, 'processedData.json'))
  .then(() => console.log('Done processing'));

链式调用多个 Promises

在上述示例中，整个表达式将返回一个 Promise，该 Promise 在处理后的数据写入文件后才会被兑现。控制台打印“Done processing!（处理完成）”，然后最终的 Promise 才会被兑现。

链式调用 Promise 的错误处理

在我们的文件处理示例中，过程中的任何阶段都可能发生错误。你可以使用 Promise 的 catch 方法来处理任何步骤中的错误。

readFile('sourceData.json')
  .then(data => processData(data))
  .then(result => writeFile(result, 'processedData.json'))
  .then(() => console.log('Done processing'))
  .catch(error => console.log('Error while processing:', error));

使用 catch 来处理错误

如果链式调用中的某个 Promise 被拒绝，传递给 catch 的回调函数将会执行，并跳过整个链式调用中的剩余部分。

如何使用 finally

如果你希望无论 Promise 的结果如何都要执行一些操作。例如，关闭一个数据库或文件。可以使用 finally 方法。

openDatabase()
  .then(data => processData(data))
  .catch(error => console.error('Error'))
  .finally(() => closeDatabase());

如何使用 Promise.all

Promise 链式调用可以让你按顺序运行多个任务，但如果你想同时运行多个任务，Promise.all 方法可以让你做到这一点。

Promise.all 接受一个 Promise 数组，并返回一个新的 Promise。当所有其他 Promise 都被兑现时，这个新的 Promise 也将被兑现。其兑现值是一个数组，包含了输入数组中每个 Promise 的兑现值。

假设你有一个函数 loadUserProfile 用于加载用户的个人资料数据，另一个函数 loadUserPosts 用于加载用户的帖子。它们都以用户 ID 作为参数。还有第三个函数 renderUserPage 需要同时获取用户的个人资料和帖子列表。

const userId = 100;

const profilePromise = loadUserProfile(userId);
const postsPromise = loadUserPosts(userId);

Promise.all([profilePromise, postsPromise])
  .then(results => {
    const [profile, posts] = results;
    renderUserPage(profile, posts);
  });

使用 Promise.all 等待多个 Promise

如果出现错误怎么办呢？如果传递给 Promise.all 的任何一个 Promise 因错误而被拒绝，生成的 Promise 也将被该错误拒绝。其他任何被兑现的 Promise 的值都将会丢失。

如何使用 Promise.allSettled

Promise.allSettled 方法的工作方式类似于 Promise.all。主要区别在于 Promise.allSettled 返回的 Promise 永远不会被拒绝。

相反，它会以一个对象数组来兑现，这些对象的顺序对应于输入数组中的 Promise 的顺序。每个对象都有一个 status 属性，该属性根据结果分别为 "fulfilled（已兑现）" 或 "rejected（已拒绝）"。

如果 status 是 "fulfilled（已兑现）"，该对象还会有一个 value 属性，表示 Promise 的兑现值。如果 status 是 "rejected"，对象将有一个 reason 属性，用来表示 Promise 被拒绝时的错误或其他对象。

再看一个 getUser 函数，该函数接受一个用户 ID 并返回一个 Promise，该 Promise 将会被具有该 ID 的用户实现。你可以使用 Promise.allSettled 并行加载这些用户，确保获取所有成功加载的用户。

Promise.allSettled([
  getUser(1),
  getUser(2),
  getUser(3)
]).then(results => {
   const users = results
     .filter(result => result.status === 'fulfilled')
     .map(result => result.value);
   console.log('Got users:', users);
});

尝试加载三个用户，并显示成功加载的用户

你可以创建一个通用的 loadUsers 函数，该函数接收一个用户 ID 数组，并且并行加载用户。该函数返回一个 Promise，当所有用户成功加载时，该 Promise 将被兑现，并包含一个用户数组。

function getUsers(userIds) {
  return Promise.allSettled(userIds.map(id => getUser(id)))
    .then(results => {
      return results
        .filter(result => result.status === 'fulfilled')
        .map(result => result.value);
    });
}

一个辅助函数，用于并行加载多个用户，过滤掉任何失败的请求。

然后，你只需使用一个用户 ID 数组调用 getUsers：

getUsers([1, 2, 3])
	.then(users => console.log('Got users:', users));

使用 getUsers 辅助函数

如何创建立即兑现或拒绝的 Promise

你希望将一个值包装在一个已兑现的 Promise 中。例如，你有一个返回 Promise 的异步函数，并且你提前知道值，不需要进行任何异步工作。

可以调用 Promise.resolve 并且指定一个值，这会返回一个立即兑现的 Promise，并带有你指定的值：

Promise.resolve('hello')
  .then(result => {
    console.log(result); // prints "hello"
  });

使用 Promise.resolve

这等同于：

new Promise(resolve => {
   resolve('hello'); 
}).then(result => {
    console.log(result); // also prints "hello"
});

你可以创建一个立即兑现的 Promise 并在这种情况下返回来使你的 API 更加一致。这样，调用你函数的代码就知道无论如何总是会得到一个 Promise。

例如，考虑之前定义的 getUsers 函数。如果用户 ID 数组为空，你可以简单地返回一个空数组，因为不会加载任何用户。

function getUsers(userIds) {
  // immediately return the empty array
  if (userIds.length === 0) {
    return Promise.resolve([]);
  }
    
  return Promise.allSettled(userIds.map(id => getUser(id)))
    .then(results => {
      return results
        .filter(result => result.status === 'fulfilled')
        .map(result => result.value);
    });
}

在 getUsers 辅助函数中添加一个提前返回的功能

Promise.resolve 的另一个用途是处理你可能获得一个值，该值可能是也可能不是一个 Promise，但你想总是将它视为一个 Promise。

你可以安全地对任何值调用 Promise.resolve。如果它已经是一个 Promise，你将得到另一个具有相同兑现值或拒绝值的 Promise。如果它不是一个 Promise，它将被包装在一个立即兑现的 Promise 中。

这种方法的好处是你不必做这样的事情：

function getResult(result) {
  if (result.then) {
     result.then(value => {
         console.log('Result:', value);
     });
  } else {
      console.log('Result:', result);
  }
}

根据是否是 Promise 有条件地调用 then

同样，你可以使用 Promise.reject 创建一个立即拒绝的 Promise。再回到 getUsers 函数，如果用户 ID 数组是 null、undefined 或不是数组，我们希望立即拒绝。

function getUsers(userIds) {
  if (userIds == null || !Array.isArray(userIds)) {
    return Promise.reject(new Error('User IDs must be an array'));
  }
    
  // immediately return the empty array
  if (userIds.length === 0) {
    return Promise.resolve([]);
  }
    
  return Promise.allSettled(userIds.map(id => getUser(id)))
    .then(results => {
      return results
        .filter(result => result.status === 'fulfilled')
        .map(result => result.value);
    });
}

如果参数不是一个有效数组则返回一个错误对象

如何使用 Promise.race

就像 Promise.all 或 Promise.allSettled 一样，Promise.race 静态方法接收一个 Promise 数组，并返回一个新的 Promise。只是它的工作方式有些不同。

Promise.race 返回的 Promise 会等待给定的 Promise 中第一个被兑现或被拒绝的 Promise，然后该 Promise 也会以相同的值被兑现或被拒绝。当这种情况发生时，其他 Promise 的兑现或拒绝值将会丢失。

如何使用 Promise.any

Promise.any 的工作方式与 Promise.race 类似，但有一个关键区别 —— Promise.race 会在任何一个 Promise 被兑现或被拒绝时完成，而 Promise.any 会等待第一个被 兑现的 Promise。

如何使用 `async` 和 `await`

async 和 await 是简化处理 Promise 的特殊关键字。它们消除了对回调函数和调用 then 或 catch 的需求。它们也可以与 try-catch 模块一起使用。

它们的工作原理如下。你无需在 Promise 上调用 then，而是通过在它前面加上 await 关键词来“等待”它。这实际上会“暂停”函数的执行，直到 Promise 被兑现。

以下是一个标准 Promise 的例子：

getUsers().then(users => {
    console.log('Got users:', users);
});

使用 then 等待一个 promise

以下是使用 await 关键字的等效代码：

const users = await getUsers();
console.log('Got users:', users);

使用 await 等待一个 promise

Promise 连续操作也更加简洁：

const data = await readFile('sourceData.json');
const result = await processData(data);
await writeFile(result, 'processedData.json');

使用 await 链接 promise

记住，每次使用 await 都会暂停函数的其余部分的执行，直到你等待的 Promise 被兑现。如果你想等待多个并行运行的 Promise，你可以使用 Promise.all：

const users = await Promise.all([getUser(1), getUser(2), getUser(3)]);

使用 await 的 Promise.all

要使用 await 关键字，你的函数必须标记为异步函数。你可以在函数前面加上 async （异步）关键字来实现这一点：

async function processData(sourceFile, outputFile) {
  const data = await readFile(sourceFile);
  const result = await processData(data);
  writeFile(result, outputFile);
}

标记函数为 async

添加 async 关键字还对函数产生了另一个重要影响。异步函数始终会隐匿地返回一个 Promise。如果你从异步函数中返回一个值，该函数实际上会返回一个以该值兑现的 Promise。

async function add(a, b) {
  return a + b;   
}

add(2, 3).then(sum => {
   console.log('Sum is:', sum); 
});

一个 async 函数用于求两个数字的和

在上面的例子中，该函数返回两个参数 a 和 b 的 和。但由于它是一个 async 函数，它不会直接返回 和，而是返回一个带有 和 的被兑现的 Promise 。

使用 async 和 await 进行错误处理

我们使用 await 来等待 Promise 被兑现，但是如果你等待一个 Promise，并且它被拒绝了，就会抛出一个错误。你可以将其放在一个 try-catch 模块中来处理错误：

try {
    const data = await readFile(sourceFile);
    const result = await processData(data);
    await writeFile(result, outputFile);
} catch (error) {
    console.error('Error occurred while processing:', error);
}

使用 try-catch 模块进行错误处理

Promise 的反模式

不需要创建新 Promise 的情况

有时候无法避免创建新的 Promise。但是，如果已经有 API 返回的 Promise 你就不需要创建自己的：

function getUsers() {
  return new Promise(resolve => {
     fetch('https://example.com/api/users')
       .then(result => result.json())
       .then(data => resolve(data))
  });
}

创建不必要的 Promise 的例子

在这个例子中，我们创建一个新的 Promise 来包装 Fetch API，而 Fetch API 已经返回 Promise。这是不必要的。我们可以直接返回 Fetch API 的 Promise 链式调用：

function getUsers() {
  return fetch('https://example.com/api/users')
    .then(result => result.json());
}

使用现有的 Fetch promise

在这两种情况下，调用 getUsers 的代码看起来都是一样的：

getUsers()
  .then(users => console.log('Got users:', users))
  .catch(error => console.error('Error fetching users:', error));
   

任一种 getUsers() 函数实现都可以使用这段客户端代码来调用

吞噬错误

来看这个版本的 getUsers 函数：

function getUsers() {
    return fetch('https://example.com/api/users')
    	.then(result => result.json())
    	.catch(error => console.error('Error loading users:', error));
}

吞噬 Fetch 错误

错误处理很好，对吧？如果我们调用这个 getUsers 函数，你可能会对结果感到惊讶：

getUsers()
  .then(users => console.log('Got users:', users))
  .catch(error => console.error('error:', error);)

调用 getUsers

你可能期望这会打印出 "error（错误）"，但实际上它会打印出 "Got users: undefined"。这是因为 catch 调用"吞噬"了错误，并返回一个新的 Promise，该 Promise 用 catch 回调的返回值 undefined（console.error 返回 undefined）来兑现。你仍然会看到来自 getUsers 的 "Error loading users" 日志消息，但返回的 Promise 将会被兑现，而不是被拒绝。

如果你想在 getUsers 函数内部捕获错误并且仍然拒绝返回的 Promise，catch 处理程序需要返回一个被拒绝的 Promise。你可以通过使用 Promise.reject 来实现这一点。

function getUsers() {
  return fetch('https://example.com/api/users')
    .then(result => result.json())
    .catch(error => {
      console.error('Error loading users:', error);
      return Promise.reject(error);
    });
}

在处理错误后返回一个被拒绝的 Promise

现在你仍然会得到 "Error loading users（加载用户错误）" 的消息，但返回的 Promise 也会因错误而被拒绝。

Promise 的嵌套

避免嵌套 Promise，尝试使用扁平化的 Promise 链式调用。

不要这样：

readFile(sourceFile)
  .then(data => {
    processData(data)
      .then(result => {
        writeFile(result, outputFile)
          .then(() => console.log('done');
      });
  });

应该这样：

readFile(sourceFile)
  .then(data => processData(data))
  .then(result => writeFile(result, outputFile))
  .then(() => console.log('done'));

总结

以下是使用 Promise 的关键要点：

• Promise 可以是 pending（待定）、fulfilled（已兑现）或 rejected（已拒绝）
• 如果一个 Promise 被兑现（fulfilled）或被拒绝（rejected），它就是被解决了(settled),
• 使用 then 来获取 Promise 的兑现值（以及进行下一步的操作）
• 使用 catch 来处理错误
• 使用 finally 来执行在成功或错误情况下都需要的清理逻辑
• 链接 Promise 以按顺序执行异步任务
• 使用 Promise.all 来获得一个 Promise，当所有给定的 Promise 都被兑现时它就会被兑现（fulfilled），或当其中一个 Promise 被拒绝时它被拒绝（rejected）
• 使用 Promise.allSettled 来获得一个 Promise，当所有给定的 Promise 都被兑现（fulfilled）或被拒绝（rejected）时它被解决
• 使用 Promise.race 来获得一个 Promise，当给定的 Promise 中第一个被兑现或被拒绝时它也被兑现或被拒绝
• 使用 Promise.any 来获得一个 Promise，当给定的 Promise 中第一个被兑现时它被兑现
• 使用 await 关键字来等待一个 Promise 的兑现值
• 使用 try-catch 模块来处理使用 await 关键字时产生的错误
• 使用 await 的函数必须使用 async 关键字

感谢阅读这篇关于 Promise 的深入探讨。希望你学到了新知识！

感谢 Mingxun Liu 校对这篇译文。

操作字符串是编程的一项基本技能。

用 JavaScript 编写代码时可能会遇到的一个常见任务是从字符串中修剪字符。修剪包括删除字符串开头和/或末尾的特定字符。这些字符可以是前后空格、制表符、换行符或末尾逗号。

你可能还想删除程序中不需要的特定字符，并用其他字符代替。

在本文中，你将了解到一些在 JavaScript 中修剪和删除字符串中的字符的方法。

如何使用 JavaScript 中的 trim() 方法删除空格

你可以使用内置的 trim() 方法删除字符串开头和末尾的空格。

下面是 trim() 方法的一般语法：

string.trim()

直接在要修剪的字符串上调用 trim() 方法。该方法会删除字符串开头和末尾的空格，如空格、制表符或换行符。

请注意，trim() 方法不会修改原始字符串。相反，它会返回一个经过修剪的新字符串，并去掉开头和末尾的字符。

下面是一个例子：

let greeting = "    Hello World    ";

let trimmedGreeting = greeting.trim();

console.log(trimmedGreeting); // Output: "Hello World"

在上面的示例中，我声明了一个名为 greeting 的变量，并赋值一个字符串值 Hello World。字符串的开头和末尾都有空格。

为了删除开头和末尾的空格，我在 greeting 变量上调用了 trim() 方法，并将结果存储在一个新变量 trimmedGreeting 中。

当我使用 console.log() 将新字符串打印到控制台时，开头的空格和末尾的空格已被删除。

而 greeting 中的原始字符串仍然包含开头和末尾的空格。

如何使用 JavaScript 中的 trimStart() 方法删除开头的空格

要删除 JavaScript 中字符串开头的空格，可以使用 trimStart() 方法。

让我们看看下面的例子：

let greeting = "    Hello World    ";

let trimmedGreeting = greeting.trimStart();

console.log(trimmedGreeting); // Output: "Hello World    "

在上面的示例中，greeting 变量的字符串值是 Hello World。

我在 greeting 上调用了 trimStart() 方法，并将结果保存在 trimmedGreeting 中。该方法只删除字符串开头的空格。字符串末尾的空格将被保留。

如何使用 JavaScript 中的 trimEnd() 方法删除末尾空格

要在 JavaScript 中删除字符串末尾的空格，可以使用 trimEnd() 方法。

让我们看看下面的例子：

let greeting = "    Hello World    ";

let trimmedGreeting = greeting.trimEnd();

console.log(trimmedGreeting); // Output: "    Hello World"

存储在 greeting 中的字符串开头和末尾都有空格。

我在 greeting 上调用了 trimEnd() 方法，并将结果保存在 trimmedGreeting 中。该方法只删除字符串末尾的空格。字符串开头的空格将被保留。

如何使用 JavaScript 中的 replace() 方法删除字符

要从 JavaScript 字符串中删除特定字符，可以使用 replace() 方法。

以下是 replace() 方法的一般语法：

string.replace(pattern, replacement);

你需要在想要修改的字符串上调用 replace() 方法。该方法接受两个参数：pattern 和 replacement。

pattern 参数指定要查找并替换的字符串模式。这可以是一个特定的字符、子串或正则表达式模式，你想在字符串中找到并替换它们。

replacement 参数是要把 pattern 替换成的新字符或字符串。

请注意，replace() 方法不会修改原始字符串。

让我们来看一个示例：

let sentence = "I love dogs";

let modifiedSentence  = sentence.replace("dogs", "cats");

console.log(modifiedSentence); // Output: "I love cats"

我首先声明了一个名为 sentence 的变量，并赋值给字符串 I love dogs。

然后，我在 sentence 上调用 replace() 方法，因为我想删除子串 dogs，代之以 cats。然后，我将结果存储在新变量 modifiedSentence 中。

最后，我将存储在 modifiedSentence 变量中的字符串记录到控制台。"I love cats" 字符串被打印到控制台。

replace() 方法找到了子串 dogs，并将其替换为 cats，而没有改变任何其他内容。

如何使用 JavaScript 中的 replace() 方法删除一个字符的多个实例

在上一节中，我们举例说明了如何使用 replace() 方法将一个单词替换为另一个单词。

但是，如果要替换的单词出现了多次，该怎么办呢？

let sentence = "I love dogs because dogs are cute";

let modifiedSentence  = sentence.replace("dogs", "cats");

console.log(modifiedSentence); // Output: "I love cats because dogs are cute"

在上面的例子中，sentence 变量中有两次出现了 dogs 这个词，我想用 cats 来替换它们。但是，replace() 方法默认只替换第一次出现的 dogs。

使用 replace() 方法删除一个单词的多个实例则有些不同。你可以使用正则表达式来实现这一目的。

让我们使用正则表达式重写代码：

let sentence = "I love dogs because dogs are cute";

let modifiedSentence  = sentence.replace(/dogs/g, "cats");

console.log(modifiedSentence); // Output: "I love cats because cats are cute"

在上面的示例中，我将所有出现的字符串 dogs 替换为字符串 cats。

我没有将字符串作为第一个参数传递给 replace()，而是传递了使用 g 标志的正则表达式 /dogs/g。这个标志代表 global，它匹配所有出现的单词 dogs，而不仅仅是第一个。

小结

在本文中，我们学习了在 JavaScript 中修剪字符串和替换字符串中的字符的基础知识。

具体来说，你学会了如何使用 trim() 方法修剪开头和末尾的空格，并了解了 trimStart() 和 trimEnd() 方法分别用于只删除开头或结尾的空格。

最后，你还学会了如何使用 replace() 方法删除特定字符并用其他字符替换。

感谢你阅读本文，祝你编码愉快！

JavaScript 是一种多用途编程语言，允许开发人员创建动态和交互式 Web 应用程序。Web 开发中的一项常见任务是刷新或重新加载网页，以更新网页内容或触发某些操作。

在本文中，我们将探讨用 JavaScript 刷新页面的不同方法，并了解每种方法的优缺点。

为什么要在 JavaScript 中刷新页面

刷新网页在各种情况下都很有用，例如：

• 内容更新：如果网页上的内容是动态的且经常变化，则可能需要刷新页面以显示最新的数据或信息。这种情况常见于新闻网站、股票市场跟踪器、天气应用程序等。
• 提交表单：在网页上提交表单后，可能需要刷新页面以显示成功信息或重置表单以进行新的提交。
• 状态重置：在某些情况下，你可能想重置网页的状态或清除某些数据以重新开始。刷新页面可以实现这一目的。

现在，让我们来探索用 JavaScript 刷新页面的不同方法。

方法 1：如何使用 location.reload() 刷新页面

在 JavaScript 中刷新页面的最简单方法是使用 location.reload() 方法。该方法会从服务器重新加载当前网页，丢弃当前内容并加载最新内容。

// 刷新页面
location.reload();

使用 location.reload() 的优点

• 简单明了，易于使用。
• 它能从服务器重新加载整个页面，确保你获得最新的内容。

使用 location.reload() 的缺点

• 它会丢弃页面的当前内容，可能导致用户输入或数据丢失。
• 重新加载页面时可能会产生闪烁效果，影响用户体验。

方法 2：如何使用 location.replace() 刷新页面

在 JavaScript 中刷新页面的另一种方法是使用 location.replace() 方法。该方法会用新的 URL 替换网页的当前 URL，从而有效地用新内容重新加载网页。

在控制台中尝试此方法时，会发现它显示的是当前的 URL：

console.log(location.href)

这意味着，当你使用 location.replace() 方法将网页的当前 URL 替换为新的 URL（相同的 URL）时，你的网页将刷新。

// 将 URL 替换为目标页面的 URL，刷新页面
location.replace(location.href);

使用 location.replace() 的优点

• 这是一种用新内容重新加载页面的快速方法。
• 它保留了页面的当前内容，只替换了 URL，避免了用户输入或数据的丢失。

使用 location.replace() 的缺点

• 它会替换页面的整个 URL，这可能会导致当前浏览历史记录丢失。
• 在某些情况下可能不起作用，例如当网页是在新窗口或标签页中打开时。

方法 3：如何使用 location.reload(true) 重载网页

location.reload() 方法还接受一个布尔参数 forceGet，当参数设置为 true 时，会强制从服务器重新加载网页，绕过缓存。

当你想确保从服务器获取最新内容时，即使页面已被缓存，这个参数也很有用。

// 刷新页面并绕过缓存
location.reload(true);

使用 location.reload(true) 的优点

• 即使页面已缓存，也能确保从服务器获取最新内容。

使用 location.reload(true) 的缺点

• 会丢弃页面的当前内容，导致用户输入或数据丢失。
• 重新加载页面时可能会产生闪烁效果，影响用户体验。

方法 4：如何使用 location.href 刷新页面

在 JavaScript 中刷新页面的另一种方法是使用 location.href 属性将网页的 URL 设置为自己的 URL。这实际上是用新的 URL 重新加载页面，从而触发页面刷新。

// 将 URL 替换为目标页面的 URL，刷新页面
location.href = location.href;

使用 location.href 的优点

• 这是一种简单有效的刷新页面方法。
• 它保留了页面的当前内容，只更新 URL，避免了用户输入或数据的丢失。

使用 location.href 的缺点

• 它会替换页面的整个 URL，这可能会导致当前浏览历史记录丢失。
• 在某些情况下可能不起作用，例如当网页是在新窗口或标签页中打开时。

方法 5：如何使用带有延迟的 location.reload() 来刷新页面

如果想在刷新页面前添加延迟，可以将 setTimeout() 函数与 location.reload() 方法结合使用。

这样就可以在重新加载页面前指定一个以毫秒为单位的时间间隔，从而控制刷新的时间。

// 延迟 3 秒后刷新页面
setTimeout(function(){
    location.reload();
}, 3000); // 3000 milliseconds = 3 seconds

使用带延迟的 location.reload() 的优点

• 它允许你通过添加延迟来控制页面刷新的时间。
• 在需要在特定事件或操作后刷新页面的情况下，它提供了灵活性。

使用带延迟的 location.reload() 的缺点

• 可能会导致页面刷新延迟，从而影响用户体验。
• 在网络连接不稳定或速度较慢的情况下，可能无法达到预期效果。

总结

在本文中，你了解了在 JavaScript 中刷新页面的不同方法。每种方法都有其优缺点，因此你可以更容易地为自己的 Web 开发项目选择最佳方法。

在使用这些方法刷新页面时，重要的是要考虑对用户体验、数据丢失和浏览历史记录的影响。

希望这篇文章能帮助你理解如何用 JavaScript 重新加载网页，并根据具体的使用情况选择合适的方法。

祝你编码愉快！

踏上学习之旅，浏览 200 多篇有关 Web 开发的专业文章。查看我的博客，获取更多精彩内容。

对象是编程中最常用的数据类型之一。对象是以键值对形式存储的相关数据的集合，例如：

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14,
}

在处理对象时，你可能需要在执行函数之前检查对象是否为空。

在 JavaScript 中，有多种方法可以检查对象是否为空。在本文中，你将了解到检查对象是否为空的各种方法、可附加的选项以及原因。

注意：当一个对象没有键值对时，它就被认为是空的。

如果你赶时间，下面是一个基本示例：

const myEmptyObj = {};

// 与新浏览器配合使用效果最佳
Object.keys(myEmptyObj).length === 0 && myEmptyObj.constructor === Object

// 适用于所有浏览器
_.isEmpty(myEmptyObj)

这两种方法都将返回 true。现在让我们来了解一下 JavaScript 中用于检查对象是否为空的这些方法和更多选项。

如何使用 Object.keys() 检查对象是否为空

Object.keys() 方法是 ECMAScript6（ES6）中引入的静态对象方法，所有现代浏览器都支持该方法。该方法返回一个包含对象键的数组，例如：

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

console.log(Object.keys(userDetails)); // ["name","username","age"]

这样，你就可以应用 .length 属性了。如果返回零（0），则对象为空。

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};

console.log(Object.keys(userDetails).length); // 3
console.log(Object.keys(myEmptyObj).length); // 0

现在，你可以使用此方法通过 if 语句或创建一个函数来检查对象是否为空。

const isObjectEmpty = (objectName) => {
  return Object.keys(objectName).length === 0
}

这将返回 true 或 false。如果对象为空，则返回 true，否则返回 false。

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};

const isObjectEmpty = (objectName) => {
  return Object.keys(objectName).length === 0
}

console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true

注意：在检查对象是否为空或任何数据类型时，仅检查长度并不是最佳选择。最好是先确认数据类型是否正确。

为此，可以使用构造函数检查：

const isObjectEmpty = (objectName) => {
  return Object.keys(objectName).length === 0 && objectName.constructor === Object;
}

这样，你就可以进行更彻底的检查。

到目前为止，一切正常。但是你可能还想避免在变量是 undefined 或传递的值为 null 而不是 {} 时抛出 TypeError。为了解决这个问题，你可以增加一个额外的检查：

const isObjectEmpty = (objectName) => {
  return (
    objectName &&
    Object.keys(objectName).length === 0 &&
    objectName.constructor === Object
  );
};

在上面的代码中，增加了一个额外的检查。这意味着，如果不是空对象，它将返回 null 或 undefined，如下例所示：

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};
let nullObj = null;
let undefinedObj;

const isObjectEmpty = (objectName) => {
  return (
    objectName &&
    Object.keys(objectName).length === 0 &&
    objectName.constructor === Object
  );
};

console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true
console.log(isObjectEmpty(undefinedObj)); // undefined
console.log(isObjectEmpty(nullObj)); // null

注：这也适用于其他对象静态方法，这意味着你可以使用 Object.entries() 或 Object.values() 代替 Object.keys()。

如何使用 for...in 循环检查对象是否为空

你可以使用的另一种方法是 ES6 for…in 循环。你可以将此循环与 hasOwnProperty() 方法一起使用。

const isObjectEmpty = (objectName) => {
  for (let prop in objectName) {
    if (objectName.hasOwnProperty(prop)) {
      return false;
    }
  }
  return true;
};

上述方法将循环遍历对象的每个属性。如果找到一个迭代，则说明对象不是空的。此外，hasOwnProperty() 将返回一个布尔值，表明对象是否将指定属性作为其属性。

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};

const isObjectEmpty = (objectName) => {
  for (let prop in objectName) {
    if (objectName.hasOwnProperty(prop)) {
      return false;
    }
  }
  return true;
};

console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true

如何使用 JSON.stringify() 检查对象是否为空

你还可以使用 JSON.stingify() 方法，该方法用于将 JavaScript 值转换为 JSON 字符串。这意味着它会将对象值转换为对象的字符串，例如：

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

console.log(JSON.stringify(userDetails)); 

Output:
"{'name':'John Doe','username':'jonnydoe','age':14}"

这意味着当对象为空时，它将返回 "{}"。你可以利用它来检查对象是否为空。

const isObjectEmpty = (objectName) => {
  return JSON.stringify(objectName) === "{}";
};

如果对象为空，则返回 true，否则返回 false：

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};

const isObjectEmpty = (objectName) => {
  return JSON.stringify(objectName) === "{}";
};

console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true

如何使用 Lodash 检查对象是否为空

最后，我在这里介绍的某些方法可能适用于旧版本的浏览器，而另一些方法则可能不起作用。如果你想找到一种既适用于旧版本浏览器又适用于现代浏览器的解决方案，可以使用 Lodash。

Lodash 是一个现代 JavaScript 工具库，可以用非常基本的语法实现许多 JavaScript 功能。

例如，如果要检查对象是否为空，只需使用 “isEmpty” 方法即可。

_.isEmpty(objectName);

在项目中安装 Lodash 非常简单。你只需使用此命令即可：

$ npm install lodash

现在，你可以初始化下划线方法来使用该方法。

const _ = require('lodash');

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};

const isObjectEmpty = (objectName) => {
  return _.isEmpty(objectName);
};

console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true

就是这些 💪

我喜欢探索检查对象是否为空的各种方法。请随意使用适合你的项目或任务的最佳方法。

祝你编码愉快！

踏上学习之旅，浏览 200 多篇有关 Web 开发的专业文章。查看我的博客，获取更多精彩内容。

DOM 操作是在学习 JavaScript 中最令人兴奋的主题之一。这是因为 JavaScript 的主要用途之一就是使网页具有交互性，而 DOM 在这里起到了重要作用。

DOM 是一个非常强大的工具，允许你与网页上的元素进行交互和操作。本手册将帮助你理解并自信地使用 DOM。

你将从 DOM 是什么以及 DOM 可以用来做什么开始学习，然后我们将深入学习如何选择、修改和为 DOM 元素设置样式，你也将学习如何创建一个新元素并添加到你的网页上。

手册也包含了像是如何遍历 DOM、DOM 事件是什么，以及一些项目实践的想法等主题。

让我们开始吧！

目录

• DOM 是什么
  • DOM 可以用来做什么
• 如何选择 DOM 元素
  • getElementById
  • getElementsByClassName
  • getElementsByTagName
  • querySelector
  • querySelectorAll
• 如何更改 DOM 元素的内容
  • innerHTML 属性
  • 使用 innerHTML 的安全风险
  • innerText 和 textContent 属性
• 如何处理 DOM 元素的属性
  • getAttribute() 方法
  • setAttribute() 方法
  • removeAttribute() 方法
  • hasAttribute() 方法
• 如何更改 DOM 的样式
  • 使用 .style 属性设置样式
  • 使用 class 设置样式
• 如何遍历 DOM
  • 节点和元素之间的不同
  • 使用 parentNode 还是 parentElement 选择父级
  • 使用 childNodes 还是 children 选择子级
  • 选择第一个或是最后一个元素/节点
  • 在 DOM 中选择兄弟节点
• DOM 事件和事件监听器
  • 事件监听器与事件处理函数
  • JavaScript 中三种注册事件的方法
  • 实践挑战
  • 实践挑战的解决方案
  • 事件对象
  • 事件类型
• JavaScript 的事件流
  • 事件冒泡
  • 事件捕获
  • Event 的 stopPropagation() 方法
• JavaScript DOM 项目
• 总结

DOM 是什么

DOM 全称是文档对象模型（Document Object Model），但是这是什么意思呢？我们分开来看看。

文档指的是你在浏览器上所看到的网页。具体来说，HTML 文档处理页面内容的结构，包括组成页面的文本、图片、链接和其他的元素。

对象指的是像 img, h1, p 这样的元素被视为对象。每一个对象都有属性（类似 id、 class、style）和方法，利用这些属性和方法你就可以操作这些元素。

模型指的是它是 HTML 文档的一种表示或副本，以分层树的形式呈现。这颗树包括了所有元素，并且有它们之间的父子关系。

浏览器会确保 DOM 与 HTML 文档同步，使它们总是保持一致。因此，如果 HTML 中的某些内容发生变化，DOM 也会相应变化，反之亦然。

在树的顶部是 Document 对象，它只有一个子元素 —— html 元素。html 元素也被称为根元素，它有 head 和 body 两个子元素，而每个子元素也都有它们自己的子元素。

元素之间的父子关系使你能够遍历、移动和选择它们。稍后会详细介绍。

DOM 可以用来做什么

DOM 操作允许开发者与网页的结构、样式、内容交互。下面是一些你可以通过 DOM 用来做的事情：

• 更改或移除 DOM 中存在的元素
• 创建并添加新元素到网页
• 更改一些元素的样式
• 给元素添加事件监听器让它们可交互

如何选择 DOM 元素

要对 DOM 元素执行操作，首先必须选择或访问相应的元素。在这一节，你将学到一些常见的方法去选择 DOM 元素。

让我们使用下面通讯录片段来展示各种 DOM 选择器方法如何工作。

  <h1 id="page-title">Phonebook</h1>
  
  <p class="family">Marie</p>
  <p class="family">Jose</p>
  <p class="work">Anne</p>
  <p class="work">Joan</p>

一个标题元素和四个段落元素的简单代码片段

这段代码包括了一个 id 为 page-title 的 h1 标题和四个 p 段落，前两个段落都具有 family 类，而后两个具有 work 类。

1. getElementById

你可以使用这个方法去选择带有 id 属性的元素，id 是独一无二的标识符。例如，当一个 h1 元素有值为 page-title 的 id，页面上的其他元素不应该有相同值作为 id。

这意味着每当你使用 getElementById() 方法，你将只会从 DOM 中选择一个元素。

我们来看例子：

这个 h1 有值为 page-title 的 id，以下是使用 getElementById() 方法选择它的办法：

const titleElement = document.getElementById("page-title")
console.log(titleElement)

这里例子选择了 h1 元素并赋值给了变量 titleElement。

如果 DOM 中没有给定 id 的元素，则 getElementById() 将返回 null。

2. getElementsByClassName

你可以使用这个方法选择超过一个对象。这个方法获取 class 属性的值作为参数在 DOM 中选择给定 class 的所有元素。与 id 不一样，你可以在不同的 HTML 元素上给一个相同的 class。

看这个例子：

const famContacts = document.getElementsByClassName("family")
console.log(famContacts)

这返回了给定 class 的所有元素的 HTML 集合，控制台上如下所示：

注意：HTML 集合看起来像是数组，但实际上不是。你可以使用括号符号访问元素，就像访问数组一样，但是不能使用像是 map、filter 或是 forEach 等数组方法。

console.log(famContacts[0]) 

这样会获得 HTML 集合中的第一个元素，也就是名字为 Marie 的段落。

但是如果你想通过循环遍历 famContacts HTML 集合中的所有元素呢？你首先需要将 HTML 集合转换成数组，然后你就可以任意使用数组方法了。

一个简单的办法从 HTML 集合创建数组就是使用展开语法，像是这样：

let famContactsArray = [...famContacts]

famContactsArray.forEach(element => console.log(element))

使用 forEach 方法，你可以访问 famContactsArray 中每一个子项。如果你没有从 HTML 集合创建一个数组，而试着将数组方法直接用于它浏览器将会抛出一个错误。

这个方法将通过标签名来选择元素。例如：getElementByTagName('p') 将选择页面中所有 p 标签。

像是 getElementsByClassName()，这个方法也返回一个被选择元素的 HTML 集合。

看这个例子:

const allContacts = document.getElementsByTagName('p')
console.log(allContacts)

你可以从 HTML 集合创建一个数组，然后使用任意数组方法。

let allContactsArray = [...allContacts]

allContactsArray.map(element => console.log(element))

译者注：由于 map() 创建一个新数组，在没有使用返回的数组的情况下调用它是不恰当的；应该使用 forEach 或 for...of 作为代替。详见 Array.prototype.map()。

4. querySelector

你可以使用这个方法在 DOM 中选择任意的 HTML 元素，它仅返回一个元素：第一个匹配选择器的元素。

querySelector() 用法类似 CSS 选择器。

举个例子，当你想要选择一个具有 id 的元素时，你会怎么做？用 #id。那当你想要选择具有 class 的元素呢？你会用 .class。

看这个例子:

const firstWorkContact = document.querySelector('.work')
console.log(firstWorkContact)

上边这个例子只获取到了一个具有 work 类的元素，其他的被忽略了。

让我们再看一个像是 CSS 选择器一样使用 querySelector() 的例子。下方 div 元素包含了 4 个 button。

<div>
    <button>First button</button>
    <button>Second button</button>
    <button>Third button</button>
    <button>Fourth button</button>
</div>

假设你想要选择第三个按钮，你可以像下面那样使用 querySelector()。代码中使用了 CSS nth-child 选择器去获取 div 中的第三个 button。

const thirdBtn = document.querySelector('div button:nth-child(3)')
console.log(thirdBtn)

但如果你想选择所有四个按钮而不只是第一个呢？你应该使用 querySelectorAll() 代替。

5. querySelectorAll

类似 querySelector()，querySelectorAll 也是使用 CSS 选择器去选择 HTML 元素。不同的是它返回匹配选择器的所有元素，而不仅仅是第一个。

让我们使用 querySelectorAll() 选择上一个示例中所有的按钮。

const allBtns = document.querySelectorAll('button')
console.log(allBtns)

querySelectorAll() 返回一个被选择元素组成的 NodeList。

注意：querySelectorAll() 返回一个 NodeList。NodeList 与 HTML 集合有点不同，你不需要转换成数组就可以使用 forEach() 方法。

allBtns.forEach(btn => console.log(btn))

但是你仍然不能在 NodeList 使用 map、filter 等这类数组方法，如果你需要的话应该创建一个数组。

你可以阅读这篇 freeCodeCamp 关于 HTML 集合和 NodeList 之间区别的文章来了解更多。

如何更改 DOM 元素的内容

目前为止，你已经学到了几种不同的方法去选择 DOM 元素，但这仅仅是开始。现在，让我们来看看如何操作 DOM 去更改网页的内容。

你需要做的第一件事就是选择元素，你可以用上一小节学到的任一方法。

在选择元素后，你可以使用这几种方法去添加或更新内容。

`innerHTML` 属性

这是一种可以让你读取、更新元素的内容或结构的方法。让我们看看应该如何使用 innerHTML 方法。

下面是一个包含三个 p 标签的代码片段，每个 p 标签都有一个 id。

  <p id="topic">JS array methods</p>
  <p id="first-method">map</p>
  <p id="second-method">filter</p>

你可以使用 innerHTML 获取任一段落的内容。举个例子，我们来获取第一个段落的内容。

const topicElement = document.querySelector('#topic')
console.log(topicElement.innerHTML)

现在，假设你想将 topic 内容从“JS array methods”更改为“JavaScript array methods”。你可以通过将新文本赋值给元素的 innerHTML 来实现。

const topicElement = document.querySelector('#topic')
topicElement.innerHTML = "JavaScript array methods"

使用 innerHTML，你可以更改的不只是内容，你也可以更改元素的 HTML 结构。例如，如果你想让 “JavaScript” 加粗，你可以这样做：

topicElement.innerHTML = "<b>JavaScript</b> array methods"

使用 `innerHTML` 的安全风险

使用 innerHTML 会带来潜在的安全风险，例如：XSS（Cross-site scripting，跨站脚本）攻击。

如果插入的内容来自用户输入或任何不受信任的来源，请确保在使用 innerHTML 前做好校验或清洗，以防止 XSS 攻击。你可以使用类似 DOMPurify 的库来实现这一点。

此外，如果你处理纯文本内容，可以考虑使用 innerText 和 textContent。

`innerText` 和 `textContent` 属性

innerText 和 textContent 忽略 HTML 标签，会把它们当作字符串的一部分。你可以使用这两种方法去读取或更新 DOM 元素的文本。

这两种方法的关键区别在于如何处理文本。使用 innerText 会返回显示在屏幕上的文本，而使用 textContent 则返回标记中的文本。来看下面的例子。

<p>Key =<span style="display: none;">     ABC123<span></p>

这个例子中包括了一个 p 标签，p 标签中 span 标签包含了 Key 的值。因为 span 内联样式被设置为 “none”，所以 Key 值不会显示在屏幕上。

现在，让我们选择这个 p 标签，然后打印 innerText、textContent 这两个值，看看有什么不同。

const paragraph = document.querySelector('p');

console.log("innerText: ", paragraph.innerText)
console.log("textContent: ", paragraph.textContent)

请注意 innerText 返回的文本是在屏幕上显示的样子（不包含使用 CSS 隐藏的 Key 值），textContent 返回的文本包括了隐藏的元素和空格。

让我们再看另一个添加文本到元素的例子。下面的代码包括两个 p 标签，每个 p 标签都有一个 b 标签和一个空的 span 标签，以及它们之间有一个 hr 标签。

  <p>
    <b>innerText Example</b>
    <span id="inner-text"></span>
  </p>
  
  <hr>	
 
  <p>
    <b>textContent Example</b>
    <span id="textContent"></span>
  </p>

现在，让我们选择两个 span 元素，并在其中添加相同的文本。这将帮助你更好地理解 innerText 和 textContent 之间的区别。

const example1 = document.querySelector('#inner-text');
const example2 = document.querySelector('#text-content');

let address = `
  ABC Street,
  Spintex Road,
  Accra,
  Ghana.
`;

example1.innerText = address;
example2.textContent = address;

这段代码给两个示例提供了相同的变量 address，第一个使用了 innerText，第二个使用了 textContent。请看下面的结果：

请注意 innerText 换行了，而 textContent 却没有。

两个方法的另一个关键不同是它们在内部循环的行为，当在一个循环中处理批量操作或频繁更新时 innerText 比 textContent 会慢一些。

看看这篇 freeCodeCamp 文章可以了解更多 innerHTML、innerText 和 textContent 之间的不同。

如何处理 DOM 元素的属性

HTML 属性 提供了有关 HTML 元素的有用信息。这些属性总是包含在元素的开始标签内，属性由一个 name 和 value 组成（但也有只出现 name 的例外情况）。

浏览器根据 HTML 结构生成 DOM 时，会将这些属性转化为 DOM 对象的动态属性。

看这个例子：

这个 HTML 中有一个按钮，按钮有一些属性：

<button id="myBtn" type="submit">Click Here</button>

对于这个例子，浏览器会创建一个 HTMLButtonElement 对象到 DOM 中，并且这个对象的属性也互相匹配。

• HTMLButtonElement.id 的值是 myBtn
• HTMLButtonElement.type 的值是 submit

要使用 JavaScript 与这些属性进行交互和操作，可以使用诸如 getAttribute() 和 setAttribute() 之类的方法直接访问这些属性。

`getAttribute()` 方法

顾名思义，你可以使用这个方法去获取元素上已经存在的属性。

它接受一个参数（属性名）返回属性值，如果你给的属性值在这个元素中不存在，这个方法会返回 null。

看这个例子：

<img src="image.jpg" alt="An example image">

const imageElement = document.querySelector('img')
console.log(imageElement.getAttribute('src'))

在上面的例子中，使用 getAttribute() 方法，你可以获取 img 标签的 src 属性值。

`setAttribute()` 方法

这个方法用来设置、更改元素的属性。它接受两个参数，第一个参数是你想要更改的属性名，第二个参数是你想要设定的新值。

看这个例子：

<img src="image.jpg" alt="An example image">

const imageElement = document.querySelector('img')

console.log("BEFORE:", imageElement.getAttribute('src'))
imageElement.setAttribute('src', 'new-image.jpg')
console.log("AFTER:", imageElement.getAttribute('src'))

这个例子先打印了 src 属性值，然后使用 setAttribute() 从 image.jpg 到 new-image.jpg 更改了值。

当你给 setAttribute() 传递了一个在这个元素中不存在的属性作为参数时，它将创建一个新属性。例如，你可以添加一个 height 属性给 img 标签：

const imageElement = document.querySelector('img')

console.log("BEFORE:", imageElement.getAttribute('height'))
imageElement.setAttribute('height', '200')
console.log("AFTER:", imageElement.getAttribute('height'))

第一个打印语句返回 null 是因为 height 属性不存在，但是在我们使用 setAttribute() 设置过后，第二个打印语句返回了 height 的正确值。

`removeAttribute()` 方法

在前面的小节中，你学到了如何使用 setAttribute() 添加一个新属性。如果你想移除一个已存在的属性呢？

你可以使用 removeAttribute() 方法，传递一个你想要移除属性名作为参数。

看这个例子：

  <img src="image.jpg" alt="An example image" height="200">

让我们使用 removeAttribute() 方法移除 height 属性从 img 标签上。

const imageElement = document.querySelector('img')

console.log("BEFORE:", imageElement.getAttribute('height'))
imageElement.removeAttribute('height', '200')
console.log("AFTER:", imageElement.getAttribute('height'))

在调用 removeAttribute() 前，我们第一次打印了 height 的属性值，是 200，但在调用 removeAttribute() 之后，第二次打印结果是 null，可以确认我们从 img 中移除了 height 属性。

`hasAttribute()` 方法

处理 DOM 属性的的另一个方法是 hasAttribute()，你可以使用这个方法检查元素是否有指定的属性。

如果指定属性存在， 则 hasAttribute() 方法返回 true，否则返回 false。

看这个例子：

<img src="image.jpg" alt="An example image" height="200">

让我们使用 hasAttribute() 去检查 img 上是否存在 height 和 width 属性。

const imageElement = document.querySelector('img')

console.log("HEIGHT", imageElement.hasAttribute('height'))
console.log("WIDTH", imageElement.hasAttribute('width'))

因为它存在这个属性，所以 height 返回了 true，而检查 width 时返回了 false，因为它不存在。

如何更改 DOM 的样式

在 JavaScript 中，有两种主要方法处理 DOM 元素的样式，你可以使用 .style 属性或者使用 class。每种方法都有自己的优点以及最适合的情况。

使用 `.style` 属性设置样式

如果你想对某个元素做指定更改的话，你可以使用 .style 属性。.style 属性允许你采用内联的形式直接为元素设置样式，这意味着他会覆盖你在 CSS 中的样式。

使用 .style 属性，你可以访问全部的 CSS 属性，看下面的演示：

  <h1>Styling elements with JavaScript</h1>

const header = document.querySelector('h1')
console.log(header.style)

console.log() 打印了该元素的 CSS 样式声明以及所有的 CSS 属性。

现在我们看一个如何使用 .style 属性的例子。

  <h1>I love JavaScript</h1>

这里有一个 h1 标题，现在让我们使用 .style 属性给它增加一点样式。

const paragraph = document.querySelector('h1')

paragraph.style.color = 'white'
paragraph.style.backgroundColor = 'green'

注意：在 JavaScript 中，如果 CSS 属性名包含两个或更多的单词，你不能使用“-”连字符。例如，在 CSS 中你可以写 background-color，但是在 JavaScript 代码中，你必须使用小驼峰命名，所以 background-color 变成了 backgroundColor。

你也可以通过设定属性值为空字符串删除一个元素的样式。

element.style.propertyName = ""

使用 class 设置样式

通过 class，你可以一次创建样式，并将其应用于不同的元素。这有助于提高代码的可维护性。

className 属性

className 属性展示了 DOM 元素的 class 属性。并且你可以使用它去获取或设置 class 的属性值。

看这个例子：

<p class="food rice-dish">Jollof rice</p>

const jollofParagraph = document.querySelector('p')

console.log(jollofParagraph.className)

jollofParagraph.className = 'favorite'

console.log(jollofParagraph.className)

className 可以读取或替换最近的 class，在上面的例子中，第一次打印是 class 的初始值，在更新 className 属性后，第二次打印则是新值。

这里还有一个更灵活的属性，举个例子，如果你想添加一个其他 class 而不是使用新的 class 替换老的 class 呢？这就是 classList 属性的作用所在。

classList 属性

使用 classList 属性，你可以添加或者移除 class。你可以切换 class、使用新值替换 class，甚至可以检查 class 中是否包含某个值。

看这个例子：

<p class="food">Jollof rice</p>

const jollofParagraph = document.querySelector('p')
console.log(jollofParagraph.classList)

使用 classList.add() 添加 class

jollofParagraph.classList.add('fav', 'tasty')

console.log(jollofParagraph.classList)

这段代码添加了 fav 和 tasty 两个新 class 到 class 列表。

使用 classList.remove() 移除 class

jollofParagraph.classList.remove('tasty')

console.log(jollofParagraph.classList)

这段代码从 class 列表中移除了 tasty class。

使用 classList.replace() 替换 class

jollofParagraph.classList.replace('fav', 'favorite')

console.log(jollofParagraph.classList)

这段代码使用 favorite 替换了 fav

使用 classList.contains() 检查 class 是否存在

const isFavorite = jollofParagraph.classList.contains('favorite')
const isSoup = jollofParagraph.classList.contains('soup')

console.log("Contains favorite: ", isFavorite)
console.log("Contains soup: ", isSoup)

这段代码会检查传递给它的 class 是否包含在 class 列表中。

如果包含在 class 列表中（例如 favorite），则返回 true；如果不包含在 class 列表中（例如 soup），则返回 false。

使用 classList.toggle() 切换 class

当你使用 toggle() 时，它会首先检查该 class 是否存在。如果存在，它将删除该 class 。如果不存在，则会添加。

jollofParagraph.classList.toggle('favorite')
console.log(jollofParagraph.classList)

jollofParagraph.classList.toggle('favorite')
console.log(jollofParagraph.classList)

jollofParagraph.classList.toggle('favorite')
console.log(jollofParagraph.classList)

第一次切换，favorite 存在 class 列表中，所以移除。

第二次切换，favorite 不存在 class 列表中，所以添加。

第三次切换，现在 favorite 存在 class 列表中了，所以从 class 列表中移除。

toggle() 会根据 class 的存在与否，不断从 class 列表中添加或删除该值。

如何遍历 DOM

遍历 DOM 意味着在 HTML 文档中的不同元素或节点间移动，包括选择和访问父级、子级或者是兄弟元素（或是节点）。你可以这样做去操作文档结构或是获取信息。

但在我们进入这一小节前，你需要理解节点和元素之间的不同。

节点和元素之间的不同

节点是 DOM 的构件，它们代表着 HTML 结构中的不同组件。

元素是一种特定的节点，但并非所有节点都是元素。代码中一些像是元素属性、文本内容或者是注释都是节点，但它们不是元素。

元素是一种特定类型的节点，它定义了文档内容的结构，可以把元素当作你在用的 HTML 标签，例如 <div>、<p> 和 <ul>。每个元素都可以由属性、文本内容和其他嵌套元素组成。

使用 `parentNode` 还是 `parentElement` 选择父级

当要选择 DOM 元素的父级时，你可以使用 parentNode 或者 parentElement，它们都可以获取到你给的元素的父级。

从实用角度看，元素或节点的父级总是一个元素。所以，无论你使用哪一个，你总能获得选择元素的正确父级。

让我们看一个选择元素父级的例子：

  <div class="container">
    <p class="full-text">
        <i id="italics">Some italicized text</i>
    </p>
  </div>

const italicizedText = document.getElementById('italics')

console.log(italicizedText.parentNode)
console.log(italicizedText.parentNode.parentNode)

首先，选择一个元素，然后，调用 parentNode 这个属性去获取父级。你也可以像是第二个打印语句一样链式调用 parentNode 属性去获取父级的父级。

下面的截图展示了两个打印语句的输出。

使用 `childNodes` 还是 `children` 选择子级

你可以使用 .childNodes 和 .children 属性去选择元素的内容，但它们有些不同。

childNodes： 返回一个被选择元素的所有子节点的 NodeList。它包含元素和像是文本、注释或是其他非元素节点。

.children： 返回一个被选择元素的只包含子元素的 HTML 集合。它不包含像是文本、注释这样的非元素节点。

让我们通过一个例子看看它们的不同：

  <div id="container">
    A text node
    <p>Some paragraph</p>
    <!-- This is a comment -->
    <span>Span Element</span>
  </div>

上面的代码只有两个元素，p 和 span，但是有其他节点 —— 文本节点、注释。

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

const containerChildNodes = container.childNodes;
const containerChildren = container.children;

console.log(containerChildNodes);
console.log(containerChildren);

childNodes 将返回所有的子节点（包括元素和非元素），它还将元素之间的空格作为文本节点。

这用起来可能会让人感到困惑。因此，除非有充分的理由，否则应坚持使用 .children 属性。

children 将只会返回子元素（p 和 span）。

选择第一个或是最后一个元素/节点

如果你只需要选择第一个或是最后一个元素，你可以使用这四个属性。

• firstChild: 只选择父元素的第一个子节点。
• lastChild: 只选择父元素的最后一个子节点。
• firstElementChild: 选择父元素的第一个子元素。
• lastElementChild: 选择父元素的最后一个子元素。

让我们用上一小节中相同的例子，看看它们分别使如何工作的：

  <div id="container">
    A text node
    <p>Some paragraph</p>
    <!-- This is a comment -->
    <span>Span Element</span>
  </div>

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

console.log("FIRST CHILD:", container.firstChild)
console.log("LAST CHILD:", container.lastChild)
console.log("FIRST ELEMENT: ", container.firstElementChild)
console.log("LAST ELEMENT:", container.lastElementChild)

注意 firstChild 返回的是第一个文本节点，但 firstElementChild 返回的是第一个元素 p。这意味着它忽略了 p 标签前的文本节点。

另外，请注意 lastChild 返回一个文本节点，尽管从标签上来看 span 之后似乎什么都没有。这是因为 lastChild 属性将 span 的结束标签和 div 元素的结束标签之间的换行符/空格视为一个节点。

这就是为什么通常来说使用 firstElementChild 和 lastElementChild会更安全。

在 DOM 中选择兄弟节点

你已经学到了如何选择元素的父级或子级，你也可以使用以下属性选择元素的兄弟节点。

• nextSibling: 选择相同父元素的下一个节点。
• nextElementSibling: 选择下一个元素忽略任何非元素节点。
• previousSibling: 选择相同父元素的上一个节点。
• previousElementSibling: 选择上一个元素忽略任何非元素节点。

看这个例子：

  <div>
    <p id="one">First paragraph</p>
    text node
    <p id="two">Second paragraph</p>
    another text node
    <p id="three">Third paragraph</p>
    <p id="four">Fourth paragraph</p>
  </div>

const paragraphTwo = document.getElementById('two')

console.log("nextSibling: ", paragraphTwo.nextSibling)
console.log("nextElementSibling: ", paragraphTwo.nextElementSibling)
console.log("previousSibling: ", paragraphTwo.previousSibling)
console.log("previousElementSibling: ", paragraphTwo.previousElementSibling)

nextSibling 和 previousSibling 会选择文本节点，因为它们会考虑父节点内的所有节点。然而，nextElementSibling 和 previousElementSibling 可以只选择 p 标签，因为它们忽略文本这样的非元素节点。

DOM 事件和事件监听器

DOM 事件是浏览器中发生的动作。有了这些事件，你就可以使网站具有互动性。

一些 DOM 事件是用户发起的，像是点击、移动鼠标或是用键盘打字。另一些是浏览器发起的，像是页面加载完成。

事件监听器与事件处理函数

事件监听器是一个让你知道事件什么时候发生的方法，它允许你监听注意 DOM 事件，这样当事件发生时，你可以做点什么。

事件处理函数是对这个事件的响应，当事件发生时这个函数将会运行。

举个例子，你可以给按钮附加一个事件监听器，当用户点击的时候你就可以知道了。然后，你可以写一个事件处理函数，在点击事件发生时在屏幕上打印一些内容。

在这个案例中，当点击发生时事件监听器会通知你的应用，然后触发响应；这个响应（事件发生时调用的函数）就是事件处理函数。

JavaScript 中三种注册事件的方法

你可以使用 JavaScript 通过下面三种不同方法监听并响应 DOM 事件。

• 使用内联的事件处理函数： 就是你添加一个事件监听器作为 HTML 元素的属性。在 JavaScript 早期，这是使用事件唯一的方法。看下面这个例子：

// Example of using an inline event handler

<button onclick="alert('Hello')">Click me!</button>

• 使用 onEvent 处理函数： 当元素只有一个事件处理函数时你可以这样使用。当你使用这个方法添加超过一个事件处理函数时，只有最后一个函数会运行，因为它会覆盖之前其他的。

<!-- An example of using an on-event handler -->

<button>Click me!</button>

<script>
  const myButton = document.querySelector('button')
	
  myButton.onclick = function() {
    console.log("Run first handler")
  }
	
  myButton.onclick = function() {
    console.log("Run second handler")
  }
</script>

正如在控制台所看到的结果，浏览器只运行了第二个事件处理函数的代码。

• 使用 addEventListener() 方法： 这个方法允许你附加超过一个事件处理函数到一个元素上。并且它将按照它们被添加的顺序执行。

一般来说，你应该坚持使用 addEventListener()，除非你有一个令人信服的理由。

addEventListener() 接受两个参数，第一个参数是你想监听的事件名称，第二个参数是当事件发生时你想要运行的事件处理函数。

<!-- An example of using the addEventListener method -->

<button>Click me!</button>

<script>
  const myButton = document.querySelector('button')
	
  myButton.addEventListener('click', function() {
    console.log("Run first handler")
  })
	
  myButton.addEventListener('click', function() {
    console.log("Run second handler")
  })
</script>

实践挑战

再继续学习之前这里有一个挑战。在看解题方法之前，先试着自己解决它。

请看下面的 HTML 和 CSS 代码。

这个挑战包括了两个元素，一个 div#gift-box 和一个 button#click-btn，礼物盒子有一个 hide class。

你的任务是写 JavaScript 去监听按钮的点击事件，当用户点击按钮时显示隐藏的盒子。

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    
      <div id="gift-box" class="hide">🎁</div>
      <button id="click-btn">Show the box</button>
      
  </body>
</html>

.hide {
  display: none;
}

#gift-box {
  font-size: 5em;
}

在 StackBlitz 解决这个挑战

实践挑战的解决方案

如果你能解决这个难题，那恭喜你。如果你没有解决也没事，下面提供了解决方案和解释。

const giftBoxElement = document.getElementById('gift-box')
const buttonElement = document.getElementById('click-btn')

buttonElement.addEventListener('click', function() {
  giftBoxElement.classList.remove('hide')
})

为了解决这个挑战，首先你需要选择 #gift-box 和 #click-btn 两个元素。

然后，你需要给按钮添加一个事件监听器，像是之前提到的，addEventListener() 接受两个参数。

在这个案例中，第一个参数是 'click'，第二个参数是一个函数。

目标是显示这个盒子，盒子使用 hide class 在 CSS 中设置了 display 为 none。显示盒子的一种方法是使用 JavaScript 从 classList 中移除 hide。

事件对象

这是一个当事件发生时浏览器传递给事件处理函数作为参数的 JavaScript 对象。对象包含了一些有用的属性和方法：

• type：发生的事件类型（例如：点击、鼠标悬浮、按下按键等等）
• target：触发这个事件的元素
• clientX 和 clientY：事件发生时，鼠标指针的水平和垂直的坐标
• preventDefault()：阻止与事件相关的默认动作，例如阻止表单的默认提交事件
• stopPropagation()：阻止事件通过 DOM 传播，后面会详细说明

你可以查看所有的属性和方法在 MDN 文档。

事件类型

浏览器允许你监听的 DOM 事件种类很多，下面列举一些常见的。

鼠标事件：

• click：当元素被点击
• dbclick：当元素被双击
• mouseover：当鼠标指针移入元素
• mouseleave：当鼠标指针离开元素
• mousedown：当鼠标在元素上按下
• mouseup：当鼠标在元素上松开

键盘事件：

• keydown：当键盘按键被按下
• keyup：当键盘按键被松开
• keypress：当按键被按下并显示事件的按键时，注意这个事件不是所有按键都可以触发，尤其是不可打印字符按键

表单事件：

• submit：当表单被提交
• input：当输入框字段更改
• change：当表单元素值被更改并失焦

窗口事件：

• load：当浏览器完成页面加载
• unload：当用户离开页面
• resize：当浏览器窗口被调整大小
• scroll：当用户滚动浏览文档

你可以在这查看详细的 DOM 事件表。

JavaScript 的事件流

当 JavaScript 事件发生时，事件会在 DOM 中从发生事件的目标传播到最外层的元素，反之亦然。

例如，假设你点击了页面上的一个按钮。在点击按钮的同时，你也点击了它的父元素以及按钮在 DOM 层次结构中的任何元素。

事件冒泡

这是指事件首先在发生的目标（或是某个元素）被注册，然后向外注册到父元素，最后注册到最外层的元素。

看这个例子：

<!DOCTYPE html>
<html>
    <head>
        <title>Event bubbling DEMO</title>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
              <button id='btn'>Click Here</button>
            </div>
        </div>
    </body>
</html>

例子中包含了一个 #btn 按钮，随着事件冒泡，当按钮上发生事件（如点击）时，事件会按以下顺序发生。

DOM 中的事件冒泡：从 button 到 div#inner 到 div#outer 到 body 到 html 到 document。

事件从目标元素开始向上冒泡，回到最外层的祖先元素。

事件捕获

事件捕获与事件冒泡相反，事件从最外层祖先元素开始向下沿着 DOM 树到目标元素。

在事件捕获阶段，附加到元素上的事件侦听器是按照从最顶层的祖先到目标元素的层次结构顺序执行的。

如果你想知道为什么这很重要，让我们使用和上面相同的 HTML 片段，看一个实际的例子：

<!DOCTYPE html>
<html>
    <head>
        <title>Event bubbling DEMO</title>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
              <button id='btn'>Click Here</button>
            </div>
        </div>
    </body>
</html>

让我们分别添加一个事件监听器到button、#inner、#outer 上：

const button = document.getElementById('btn')
const innerDiv = document.getElementById('inner')
const outerDiv = document.getElementById('outer')

button.addEventListener('click', function() {
  console.log('Click on button')
})

innerDiv.addEventListener('click', function() {
  console.log('Click on inner Div')
})

outerDiv.addEventListener('click', function() {
  console.log('Click on outer Div')
})

默认情况下，浏览器使用事件冒泡的机制，因此，无需为事件监听器添加任何其他参数。这是事件处理函数响应按钮点击时的运行顺序：

1. button
2. #innerDiv
3. #outerDiv

使用事件捕获模型，你可以通过给事件监听器传递第三个参数为 true。

const button = document.getElementById('btn')
const innerDiv = document.getElementById('inner')
const outerDiv = document.getElementById('outer')

button.addEventListener('click', function() {
  console.log('Click on button')
}, true)

innerDiv.addEventListener('click', function() {
  console.log('Click on inner Div')
}, true)

outerDiv.addEventListener('click', function() {
  console.log('Click on outer Div')
}, true)

现在运行，事件处理函数的执行顺序将会是相反的方向，像是这样：

1. #outerDiv
2. #innerDiv
3. button

`stopPropagation()` 停止传播事件

你已经学习了事件冒泡如何在元素上注册事件，并一直注册到最外层的祖先元素，也看到了事件捕获是怎么反过来的。

但是如果你不想注册事件到所有祖先呢？这就是 stopPropagation() 的作用所在，你可以使用这个方法在整个 DOM 中阻止事件的传播。

让我们看看如何在之前的例子中使用 stopPropagation()：

button.addEventListener('click', function(event) {
  event.stopPropagation()
  console.log('Click on button')
})

innerDiv.addEventListener('click', function() {
  console.log('Click on inner Div')
})

outerDiv.addEventListener('click', function() {
  console.log('Click on outer Div')
})

stopPropagation() 只允许第一个事件监听器的执行。

现在，只有一个事件处理函数被触发。因为 stopPropagation() 在按钮的事件处理函数中，所以在 innerDiv 和 outerDiv 的事件处理函数并没有被触发。

此外，注意 event 对象，你需要在事件处理函数中作为参数传递它。

JavaScript DOM 项目

构建项目是提高对编码概念理解的绝佳方式，所以，卷起袖子，准备工作吧！

这有五个项目想法去帮助你练习巩固你的技巧。

切换开关

设计一个开关，当它被点击时切换它的状态，更新 DOM （例如颜色）反映开关的当前状态。

随机颜色选择器

创建一个简单的应用，用户可以点击一个按钮生成一个随机颜色。在屏幕上包括一个填充被选择颜色的图形，同时显示颜色代码。

倒计时

构建一个从指定时间开始的计时器，在屏幕上实时更新显示剩余时间。

单词计数器

开发一个应用，它提供一个文本输入框和文本域给用户用来输入。当用户输入时，在屏幕上实时显示单词个数。

交互式的 Todo 列表

创建一个应用，允许用户添加、删除、编辑任务。你可以随你开心添加一些想要的高级特性，例如标记任务完成、过滤任务或是排序等。

总结

如果你已经走到了这里，那你现在应该对操作 JavaScript DOM 有着不错的理解。随着实践，你将有足够的信心来处理需要了解这些 DOM 操作概念的高级项目。

一个良好的操作原版 JS DOM 的基础将在使用 React，Angular，Vue，Svelte 这些 JavaScript 库时派上用场。

感谢你阅读本文，祝你编码愉快！想获取更多有深度的教程，欢迎随时订阅我的 YouTube 频道。

正则表达式，也被称为 regex，是用于模式匹配和文本处理的强大工具。无论是验证用户输入、从字符串中提取数据，还是进行高级的文本处理任务，理解正则表达式对开发人员来说都是必不可少的。

这份全面的指南将带领你了解 JavaScript 中正则表达式的基础知识，包括如何创建和使用正则表达式、正则表达式中的特殊字符、标志以及一些实际的示例。

预备知识

虽然本教程旨在适合初学者，但具备基本的 JavaScript 基础知识将会有所帮助。熟悉 JavaScript 中的变量、数据类型、函数和字符串处理将有助于理解本教程涵盖的概念。

目录

1. 什么是正则表达式
   – 如何编写一个正则表达式的模式
2. 如何在JavaScript中使用正则表达式
   – JavaScript中的正则表达式模式
   – 通过标志进行高级搜索
3. 正则表达式中的锚点
   – 锚点的多行模式
   – 单词边界（\b）
4. 正则表达式中的量词
   – 贪婪量词
   – 非贪婪量词（懒惰模式）
5. 正则表达式中的集合与区间
   – 集合
   – 区间
   – 否定/排除区间
   – 预定义的字符类
6. 正则表达式中的特殊字符与转义
   – 元字符
   – 转义特殊字符
7. 正则表达式中的分组
   – 捕获组
   – 非捕获组
   – 后向引用
   – 正则表达式选择符号
8. 正则表达式中的前瞻断言和后顾断言
   – 前瞻断言（?=）
   – 否定前瞻断言（?!）
   – 后顾断言（?<=）
   – 否定后顾断言（?<!）
9. 正则表达式的实际应用示例
   – 密码强度检查
   – 电子邮件地址校验
   – 电话号码格式化函数
10. 使用正则表达式的技巧和最佳实践方式
11. 总结

什么是正则表达式

正则表达式是一种定义搜索模式的字符序列，通常缩写为“regex”。这种模式提供了一种强大的方式来搜索、替换和操作文本，它被用于在字符串中查找匹配项，帮助你识别特定的文本或字符模型。

在JavaScript中，你可以使用字面量或RegExp构造函数创建正则表达式：

• 使用正则表达式字面量：模式由斜杠（"/"）包围。

const re = /pattern/;

// 示例
const re = /ab+c/;

• 使用构造函数：RegExp 构造函数。这种方式允许对正则表达式进行运行时编译，并且在模式可能更改时非常有用。

const re = new RegExp("pattern");

// 示例
const re = new RegExp("ab+c");

两种方法会产生相同的结果——选择哪一种取决于你的偏好。

如何编写一个正则表达式的模式

一个正则表达式模式是由简单的字符或者是简单和特殊字符的组合所构成的。

1. 简单模式：它们匹配精确的字符序列。例如，模式 /abc/ 匹配字符串中的序列"abc"。
2. 特殊字符：它们通过重复或匹配特定类型的字符等功能增强了模式匹配，从而实现了更灵活、更强大的模式匹配。例如，* 匹配前一项出现0次或多次。/ab*c/ 匹配 "ac"、"abc"、"abbc" 等等诸如这类形式的字符串。

如何在JavaScript中使用正则表达式

你可以使用JavaScript中适用于 RegExp 和 String 对象的多种方法来使用正则表达式，例如test()和 exec()方法，以及具有如下语法的方法：

regex.methodname(string)

// 示例
string.test(string)

以及类似于 match() 和 replace() 方法，以及具有这种语法的方法：

string.methodname(regex)

// 示例
string.replace(regex, replacement)

在这里， string 是字符串， regex 是一种正则表达式模式。

让我们来探讨一下这些方法在实践中是如何使用的。

test() 方法：检查特定字符串是否与指定模式或正则表达式匹配。如果字符串中找到了该模式，则返回 true；否则返回 false。

let pattern = /hello/;
let str = "hello world";

let result = pattern.test(str);
console.log(result); // 输出为：true

exec() 方法：根据正则表达式模式的内容搜索字符串中的匹配项。它返回一个数组，其中包含匹配文本、匹配项在字符串中的索引以及输入字符串本身的详细信息。例如：

let pattern = /world/;
let str = "hello world";

let result = pattern.exec(str);
console.log(result); // 输出为：["world", index: 6, input: "hello world"]

match()方法: 根据正则表达式模式的内容，在字符串中搜索它的出现次数。它返回匹配的第一个元素。如果具有全局标志（g），则返回一个包含所有找到的匹配项的数组，如果没有找到匹配项，则返回 null。

let str = "The quick brown fox jumps over the lazy dog.";
let matches = str.match(/the/gi);

console.log(matches); // 输出为： ["The", "the"]

/the/gi 在字符串中搜索所有出现的单词 "the"，不区分大小写。

matchAll()方法: 返回一个用于匹配字符串中正则表达式的所有结果的迭代器。迭代器的每个元素都是一个数组，包含有关匹配的详细信息，包括捕获的分组。

let str = "Hello world! This is a test string.";
let regex = /[a-zA-Z]+/g;

let matches = str.matchAll(regex);

for (let match of matches) {
    console.log(match);
}

当你需要获取字符串中所有匹配项的详细信息时，此方法非常有用。

search()方法: 在字符串中搜索指定的模式。它返回字符串中模式的第一个出现的索引，如果未找到模式，则返回 -1。

let str = "The quick brown fox jumps over the lazy dog";
let pattern = /brown/;

let result = str.search(pattern);
console.log(result); // 输出为： 10

replace()方法：用另一个子字符串或值替换字符串中指定模式的第一个实例。要替换所有实例，可以在正则表达式中使用全局标志（g）。

let str = "Hello, World!";
let newStr = str.replace(/o/g, "0");

console.log(newStr); // 输出为： "Hell0, W0rld!"

replaceAll()方法：替换指定子字符串或模式的所有实例为一个替代字符串。它与 replace() 的不同之处在于，它默认替换所有出现实例，无需使用全局标志（g）。

let str = "apple,banana,apple,grape";
let newStr = str.replaceAll("apple", "orange");
console.log(newStr); // 输出为： "orange,banana,orange,grape"

这种方法简化了在字符串中替换所有子字符串实例的过程。

split()方法: 虽然 split() 并不是专属于正则表达式的方法，但它可以接受一个正则表达式模式作为其参数，根据指定的模式或分隔符将字符串拆分为子字符串数组。例如：

let str = "apple,banana,grape";
let arr = str.split(/,/);
console.log(arr); // 输出为：["apple", "banana", "grape"]

这些方法根据你的需求提供不同的功能。例如，如果你只需要知道字符串中是否找到了模式，则 test() 或 search() 方法是有效的。如果你需要更多关于匹配的信息，则 exec() 或 match() 方法是合适的。

通过标志进行高级搜索

在JavaScript中，正则表达式支持模式标志，这些是可选参数，修改了模式匹配的行为。

让我们深入了解两个常见的标志：忽略标志（i）和全局标志（g）。

忽略标志（i）

忽略标志（i）可以使正则表达式在搜索匹配项时忽略大小写敏感性。例如：

let re = /hello/i;
let testString = "Hello, World!";
let result = re.test(testString);

console.log(result); // 输出为：true

在这种情况下，正则表达式 /hello/i 会匹配字符串 "Hello"（即使大小写不同），因为我们使用了忽略标志。

全局标志（g）

全局标志（g）允许正则表达式在字符串中找到所有匹配项，而不是在找到第一个匹配项后停止。例如：

let re = /hi/g;
let testString = "hi there, hi again!";
let result = testString.match(re);

console.log(result); // 输出为：["hi", "hi"]

在这个例子中，正则表达式 /hi/g 找到了字符串 "hi there, hi again!" 中的两个 "hi" 的实例。

组合标志

你可以将标志进行组合以实现特定的匹配行为。例如，同时使用忽略标志（i）和全局标志（g）允许进行不区分大小写的匹配，直到找到模式的所有匹配项。

let re = /hi/gi;
let testString = "Hi there, HI again!";
let result = testString.match(re);

console.log(result); // 输出为：["Hi", "HI"]

在这个例子中，正则表达式 /hi/gi 匹配字符串 "Hi there, HI again!" 中的 "Hi" 和 "HI"。

u 标志

虽然不常用，但 u 标志可以正确处理 Unicode 字符，特别是代理项对。代理项对用于表示 UTF-16 编码中基本多文种平面（BMP）之外的字符。

示例： 让我们考虑一个包含表情符号字符的字符串，并尝试分别使用包含u标志和不包含u标志的正则表达式来匹配它们。

// 不使用u标志
let result1 = 'Smile Please 😊'.match(/[😒😊🙄]/);
console.log(result1); // 输出为：["�"]

// 使用u标志
let result2 = 'Smile Please 😊'.match(/[😒😊🙄]/u);
console.log(result2); // 输出为：["😊"]

没有使用 u 标志时，正则表达式无法正确匹配表情符号，因为它们在 UTF-16 编码中表示为代理项对。但是，使用 u 标志时，它可以正确匹配表情符号 '😊'。

正则表达式中的锚点

锚点是正则表达式中的特殊字符，它们不表示实际字符，而是用于检查字符在字符串中是否处于特定的位置。本文讲解两个主要的锚点：^ 和 $。

锚点 ^：锚点 ^ 匹配文本的开头。一般情况下，它检查字符串是否以特定字符或模式开头。

let str = 'Mountain';
console.log(/^S/.test(str)); // 输出为：false

锚点 $：锚点 $ 匹配文本的结尾。它检查字符串是否以特定字符或模式结尾。

let str = 'Ocean';
console.log(/n$/.test(str)); // 输出为：true

你经常会一起使用 ^ 和 $ 来检查字符串是否完全匹配某个模式。

let isValid = /^\d\d:\d\d$/.test('10:01');
console.log(isValid); // 输出为：true

这个示例检查输入字符串是否匹配时间格式，例如 "10:01"。

在上面的代码中，^\d\d:\d\d$ 确保字符串包含两个数字，后跟一个冒号，然后是两个数字。

锚点的多行模式（`^` 和 `$`）

默认情况下，正则表达式中的 ^ 和 $ 锚点以单行模式操作，意味着它们匹配整个字符串的开头和结尾。但在某些情况下，你可能希望匹配多行字符串中各行的开头和结尾，这就是多行模式的作用，可以通过 m 标志来指示。

由于单行模式是默认的，因此它只匹配字符串开头的第一个数字 "1"。

let str = `1st line
2nd line
3rd line`;

let re = /^\d/g; // "^\d" 匹配字符串开头的数字
let matches = str.match(re);

console.log(matches); // 输出为：["1"]

• 多行模式（m）：/^\d/gm 是启用了 m 标志的正则表达式模式。通过利用 m 标志，你可以确保 ^ 和 $ 匹配多行字符串中各行的开头和结尾，而不仅仅是整个字符串本身。

因此，它从第一行匹配到 "1"，从第二行匹配到 "2"，从第三行匹配到 "3"：

let str = `1st line
2nd line
3rd line`;

let re = /^\d/gm;
let matches = str.match(re);

console.log(matches); // 输出为：["1", "2", "3"]

这在处理包含多行或换行符的文本时特别有用。

单词边界（`\b`）

\b 是正则表达式中的一个特殊字符，称为锚点，就像 ^ 和 $ 一样。它用于匹配字符串中的位置，其中一个单词字符（如字母、数字或下划线）之前或之后不是另一个单词字符。例如：

• \bword\b 匹配字符串中的单词 "word"，但不匹配子串如 "wording" 或 "swordfish"。

let pattern = /\bword\b/;
let pattern2 = /word/;
console.log(pattern.test("This is a word.")); // 输出为：true
console.log(pattern.test("This is wording.")); // 输出为：false (没有匹配"wording")
console.log(pattern2.test("This is wording")); // 输出为：True

/word/ 在字符串中的任何位置匹配子串 "word"。它在 "This is wording." 中匹配 "word"，因为它不包括任何单词边界断言。

其他示例包括：

• \b\d+\b 匹配字符串中的整数，但不包括数字字符相邻的非数字字符。
• ^\bword\b$ 匹配仅由单词 “word” 组成的字符串。

正则表达式中的量词

在正则表达式中，量词允许你指定你想要在字符串中匹配的字符或字符类的数量。它们是定义你要查找的字符或组的实例数量的符号或字符。

精确数量量词 {n}

最简单的量词是 {n}，它指定了你想匹配的字符或字符类的精确的数量。（译者注：该量词的一般使用形式为x{n}，其中x为任意字符或字符类，n为正整数，该量词的含义为“与‘只重复出现n次的x’对应的部分匹配”。）假设我们有一个字符串 "Year: 2022"，我们想从中提取年份：

let str = 'Year: 2022';
let re = /\d{4}/; // 匹配一个四位数字；基本上是等同于\d\d\d\d的更简洁、更好的写法。

let result = str.match(re);

console.log(result); // 输出为：["2022"]

（译者注：在上述例子中，该量词对应的模式只会与四位数字匹配。对于小于四位数字的字符串，例如203，该模式不会匹配；对于大于四位数字的字符串，例如20356，该模式会匹配最前面四位数字“2035”。参考文档链接）

区间量词 {n,m}

区间量词 {n,m} 匹配一个字符或字符类从 n 到 m 次，包括 n 和 m。例如：

let str = "The meeting is scheduled for 10:30 AM and ends at 2 PM";
let re = /\d{2,4}/g; // 匹配有2到4位数字的数

let result = str.match(re);
console.log(result); // 输出为：[ '10', '30' ]

/\d{2,4}/g 匹配连续有2到4位数字的数，即 '10'、'30'。
（译者注：区间量词中，n的取值为0或一个正整数，m>n且m为一个正整数。与精确数量量词{n}相似，例如对于形式为a{2,4}的量词，它不会匹配"candy"中的'a'，而对于"caaaaady"，它只会匹配其中的前四个'a'）

{n,} 和简写形式

{n,} 量词匹配一个字符或字符类至少 n 次。此外，还有常见量词的简写表示法。例如：

let str = 'The price of the item is $2500';
let re = /\d{2,}/g; // 匹配至少有2位数字的数。

let result = str.match(re);
console.log(result); // 输出为：["2500"]

简写形式：+, ?, *

量词 +、? 和 * 是常见用例的简写表示法。让我们使用简写 + 来匹配电话号码中的一个或多个数字：

let phone = "+1-(103)-777-0101";
let result = phone.match(/\d+/g); // 匹配一个或多个数字。

console.log(result); // 输出为：["1", "103", "777", "0101"]

/\d+/g 匹配电话号码中一个或多个连续数字。

量词：零或一次（?）

正则表达式中的量词 ? 表示前一个字符或组的零次或一次出现。它等同于 {0,1}。例如：

let str = 'The sky is blue in color, but the ocean is blue in colour';
let result = str.match(/colou?r/g); // 匹配"color"和"colour"

console.log(result); // 输出为：["color", "colour"]

在这个例子中，正则表达式 /colou?r/g 匹配给定字符串中的 "color" 和 "colour"，允许字母 "u" 出现零次或一次。

量词：零次或更多（*）

在正则表达式中，量词 * 表示前一个字符或组的零次或更多次出现。它等同于 {0,}。例如：

let str = 'Computer science is fascinating, but computational engineering is equally interesting';
let re = /comput\w*/g; // 匹配"computer"和"computational"

let results = str.match(re);

console.log(results); // 输出为：["computer", "computational"]

贪婪量词

在正则表达式中，量词决定了特定元素在匹配中可以出现的次数。

默认情况下，量词以所谓的“贪婪”模式运行。这意味着它们会尝试匹配尽可能多的前一个元素。例如：

let regexp = /".+"/g;
let str = 'The "Boy" and his "Friends" were here';
console.log( str.match(regexp) ); // "Boy" and his "Friends"

它找到一个包含两者（"Boy" and his "Friends"）的匹配，而不是找到两个单独的匹配（"Boy" 和 "Friends"）。

理解贪婪搜索

为了理解为什么初始尝试失败，让我们深入了解正则表达式引擎是如何进行搜索的。

1. 引擎从字符串的开始处开始，并找到开头的引号。
2. 它继续匹配跟在开头引号后面的字符。由于模式是 ".+"，其中 . 匹配任何字符，+ 使其匹配一次或多次，引擎会继续匹配字符，直到达到字符串的末尾。
3. 然后，引擎回溯以找到结束引号 " 以完成匹配。它首先假设由 ".+" 匹配的最大可能字符数量，并逐渐减少字符数量，直到找到有效的匹配。
4. 最终，引擎找到了一个包含整个子字符串 "Boy" and his "Friends" 的匹配。

这种贪婪地匹配尽可能多的字符的行为是正则表达式中量词的默认模式，不总是产生期望的结果。你可以在这个例子中看到这一点，它导致单一匹配，而不是对带引号的字符串进行多个独立的匹配。

非贪婪量词（懒惰模式）

为了解决贪婪模式的限制，正则表达式也支持量词的懒惰模式。在懒惰模式中，量词后的字符重复的次数是满足模式所必需的最小次数。

我们可以通过在量词后添加一个问号 ? 来启用懒惰模式。例如，*? 或 +? 表示懒惰重复。

let regexp = /".+?"/g;
let str = 'The "Boy" and his "Friends" were here';
console.log( str.match(regexp) ); // "Boy" "Friends"

在这个例子中，懒惰量词 ".+?" 确保每个带引号的字符串都被单独匹配，通过最小化开头和结束引号之间匹配的字符数量。

让我们逐步跟踪搜索过程，以理解懒惰量词是如何工作的：

• 引擎从字符串的开始处开始，并找到开头的引号。
• 与其贪婪地匹配直到字符串的末尾的所有字符，懒惰量词 ".+?" 只匹配满足模式所需的字符。它一遇到结束引号 " 就停止。
• 引擎为文本中的每个带引号的字符串重复此过程，导致 "Boy" 和 "Friends" 分别被单独匹配。

正则表达式的集合与区间

在正则表达式中，你可以使用集合和区间来匹配特定的字符或在给定模式内的一系列字符。

集合

一个集合使用方括号 [...] 来定义。它允许你匹配集合中的任何字符。例如，[aeiou] 匹配元音字母 'a', 'e', 'i', 'o', 或 'u' 中的任何一个。

示例： 假设我们有一个字符串 'The quick brown fox jumps over the lazy dog.'。为了匹配这个字符串中的所有元音字母，我们可以使用正则表达式 /[aeiou]/g。

let str = 'The quick brown fox jumps over the lazy dog.';
let re = /[aeiou]/g;
let results = str.match(re);

console.log(results); // 输出为：['e', 'u', 'i', 'o', 'o', 'u', 'o', 'e', 'e', 'a', 'o']

这个正则表达式匹配字符串中所有元音字母的实例。

let str = 'The cat chased the rats in the backyard';;
let re = /[cr]at/g;
let results = str.match(re);

console.log(results); // 输出为：['cats', 'rats']

在这里，正则表达式 [cr]at 匹配以 'c' 或 'r' 开头，并跟着 'at' 的单词。

区间

区间允许你在集合内指定一系列字符。例如，[a-z] 匹配从 'a' 到 'z' 的任何小写字母，而 [0-9] 匹配从 '0' 到 '9' 的任何数字。示例：

let str = 'Hello World!';
let re = /[a-z]/g;
let results = str.match(re);

console.log(results); // 输出为：['e', 'l', 'l', 'o', 'o', 'r', 'l', 'd']

在这里，正则表达式 [a-z] 匹配字符串中的所有小写字母。

否定/排除区间

要从集合中排除某些字符，你可以在方括号内使用 ^ 符号。例如：

let str = 'The price is $19.99';
let re = /[^0-9]/g;
let results = str.match(re);

console.log(results); // 输出为：['T', 'h', 'e', ' ', 'p', 'r', 'i', 'c', 'e', ' ', 'i', 's', ' ', '$', '.'] 

在这里，[^0-9] 匹配字符串中不是数字的任何字符。同样地，[^a-z] 将匹配任何不是小写字母的字符：

let str = 'The price is $19.99';
let results2 = str.match(/[^a-z]/g);

console.log(results2); // 输出为：['T', ' ', ' ', ' ', '$', '1', '9', '.', '9', '9']

预定义的字符类

某些字符类具有预定义的简写符号，用于常见字符区间的匹配。

\d类：\d匹配任何数字字符，等价于区间 [0-9]。例如：

let phone = '+1-(103)-777-0101';
let re = /\d/g;
let numbers = phone.match(re);
let phoneNo = numbers.join('');
console.log(phoneNo); // 输出为：11037770101

我们使用 match() 和 join() 方法来格式化电话号码。这种方法简化了数据的处理和清理过程，使其适用于各种文本处理应用程序。

类似地，\s 匹配单个空白字符，包括空格、制表符和换行符，而 \w 匹配任何单词字符（字母数字字符或下划线），等价于区间 [a-zA-Z0-9_]。

结合这些类可以实现更灵活、更精确的模式匹配，从而实现各种文本处理任务。示例：

let str = 'O2 is oxygen';
let re = /\w\d/g;
console.log(str.match(re)); // 输出为：["O2"]

这些预定义的字符类为常用的字符区间提供了便捷途径。

反向类，用大写字母表示（例如，\D），匹配任何不包含在相应小写类中的字符。这提供了一种方便的方式来匹配特定集合之外的字符，例如非数字字符、非空白字符或非单词字符。示例：

let phone = '+1-(103)-777-0101';
let re = /\D/g;
console.log(phone.replace(re,'')); // 输出为：11037770101

正则表达式中的特殊字符与转义

元字符

元字符是在正则表达式中具有特殊含义的字符，用于构建用于匹配文本的模式。

锚点 (^ 和 $)、交替 (|)、量词 (+, ?, {}) 和预定义的字符类 (\d, \w, \s) 都被认为是元字符，每个都在模式定义中有不同的用途。我们还有一些其他的元字符，现在我们来详细介绍它们。

点号 (.) 是一个具有特殊含义的元字符。它用于匹配除换行符 (\n) 外的任何单个字符。它起到通配符的作用，允许在确切字符未知或无关紧要时进行灵活的模式匹配。

如果你需要点号匹配换行符，你可以在 JavaScript 中使用 /s 标志，该标志启用了 "单行" 模式，使点号匹配任何字符，包括换行符。例如：

const regex = /a.b/; 

console.log(regex.test('acb')); // true
console.log(regex.test('aXb')); // true
console.log(regex.test('a\nb')); // false（未匹配到换行符）
console.log(regex.test('a\nb', 's')); // true（使用 's' 标志，匹配到换行符）
console.log(regex.test('ab')); // false（'a' 和 'b' 之间缺少字符）

/a.b/ 匹配以 'a' 开始，后跟任何单个字符（除换行符外），并以 'b' 结束的任何字符串。

点号 (.) 可以与其他正则表达式元素结合，形成更复杂的模式。例如，/.at/ 匹配任何以 'at' 结尾的三个字符序列，如 'cat'、'bat' 或 'hat'。

转义特殊字符

在正则表达式模式中，当你想要搜索或匹配这些字符，而不触发它们的特殊正则表达式含义，转义特殊字符是至关重要的。

要在正则表达式模式中字面匹配一个特殊字符，你需要通过在其前面加上反斜杠（\）来转义它。这告诉正则表达式引擎将特殊字符视为普通字符。例如：

let str = 'This ^ symbol is called Caret ';
let re = /[\^]/g;
let results = str.match(re);

console.log(results); // 输出为：['^']

如果没有\，^ 将被解释为字面插入符号。

有趣的事实是，我们用来转义元字符的 / 本身也是一个元字符，可以用另一个反斜杠来转义成 //。

正则表达式中的分组

捕获组

在JavaScript正则表达式中，捕获组用于提取匹配字符串的特定部分。试想你有一个类似于"resource/id"的路径，例如 "posts/123"。为了匹配这个路径，你可以使用正则表达式 /\w+\/\d+/。

• \w+ 匹配一个或多个单词字符。
• \/ 匹配斜杠 /。
• \d+ 匹配一个或多个数字。

假设你有一个路径像 "posts/123"，你想捕获 id 部分（123）。我们可以使用捕获组来实现这一点。

要创建一个捕获组，你将想要捕获的正则表达式模式的部分放在括号中。例如，(\d+) 捕获一个或多个数字。

这是它的运行步骤：

const path = 'posts/123';
const pattern = /\w+\/(\d+)/;

const match = path.match(pattern);
console.log(match);

输出为：

[ 'posts/123', '123', index: 0, input: 'posts/123', groups: undefined ]

在这里，'123' 被捕获组 (\d+) 捕获。

使用多个捕获组：你可以在正则表达式模式中使用多个捕获组。例如，为了从路径 "posts/123" 中同时捕获资源（如 "posts"）和 id（如 "123"），你可以使用 /(\w+)\/(\d+)/。

const path = 'posts/123';
const pattern = /(\w+)\/(\d+)/;

const match = path.match(pattern);
console.log(match);

输出为：

['posts/123', 'posts', '123', index: 0, input: 'posts/123', groups: undefined]

在这里，'posts' 和 '123' 分别由两个捕获组 (\w+) 和 (\d+) 捕获。

命名捕获组允许你为捕获组指定名称，这样在后续的代码中引用它们会更容易。

命名捕获组的语法是 (?<name>rule)，其中：

• () 表示一个捕获组。
• ?<name> 指定捕获组的名称。
• rule 是模式中的一个规则。

例如，假设我们想要使用命名捕获组从路径 "posts/123" 中捕获资源（如 "posts"）和 id（如 "123"）。

const path = 'posts/123';
const pattern = /(?<resource>\w+)\/(?<id>\d+)/;

const match = path.match(pattern);
console.log(match);

输出为：

[
  'posts/123',
  'posts',
  '123',
  index: 0,
  input: 'posts/123',
  groups: [Object: null prototype] { resource: 'posts', id: '10' }
]

在这里，resource 和 id 是分配给捕获组的名称。我们可以使用 match.groups 来访问它们。

另一个例子: 假设我们有一个类似于"posts/2022/02/18"的路径，我们想要使用命名捕获组来捕获资源（如 "posts"）、年份（如 "2022"）、月份（如 "02"）和日期（如 "18"）。

该例子对应的正则表达式的模式为：

const path = 'posts/2024/02/22';
const pattern =
  /(?<resource>\w+)\/(?<year>\d{4})\/(?<month>\d{2})\/(?<day>\d{2})/;

const match = path.match(pattern);
console.log(match.groups);

输出为：

{resource: 'posts', year: '2024', month: '02', day: '22'}

在这里，路径的每个部分都使用命名捕获组进行捕获，这样就可以轻松地通过它们各自的名称访问它们。

非捕获组

在正则表达式中，非捕获组用于将模式的部分组合在一起，以便应用量词或交替，而不捕获匹配的子字符串。

要创建一个非捕获组，你需要在括号的开始处添加 ?:。因此，/(?:\d)+/ 是前一个示例的非捕获版本。?: 告诉正则表达式引擎不要捕获匹配的子字符串。

让我们通过一个例子来看捕获组和非捕获组之间的区别：

// capturing group
const regexWithCapture = /(\d{2})\/(\d{2})\/(\d{4})/;
const matchWithCapture = regexWithCapture.exec('02/26/2024');

console.log(matchWithCapture); // ["02/26/2024", "02", "26", "2024"]

// non-capturing group
const regexWithoutCapture = /(?:\d{2})\/(?:\d{2})\/(?:\d{4})/;
const matchWithoutCapture = regexWithoutCapture.exec('02/26/2024');

console.log(matchWithoutCapture); // ["02/26/2024"]

总结来说，非捕获组 (?:pattern) 在匹配模式方面的行为与常规捕获组 () 相同，但它们不会将匹配的文本存储在内存中以供以后检索。这使得它们在你不需要提取匹配文本的特定部分时非常有用。

后向引用

后向引用允许你在正则表达式中引用先前捕获的组，将它们视为存储匹配模式的变量。

在JavaScript中，后向引用的语法是 \N，其中 N 是表示捕获组编号的整数。

例如，考虑一个包含重复单词 "Lion" 的字符串，我们希望删除重复的单词以得到 'Lion is the King'：

const s = 'Lion Lion is the King';

• 首先，我们使用 \w+\s+ 匹配一个单词。
• 然后，我们创建一个捕获组来捕获这个单词，使用 (\w+)\s+。
• 接下来，我们使用反向引用 (\1) 来引用第一个捕获组。
• 最后，我们使用 String.replace() 将整个匹配替换为第一个捕获组。

const pattern = /(\w+)\s+\1/;
const result = s.replace(pattern, '$1');
console.log(result); // 输出为：'Lion is the King'

正则表达式选择符号

正则表达式的选择符号是一种允许你在单个正则表达式中匹配不同的模式的功能。它的工作方式类似于逻辑运算符OR。正则表达式使用竖线符号 | 表示选择符号，你可以使用它来匹配 A 或 B。

A | B // 这意味着你可以匹配模式A或模式B

现在，让我们探讨一些正则表达式选择符号的实际应用：

匹配格式为hh:mm的时间字符串：假设我们想要匹配格式为 hh:mm 的时间字符串，其中 hh 表示小时，mm 表示分钟。一个基本的正则表达式来匹配这种格式就是 /\d{2}:\d{2}/。

然而，这个基本模式匹配了无效的时间，比如 "99:99"。为了确保我们匹配有效的时间（小时区间从00到23，分钟区间从00到59），我们需要使用选择符号来完善我们的正则表达式。

为了匹配有效的小时（00到23），我们可以使用以下模式：

• [01]\d 匹配00到19的数字。
• 2[0-3] 匹配20到23的数字。

因此，小时的模式变为 [01]\d|2[0-3]。

我们可以使用模式 [0-5]\d 来匹配有效的分钟数(00 to 59)。

现在，我们可以使用选择符号将小时和分钟模式结合起来，得到最终的正则表达式模式：

/([01]\d|2[0-3]):[0-5]\d/g

在这个模式中:

• ([01]\d|2[0-3]) 匹配有效的小时数。
• : 匹配冒号。
• [0-5]\d 匹配有效的分钟数。

该正则表达式模式确保我们只匹配 hh:mm 格式的有效时间字符串。例如：

const timeString = '07:23 33:71 21:17 25:81';
const pattern = /([01]\d|2[0-3]):[0-5]\d/g;
const matches = timeString.match(pattern);

console.log(matches);

期望输出:

['07:23', '21:17']

正则表达式中的前瞻断言和后顾断言

前瞻断言

正则表达式中的前瞻允许仅当某个模式（X）后面紧跟着另一个特定模式（Y）时进行匹配。语法是 X(?=Y)，其中：

• X 是你要匹配的模式。
• (?=Y) 是前瞻断言，指示 X 应该紧跟着 Y。

例如： 假设我们有一个描述各种距离的字符串，我们想要识别字符串中包含的单位为 "miles" 而不是 "kilometers" 的数字。我们可以在正则表达式模式中使用前瞻断言：

const dist = "He ran 5 miles, but not 10 kilometers.";

const regex = /\d+(?=\s*miles)/g;

console.log(dist.match(regex)); // 输出为：["5"]

多重前瞻断言: 在正则表达式中可以使用语法 X(?=Y)(?=Z) 来使用多个前瞻断言，这能够让我们对匹配施加多个条件。

例如: 假设我们想要匹配同时包含 "foo" 和 "bar" 的字符串，但它们可以以任意的顺序排列：

const regex = /(?=.*foo)(?=.*bar)/;

console.log(regex.test("foobar")); // true
console.log(regex.test("barfoo")); // true
console.log(regex.test("foo"));    // false
console.log(regex.test("bar"));    // false

否定前瞻断言

为了否定一个前瞻断言，可以使用否定前瞻断言，其语法为 (?!Y)。在这种情况下，正则表达式引擎只有在 X 后面不跟着 Y 的情况下才会匹配 X。

例如： 假设我们想要匹配数字，但不希望它们后面跟着 "miles"：

const text = "He ran 5 miles, but not 10 kilometers.";

const regex = /\d+(?!\s*miles)/g;

console.log(text.match(regex)); // 输出为：["10"]

(?!\s*miles) 是一个否定前瞻断言，它确保数字后面不是零个或多个空格加上单词 "miles"。

后顾断言

后顾断言提供了一种根据其前面的内容来匹配模式的方式，如果某个特定元素在其前面，则匹配该元素。

例如：假设我们有一个包含价格的字符串，并且我们想要匹配在货币符号 "$" 前面的数字，但不匹配在 "€" 前面的数字。我们可以在正则表达式模式中使用后顾断言。

const priceString = "The price is $100, but €200.";

const regex = /(?<=\$)\d+/g;

console.log(priceString.match(regex)); // 输出为：["100"]

说明：如果在当前位置之前有一个文字字符串 "$"，(?<=\$) 就会匹配该元素。反斜杠 \ 用于转义特殊字符 "$"，将其视为字面字符。

否定后顾断言

否定后顾断言允许你仅在模式之前不是特定模式的情况下匹配该模式。这对于根据前面的内容排除某些模式的匹配非常有用。

示例：假设我们有一个包含不同货币的各种价格的字符串，并且我们想要匹配不是以货币符号 "$" 开头的数字。我们可以在正则表达式模式中使用否定后顾断言：

const priceString = "The price is $50, but not €100.";

const regex = /(?<!\$)\b\d+\b/g;

console.log(priceString.match(regex)); // 输出为： ["100"]

说明： (?<!\$) 是否定后顾断言语法，它只在当前位置之前不是字面字符串"$"时匹配后面的模式。

正则表达式的实际应用示例

现在，让我们探索一些在JavaScript应用程序中使用正则表达式来解决常见问题和执行文本操作任务的实际示例。

密码强度检验函数

你可以使用正则表达式来强制执行密码强度要求，例如最小长度和特殊字符的存在。

function checkPasswordStrength(password) {
    let pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}$/;
    return pattern.test(password);
}

console.log(checkPasswordStrength("Passw0rd!"));    // 输出为：true
console.log(checkPasswordStrength("weakpassword")); // 输出为：false

这里的正则表达式确保密码包含至少1个数字、1个小写字母、1个大写字母、1个特殊字符，并且密码长度至少为8个字符。

这个模式进行了如下操作:

• (?=.*\d): 要求至少一个数字。
• (?=.*[a-z]): 要求至少一个小写字母。
• (?=.*[A-Z]): 要求至少一个大写字母。
• (?=.*[!@#$%^&*]): 要求至少一个特殊符号。
• .{8,}: 要求密码长度至少为8个字符。

电子邮箱地址校验函数

电子邮件验证对于确保网络应用程序中的数据完整性和安全性至关重要。通过使用正则表达式，我们可以轻松实现强大的电子邮件验证机制。

function validateEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

console.log(validateEmail("example@email.com")); // true
console.log(validateEmail("invalid-email"));      // false

这个模式进行了如下操作：

• ^: 断言字符串的起始位置。
• [^\s@]+: 匹配一个或多个非空白字符或'@'字符。
• @: 匹配'@'符号。
• [^\s@]+: 匹配一个或多个非空白字符或'@'字符。
• \.: 匹配'.'符号 (因为'.'在正则表达式中具有特殊意义，所以需要转义。)。
• [^\s@]+: 匹配一个或多个非空白字符或'@'字符。
• $: 断言字符串的结束位置。

电话号码格式化函数

在涉及电话号码输入和显示的应用程序中，电话号码格式化增强了用户体验和可读性。

通过定义一个匹配电话号码组件的regex模式，我们可以使用 replace() 方法轻松地将电话号码格式化为所需的模式。

function formatPhoneNumber(phoneNumber) {
    const phoneRegex = /(\d{3})(\d{3})(\d{4})/;
    return phoneNumber.replace(phoneRegex, "($1) $2-$3");
}

const formattedNumber = formatPhoneNumber("9876543210");
console.log(formattedNumber); // (987) 654-3210

这个函数接受一个电话号码字符串作为输入，并以标准的 (XXX) XXX-XXXX 格式返回。

在 replace() 方法中, $1, $2, 和 $3 表示以RegEx模式捕获的组，对应于电话号码中的三组数字。

使用正则表达式的技巧和最佳实践方式

1. 理解正则表达式语法

了解正则表达式的语法和元字符，以便有效使用正则表达式。

2. 测试正则表达式

由于复杂的模式或特殊字符，正则表达式有时会表现出意外的行为。经常使用不同的输入字符串测试你的正则表达式，以确保它们在不同的场景中表现得像预期的那样。

3. 优化性能

考虑通过简化模式或尽可能使用更有效的替代方案来优化正则表达式的性能。

4. 使用内置方法

JavaScript提供了例如 String.prototype.match(), String.prototype.replace(), 和 String.prototype.split()等用于常见的字符串操作任务的内置方法。评估这些方法是否可以在不需要正则表达式的情况下完成任务。

5. 为你的正则表达式添加注释

使用 (?#comment) 语法为你的正则表达式添加注释来解释部分复杂的模式。例如:

const regex = /(\d{3})-(\d{3})-(\d{4})\s(?# Match a phone number in the format XXX-XXX-XXXX)/;

6. 分解复杂模式

如果你的正则表达式太过复杂而难以理解或维护，请考虑将其分解为更小、更易于管理的部分。使用变量来存储正则表达式模式的各个组件，并根据需要组合它们。

7. 利用在线资源并坚持练习

有许多在线资源和工具可以用来测试和学习正则表达式。Regex101 和 RegExr 等网站提供了测试和调试正则表达式的交互式平台。还可以利用在线教程和文档来学习 regex 概念。

MDN Web Docs 提供了关于正则表达式的有用指南39。以下是 JavaScript 中正则表达式的快速入门指南：RegExp 教程。

总结

正则表达式是 JavaScript 中用于模式匹配和操作的通用工具。

通过理解正则表达式的方法、高级特性和对标志的使用，利用在线资源和调试工具，你可以有效地学习它们，并将它们应用于各种场景，从简单的模式匹配到复杂的文本处理任务。

你听说过停车场挑战吗？ 如果没有，那让我来简单解释一下吧。

停车场挑战要求编写一个管理停车场的 class。

在本教程中，我们将用 JavaScript 来实现这一挑战。为了让停车场更有趣一点，我们将创建一个小小的 React App，用以可视化我们的代码。

让我们开始吧。🎉

挑战要求

为实现挑战，你需要使用 JavaScript 实现一个类。 该类应包含以模拟停车场工作的变量和方法。 下面是详细要求：

• 我们需要创建具有指定大小（停车位数量）的停车场
• 我们认为所有车辆都是相同的，所以我们不需要对车辆进行区分
• 我们的类提供了一种在停车场停放新车的方法
• 我们的类提供了一种移除已停放车辆的方法
• 我们的类提供了一种获取停车场大小（车位总数）的方法

停车场挑战解决方案

首先，让我们看一下停车场类的逻辑。

停车场自身的逻辑很简单，所以可能对于你们大多数人来说没有任何难度————特别当你已具备一些 OOP 和基于类的编程经验时。

使用class实现停车场挑战

我将会先展示实现代码，再对于代码实现进行简短的解释。

class ParkingLot {
  slots = [];

  constructor(parkingSize) {
    this.slots = new Array(parkingSize).fill(null);
  }

  park(carId) {
    console.log(`Parking car: ${carId}`);
    if (this.slots.every((slot) => slot !== null)) {
      return false;
    }

    for (let i = 0; i <= this.slots.length; i++) {
      const slot = this.slots[i];

      if (slot === null) {
        this.slots[i] = carId;
        return true;
      }
    }
  }

  remove(carId) {
    console.log(`Leaving car: ${carId}`);
    if (this.slots.every((slot) => slot !== carId)) {
      return false;
    }

    for (let i = 0; i <= this.slots.length; i++) {
      const slot = this.slots[i];

      if (slot === carId) {
        this.slots[i] = null;
        return true;
      }
    }
  }

  getSlots() {
    console.log(`Parking slots: ${this.slots}`);
    return this.slots;
  }

  getSize() {
    console.log(`Parking size is: ${this.slots.length}`);
    return this.slots.length;
  }

  getAvailable() {
    const availableSlots = this.slots.filter((s) => s === null).length;
    console.log(`Available parking slots: ${availableSlots}`);
    return availableSlots;
  }

  isFull() {
    return this.getAvailable() === 0;
  }
}

export default ParkingLot;

让我们从头开始：首先，我们的停车场class有一个slots属性，这个属性是一个数组，用于存储有关停车位的信息（不考虑停车位是否已被占用）。

在slots属性之后，我们创建了constructor方法，constructor将在每次创建停车场类的实例时都会执行。在constructor中，我们使用parkingSize的输入数值参数来创建一个长度等于该数字的空数组。

严格来说，这个数组并不是空数组，因为我们用为 null 的值对它进行了初始化。这意味着在构造函数执行结束后，我们将会得到一个填充了 null 值的数组，而数组的具体大小则取决于我们传入构造方法的值。

举个例子，如果我们执行下面的代码：

const parking = new ParkingLot(5);

我们将会得到以下结果：

[null, null, null, null, null] // lenght = 5

instead of [] // 空数组，长度为 0

看完了停车场类的构造函数，我们接下来再来看看剩下的方法。

park()—— 是实现停车功能的方法。该方法遍历了 slots 数组，检查是否有空闲位置（即数组内仍然等于 null 的位置），并在这些空闲位置中添加汽车。

carId代表汽车，我们以它为标识符，表示在某个地点有一辆车。请注意，如果 slots 中没有空闲位置，则停车失败，此方法返回 false，如果停车成功，则返回 true。

getSlots() - 是一个辅助方法，用于返回存储停车位的数组。

remove() – 这个方法实现了从停车场移除汽车的功能，它也可以重置 slots 数组。

💡到目前为止，可能你已经注意到了，几乎在每种情况下，当我们需要操作 slots 数组时，我们都需要遍历整个数组，以便访问数组内的元素。

不同的编程语言提供了不同的数据结构和方式，但它们的主要思想也总是相同的：当你需要对数据做一些操作时，你需要以某种方式遍历它们。

为了将汽车从停车场中移走，我们使用前文中的标识符。我们会在 slots 数组中寻找带有标识符的车辆，在找到对应车辆后。将它“移出”停车场。我们只需将该 slots 数组再次设置为 null 即可执行移除操作。

现在你大概就会明白，为何我们使用 null 来初始化停车场数组。

该方法也会根据是否成功移除车辆返回布尔值。

当创建一些 UI 界面以展示变化，我们需要使用这些方法的返回值。比如，将汽车添加到停车场时（park 方法），也会有相同的返回值机制。

getSize() – 我们用来检查停车场大小的另一个辅助方法。

getAvailable() - 这个方法可以显示我们目前有多少空闲的停车位。

isFull() – 这个方法告诉我们停车场是否已满，即没有更多可用的车位。

如何构建 React App

有趣的部分快开始啦🕺。

我们将创建一个可交互的 app，将我们已实现的代码停车场可视化。

我们的 app 将提供基本的 UI 控件，允许（假想的）操作员使用停车场软件。为了使视觉效果更令人赏心悦目，我们将尝试为 app 的基本功能设置动画。

一起来看看，是如何实现的吧！📺

Demo

点击在线 demo 链接，提前尝鲜体验吧🥪。

项目源码

这里是停车场 app 的代码仓库。

让我来简要介绍一下技术选项的 what 和 why。

这个 app 是使用 vite 构建的，因为我最近一直在体验它，并且对于它的速度和性能都十分满意。

尽管 vite 还处于开发阶段，但如果我要开始开发一个新项目，并且可以选择构建工具的话，我会选择vite。

这并不是说我反对它的老大哥 CRA。 相反，我已经用 creact react app 搭建了很多 app，并且我仍在我的一些项目中使用它。 这是因为 vite 更快，更符合我当前的诉求。

💡请记住，对于项目的技术选型应该取决于特定项目的特定需求。毕竟，软件开发不存在银弹，这始终是一个需求和优先级的问题。

React App 项目结构

停车场 app 的代码结构十分简洁。可以看到，在根目录，我们有两个文件夹 - assets 和 src。 assets 文件夹包含了 app 使用的静态资源（在本例中，它是一张汽车图像）。 src 则包含了 app 的源码文件。

让我们更深入地看看 src 文件夹吧。

在 src 内部，有下列文件夹：

• components - 包含 app 中使用的所有 React 组件源码

• lib - 包含停车场类，负责 app 的主要逻辑

• pages 包含两个子目录，分别用于 app 的两个页面 – Landing 页面和 Main 页面

• utils 包含一个辅助方法，用于生成将停车位表示为 busy 时使用的虚构汽车牌照

• 还有几个文件，其中大部分都与应用程序的入口程序有关。favicon 文件除外，它的作用你应该有所接触，如果之前没有接触过，那么你可以在浏览器的选项卡上看到它😉

App 页面

如前所述，app 的主页面（main pages，也称为 mian screens）称为Landing页面和Main页面。 这些页面由 React 组件构成，它们是欢迎页面所有内容的骨架。在欢迎页中，你可以选择选择最初的登录位置，并且选择停车场的车位数量。

再点击欢迎页的 submit 按钮后，你会跳转到主页面。在主页面，你可以作为操作者对停车场进行管理。

App 的功能

停车场 app 提供了最基础的停车场管理功能。当用户选择了他们想要的车位数量（最多可选择 20 个车位）后，用户将回到主页面，并可以看到所有的空闲停车位。

用户可以通过 PARK! 按钮停放车辆，对应车位将在车辆停泊后显示为繁忙状态并且展示对应车辆的登记号码。操作者可以通过点击繁忙状态的车位来取消车位的停放车辆，即移除停放车辆。

💡红色汽车移动的简单动画只是为了视觉效果，对停车场的运作方式没有任何实际影响。

我使用 CSS modules 为 app 设置样式。为了让移动设备的体验更好，我还优化了移动端的样式。

行动起来，快试一试吧🧪

总结

在写作这篇文章时，我一开始只打算描述停车场类本身——仅仅出于科普目的，展示如何通过 JavaScript 实现一个类。

但后来我觉得，仅仅实现一个类有点无聊🥱。 因为我想创造一些更有趣💃🏻，更游戏化的东西🕹️。

所以我开发出了这款类似迷你游戏的应用程序🎮。

在创建它时，我 5 岁的女儿 🧒🏻 一看到它就想玩玩看，并且玩得特别开心！

或许这对于成年人来说过于幼稚，但是对于小朋友却刚刚好😀。

我希望这个游戏一般的实现方案可以吸引你的注意力，以便你可以更好得记忆它背后的知识📖。

感谢阅读！🙏

作为一种 Web 开发语言，JavaScript 赋予了开发者创建动态和交互式网页的能力，其中一个实现这种交互性的 JavaScript 关键特性是文档对象模型（DOM）操作。

DOM 操作允许开发者修改网页的结构、样式和内容。在本文中，我们将探讨 JavaScript 中 DOM 操作的基础知识，将复杂的概念分解成易于理解的代码片段。

什么是 DOM

文档对象模型（DOM）是一种用于 Web 文档的编程接口。它以对象树的形式表示文档的结构，其中每个对象对应于文档的一部分，例如元素、属性和文本。JavaScript 可以操作这个树状结构，允许开发者动态地改变网页的内容和外观。

如何访问 DOM 元素

为了操作 DOM，我们需要访问它的元素，这一步通常使用代表整个 HTML 文档的 document 对象来实现。让我们看一个简单的例子：

// 使用一个元素的 ID 访问这个元素
const headerElement = document.getElementById('header');

// 使用类名访问元素
const paragraphs = document.getElementsByClassName('paragraph');

// 使用标签名访问元素
const images = document.getElementsByTagName('img');

在上面的代码片段中，我们使用 getElementById , getElementsByClassName , 和 getElementsByTagName 三个函数来检索特定的元素。这三个函数的返回值可以存储在变量中，以供开发者进行进一步的操作。

如何修改元素内容

一旦我们已经访问了一个元素，我们就可以使用这个元素的innerHTML属性来修改它的内容：

// 修改一个元素的内容
headerElement.innerHTML = 'New Header Text';

在上面的例子中，我们将 headerElement 的内容更改为 New Header Text 。这是一种简单而行之有效的方法，可以更新元素中的文本内容。

事件和事件处理

事件是在浏览器中发生的操作或事务，例如用户点击按钮或调整窗口大小。JavaScript 允许我们处理这些事件并执行相应的代码作为对事件的响应。事件处理是创建交互式网页的关键方面。

如何添加事件监听器

为了响应事件，我们可以使用事件监听器，它们是用于“监听”特定元素上的特定事件的函数。让我们以一个按钮点击事件为例：

// 访问一个按钮元素
const myButton = document.getElementById('myButton');

// 添加点击事件监听器
myButton.addEventListener('click', function() {
    alert('Button Clicked!');
});

在这个例子中，当 ID 为 myButton 的按钮被点击时，浏览器将弹出一个内容为 Button Clicked! 的提示框。事件监听器提供了一种根据用户交互执行自定义代码的方式。

如何修改样式

DOM 操作还包括修改元素的样式，使我们能够创建视觉上吸引人的、动态的网页。

如何动态地修改样式

我们可以使用元素的 style 属性来改变其外观。让我们以点击按钮时改变段落颜色的例子来说明：

// 访问一个段落元素
const myParagraph = document.getElementById('myParagraph');

// 访问一个按钮元素
const colorButton = document.getElementById('colorButton');

// 为按钮添加一个点击事件
colorButton.addEventListener('click', function() {
    // 修改段落的颜色样式
    myParagraph.style.color = 'blue';
});

在这个例子中，当 ID 为 colorButton 的按钮被点击时，ID 为 myParagraph 的段落的文本颜色将被更改为蓝色。

如何创建和修改元素

除了修改现有元素之外，JavaScript 还允许我们创建新元素并将它们添加到 DOM 中。

如何创建新的元素

使用 createElement 方法来创建一个新的 HTML 元素。让我们创建一个新的段落元素，并将其追加（添加）到文档的 body 中：

// 新建一个段落元素
const newParagraph = document.createElement('p');

// 为新段落设置文本内容
newParagraph.textContent = 'This is a new paragraph.';

// 将新创建的段落追加到文档的 body 中
document.body.appendChild(newParagraph);

在这个例子中，我们创建了一个新的 p（段落）元素，设置了它的文本内容，然后将其追加到文档的 body 中。

如何修改属性

我们还可以修改现有元素的属性。让我们思考如何动态更改图像的来源：

// 访问一个图像元素
const myImage = document.getElementById('myImage');

// 修改图像的来源属性
myImage.src = 'new-image.jpg';

这个例子中, 我们访问了 ID 为 myImage 的图像元素，并将其 src 属性更改为 new-image.jpg，动态更新显示的图像。

如何更新表单的输入值

让我们思考这样一个情景：你希望根据用户的交互来更新文本输入框的值：

// 访问一个文本输入框元素
const myInput = document.getElementById('myInput');

// 添加一个输入事件监听器
myInput.addEventListener('input', function() {
    // 使用输入值更新一个段落的内容
    document.getElementById('inputValue').textContent = myInput.value;
});

在这个例子中，当用户在 ID 为 myInput 的文本输入框中输入内容时，ID 为 inputValue 的段落将根据输入值动态更新段落内容。

如何切换可见性

你可以通过使用 display 样式属性来切换元素的可见性。让我们创建一个按钮用于切换段落的可见性：

// 访问一个按钮元素
const toggleButton = document.getElementById('toggleButton');

// 访问一个段落元素
const toggleParagraph = document.getElementById('toggleParagraph');

// 添加一个点击事件监听器
toggleButton.addEventListener('click', function() {
    // 切换段落的可见性
    toggleParagraph.style.display = toggleParagraph.style.display === 'none' ? 'block' : 'none';
});

在这里，ID 为 toggleParagraph 的段落最初是可见的，单击 ID 为 toggleButton 的按钮会切换其可见性。

DOM 操作中的常见陷阱

虽然 DOM 操作是创建动态网页的强大工具，但初学者经常会遇到一些常见陷阱，这些陷阱可能导致意外行为或错误。让我们探讨一些这样的陷阱，并提供如何避免它们的建议。

在 DOM 渲染完成前操作它们

有时我们可能会在 DOM 尚未完全加载之前尝试操作它，这可能导致 JavaScript 尝试访问尚未呈现的元素。为了避免这种情况，最重要的是在执行任何 JavaScript 代码之前都需要等待 DOM 完全加载：

document.addEventListener('DOMContentLoaded', function() {
    // DOM 操作代码放在这里
});

通过将执行 DOM 操作的代码包裹在 DOMContentLoaded 事件监听器内部，你就可以确保它仅在 DOM 准备就绪时运行。

没有确认一个元素是否存在

在尝试使用诸如 getElementById 这样的方法访问元素时，我们可能会假设元素存在并继续进行操作。但是，如果元素不存在于页面上，则可能会导致错误。

在操作元素之前，我们始终应该先检查该元素是否存在：

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

if (myElement) {
    // 在这里对这个元素进行操作
} else {
    console.error('Element not found!');
}

这个简单的检查可以防止在操作不确定是否存在的元素时出现的错误。

忘记阻止默认行为

在处理事件时，忘记阻止默认行为可能会导致意外的页面行为。例如，如果在没有阻止默认行为的情况下提交表单，页面可能会重新加载，导致数据丢失：

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

myForm.addEventListener('submit', function(event) {
    // 阻止默认的表单提交
    event.preventDefault();

    // 你的表单处理代码放在这里
});

通过调用event.preventDefault()，你可以阻止与表单提交事件关联的默认行为，从而完全控制事件的处理方式。

执行效率低下的 DOM 查询

在循环中执行效率低下的 DOM 查询会降低性能。每次查询都涉及遍历 DOM，不必要的查询会减慢网页的加载速度。

与其重复查询 DOM，不如缓存元素的引用：

// 在循环中执行的效率低下的查询
for (let i = 0; i < 10; i++) {
    const myElement = document.getElementById('myElement');
    // 操作 `myElement`
}

// 循环之外的高效的查询
const myElement = document.getElementById('myElement');
for (let i = 0; i < 10; i++) {
    // 操作 `myElement`
}

通过一次查询 DOM 并重复使用该 DOM 的引用，可以优化你的代码。

无法处理跨浏览器的兼容性

不同的浏览器可能会略有不同地解释 JavaScript 和 DOM 操作。如果没有考虑跨浏览器兼容性，可能会导致代码的行为不一致。

使用特性检测，并考虑使用像 jQuery 或现代框架这样的库来处理跨浏览器的不一致性：

// 使用特性检测检查浏览器对 `addEventListener` 方法的支持：
if (document.addEventListener) {
    // 使用 addEventListener
} else {
    // 回退到另一种受支持的方法
}

通过在使用一些功能特性之前检查它们，你可以确保您的代码在各种浏览器上正常工作。

如何在框架中使用 DOM 操作

虽然 JavaScript 允许直接操作 DOM，但现代 Web 开发通常涉及使用诸如 React 或 Vue.js 等框架。这些框架提供了一种更加结构化的方式来构建和管理用户界面。

React 示例

// React 组件渲染一个按钮并处理其点击事件
class MyButton extends React.Component {
    handleClick() {
        alert('React Button Clicked!');
    }

    render() {
        return (
            <button onClick={() => this.handleClick()}>Click me</button>
        );
    }
}

// 将 React 组件渲染到 DOM 中
ReactDOM.render(<MyButton />, document.getElementById('reactRoot'));

这个 React 示例创建了一个组件来处理按钮点击事件，它演示了一种更加声明式的 UI 开发方法。

Vue.js 示例

// 具有一个数据属性和一个方法的 Vue.js 实例
new Vue({
    el: '#vueRoot',
    data: {
        message: 'Vue.js Message'
    },
    methods: {
        showMessage: function () {
            alert(this.message);
        }
    }
});

这个例子创建了一个 Vue.js 实例来管理数据和方法，展示了 Vue.js 的响应性和基于组件的结构。

总结

在这个全面的指南中，我们深入探讨了 JavaScript 中的 DOM 操作。从访问元素到处理事件，从修改样式到创建新元素，我们以简单直接的方式涵盖了 DOM 操作的基本概念。

请记住，DOM 操作是创建动态和交互式网页的核心。通过掌握这些基本技术，你将能够构建引人入胜且用户友好的 Web 应用程序。随着你继续进行你的 JavaScript 学习之旅，更多的练习与实践将加深你对这些概念的理解，为你成为一名成功的 Web 开发者铺平道路。

浏览器中的 JavaScript 代码使用事件驱动编程模式。这意味着当浏览器中发生特定的 DOM 事件时，将执行一段代码作为对该操作的响应。

在本文中，我将帮助你理解如何使用 JavaScript 监听和响应 DOM 事件。

如果你需要复习一下 DOM，我已经写了一篇文章来解释什么是 DOM 以及 JavaScript 如何与之交互。

什么是 DOM 事件，它们为什么有用

DOM 事件是浏览器暴露的信号，你可以利用这些信号运行一段 JavaScript 代码。

这些 DOM 事件会在用户与我们创建的应用程序进行交互时发生，例如点击按钮或在输入框中输入字母。

作为 web 开发人员，你可以指示 JavaScript 监听特定事件，并对该事件做出响应。

例如：

• 点击按钮时，更改段落文本。
• 提交表单时，使用 Fetch API 发送 POST 请求。

如何监听 DOM 事件

要监听事件，需要使用 addEventListener() 方法将事件监听器附加到元素上。

addEventListener() 方法接受两个参数：

• 要监听的事件 type
• 事件触发时要运行的函数

Element.addEventListener(type, function);

回到示例，假设你想在点击按钮元素时更改段落文本，你可以这样做：

<body>
  <p id="myParagraph">This is an example paragraph</p>
  <button id="changeText">Change Text</button>
  <script>
    const button = document.querySelector('#changeText');

    function newText(event) {
      const p = document.querySelector('#myParagraph');
      p.innerText = 'The text has been changed';
    }

    button.addEventListener('click', newText);
  </script>
</body>

要在 HTML 文档中插入 JavaScript 代码，我们需要使用 script 标签，如上图所示。

使用 document.querySelector() 方法选择按钮元素，然后在该元素上调用 addEventListener() 方法，为按钮附加一个事件监听器。

首先，指定要监听的事件类型 type，在本例中为 click 事件。然后，指定该事件发生时要运行的函数。

在上面的代码中，当 click 事件被触发时，newText 函数将被执行。

事件监听器还将发送一个 event 对象，其中包含触发事件的相关信息。这就是为什么在上面的 newText 函数中有一个 event 参数。

你可以将事件记录到控制台，查看其详细信息：

function newText(event) {
  console.log(event);
}

如果你再次点击按钮，将得到以下输出结果：

根据事件触发时要做的事情，你可能需要使用 event 对象中包含的信息。

在这里，我们要做的只是更改段落文本，因此不需要 event 对象。稍后，我们将在处理键盘事件时看到使用 event 对象的示例。

在浏览器中可以监听的事件有很多。以下是开发 web 应用时可能需要的一些最常见事件：

如果你想阅读 DOM 事件类型的完整列表，可以访问此页面。

DOM 事件分为多个类别。在此，我们将只介绍两个在项目中最常用的事件：键盘事件和鼠标事件。

键盘事件

对于键盘，你可以跟踪按下和松开键时分别运行的 keydown 和 keyup 事件。

举例说明，请在控制台运行以下代码：

document.addEventListener('keydown', event => {
  console.log(`A key is pressed: ${event.key}`);
});

document.addEventListener('keyup', event => {
  console.log(`A key is released: ${event.key}`);
});

运行上述代码后，慢慢按下键盘上的一个键，然后慢慢松开。

你应该会看到如下日志输出：

请注意 “keydown” 日志是如何在你按下按键时立即显示的，而 “keyup” 日志只有在你松开按键时才会显示。

键盘事件通常会附加到 document 对象而不是特定元素上，因为整个网站都应能监听到该事件。

鼠标事件

除了键盘事件，DOM 还提供了一种跟踪鼠标事件的方法。

最常见的鼠标事件有：

• mousedown - 鼠标按钮被按下
• mouseup - 鼠标按钮被释放
• click - 点击事件
• dblclick - 双击事件
• mousemove - 当鼠标移动到元素上时
• contextmenu - 打开上下文菜单时，例如单击鼠标右键时

同样，你可以直接在 document 对象中添加事件监听器来测试这些事件：

document.addEventListener('mousedown', event => {
  console.log(`The mouse is pressed`);
});

document.addEventListener('mouseup', event => {
  console.log(`The mouse is released`);
});

运行上面的代码，然后点击浏览器中的任意位置。你应该会看到 mousedown 和 mouseup 事件分别被记录下来。

如何移除事件监听器

要移除附加到元素上的事件监听器，需要调用 removeEventListener() 方法，并传递事件的 type 和你传递给 addEventListener() 方法的 function，如下所示：

button.removeEventListener('click', newText);

上述代码可以从 button 元素中移除 “click” 事件监听器。请注意，你需要在元素上调用 removeEventListener() 方法，同时将函数 newText 传递给该方法。

要正确地移除事件监听器，需要为事件附加函数引用。如果向 addEventListener() 方法传递一个无名函数，就无法移除该事件：

button.addEventListener('click', function (event) {
  alert('Button save is clicked');
});

如果没有上面例子中的函数名，就无法移除事件监听器。

如何使用 HTML 属性监听事件

除了使用 addEventListener() 方法外，你还可以通过在 HTML 元素中添加 on[eventname] 属性来监听事件。

例如，假设你想监听按钮点击，你可以为按钮添加 onclick 属性，如下所示：

<body>
  <button onclick="handleClick()">Click Me!</button>
  <script>

    function handleClick(event) {
      alert('The button is clicked!');
    }
  </script>
</body>

在上面的按钮元素中，我们添加了 onclick 属性，并将 handleClick() 函数传递给它。

当我们点击按钮时，`handleClick()` 函数将被执行。

你也可以使用 JavaScript 添加 onclick 属性，如下所示：

<body>
  <button id="myBtn">Click Me!</button>
  <script>
    const myBtn = document.querySelector('#myBtn');
    myBtn.onclick = handleClick;

    function handleClick(event) {
      alert('The button is clicked!');
    }
  </script>
</body>

在这里，我们使用 JavaScript 将 handleClick 函数的引用赋值给 onclick 属性。

要删除 onclick 属性，可以将该属性赋值为空：

const myBtn = document.querySelector('#myBtn');
myBtn.onclick = null;

你应该使用哪一种

如你所见，有两种方法可以监听 DOM 事件：addEventListener() 方法和 on[eventname] HTML 属性。你应该使用哪一种呢？

答案是，当你需要更多扩展性时，可以使用 addEventListener() 方法，而当你希望事情简单化时，可以使用 on[eventname] 方法。

在开发 web 应用程序时，.html 文件只应作为页面的结构，而 .js 文件则应定义 web 应用程序的任何行为。

为了使应用程序更易于维护和扩展，JavaScript 应能访问 HTML 元素，但 HTML 元素不能执行 JavaScript 函数。这就是推荐使用 addEventListener() 方法的原因。

但是，addEventListener() 并不是没有代价的，这使得代码的阅读相当繁琐。

使用 on[eventname] 属性时，你只需在 HTML 元素中指定函数名称：

<body>
  <button onclick="handleClick()">Click Me!</button>
  <script>

    function handleClick(event) {
      alert('The button is clicked!');
    }
  </script>
</body>

但使用 addEventListener() 方法时，需要查询所需的元素，调用该方法，然后指定要运行的事件和回调函数：

<body>
  <button id="myBtn">Click Me!</button>
  <script>
    const myBtn = document.querySelector('#myBtn');
    myBtn.addEventListener('click', handleClick);

    function handleClick(event) {
      alert('The button is clicked!');
    }
  </script>
</body>

如上所示，在使用 on[eventname] 属性时，可以少写一些代码。

虽然这看起来无关紧要，但当你在大型应用程序中使用大量 HTML 和 JS 文件时，这可以是一件重要的事情。

此外，addEventListener() 方法还允许你为同一元素附加多个监听器，如下所示：

<body>
  <button id="myBtn">Click Me!</button>
  <script>
    const myBtn = document.querySelector('#myBtn');

    myBtn.addEventListener('click', handleClick);

    myBtn.addEventListener('click', handleClickTwo);

    function handleClick() {
      console.log('Run from handleClick function');
    }

    function handleClickTwo() {
      console.log('Run from handleClickTwo function');
    }
  </script>
</body>

点击上面的按钮时，JavaScript 将同时执行两个事件监听器。

而使用 onclick 属性则无法做到这一点，因为每次只能指定一个函数作为引用：

<body>
  <button id="myBtn">Click Me!</button>
  <script>
    const myBtn = document.querySelector('#myBtn');

    myBtn.onclick = handleClick;
      
    // 当你把一个新的函数赋给 onclick，
    // 旧的函数被覆盖

    myBtn.onclick = handleClickTwo;

    function handleClick() {
      console.log('Run from handleClick function');
    }

    function handleClickTwo() {
      console.log('Run from handleClickTwo function');
    }
  </script>
</body>

但我从未遇到过需要两次监听同一事件的情况，因此这一优势可能根本没有用处。

结语

通过浏览器暴露的 DOM 事件，你可以以适当的方式响应用户操作。

这种使用事件监听器来完成特定任务的模式被称为事件驱动编程，在使用 JavaScript 开发 web 应用程序时会经常用到这种模式。

有两种方法可以监听事件：使用 addEventListener() JavaScript 方法和 on[eventname] HTML 属性。这两种方法各有利弊，因此你最好都能熟悉。

如果你喜欢这篇文章，并希望将自己的 JavaScript 技能提高到一个新的水平，我建议你点击这里查看我的新书《Beginning Modern JavaScript》。

本书旨在让初学者轻松学习 JavaScript，让所有希望学习 JavaScript 的人都能轻松掌握。它以循序渐进的指南帮助你了解如何使用 JavaScript 创建动态 web 应用程序。

我在此承诺：你将真正感觉到自己了解自己在用 JavaScript 做什么。

下次见！

大多数人的编程之旅都是从搜索引擎开始的。

例如搜索“XXX 语言教程”。

但要怎么决定从哪门语言开始呢？

“硅谷的人总是开 Java 的玩笑，我想应该先学 Java。”

或者：

"Haskell！现在 Haskell 这么火！"

又或者：

"一定要学 Go！你看它的吉祥物多么可爱！"

或者当我们不知所措的时候，只能搜：

"入门学什么编程语言比较好？"

人们顾虑的问题通常就那么几个，下面这张信息图很好地回答了这些疑惑：

选择第一门编程语言的过程十分有趣，这就好像是个人的信仰选择问题一样。

也许因为你像个孩子一样喜欢玩橡皮泥，稀里糊涂都打算开始学 Ruby。我还是要提醒你，不要草率做决定。

想要真正掌握你的第一门编程语言，你需要投入成千上百小时来学习实践。

所以你要考虑清楚以下这几个方面：

• 这门语言的岗位需求大不大
• 这门语言有没有发展前景
• 语言的学习难度
• 在学习过程中你能运用它开发什么样的练手项目（把你的成果分享给周围的朋友才能激励你坚持学习下去）

每年都会有新的编程语言出现，以及随着而来的学术论文亦或者是搞笑段子：

第一门编程语言可选择的范围很广。下面这张图很清晰地显示了过去几年中几门语言学习的 Google 搜索热度变化：

Java 有起有落，而 Python 逐渐成为了最受欢迎的入门语言。除此之外，还有最近几年逐步火起来的 JavaScript。

在我展开讨论之前，先明确几点：

• 我并不会在这里争论哪门语言要比哪门优越
• 我认同一名合格的程序员最终应该掌握不止一门编程语言
• 我想说明的是，对于刚入门的初学者来说，还是应该先专注于一门语言的学习。而这门语言，我想你可能早就在标题中发现了——就是 JavaScript

我们先来聊聊现在学校里的编程教学是什么情况。

计算机基础教学

一般在大学教授编程课程的都是计算机系，而计算机专业一般数学和电子方面的内容又比较多。当然你可能早就听说过：

计算机科学的教育无法使任何人成为专业的程序员，就好像学习怎么使用刷子和颜料无法让任何人成为画家一样—— Eric S. Raymond（《大教堂与集市》作者）

即使在 2020 年的今天，许多大学还像教计算机科学一样教编程，像教数学一样教计算机科学。

所以许多课程中编排的入门语言是 C 这样底层抽象的语言，或者是专门针对数学的 MATLAB.

一些专业权威的机构也推出了他们的编程语言年度排行榜，例如 TIOBE Index，又或者是下面这个来自 IEEE的榜单：

大多数这类榜单 10 年来都没有什么变化。

但事实上不是这样的，包括在学术界。

早在 2014 年，Python 就超过了 Java，成为了最受美国各大 CS（Computer Science）机构欢迎的教学语言。

而在实际上的生产工作中，也发生了和权威机构发布的完全不一样的变化（数据来自 87,354 名开发者参与的 Stack Overflow 2019 年度调查）：

多一半的开发者都在使用 JavaScript。它最早只在前端开发应用，现在也逐步在后端流行开来。甚至开始延伸到游戏开发和物联网领域。

工作岗位上对 JavaScript 的需求也仅次于 Java（数据来自 Indeed.com）：

所以我们也围绕 JavaScript 技术栈建立了我们的开源社区。在过去的五年里，有超过 40,000 名学员通过在 freeCodeCamp 学习找到了编程相关的工作。

不过 JavaScript 真的也适合你么？它值得你为之献出第一次么？我们来继续分析：

事实一：岗位需求

如果你只是为了好奇好玩而学编程的话，可以忽略这一点。但如果你和大多数人一样，想通过掌握编程技能找到工作的话，这点对你就非常重要了。

像我之前提到的，JavaScript 是除 Java 之外需求量最大的编程语言。

另外还有一点：JavaScript 已经发展了 20 多年，而直到最近，一些诸如 Netflix, Walmart 和 PayPal 一类的大公司才开始全栈应用 JS 构建他们的应用。

所以就造成了市场上 JavaScript 开发者供不应求的状况（数据来自 Indeed.com）。

从图上来看，每个 Java 岗位大概有 2.7 人在竞争，IOS 和 PHP 也平均都有 2 人以上竞争。

而通过计算，每个 JavaScript 岗位只有 0.7，这就成了属于 JS 开发者的卖家市场。

译者注：为了更具说服力，特此补充国内的编程语言岗位情况（数据来源 2019 年 9 月中国编程语言排行榜）：

事实二：发展前景

在 GitHub 上，平均每个 JavaScript 的项目收到的 pull requests 要比其他语言多两倍以上。其增长速度也远超别的流行语言。

JavaScript 的整个生态体系也因为 Google, Microsoft, Facebook, Netflix 这类大公司的投资而受益匪浅。

例如 TypeScript(一种 JavaScript 的超集，提供更丰富特性，可编译为普通 JS)有着超过 100 名开源贡献者，而这里面大多数都是微软和谷歌的员工。

而且这类集团公司很少有使用 Java 的。因为 Java 的所有者 Oracle 经常会因为各种有关 Java 开发的原因起诉别的公司。

事实三：学习难度

大多数的程序员应该都会认同，高级的脚本语言通常比较好学。JavaScript 当然属于此类，也包括 Ruby 和 Python.

即便很多大学课程教授的都是 Java 或 C++，这类语言也真的很难上手。

事实四：你能实践的练手项目

这是 JavaScript 最大的优势。JS 可以运行在任何有浏览器的设备上。你几乎可以用 JS 开发任何应用，而且很方便就能分享发布到任何地方。

正是由于 JavaScript 无处不在，Stack Overflow 的联合创始人 Jeff Atwood 才说出他的那句经典定律：

任何可以用 JavaScript 写成的应用，最终都会使用 JavaScript 写成。

现实也在不断的佐证，证据在此。

Java 也曾号称是跨平台语言。可也许你了解到，Oracle 官方在今年早些时候终止了Java Applets 的支持。

Python 也经常会遇到类似的问题：

我怎么才能把我写的这个游戏发给我的朋友？或者能够不安装什么应用就在手机上运行么？ — James Hague in Retiring Python as a Teaching Language

相比之下，JS 要方便很多。下面的这些应用都来自我们开源社区的学员，你只需要在浏览器里打开链接就能开始玩啦：

先专注学好一门语言，再去学别的。

如果你总是在各个语言之间摇摆不定，你很难取得什么实质上的进步。

为了避免在入门阶段止步不前，你需要扎实学好你的第一门语言。之后再学习别的语言你就会感觉到异常轻松。

等到那个阶段，你就可以逐步成长为一名掌握许多语言的全面的开发者啦：

• C 对于你理解计算机原理特别有帮助，例如内存管理之类的。在高性能计算中非常有用。
• C++ 在游戏开发中运用广泛
• Python 在科学研究和数据分析中应用广泛
• 如果你想在大型的科技公司中工作，Java 就非常重要。

但还是先学会 JavaScript 再说吧:)

我知道评论里会有很多人要和我吵起来。虽然我知道这不可能，但我还是要试着说服你一下：

Q1：JavaScript 运行速度不是很慢么？

在很多实际运用场景中，JavaScript 和一些高性能语言运行一样快。

Node.js 要比 Python、Ruby、PHP 快上好几个数量级。

甚至已经接近了 C++, Java, Go 的性能。

下面是一个比较全面的编程语言“跑分评测”：

Q2：JavaScript 连静态语言都不是！

和 Python/Ruby 一样，JavaScript 属于动态语言，使用起来也很方便。举个例子，假如我想把变量 exampleArray 设为数组，我会先给它赋值，然后通过 length 函数来获取数组中元素的数量。

exampleArray = [1, 2]
-> [1, 2]
exampleArray.length
-> 2

但假如我不小心赋值给了它一个字符串，代码照样运行不会报错，可并不是我想要的结果：

exampleArray = "text"
-> "text"
exampleArray.length
-> 4

这一类错误在动态类型的语言中经常会遇到。大多数的开发者都会专门写一些检查和测试来避免此类错误的发生。

如果你非要学一门静态语言的话，我依旧推荐你学习 JavaScript，之后再开始学习 TypeScript。

TypeScript 是有学习曲线的，但在掌握了 JavaScript 之后，你的学习会很顺利。— Alex Ewerlöf on TypeScript

Q3：我想要学的是怎么开发移动 App

那你也还应该先学 JavaScript 呀~

1. JavaScript 有一些很棒的工具可以开发原生的移动应用，例如 Angular Cordova和 React Native.
2. 为了让你的移动 App 真的像模像样，它至少得有个后端，你用一些合适的 Web 开发框架可以很轻松地实现，例如 Node.js+Express.js

而且移动开发的春天也正是 JS 的流行带来的。

在 Stack Overflow的调查中，有近一半的开发者的岗位都是 Web 开发，移动开发岗只占了 8%。

“为某事专门下一个 App”的境况也已不再，大多数的智能手机用户开始趋于不下载新的 App 了。

当然——人们还在用着 App。绝大多数都是大厂的微信、支付宝一类（原文：Mostly Facebook, Google Maps, and handful of others）。市场对移动开发的需求也越来越小。

移动开发的前景也难以预期。而且在许多方面，使用 JavaScript 来开发维护和部署移动应用要更加轻松简单。所以像 Facebook 和 Google 这样的公司在研发更好的 JavaScript 工具上投入的越来越多。

在 2016 年，几乎所有的开发都和 Web 开发有关。所有的事情都依附着互联网这个大平台。而且下一波将要崛起的设备——家庭智能、自动驾驶汽车等也都需要依附于网络。

Q4：JavaScript 不是一个只花 10 天写着玩的语言么？

JavaScript 有一段简史。

人们也经常会拿 JavaScript 开各种各样的玩笑。

同样人们也喜欢吐槽 C++，可不管有多少人吐槽，C++ 依然很成功。

译者注：这就和 “PHP 是全世界最好的语言”是一个道理。

所以如果再有人在你面前说 JS 怎么怎么不好的话，请记住 C++ 之父的那句名言：

世界上只有两种编程语言：一种是天天被人喷的，另一种是没人用的。— Bjarne Stroustrup