蓝桥杯Web组知识点——JavaScript篇

笔者更喜欢飞书的笔记风格，故读者可查看飞书文档

飞书云文档：蓝桥杯web知识点——JavaScript篇https://uestc.feishu.cn/docx/VyordSgZVozOe0x4sLqcYOfVnVg?from=from_copylink

涵盖内容：

​

预览图：

​ 

复制到csdn上有部分语法不支持，建议飞书查看

JavaScript 变量

在 JavaScript 中，使用 var 声明变量。

在 JavaScript 中给变量命名应该遵循以下原则：

1. 变量名由字母、下划线、$ 或数字组成，并且必须由字母、下划线、$ 开头。

2. 变量名不能命名为系统关键字和保留字。

---

数据类型

在 JavaScript 中数据类型分为两种：

• 基本数据类型：字符串（string）、数字（number）、布尔（boolean）、空（null）、未定义（undefined）。

• 引用数据类型：对象 (Object)、数组 (Array)、函数 (Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）

看见这么多数据类型，同学们可能会问：为什么需要这么多种数据类型呢？️

• 不同的数据类型占有的存储空间不同，如果不标识数据类型的话，计算机会给不同的数据类型分配相同的储存空间，这就造成了资源浪费。

• 不同的数据类型在进行运算的时候，需要进行转换，同类型的数据才能进行计算，比如两个整型相加（+）是算数运算（1+1=2），两个字符串相加（+）是字符串拼接（'1'+'2'='12'）。

那么为什么又要分为基本数据类型和引用数据类型呢？️

• 传参方式不同，基本数据类型是值传递，而引用数据类型是地址传递。

• 储存方式不同，基本数据类型是栈存储，而引用数据类型是堆存储。

---

运算符

算术运算符

加 +、减 -、乘 *、除 /、取余 %、自加 ++、自减 --。

比较运算符

比较运算符是比较操作数，并根据表达式判断为真或为假，来返回一个布尔类型的值。

在 JavaScript 中有如下表所示的比较运算符。

运算符	描述
等于（==）	当等于号左右两边的操作数相等时，返回 true。
不等于（!=）	当不等号左右两边的操作数不相等时，返回 true。
全等（===）	当全等号左右两边的操作数相等且类型相同时，返回 true。
不全等（!==）	当不全等号左右两边的操作数不相等或者类型不相同时，返回 true
大于（>）	当大于号左边的操作数大于右边的操作数时，返回 true。
大于等于（>=）	当大于等于号左边的操作数大于或者等于右边的操作数时，返回 true。
小于（<）	当小于号左边的操作数小于右边的操作数时，返回 true。
小于等于（<=）	当小于等于号左边的操作数小于或者等于右边的操作数时，返回 true。

赋值运算符

=、+=、-=、*=、/=

逻辑运算符

与 &&、或 ||、非 !。

假设 p 和 q 代表两个条件，我们用 0 代表假（false），用 1 代表真（true），其逻辑运算真值表可以如下所示：

条件运算符

条件运算符也可叫三目运算符，你可以用来判断条件的真假，根据真假执行不同的语句。

条件运算符的使用格式如下：

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

当条件表达式的结果为 true，则问号后面的「表达式 1」将会执行；如果条件表达式结果为 false，则冒号后面的「表达式 2」将会执行。

---

⛱️分支与循环

分支结构：

1. if 语句

if 语句有以下三种形式：

• 单分支语句。

• 双分支语句。

• 多分支语句。

接下来我们就对这三种 if 语句分别做一下练习来了解它们之间的区别。

单分支语句

if... 语句的执行流程如下图所示：

双分支语句

if...else 语句的执行流程如下图所示：

多分支语句

if...else if...else 执行流程如下图所示：

其语法格式为：

if (条件表达式) { } else if (条件表达式) { } else { }

1. Switch 语句

switch 语句的语法格式为：

switch (条件) { case 条件1: break; case 条件2: break; default: break; }

循环结构

循环结构就是当满足判断条件，程序就一直在循环体中运行；当不满足条件时，退出循环。

这里会给大家介绍 JavaScript 中四种循环语句，分别是

• while 语句：while 语句是当满足条件时，便执行 while 语句中的内容，这种循环属于先判断再执行。

• do...while 语句：do...while 语句是先执行一次循环体再判断是否符合条件。

• for 语句：for 语句，会设置一个初始值，循环条件，当不满足条件时退出循环。

• for...in 语句：

for...in 语句循环一个指定的变量来循环指定对象的所有可枚举属性。

其语法格式为：

var arr = ["小红", "小蓝", "小白", "小黑"]; for (i in arr) { r = "欢迎" + arr[i] + "来到蓝桥云课。" + "
"; document.write(r); }

---

函数

• 函数的定义使用function关键字，后面跟着函数的名称和一对圆括号，圆括号中可以包含参数列表。函数体被包裹在一对花括号中。

• 函数的基本语法如下：

  function functionName(parameter1, parameter2) { // 函数体 // 可以执行一系列操作 // 可以使用参数 // 可以返回一个值 }

• 函数可以接受零个或多个参数，参数之间用逗号分隔。在函数体中，可以使用这些参数进行操作。

• 函数可以通过return语句返回一个值。返回值可以是任意数据类型，包括数字、字符串、布尔值、对象等。如果函数没有显式地使用return语句返回值，则默认返回undefined。

• 函数可以作为值进行赋值和传递。可以将函数赋值给变量，也可以将函数作为参数传递给其他函数，甚至可以将函数作为返回值返回。

• 函数可以具有局部变量和全局变量。在函数内部定义的变量是局部变量，只在函数内部可见。在函数外部定义的变量是全局变量，可以在函数内部和外部访问。

• 函数可以使用递归来实现自身的调用。递归是指函数调用自身的过程。递归函数通常包含一个或多个基本情况和一个或多个递归情况。

⚖️内置对象

• 数学对象

• 日期对象

• 数组对象

• 字符串对象

数学对象

JavaScript 中的数学对象为 Math，它的内部有一些数学的属性和函数方法。

Math 的常用属性如下表所示：

属性	描述
Math.E	自然对数的底数
Math.LN2	2 的自然对数
Math.PI	圆周率
Math.SQRT2	2 的平方根

Math 的常用方法如下表所示：

属性	描述
Math.abs(x)	返回一个数的绝对值。
Math.pow(x, y)	返回一个数的 y 次幂。
Math.random()	返回一个 0 到 1 之间的伪随机数。
Math.sqrt(x)	返回一个数的平方根。
Math.round()	返回四舍五入后的整数。
Math.exp(x)	返回欧拉常数的参数次方。
Math.floor()	返回向下取整的整数

日期对象

在 JavaScript 中，日期对象是 Date，用于处理日期和时间。

其常用方法如下所示：

方法	描述
getDate()	返回一个月的某一天。
getDay()	返回一周中的某一天。
getFullYear()	返回年份。
getHours()	返回小时。
getMonth()	返回月份。
getTime()	返回毫秒数。
setFullYear()	设置年份。
setDate()	设置一个月中的某一天。
setMonth()	设置月份。

var date = new Date(); // 实例化 Date 对象 var month = date.getMonth() + 1; // 获取月份，取值为 0（一月）到 11（十二月）之间的整数 document.write( "今天是" + date.getFullYear() + "年" + month + "月" + date.getDate() + "日" + "
" );

下面是使用JavaScript编写一个倒计时的代码，倒计时的目标时间是2023年11月11日：

// 目标时间：2023年11月11日 const targetDate = new Date('2023-11-11'); function countdown() { // 当前时间 const currentDate = new Date(); // 计算剩余时间（以毫秒为单位） const remainingTime = targetDate - currentDate; // 将剩余时间转换为天、小时、分钟和秒 const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24)); const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000); // 在控制台输出倒计时结果 console.log(`距离2023年11月11日还有：${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`); } // 每秒更新倒计时 setInterval(countdown, 1000);

这段代码会在控制台输出距离2023年11月11日的倒计时，以天、小时、分钟和秒的形式显示。

数组对象

在 JavaScript 中，数组对象是 Array，在其语法格式为：

var 数组名 = new Array(元素1, 元素2,...,元素n);

注意：我们在定义数组时，不一定要写入元素，可以只定义一个空数组。

创建数组我们还可以简写为：

var 数组名 = [元素1, 元素2,...,元素n];

例如，我们定一个名为 nums 的数组。

var nums = [1, 2, 3];

在数组中，每一个子项都有其对应的编号，这样的编号被称为下标，下标从 0 开始。

当我们想要取出数组中的某个值时，下标就起作用了，比如我们取出数组中的第二个值 2。

nums[1];

数组方法：slice()

slice() 是用来做数组切片操作的，也就是取数组中的部分值，例如：

arr.slice(2, 4);

表示取名为 arr 的数组中下标从 2 到 4 的值。左闭右开[2，4）

数组方法：unshift()

unshift() 可以在数组的头部增加新的元素。

使用格式：

var arr = ["苹果", "梨子", "橙子", "葡萄", "樱桃", "芒果"]; arr.unshift("释迦果"); document.write(arr);

数组方法：shift()

shift() 可以删除数组的首元素。

使用格式：

var arr = ["苹果", "梨子", "橙子", "葡萄", "樱桃", "芒果"]; arr.shift(); document.write(arr); // 梨子，橙子，葡萄，樱桃，芒果

数组方法：sort()

sort() 可以给数组中的元素从小到大进行排序。

使用格式：

var arr = [2, 3, 4, 8, 1]; document.write(arr.sort()); // 1，2，3，4，8

数组方法：reverse()

reverse() 可以将数组中的元素进行逆序排列。

使用格式：

var arr = ["一", "二", "三", "四"]; document.write(arr.reverse()); // 四，三，二，一

数组方法：join()

join() 可以将数组中的字符拼接成字符串。

使用格式：

var arr = ["H", "e", "l", "l", "o"]; document.write(arr.join("")); // Hello

arr.length 获取数组长度

数组方法：concat()

concat() 可以将两个数组拼接在一起。

使用格式：

var arr1 = ["柠檬", "苹果", "草莓"]; var arr2 = ["葡萄", "西瓜", "柚子"]; document.write(arr1.concat(arr2)); // 柠檬，苹果，草莓，葡萄，西瓜，柚子

数组方法：includes()

includes() 可以用来判断该数组中是否包含某个元素。

使用格式：

var arr = ["柠檬", "苹果", "草莓"]; document.write("水果清单里有西瓜吗？" + arr.includes("西瓜") + "
"); document.write("水果清单里有苹果吗？" + arr.includes("苹果")); // 水果清单里有西瓜吗？false // 水果清单里有苹果吗？true

数组方法：toString()

toString() 可以将数组中的值转换成字符串类型。

使用格式：

var arr = ["Hello", "string"]; document.write("arr 的类型为 " + typeof arr + "
"); document.write("arr.toString() 的类型为 " + typeof arr.toString()); // arr 的类型为 object // arr.toString() 的类型为 string

数组方法：indexOf()

indexOf() 可以用来查找指定元素的下标值。

使用格式：

var arr = ["梨子", "西瓜", "梨子", "葡萄", "柚子"]; document.write("返回梨子的索引：" + arr.indexOf("梨子") + "
"); document.write("返回樱桃的索引：" + arr.indexOf("樱桃")); // 返回梨子的索引： 0 // 返回樱桃的索引：-1

注意：如果查找到多个匹配的元素时，返回的是第一个匹配的元素下标。

字符串对象

我们通常定义一个字符串，方法如下：

var str = "HELLO";

其实这是一种简写的方式，完整的定义方法如下：

var str = new String("HELLO");

获取字符串的长度与获取数组的长度是一样的，都是使用 length。

字符串方法：toLowerCase()

toLowerCase() 可以把字符串的大写字母转换成小写字母。

字符串方法：toUpperCase()

toUpperCase() 可以把字符串中的小写字母转换成大写字母。

字符串方法：charAt()

charAt() 是用于根据指定下标从一个字符串中返回指定的字符。

使用格式：

var str = "HelloJavaScript"; document.write("第 7 个字符为 " + str.charAt(7)); // 获取下标为 7 的字符 // 第 7 个字符为 v

下标为7，也就是第八个字符

字符串方法：substring()

substring() 可以通过下标来选取字符串中的部分字符。

使用格式：

var str = "HelloJavaScript"; document.write("第 7-10 的字符为 " + str.substring(7, 10)); // 获取下标为 7-10 的字符 // 第 7-10 的字符为 vas 左闭右开[7，10）

字符串方法：split()

split 可以使用指定的分隔符将一个字符串分割成子字符串数组。

使用格式如下：

var str = "Hello,Java,Script"; var arr = str.split(","); // 已逗号划分字符串 document.write("第一个元素为：" + arr[0] + "
"); document.write("第二个元素为：" + arr[1] + "
"); document.write("第三个元素为：" + arr[2] + "
"); // 第一个元素为：Hello // 第二个元素为：Java // 第三个元素为：Script

---

Dom与Bom

1. DOM 方法

常用的 DOM 方法如下表所示：

方法	描 述
document.getElementById()	通过 id 获取元素。
document.getElementByTagName()	通过标签名获取元素。
document.getElementByClassName()	通过 class 获取元素。（返回数组）
document.getElementByName()	通过 name 获取元素。
document.querySelector()	通过选择器获取第一个元素。
document.querySelectorAll()	通过选择器获取所有元素。
document.createElement()	创建元素节点。
document.createTextNode()	创建文本节点。
document.write()	输出内容。
document.writeln()	输出内容并换行。

1. BOM 的使用

BOM（Browser Object Mode）是浏览器对象模型，通过操作对象的属性和方法来实现与浏览器的交互。

BOM 的构成如下所示：

从图中可以看出，window 是顶级对象，它也是我们学习的核心。

在 window 下面有：

• document 是 DOM 对象。

• location 是用于获取或设置窗体。

• navigation 包含浏览器配置相关的信息。

• history 浏览器的历史记录。

• screen 用于显示设备信息。

window 对象的方法如下所示：

方法	描 述
alert()	显示一个警告框。
prompt()	显示可提示用户输入的对话框。
confirm()	显示一个有确认和取消按钮的对话框。
open()	打开一个新的浏览器窗口。
close()	关闭浏览器。
print()	打印当前窗口内容。

事件

鼠标事件

鼠标事件是当用鼠标对页面进行一些操作时会触发的事件。

常用的鼠标事件如下表所示：

事件	说明
onclick	鼠标点击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousedown	鼠标按下事件
onmouseup	鼠标松开事件
onmousemove	鼠标移动事件

都很重要！！！

onmousedown 和 onmouseup 的使用

window.onload = function () { var btn1 = document.getElementById("btn1"); btn1.onmousedown = function () { // 鼠标按下 btn1.style.background = "#ffefa1"; }; btn1.onmouseup = function () { // 鼠标松开 btn1.style.color = "#51c2d5"; btn1.style.background = "#f4f9f9"; }; };

键盘事件

常用的键盘事件只有以下两个：

• onkeydown：键盘按下会触发的事件。

• onkeyup：键盘松开会触发的事件。

表单事件

在 JavaScript 中，常用表单事件如下表所示：

事件	说明
onfocus	表单元素聚焦时触发。
onblur	表单元素失焦时触发。

event 对象的使用

event 对象，是事件对象，通过事件对象的属性，我们可以了解一个事件的详细情况。

以下是关于事件对象的一些常用信息和用法：

1. 获取事件目标（target）：事件对象的target属性表示触发事件的元素。可以使用event.target来访问该属性。

2. 阻止默认行为：有时候需要阻止事件的默认行为，比如点击链接时阻止跳转。可以使用event.preventDefault()方法来取消事件的默认行为。

3. 停止事件冒泡：事件传播指的是事件从触发元素向上层元素的传递过程。可以使用event.stopPropagation()方法来停止事件的冒泡。

4. 获取键盘按键信息：对于键盘事件，可以使用事件对象的keyCode或key属性来获取按下的键盘按键的信息。

5. 获取鼠标位置：对于鼠标事件，可以使用事件对象的clientX和clientY属性来获取鼠标相对于浏览器窗口的位置。

6. 获取表单数据：对于表单相关的事件，可以使用事件对象的target属性来获取表单元素的值，例如event.target.value。

keyCode 属性已经从 Web 标准中删除，这里了解即可。

---

✨原生Ajax

认识 AJAX

AJAX 的英文全称为 Asynchronous JavaScript And XML，Asynchronous 是异步的意思。何为异步呢？在这里异步是指通过 AJAX 向服务器请求数据，在不刷新整个页面的情况下，更新页面上的部分内容。

其工作原理图如下所示：

创建 AJAX 的基本步骤

1. 创建 XMLHttpRequest 对象

在 AJAX 中，XMLHttpRequest 对象是用来与服务器进行数据交换的。其创建如下所示：

var httpRequest = new XMLHttpRequest();

为了保证浏览器的兼容性，我们可以用以下方式来创建。

if (window.XMLHttpRequest) { // Mozilla，Safari，IE7+ 等浏览器适用 httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE 6 或者更老的浏览器适用 httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }

2.向服务器发送请求

在步骤一中我们已经创建了用于服务器交换数据的 XMLHttpRequest 对象，要向服务器发送请求，我们需要调用该对象中的 open 和 send 方法。

其使用如下：

// 规定发送请求的一些要求 httpRequest.open("method", "url", async);// 将请求发送到服务器 httpRequest.send();

open 方法中的参数说明如下：

• method 是请求的类型，常见的有 GET 和 POST。

• url 是请求的地址。

• async 是设置同步或者异步请求，其值为布尔类型，当为 true 时，使用异步请求；当为 false 时，使用同步请求，默认为 true。

3.服务器响应状态

我们使用 HTTP 请求数据后，请求是否成功，会反馈给我们相应的请求状态。我们使用 onreadystatechange 去检查响应的状态，当 httpRequest.readyState 为 4 并且 httpRequest.status 等于 200 时，说明数据请求成功，其使用如下：

httpRequest.onreadystatechange = function () { if (httpRequest.readyState == 4 && httpRequest.status == 200) { // 请求成功执行的代码 } else { // 请求失败执行的代码 } };

readystate的值：

• 0 代表未初始化请求。

• 1 代表已与服务器建立连接。

• 2 代表请求被接受。

• 3 代表请求中。

• 4 代表请求完成。