【10】伪元素选择器

伪元素选择器是一种CSS选择器，用于选取元素的特定部分或添加额外的内容。以下是常见的几个伪元素选择器：

• :first-letter（首字母）:

  • 该伪元素选择器允许选择元素内的第一个字母，并为其应用样式。

  • 它可以用于制作首字母大写或添加其他样式效果。

• :before（之前）:

  • 该伪元素选择器允许在选中的元素之前插入内容，并为其应用样式。

  • 它常用于在元素前面添加修饰性的内容，比如图标或装饰符号等。

• :after（之后）:

  • 该伪元素选择器允许在选中的元素之后插入内容，并为其应用样式。

  • 类似于:before，:after也常用于添加修饰性的内容，通常用于处理浮动带来的影响或创建额外的元素。

  • 例如，使用伪元素选择器解决浮动带来的影响时，我们可以为包含浮动元素的父元素添加一个清除浮动的样式类

  • 比如.clearfix:after{}。

  • 通过在该选择器中使用:after伪元素选择器，我们可以在浮动元素之后添加一个空的元素，并为其应用样式以清除浮动。

【11】选择器的优先级

选择器的优先级决定了当多个选择器应用于同一个元素时，哪个选择器的样式将被应用。选择器的优先级通常根据以下规则计算：

1. 内联样式：给元素直接应用的内联样式具有最高的优先级。
2. ID选择器：ID选择器具有较高的优先级。
3. 类选择器、属性选择器和伪类选择器：这些选择器的优先级较低。
4. 元素选择器和伪元素选择器：这些选择器的优先级最低。

【12】字体属性相关

• 字体属性在CSS中用于控制文本的字体样式和颜色。以下是与字体相关的几个常见属性：

  • font-family（字体族）:

    • 该属性用于设置元素中文本的字体样式，可以指定一个或多个字体名称作为其值。

    • 当指定多个字体名称时，浏览器会按照优先级逐个尝试加载字体，直到找到可用的字体。

    • 如果没有找到任何可用字体，则会使用默认字体进行显示。

  • font-size（字号）:

    • 这个属性用于设置字体的大小。它可以使用绝对单位（如像素、英寸）或相对单位（如em、rem）来指定大小。

    • 常见的字体大小值包括小标题、正文、副标题和标题等。

  • font-weight（字重）:

    • 字重属性用于定义字体的粗细程度。

    • 可以使用关键词（如bold、normal）或数值（如100、400）来指定字体的粗细值。

    • 常见的字重值包括普通、加粗和更细的字体。

  • color（文字颜色）:

    • color属性用于设置文本的颜色。
    • 可以使用预定义颜色名称（如red、blue）或颜色值表示（如#ff000、rgb(255, , )）来指定颜色。
    • 预定义颜色名称包括了常见的颜色，而颜色值表示可以通过十六进制、RGB或RGBA来定义。

• 下面是对几种颜色表示方法的简要描述：

  • 使用预定义颜色名称时直接写出名称即可

    • 例如：color: red;

  • 十六进制表示方式以#为前缀，后面跟着三个（缩写）或六个字符来表示颜色值

    • 例如：color: #eee; 表示浅灰色。

  • RGB表示方式使用红、绿和蓝三个分量的整数值来表示颜色，每个分量的取值范围为-255

    • 例如：color: rgb(255, , ); 表示红色。

  • RGBA表示方式与RGB类似，但增加了一个不透明度（Alpha通道）的取值范围为-1

    • 例如：color: rgba(255, , , .5); 表示红色并且半透明。

【13】文本属性相关

• 文本属性在CSS中用于控制文本的对齐方式、装饰效果和缩进等。以下是与文本相关的几个常见属性：

• text-align（文本对齐）:
  该属性用于控制文本在容器内的对齐方式。常见的值包括：

  • left: 左对齐文本。
  • right: 右对齐文本。
  • center: 居中对齐文本。
  • justify: 两端对齐，即拉伸文本，使其填满整个容器。

• text-decoration（文本装饰）:
  这个属性用于设置文本的装饰效果，比如下划线或删除线等。常见的值包括：

  • none: 没有任何装饰效果。
  • underline: 给文本添加下划线效果。
  • overline: 给文本添加上划线效果。
  • line-through: 在文本中间添加删除线效果。

• text-indent（首行缩进）:

  • 首行缩进属性用于控制段落或文本块的首行缩进。
  • 可以使用固定单位（如像素、英寸）或相对单位（如em、rem）来指定缩进值。
  • 常见的方式为将负值设置为负数以使首行缩进
    • 例如：text-indent: -2em; 表示首行缩进2个em单位。

【14】背景属性相关

• 背景属性在CSS中用于设置元素的背景样式，包括背景颜色、背景图像、重复方式以及位置等。针对您提到的两个问题，以下是相关信息：

• background（背景属性）:
  这个属性用于设置元素的背景样式，可以同时设置背景颜色和背景图片，并指定图片的重复方式和位置等。具体的设置方式如下：

  • background-color: 设置背景颜色，例如：red 表示红色。
  • background-image: 设置背景图像，可以使用图片的URL地址，例如：url("image.jpg")。
  • background-repeat: 设置背景图片的重复方式，常见的值有：
    • repeat: 默认值，表示在水平和垂直方向上平铺重复。
    • no-repeat: 不重复，在容器中只显示一次。
    • repeat-x: 在水平方向上平铺重复。
    • repeat-y: 在垂直方向上平铺重复。
  • background-position: 设置背景图片的位置，默认为左上角。可以使用关键词或像素值来指定位置，例如：center center 表示居中展示。

• 展示位置的选择：
  在 background-position 属性中可以通过设置不同的值来调整背景图片的展示位置。常见的设置方式有：

  • top left, top center, top right: 图片在顶部水平方向上的左、中、右位置。
  • center left, center center, center right: 图片在垂直和水平方向上的居中位置。
  • bottom left, bottom center, bottom right: 图片在底部水平方向上的左、中、右位置。
    另外，还可以使用具体的像素值或百分比来细化控制背景图片的展示位置。

【15】边框属性相关

• 边框属性在CSS中用于设置元素的边框样式，包括边框宽度、边框样式和边框颜色等。此外，还可以使用 border-radius 属性来设置元素的圆角效果。针对您提到的两个问题，以下是相关信息：

• border（边框属性）:
  border 属性用于设置元素的边框样式，一般由边框宽度、边框样式和边框颜色三部分组成。具体的设置方式如下：

  • border-width: 设置边框的宽度，例如：3px 表示3像素的宽度。
  • border-style: 设置边框的样式，常见的值有：
    • none: 无边框。
    • solid: 实线边框。
    • dotted: 点状边框。
    • dashed: 虚线边框。
  • border-color: 设置边框的颜色，例如：red 表示红色。

  综合以上三个属性 border: 3px solid red;，表示设置一个宽度为3像素、样式为实线、颜色为红色的边框。

• border-radius（边框圆角属性）:
  border-radius 属性用于设置元素的边框圆角效果，可以将元素的边角变为圆形或椭圆形。具体的设置方式如下：

  • border-radius: 设置圆角的半径，可以使用像素值或百分比来指定。

  border-radius: 50%;，表示将元素的边角设置为半径为50%的圆形，从而实现圆形头像的效果。

【16】display属性

• display 属性是CSS中用于控制元素的显示方式的一个关键属性，常见的取值有 none、block、inline 和 inline-block。下面是对这些取值的详细解释：
• none：
  display: none; 用于隐藏元素，隐藏后的元素在页面上不会占据空间，并且不会参与布局和渲染过程。元素隐藏后，无法通过用户交互或 JavaScript 进行操作。
• block：
  display: block; 将元素设置为块级元素，在默认情况下元素会单独占据一行，宽度会自动填充父容器的宽度。块级元素可以设置宽度、高度和边距等属性，并且可以容纳其他块级元素和内联元素。
• inline：
  display: inline; 将元素设置为内联元素，内联元素只占据其内容所需的空间，并且不强制换行。内联元素不具备设置宽度和高度的能力，只能通过调整内部内容来影响元素的尺寸。
• inline-block：
  display: inline-block; 结合了块级元素和内联元素的特性。内联块元素会在同一行内显示，但是可以设置宽度、高度和边距等属性。与内联元素不同的是，内联块元素可以容纳其他内联元素或块级元素。

【17】盒子模型

• 盒子模型（Box Model）是CSS中用于描述和布局元素的基本概念之一。它将一个元素看作是由四个部分组成的盒子：margin、border、padding 和 content。下面对这些部分进行详细说明：

• content：
  content 是盒子模型中用于显示元素实际内容的区域。它包括元素的文本、图片、背景等内容。

• padding：
  padding 是 content 区域与 border 区域之间的空白区域。它用于控制元素内容与边框之间的距离。可以通过设置 padding 属性来指定该区域的大小。

• border：
  border 是 padding 区域与 margin 区域之间的边界线。它是一个可见的边框，可以通过设置 border 属性来定义其样式、宽度和颜色。

• margin：
  margin 是盒子模型中的最外层区域，用于控制元素与其他元素之间的间距。它是元素边界与相邻元素边界之间的空白区域，可以通过设置 margin 属性来调整其大小和行为。

【18】浮动

• 浮动（Float）是CSS中用于控制元素在页面中布局的属性之一。

  • 通过设置 float 属性，可以使元素向左或向右浮动，并腾出周围空间给其他元素。

• 浮动的元素会脱离正常的文档流，其宽度将自动收缩到适应内容，而不再占据父元素的整个宽度。

  • 浮动元素会紧贴其前面的非浮动元素或前一个浮动元素的边缘。
  • 浮动元素的典型应用场景包括实现多列布局、图片环绕文字等。

• 然而，浮动元素可能导致父标签的塌陷现象，即父标签无法正常包裹住浮动元素。

  • 这是因为浮动元素对于父元素来说是脱离了文档流的，父元素无法感知到浮动元素的高度。
  • 为了解决这个问题，可以在父元素上添加清除浮动的样式
    • 例如使用 clearfix 类或 clear 属性。

• 浮动一般多用于前期的页面布局阶段，而现代的响应式设计趋势已经逐渐减少了对浮动布局的依赖。

  • 取而代之的是使用更强大的布局技术，如 Flexbox 和 Grid Layout，它们能够更灵活地实现复杂的页面布局需求。

【19】清除float

• 清除浮动（Clear Float）是指在使用浮动布局时，为了确保父元素正确包裹浮动元素，需要在适当的位置添加清除浮动的样式。

  • 在 CSS 中，可以使用 clear 属性来实现清除浮动。

• 通用方式中提到的清除浮动方法是通过伪元素 :after 添加一个空内容的块级元素，并设置其样式为 clear:both，这样就能够使该元素清除掉前面的浮动元素，从而让父元素正常包裹浮动元素。

• 以下是通用方式的 CSS 代码示例：

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

• 使用时，只需在需要清除浮动的父元素上添加 clearfix 类名即可，例如：

<div class="clearfix">
    <!-- 浮动元素 -->
    <div style="float: left;">Float Element 1</div>
    <div style="float: right;">Float Element 2</div>
</div>

• 需要注意的是，清除浮动的方式有很多种，并且在不同的情况下可能需要选择不同的清除浮动方法。
  • 例如，可以使用空的 <div> 元素或设置父元素的 overflow 属性为 hidden 等方式进行清除浮动。

【20】溢出

• 当在使用圆形头像时，如果图片的大小超过了容器（比如 <div>）的大小，可能会导致溢出现象。
  • 为了解决这个问题，可以使用 overflow 属性来处理。

overflow 属性用于控制容器中内容溢出时的处理方式。

常用的取值有以下几种：

• visible：默认值，表示内容溢出时不做任何裁剪，显示在容器外部。
• hidden：内容溢出时进行裁剪，超出容器的部分将被隐藏起来。
• scroll：如果内容溢出，则在容器中显示滚动条，这样用户可以滚动查看全部内容。
• auto：会根据需要自动显示滚动条，只在内容溢出时显示滚动条。

针对圆形头像的情况，通常需要设置容器为一个正方形，并设置其 overflow 属性为 hidden，然后将图片设置为圆形，并调整图片的大小，使其适应容器。

以下是一个示例代码：

<div class="avatar-container">
    <img src="avatar.jpg" alt="Avatar" class="avatar">
</div>

.avatar-container {
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 50%;
}

.avatar {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

• 上述代码中，.avatar-container 是一个正方形容器，设置了宽度和高度为 200 像素，并且设置了 overflow: hidden，以隐藏超出容器的部分。
  • .avatar 类用于设置圆形头像的样式，max-width: 100% 和 max-height: 100% 使得图片尽量不超出容器的大小，同时保持图片的宽高比。

【21】定位

• 静态定位（static）
  • 是元素的默认定位方式
  • 元素在文档流中按照其在 HTML 中的位置进行布局，不受其他定位属性的影响，无法使用 top、bottom、left、right 属性来进行偏移。
• 相对定位（relative）
  • 是根据元素在正常文档流中的位置进行偏移的定位方式。
  • 通过设置 top、bottom、left、right 等属性，可以使元素相对于其正常位置进行移动。
  • 相对定位不会影响其他元素的布局，其他元素仍然按照正常文档流进行定位。
• 绝对定位（absolute）
  • 将元素从正常文档流中脱离出来，相对于距离该元素最近的已定位的祖先元素进行定位。
  • 如果没有已定位的祖先元素，则相对于文档的初始包含块（即视窗）进行定位。绝对定位的元素不再占据文档流中的空间，它们可以使用 top、bottom、left、right 属性来调整位置。
• 固定定位（fixed）
  • 是基于视窗的定位方式，元素相对于视窗进行定位，不会随滚动条的滚动而移动。
  • 固定定位的元素会脱离正常文档流，并且不占据文档流中的空间。常见用途是创建在页面上方或下方固定位置的导航栏或广告条。

这些定位方式可通过 CSS 的 position 属性进行设置

属性值分别为 static、relative、absolute 和 fixed。

以下是一个示例代码，展示了不同定位方式的应用：

<div class="container">
    <div class="box static">Static Positioning</div>
    <div class="box relative">Relative Positioning</div>
    <div class="box absolute">Absolute Positioning</div>
    <div class="box fixed">Fixed Positioning</div>
</div>

.container {
    position: relative;
    height: 300px;
    border: 1px solid #ccc;
}

.box {
    width: 100px;
    height: 100px;
    background-color: #f2f2f2;
    border: 1px solid #333;
    padding: 10px;
}

.static {
    position: static;
}

.relative {
    position: relative;
    top: 20px;
    left: 20px;
}

.absolute {
    position: absolute;
    top: 50px;
    right: 20px;
}

.fixed {
    position: fixed;
    bottom: 20px;
    left: 20px;
}

【22】z-index（层叠顺序）属性

• z-index 属性用于定义元素的层叠顺序，即确定元素在重叠部分的显示顺序。

  • +具有较高 z-index 值的元素将覆盖具有较低值的元素。

• 在模态框中，z-index 属性常用于控制模态框遮罩等背景元素的层叠顺序，以确保模态框位于其他内容之上，并且阻止用户与后面的页面进行交互。

• 以下是一个简单的模态框示例，展示了如何使用 z-index 控制层叠顺序：

HTML 代码：

<div class="modal-container">
    <div class="modal-overlay"></div>
    <div class="modal-content">
        <h2>Modal Title</h2>
        <p>This is the content of the modal.</p>
    </div>
</div>

CSS 代码：

.modal-container {
    position: relative;
}

.modal-overlay {
    position: fixed;
    top: ;
    left: ;
    width: 100%;
    height: 100%;
    background-color: rgba(, , , .5);
    z-index: 1; /* 遮罩层位于内容之下 */
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    z-index: 2; /* 模态框内容位于遮罩层之上 */
}

• 在上述示例中，使用 z-index 属性将遮罩层设为 1，将模态框内容设为 2，确保模态框位于遮罩层之上。

【23】透明度

• 透明度（opacity）是指元素的不透明程度或可见性。

  • 它是一个CSS属性，可以用于控制元素及其内容的透明度。

• 透明度的取值范围是到1

  • 其中0表示完全透明（即元素不可见），而1表示完全不透明（即元素完全可见）。

• 以下是一个示例，展示如何使用 opacity 属性改变元素的透明度：

• HTML代码：

<div class="container">
    <h2>透明度示例</h2>
    <p>这是一段文字。</p>
</div>

CSS代码：

.container {
    background-color: #f5f5f5;
    padding: 20px;
}
.container h2, .container p {
    opacity: .5; /* 将标题和段落的透明度设为.5 */
}

• 在上述示例中，我们将容器的背景颜色设为 #f5f5f5，并给标题和段落元素应用了 opacity: .5。
• 这样，标题和段落就会以50%的透明度显示，呈现半透明的效果。

需要注意的是，透明度属性会影响元素及其内部内容的可见性。

如果应用透明度于一个容器元素，那么该元素内部的所有内容，包括文字、图像等，都将受到相同的透明度影响。

【24】box-shadow

• box-shadow是一种CSS属性，用于为元素添加阴影效果。
  • 它可以为元素创建一个具有指定颜色、大小、模糊度和偏移量的阴影。

box-shadow属性有几个可设置的参数，包括：

• 颜色：

  • 可以使用颜色值、rgba值或者十六进制代码来设置阴影的颜色。

• 偏移量X和偏移量Y：

  • 通过调整这两个参数，可以设置阴影相对于元素的水平和垂直偏移量。
  • 正值表示向右或向下的偏移，负值表示向左或向上的偏移。

• 模糊半径：

  • 用于指定阴影的模糊程度。
  • 较大的值会产生更模糊的效果，而较小的值会产生更清晰的阴影。

• 扩展半径：

  • 用于指定阴影的大小。如果未指定扩展半径，则阴影将自动调整为适应内容的大小。

以下是一个示例，演示如何使用box-shadow属性为元素添加阴影效果：

HTML代码：

<div class="box"></div>

CSS代码：

.box {
    width: 200px;
    height: 200px;
    background-color: #f5f5f5;
    box-shadow: 4px 4px 8px rgba(, , , .2);
}

在上述示例中，我们为具有类名"box"的元素添加了一个阴影效果。box-shadow属性值的解释如下：

• 偏移量X：4px
• 偏移量Y：4px
• 模糊半径：8px
• 颜色：rgba(, , , .2)（黑色，透明度为.2）

这样，元素就会以相对于自身位置右下方4像素偏移的阴影显示出来，并且阴影周围有8像素的模糊效果。

需要注意的是，box-shadow属性可以同时设置多个阴影效果，通过逗号分隔不同的阴影值即可。

【三】JavaScript

面向对象的编程语言

【1】注释语法

以下是两种注释语法的示例：

单行注释（//）：

• 使用两个斜杠（//）来表示单行注释。
• 在斜杠后面的内容都会被视为注释，直到行末。

// 这是一个单行注释，用于在代码中做简短的注释说明

多行注释（/* ... /）：

• 使用/作为开始标记，使用*/作为结束标记，中间的内容都会被视为注释。

/*
这是一个多行注释，
可以用来写更长的注释内容，
甚至可以跨越多行
*/

【2】引入方式

<script>标签：

• 在HTML文件中使用<script>标签可以直接引入JavaScript代码文件。
• 将<script>标签放置在HTML文件的<head>或<body>部分，可以在页面加载时执行代码。

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

此方法适用于引入外部的JavaScript文件，其中src属性指定了外部文件的路径。

内联引入：

• 我们也可以将JavaScript代码直接写在HTML文件中，而不需要单独的外部文件。这种方式称为内联引入。

<script>
  // JavaScript代码...
</script>

在<script>标签之间编写JavaScript代码即可。

外部资源引入：

• 有时候，我们可能需要引入一些来自外部CDN（内容分发网络）的JavaScript库，
  • 例如jQuery、React等。
  • 这些库通常被托管在公共CDN上，并通过URL进行引入。

<script src="https://cdn.example.com/library.js"></script>

这种方式可以减少服务器负载，并提高缓存效果。

除了上述三种方式，还有其他一些高级的引入方式

比如模块化引入（通过import和export语法）

在Node.js环境中使用require函数等。

这些方式适用于更复杂的应用场景，例如大型项目或服务器端开发。

【3】数据类型

（1）变量

• 在JavaScript中，变量是用于存储和操作数据的容器。
• JavaScript中有三种声明变量的关键字：var、let和const。

var：

• 在ES5及之前的版本中，var是声明变量最常用的关键字。
  • 使用var声明的变量具有函数作用域，也就是说，它们的作用范围限定在包含它们的函数中。

var x = 10;

• 使用var声明的变量可以被重新赋值，并且在声明之前使用（存在变量提升）。

let：

• ES6引入了let关键字作为声明块级作用域变量的推荐方法。

  • 与var不同，使用let声明的变量具有块级作用域，也就是其作用范围限定在最近的代码块中（例如，一个函数内部或一个循环的花括号内部）。

  let y = 20;
  

  • let声明的变量也可以被重新赋值，但不能在声明之前使用（不存在变量提升）。

需要注意的是，在同一作用域中

不要同时使用var和let来声明同名变量，以免造成混淆和错误。

（2）变量命名规范

• 在JavaScript中，变量的命名需要遵循一定的规范，以使代码易于阅读、理解和维护。以下是常见的变量命名规范：

• 使用数字、字母、下划线（_）和美元符号（$）：

  • 变量名称可以包含数字、字母、下划线和美元符号。
  • 但是，名称必须以字母、下划线或美元符号开头，不能以数字开头。

  var myVar = 10;
  var _firstName = "John";
  var $totalAmount = 100.50;
  

• 使用驼峰命名法：

  • 驼峰命名法是一种常用的命名约定，它将单词首字母小写，每个后续单词的首字母大写，不使用下划线或空格。
  • 这样做可以提高变量的可读性。

  var firstName = "John";
  var totalAmount = 100.50;
  var myVariableName = "example";
  

• 避免使用关键字：

  • JavaScript有一些保留关键字，用于表示语言的基本结构和特定功能。
  • 在命名变量时，应避免使用这些关键字，以免产生冲突。

  var var = 10; // 避免使用关键字作为变量名
  var if = true; // 避免使用关键字作为变量名
  

（3）常量

• 除了var和let以外
  • 还有一个关键字const用于声明常量
  • 它的特点是一旦被赋值，则不能再被修改。

const PI = 3.14;

（4）数值类型 Number

数值类型（number）是JavaScript中的一种基本数据类型，用于表示数值。

它可以包括整数、浮点数和特殊数值（如NaN和Infinity）。

声明一个数值类型的变量：

var n = 10;         // 声明一个整数
var pi = 3.14;      // 声明一个浮点数

进行数值运算：

var a = 5;
var b = 2;
var sum = a + b;        // 加法
var difference = a - b; // 减法
var product = a * b;    // 乘法
var quotient = a / b;   // 除法

• 使用内置的Math对象进行更复杂的数学运算：

var radius = 5;
var area = Math.PI * Math.pow(radius, 2);  // 计算圆的面积

var angle = 45;
var radians = angle * (Math.PI / 180);     // 将角度转换为弧度

特殊的数值类型：

• NaN（Not a Number）：

  • 当执行无效的数学操作时，结果会生成NaN。

  • 例如，除以或者开方一个负数。

• Infinity（无穷大）：

  • 表示大于任何数的特殊值，可以通过将无限值赋给一个变量来获取。

（5）字符类型 String

• 模板字符串是JavaScript中处理字符类型（string）的一种特殊语法。
  • 它允许我们在字符串中插入变量或表达式，以一种更简洁和可读性更高的方式进行字符串拼接。

传统字符串

• 在传统的字符串拼接中，我们通常使用加号（+）来连接字符串和变量，例如：

var name = "Alice";
var greeting = "Hello, " + name + "!"; // 结果为 "Hello, Alice!"

模板字符串

• 而使用模板字符串，可以通过使用反引号（）来创建一个带有占位符的字符串。
  • 占位符使用${}`包裹，并且可以在其中使用任意的JavaScript表达式，如变量、函数调用等。示例如下：

const name = "Alice";
const greeting = `Hello, ${name}!`; // 结果为 "Hello, Alice!"

模板字符串的优势

1. 更简洁：相比传统的字符串拼接方式，模板字符串提供了更简洁的语法。
2. 更可读：使用模板字符串使得代码更易于理解和维护，尤其是在需要拼接多个变量或表达式时。
3. 支持多行字符串：模板字符串允许直接在字符串中换行，而不需要使用转义字符或字符串拼接。

除了插入变量外，模板字符串还可以嵌套使用，以及在其中执行更复杂的表达式。例如：

const a = 5;
const b = 2;
const result = `The sum of ${a} and ${b} is ${a + b}.`; // 结果为 "The sum of 5 and 2 is 7."

（6）字符类型常用方法

字符串（string）是一种常见的数据类型，在JavaScript中有许多可以用来操作和处理字符串的常用方法。以下是一些常用的字符串方法：

1. length: 返回字符串的长度。

const str = "Hello";
console.log(str.length); // 输出 5

2. charAt(index): 返回指定索引位置的字符。

const str = "Hello";
console.log(str.charAt()); // 输出 "H"

3. charCodeAt(index): 返回指定索引位置的字符的Unicode值。

const str = "Hello";
console.log(str.charCodeAt()); // 输出 72

4. concat(string): 连接两个或多个字符串，并返回新的字符串。

const str1 = "Hello";
const str2 = "World";
console.log(str1.concat(" ", str2)); // 输出 "Hello World"

5. indexOf(substring, fromIndex): 返回指定子字符串第一次出现的索引位置。如果未找到，返回-1。

const str = "Hello World";
console.log(str.indexOf("o")); // 输出 4
console.log(str.indexOf("W", 5)); // 输出 6
console.log(str.indexOf("abc")); // 输出 -1

6. substring(startIndex, endIndex): 返回从指定起始索引到结束索引之间的子字符串，不包括结束索引位置的字符。如果省略endIndex，则会截取到字符串的末尾。

const str = "Hello World";
console.log(str.substring(6)); // 输出 "World"
console.log(str.substring(, 5)); // 输出 "Hello"

7. toLowerCase(): 将字符串转换为小写字母。

const str = "Hello";
console.log(str.toLowerCase()); // 输出 "hello"

8. toUpperCase(): 将字符串转换为大写字母。

const str = "Hello";
console.log(str.toUpperCase()); // 输出 "HELLO"

以上只是一些常用的字符串方法示例，JavaScript还提供了其他众多的字符串方法，如 slice()、replace()、trim()等。

【4】null和undefined

在JavaScript中，null和undefined是两个特殊的值，表示变量的空缺或缺失。尽管它们有些相似，但在使用上有一些区别。

null

• 是一个表示“空”的值，可以将其赋值给任何变量。
• 它是JavaScript语言中的关键字，表示该变量被明确地定义为一个空值。
• 通常情况下，开发人员会将null用作暂时占位符，来表示一个变量尚未被赋予具体的值。

let variable = null;
console.log(variable); // 输出 null

undefined

• 表示一个变量已经声明，但尚未被赋予具体的值。

• 对于已声明但未初始化的变量，默认值为undefined。也

• 就是说，在以下情况下，变量会被认为是undefined：

  • 已声明但未初始化的变量

  • 未传递参数的函数参数

  • 缺少返回值的函数调用

  • 访问数组或对象中不存在的属性等

let variable;
console.log(variable); // 输出 undefined

function foo(parameter) {
  console.log(parameter); // 输出 undefined
}

foo();

• 需要注意的是
  • null和undefined在比较时是不同的。
  • 在进行严格相等比较（===）时，它们的结果是不相等的：

console.log(null === undefined); // 输出 false

• 如果在代码中遇到需要检查某个变量是否为null或undefined的情况
  • 可以使用条件语句来进行判断：

if (variable === null) {
  // 处理 null 的情况
} else if (variable === undefined) {
  // 处理 undefined 的情况
} else {
  // 处理其他情况
}

总结：

• null表示明确的空值
• 而undefined表示变量尚未赋予值。

在实际应用中，它们经常用于不同的场景和目的。

【5】布尔值 boolean

• 布尔值（Boolean）是计算机编程中的基本数据类型之一，它只有两个可能的取值：true（真）和false（假）。
  • 布尔值主要用于逻辑运算和条件判断，使得程序能够根据不同的条件执行不同的操作。
• 在JavaScript中，布尔值可以通过直接使用关键字true和false来表示：

let isTrue = true;
let isFalse = false;

console.log(isTrue);  // 输出 true
console.log(isFalse); // 输出 false

布尔值常见的应用场景有：

条件判断：

• 在编程中，我们经常需要根据条件决定程序的执行路径。
• 例如，我们可以使用布尔值作为条件来控制if语句的执行：

let age = 25;

if (age >= 18) {
  console.log("成年人");
} else {
  console.log("未成年人");
}

• 在上面的例子中，如果age大于等于18，会输出"成年人"；否则，会输出"未成年人"。

逻辑运算：

• 布尔值还可以进行逻辑运算
  • 常见的逻辑运算符有与（&&）、或（||）、非（!）等。以下是一些例子：

let x = true;
let y = false;

console.log(x && y); // 输出 false，逻辑与运算，只有两个操作数都为 true 时结果才为 true
console.log(x || y); // 输出 true，逻辑或运算，只有两个操作数都为 false 时结果才为 false
console.log(!x);     // 输出 false，逻辑非运算，将 true 取反为 false

返回值：

• 许多函数在特定条件下会返回布尔值。
  • 例如，字符串比较函数startsWith()可以用于判断一个字符串是否以指定的子串开头，并返回布尔值：

let str = "Hello World";

console.log(str.startsWith("Hello")); // 输出 true
console.log(str.startsWith("World")); // 输出 false

• 在上述例子中
  • startsWith()函数返回了一个布尔值来表示字符串str是否以"Hello"或"World"开头。

总结：

• 布尔值是一种简单的数据类型，它具有两个取值，即true和false。
  • 布尔值常用于条件判断、逻辑运算和返回值等场景。

【6】对象

• 在JavaScript中，对象（Object）是一种复合数据类型，用于存储键值对（key-value）的集合。
  • 对象可以包含任意数量的属性和方法，每个属性都由一个唯一的键（key）和对应的值（value）组成。
• 创建一个对象非常简单，可以使用花括号{}来定义一个空的对象，然后可以通过给对象添加属性来构建对象的结构和内容。例如：

var myObj = {};  // 创建一个空对象

// 添加属性
myObj.name = "John";
myObj.age = 30;

• 也可以在创建对象时直接定义属性和值：

var myObj = {
  name: "John",
  age: 30
};

• 对象可以使用点表示法或方括号表示法访问和操作属性值。例如：

console.log(myObj.name);  // 输出结果：John

// 方括号表示法
console.log(myObj["age"]);  // 输出结果：30

• 对象的属性值可以是任意类型的数据，包括基本类型（如字符串、数字、布尔值）和其他对象。
  • 对象的属性也可以是函数，这样就可以定义对象的方法。例如：

var myObj = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

myObj.greet();  // 输出结果：Hello, my name is John

• JavaScript对象还有许多常用的方法和功能
  • 如Object.keys()用于获取对象的所有属性键
  • Object.values()用于获取对象的所有属性值等。

对象是JavaScript中最重要的数据类型之一，它提供了一种方便的方式来组织和访问相关的数据和功能。

通过对象，可以将数据和相关操作封装在一起，实现更灵活和高效的编程。

【7】运算符

数字运算

在JavaScript中，有一系列用于进行数字运算的运算符。以下是常见的数字运算符：

1. 加法运算符 +：用于将两个数相加，或将字符串拼接起来。

var a = 5;
var b = 3;
var sum = a + b; // 结果为 8

var str1 = "Hello";
var str2 = "World";
var greeting = str1 + " " + str2; // 结果为 "Hello World"

2. 减法运算符 -：用于将一个数减去另一个数。

var a = 5;
var b = 3;
var difference = a - b; // 结果为 2

3. 乘法运算符 *：用于将两个数相乘。

var a = 5;
var b = 3;
var product = a * b; // 结果为 15

4. 除法运算符 /：用于将一个数除以另一个数。

var a = 6;
var b = 3;
var quotient = a / b; // 结果为 2

5. 取模运算符 %：用于获取两个数相除的余数。

var a = 7;
var b = 3;
var remainder = a % b; // 结果为 1

6. 自增运算符 ++：用于将一个数增加1。

var a = 5;
a++; // a的值变为 6

7. 自减运算符 --：用于将一个数减少1。

var a = 5;
a--; // a的值变为 4

赋值运算

赋值运算符用于给变量赋值。以下是常见的赋值运算符：

1. 简单赋值运算符 =：将右侧的值赋给左侧的变量。

var a = 5; // 将5赋给变量a

2. 加法赋值运算符 +=：将右侧的值与左侧的变量相加，并将结果赋给左侧的变量。

var a = 5;
a += 3; // 相当于 a = a + 3，结果为8

类似地，还有减法赋值运算符 -=, 乘法赋值运算符 *=, 除法赋值运算符 /=, 取模赋值运算符 %=, 等等。

逻辑运算

逻辑运算符用于对布尔值进行操作和组合。以下是常见的逻辑运算符：

1. 逻辑与运算符 &&：如果两个操作数都为真，结果为真；否则结果为假。

var a = true;
var b = false;
var result = a && b; // 结果为 false

2. 逻辑或运算符 ||：如果两个操作数至少有一个为真，结果为真；否则结果为假。

var a = true;
var b = false;
var result = a || b; // 结果为 true

3. 逻辑非运算符 !：对操作数进行取反操作，将真变为假，将假变为真。

var a = true;
var result = !a; // 结果为 false

逻辑运算符经常用于条件语句、循环和布尔逻辑的处理中，可以根据具体需求灵活运用。

【8】流程控制

if-else if-else 语句

if-else if-else 是一种用于根据条件选择性执行不同代码块的流程控制语句。它的语法结构如下：

if (条件1) {
    // 如果条件1为真，执行这里的代码块
} else if (条件2) {
    // 如果条件1为假，条件2为真，执行这里的代码块
} else {
    // 如果前面的条件都为假，执行这里的代码块
}

示例：

var num = 10;

if (num > ) {
    console.log("数字是正数");
} else if (num < ) {
    console.log("数字是负数");
} else {
    console.log("数字是零");
}
// 输出结果：数字是正数

switch case 语句

switch case 语句是一种根据不同的条件选择性执行代码块的流程控制语句。它的语法结构如下：

switch (表达式) {
    case 值1:
        // 当表达式的值等于值1时，执行此处的代码块
        break;
    case 值2:
        // 当表达式的值等于值2时，执行此处的代码块
        break;
    default:
        // 如果表达式的值与所有case的值都不匹配，执行此处的代码块
}

示例：

var day = "Tuesday";

switch (day) {
    case "Monday":
        console.log("今天是星期一");
        break;
    case "Tuesday":
        console.log("今天是星期二");
        break;
    case "Wednesday":
        console.log("今天是星期三");
        break;
    default:
        console.log("今天不是星期一、二或三");
}
// 输出结果：今天是星期二

for 循环

for 循环是一种在指定条件下重复执行代码块的流程控制语句。它的语法结构如下：

for (初始化; 条件; 递增/递减) {
    // 循环体中的代码会被重复执行
}

示例：

for (var i = ; i < 5; i++) {
    console.log(i);
}
// 输出结果： 1 2 3 4

while 循环

while 循环是一种在满足指定条件时重复执行代码块的流程控制语句。它的语法结构如下：

while (条件) {
    // 循环体中的代码会被重复执行
}

示例：

var i = ;
while (i < 5) {
    console.log(i);
    i++;
}
// 输出结果： 1 2 3 4

无论是for循环还是while循环，都可以根据实际需求来决定何时终止循环。在循环体中可以执行需要重复执行的操作，通过控制循环条件的变化或判断来控制循环的次数。

【9】三元运算

• 三元运算符是一种简洁的流程控制语句
  • 用于根据条件从两个表达式中选择一个值。
• 它的语法结构如下：

条件 ? 表达式1 : 表达式2

• 其中，条件是一个可以求值为布尔类型的表达式。
  • 如果条件为真，则返回表达式1的值；
  • 如果条件为假，则返回表达式2的值。

示例：

var num = 10;
var result = (num > ) ? "正数" : "负数";
console.log(result);
// 输出结果：正数

• 在上述示例中，三元运算符 (num > ) ? "正数" : "负数" 的条件是 (num > )
  • 如果条件为真，则返回字符串 "正数"；
  • 如果条件为假，则返回字符串 "负数"。
  • 结果被赋值给变量 result，并输出到控制台。
• 三元运算符可以代替简单的 if-else 语句，使代码更加简洁和易读。但需要注意的是，过多或过复杂的嵌套三元运算符可能会导致代码可读性下降，因此在使用时需要谨慎考虑。

【10】函数

函数是一段可重复执行的代码块，它接受输入参数，经过一系列操作和计算，最终产生输出结果。

函数通常被用来组织和封装可重复使用的代码，提高代码的可维护性和可读性。

（1）在编程中，函数有如下特点：

函数定义：

• 函数需要通过定义来声明。
• 函数定义包括函数名称、参数列表、函数体以及可选的返回值类型。

函数调用：

• 在代码中，通过函数名称和参数列表来调用函数。
• 函数调用会执行函数体内的代码，并可以返回一个值作为结果。

参数传递：

• 函数可以接受输入参数，这些参数用于传递数据给函数进行处理。
• 参数可以分为两种类型：
  • 形式参数（函数定义时声明的参数）和实际参数（函数调用时传递的参数）。

返回值：

• 函数可以返回一个值作为结果，用于向调用者提供函数执行的输出。
  • 返回值可以是任意数据类型，也可以是空（即没有返回值）。

（2）函数的使用可以带来以下好处：

代码重用：

• 函数将一段代码封装起来，可以被多次调用，避免了重复编写相同的代码。

模块化编程：

• 函数可以将大型程序分解为小的模块，提高代码的结构性和可读性。

代码抽象：

• 函数通过隐藏具体实现细节，仅暴露接口给外部使用，提供了一种高层次的抽象方式。

函数示例：

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

var result = add(2, 3);
console.log(result);
// 输出结果：5

• 在上述示例中，add 函数接受两个参数 a 和 b，并返回它们的和。
  • 函数被调用时传入参数 2 和 3，计算结果为 5，并将结果赋值给变量 result，最后输出到控制台。

通过函数的定义和调用，我们可以实现代码的模块化、可重用和可扩展，提高编程效率和代码质量。

【11】箭头函数

• 箭头函数（Arrow Function）是ECMAScript 6引入的一种新的函数定义语法。
• 相比传统的函数定义方式，箭头函数提供了更简洁的语法和更便捷的使用方式。

（1）箭头函数的语法如下：

(parameters) => { 
   // 函数体 
}

• 其中，parameters 是函数的参数列表，可以包含零个或多个参数，多个参数使用逗号分隔。
  • {} 中的部分是函数体，用来定义函数的执行逻辑。

（2）箭头函数还有以下几个特点：

函数体的简化：

• 如果函数体只包含一条语句，可以省略 {} 和 return 关键字，直接写表达式即可。
• 函数将自动返回该表达式的值。

隐式返回：

• 当函数体中只有一个表达式时，箭头函数会隐式返回该表达式的值，无需使用 return 关键字。

无绑定的 this：

• 箭头函数没有自己的 this 值，其内部的 this 始终指向外层作用域的 this 值。
• 这意味着在箭头函数内部不能通过 this 来访问对象自身的属性和方法，而是继承了外层函数的 this。

（3）箭头函数的示例：

// 无参数的箭头函数
const sayHello = () => {
  console.log("Hello!");
};

sayHello(); // 输出结果：Hello!

// 单个参数的箭头函数
const double = num => num * 2;

console.log(double(5)); // 输出结果：10

// 多个参数的箭头函数
const add = (a, b) => a + b;

console.log(add(2, 3)); // 输出结果：5

// 箭头函数的隐式返回
const multiply = (a, b) => a * b;

console.log(multiply(2, 3)); // 输出结果：6

需要注意的是，箭头函数适用于简单的函数逻辑和较短的代码块。

如果函数体较为复杂，涉及到多条语句或需要更灵活的作用域绑定，传统的函数定义方式可能更适合。

【12】常用对象

• 在JavaScript中，有许多常用对象可用于处理不同的数据类型、操作浏览器环境以及提供各种功能。以下是一些常见的JavaScript对象：

Object（对象）：

• 它是JavaScript中所有对象的基类。
• 对象是可变的键值对集合，用于存储和组织相关数据。

Array（数组）：

• 用于存储和操作有序的数据项列表。
• 数组可以包含任意类型的数据，并使用索引来访问和修改数据项。

String（字符串）：

• 表示一个字符序列。
• 字符串对象提供了许多用于处理和操作文本的方法，例如拼接、切割、替换等。

Number（数字）：

• 表示数值。
• 数字对象提供了许多用于处理数字的方法，例如数值转换、四舍五入、求平方根等。

Boolean（布尔值）：

• 表示真（true）或假（false）的值。
• 布尔对象提供了逻辑运算和条件判断所需的方法。

Date（日期）：

• 用于处理日期和时间。
• 日期对象提供了对日期和时间进行格式化、比较和计算的方法。

Math（数学）：

• 提供了许多常用的数学函数和常量
• 例如三角函数、指数函数、对数函数等。

RegExp（正则表达式）：

• 用于匹配和操作字符串的模式。
• 正则表达式对象提供了一组方法，用于在文本中进行模式匹配、替换等操作。

Function（函数）：

• 是可执行的代码块，可以被调用和传递参数。
• 函数对象提供了一些属性和方法，用于自定义和操作函数的行为。

Error（错误）：

• 用于捕捉和处理异常（错误）的对象。
• 它包含有关发生错误的信息，如错误类型和错误消息。

Promise（承诺）：

• 用于处理异步操作的对象。
• Promise对象表示一个异步操作的最终完成或失败，并返回相应的结果或错误。

JSON（JavaScript对象标记）：

• 是一种用于数据交换的轻量级文本格式。
• JSON对象提供了用于解析和序列化JSON数据的方法。

其他对象，

• 此外，还有一些与浏览器环境相关的对象，如Window（窗口）、Document（文档）、HTMLElement（HTML元素）等，用于与页面交互和操作DOM。

【13】自定义对象

• 在JavaScript中，您还可以创建自定义对象来满足特定需求。
  • 自定义对象允许您组织和封装相关的数据和功能。
• 以下是创建自定义对象的一种常见方式：

// 使用构造函数创建自定义对象
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 使用原型方法为自定义对象添加功能
Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

// 创建对象实例
var person1 = new Person("John", 25);
var person2 = new Person("Alice", 30);

// 访问对象属性
console.log(person1.name); // 输出："John"

// 调用对象方法
person2.sayHello(); // 输出："Hello, my name is Alice"

• 在上述示例中，我们使用构造函数Person创建了一个自定义对象。
  • 构造函数允许我们传入参数，并将其赋值给对象的属性。
  • 然后，我们使用原型方法sayHello为自定义对象添加一个方法。
  • 最后，我们通过实例化对象并访问属性和调用方法来使用自定义对象。

自定义对象的优势在于它们允许您根据应用程序的需求来定义数据结构和行为，并以交互的方式使用它们。

可以根据需要添加属性和方法，以满足复杂的业务逻辑。

通过自定义对象，可以更好地组织和管理代码，并使其更具可扩展性和可维护性。

【14】日期对象

• JavaScript中的日期对象（Date object）用于处理日期和时间。
  • 它提供了处理日期、时间和相关操作的方法。
  • 以下是一些常见的日期对象用法：

（1）创建日期对象：

• 您可以使用new Date()来创建当前日期和时间的对象实例，或者使用特定日期和时间参数来创建指定的日期对象。

// 创建当前日期和时间的对象实例
var currentDate = new Date();

// 创建指定日期和时间的对象实例
var specificDate = new Date(2023, 6, 5, 10, 30, ); // 参数依次为年、月（从开始计数）、日、时、分、秒

（2）获取日期和时间信息：

• 您可以使用日期对象的方法获取日期和时间的各个部分。

var date = new Date();

var year = date.getFullYear(); // 获取年份（四位数）
var month = date.getMonth(); // 获取月份（表示一月，11表示十二月）
var day = date.getDate(); // 获取日期（月中的某一天）
var hours = date.getHours(); // 获取小时
var minutes = date.getMinutes(); // 获取分钟
var seconds = date.getSeconds(); // 获取秒数

（3）设置日期和时间：

• 您可以使用日期对象的方法设置日期和时间的各个部分。

var date = new Date();

date.setFullYear(2024); // 设置年份
date.setMonth(8); // 设置月份（表示一月，11表示十二月）
date.setDate(15); // 设置日期（月中的某一天）
date.setHours(18); // 设置小时
date.setMinutes(45); // 设置分钟
date.setSeconds(30); // 设置秒数

（4）格式化日期和时间：

• 日期对象没有内置的格式化方法，但是您可以使用各种方法将日期和时间格式化为所需的字符串格式。

var date = new Date();

var formattedDate = date.toLocaleDateString(); // 格式化为本地日期字符串
var formattedTime = date.toLocaleTimeString(); // 格式化为本地时间字符串
var formattedDateTime = date.toLocaleString(); // 格式化为本地日期和时间字符串

以上仅是日期对象的一些基本用法示例。

JavaScript提供了更多操作日期和时间的方法，例如比较日期、计算日期间隔等。

有关更详细的信息，请查阅JavaScript文档。

【15】JSON对象

• JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于在客户端和服务器之间传输数据。
• 在JavaScript中，JSON对象用于解析和序列化JSON数据。

JSON对象提供了以下常用方法：

JSON.parse()：

• 将JSON字符串解析为JavaScript对象或值。

var jsonStr = '{"name": "John", "age": 30, "city": "New York"}';
var jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name); // 输出：John
console.log(jsonObj.age); // 输出：30
console.log(jsonObj.city); // 输出：New York

JSON.stringify()：

• 将JavaScript对象或值序列化为JSON字符串。

var jsonObj = {name: "John", age: 30, city: "New York"};
var jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr); // 输出：{"name":"John","age":30,"city":"New York"}

异常处理：

• 当使用JSON.parse()解析JSON字符串时，如果字符串不是有效的JSON格式，将抛出异常。
• 可以使用try...catch语句来捕获异常并进行处理。

 try {
     var invalidJsonStr = '{name: "John", age: 30}';
     var jsonObj = JSON.parse(invalidJsonStr);
 } catch (error) {
     console.log('Invalid JSON format:', error.message);
 }

• 当使用JSON.stringify()序列化JavaScript对象时，如果对象包含无法转换为JSON格式的值（如函数、循环引用等），将抛出异常。
  • 可以通过传递一个转换函数作为第二个参数来处理这些情况。

 var objWithFunction = {name: "John", sayHello: function() {console.log("Hello");}};
 var jsonStr = JSON.stringify(objWithFunction, function(key, value) {
     if (typeof value === 'function') {
         return value.toString(); // 将函数转换为字符串
     }
     return value;
 });
 console.log(jsonStr);

【16】RegExp对象

• 正则表达式（Regular Expression）是一种用来匹配、查找和操作字符串的工具。
• 在JavaScript中，我们可以使用RegExp对象来创建和操作正则表达式。

RegExp对象提供了以下常用方法和属性：

test()：

• 测试字符串是否匹配正则表达式，并返回布尔值。

var str = "Hello, world!";
var pattern = /Hello/;
var result = pattern.test(str);
console.log(result); // 输出：true

exec()：

• 在字符串中搜索匹配正则表达式的内容，并返回结果数组。
  • 如果没有匹配的内容，则返回null。

var str = "Hello, world!";
var pattern = /l+/g;
var result = pattern.exec(str);
console.log(result); // 输出：["ll"]

match()：

• 在字符串中搜索匹配正则表达式的内容，并返回结果数组。
  • 如果没有匹配的内容，则返回null。

var str = "Hello, world!";
var pattern = /l+/g;
var result = str.match(pattern);
console.log(result); // 输出：["ll", "l"]

search()：

• 在字符串中搜索匹配正则表达式的内容，并返回第一个匹配的索引位置。
  • 如果没有匹配的内容，则返回-1。

var str = "Hello, world!";
var pattern = /lo/;
var result = str.search(pattern);
console.log(result); // 输出：3

replace()：

• 将匹配正则表达式的内容替换为指定的字符串，并返回新的字符串。

var str = "Hello, world!";
var pattern = /o/g;
var replacement = "a";
var result = str.replace(pattern, replacement);
console.log(result); // 输出：Hella, warld!

flags：

• 返回正则表达式的修饰符标志字符串。

var pattern = /hello/gi;
console.log(pattern.flags); // 输出：gi

• RegExp对象还有其他一些方法和属性用于对正则表达式进行操作和获取相关信息，如toString()方法用于将正则表达式转换为字符串。

• 正则表达式是一种强大且灵活的工具，能够处理字符串的模式匹配和替换。在JavaScript中，可以使用RegExp对象来创建、测试和操作正则表达式。

【17】math对象

• Math对象是JavaScript中的内置对象之一，它提供了执行数学运算的方法和属性。
  • Math对象不需要实例化，我们可以直接使用其中的方法和属性。

下面是Math对象的一些常用方法：

Math.abs()：

• 返回一个数的绝对值。

var num = -5.5;
var absoluteValue = Math.abs(num);
console.log(absoluteValue); // 输出：5.5

Math.ceil()：

• 向上取整，返回大于或等于给定数字的最小整数。

var num = 4.2;
var roundedUp = Math.ceil(num);
console.log(roundedUp); // 输出：5

Math.floor()：

• 向下取整，返回小于或等于给定数字的最大整数。

var num = 4.8;
var roundedDown = Math.floor(num);
console.log(roundedDown); // 输出：4

Math.round()：

• 四舍五入，返回给定数字的四舍五入整数。

var num = 4.5;
var rounded = Math.round(num);
console.log(rounded); // 输出：5

Math.max()：

• 返回一组数中的最大值。

var maxNumber = Math.max(10, 5, 8);
console.log(maxNumber); // 输出：10

Math.min()：

• 返回一组数中的最小值。

var minNumber = Math.min(10, 5, 8);
console.log(minNumber); // 输出：5

Math.pow()：

• 返回一个数的指定次幂。

var power = Math.pow(2, 3);
console.log(power); // 输出：8

Math.sqrt()：

• 返回一个数的平方根。

var squareRoot = Math.sqrt(16);
console.log(squareRoot); // 输出：4

• Math对象还包含其他一些方法，如三角函数、对数函数、随机数生成等。
  • 可以根据需要查阅相关文档来使用。
• 除了方法，Math对象还提供了一些常用的数学常量
  • 例如Math.PI表示圆周率π，Math.E表示自然对数的底数e。
• Math对象为进行数学运算提供了方便和准确性，可以在各种数学计算中使用。