本文介绍了JavaScript的基础知识，包括变量的声明与命名规则，基本数据类型与引用数据类型的差异，各种运算符和表达式的使用，以及分支和循环结构。还详细讲解了函数的定义与作用域，内置对象如Math、Date和Array的方法，DOM和BOM的操作，事件处理和AJAX的基本原理。最后，简述了正则表达式的概念和常见用法。
目录
一.变量
在 JavaScript 中，使用 var 声明变量。
1. 语法格式
var 变量名 = 值;
在 JavaScript 中给变量命名应该遵循以下原则：
- 变量名由字母、下划线、$ 或数字组成，并且必须由字母、下划线、$ 开头。
- 变量名不能命名为系统关键字和保留字。
二. 数据类型
在 JavaScript 中数据类型分为两种：
- 基本数据类型：字符串（string）、数字（number）、布尔（boolean）、空（null）、未定义（undefined）。
- 引用数据类型：对象（object）。
1. 基本数据类型与引用数据类型区别
- 传参方式不同，基本数据类型是值传递，而引用数据类型是地址传递。
- 储存方式不同，基本数据类型是栈存储，而引用数据类型是堆存储。
2. 查看数据类型
我们可以使用 typeof 关键字来查看数据类型。
三. 运算符与表达式
1. 算术运算符
在 JavaScript 中有七种算术运算符：加 +、减 -、乘 *、除 /、取余 %、自加 ++、自减 --。
2. 比较运算符
比较运算符是比较操作数，并根据表达式判断为真或为假，来返回一个布尔类型的值。
在 JavaScript 中有如下表所示的比较运算符。
3. 赋值运算符
在 JavaScript 中，有五种赋值运算符：=、+=、-=、*=、/=。
4. 逻辑运算符
在 JavaScript 中，逻辑运算符包括：与 &&、或 ||、非 !。
5. 条件运算符（三目运算符）
条件运算符也可叫三目运算符，你可以用来判断条件的真假，根据真假执行不同的语句。
5.1 使用格式
条件表达式 ? 表达式1 : 表达式2
四. 分支与循环
1. 分支结构
1.1 if语句
if 语句有以下三种形式：
- 单分支语句。
- 双分支语句。
- 多分支语句。
单分支
if ...
双分支
if ... else ...
多分支
if ... else if .... else...
1.2 switch语句
语法格式
switch (条件) {
case 条件1:
break;
case 条件2:
break;
default:
break;
}
2. 循环结构
2.1 while语句
while 语句是当满足条件时，便执行 while 语句中的内容，这种循环属于先判断再执行。
语法格式
while (条件) {}
2.2 do...while语句
do...while 语句是先执行一次循环体再判断是否符合条件。
语法格式
do {} while (条件);
2.3 for语句
for 语句，会设置一个初始值，循环条件，当不满足条件时退出循环。
语法格式
for (初始化表达式; 条件表达式; 循环后的操作) {}
2.4 for...in语句
for...in 语句循环一个指定的变量来循环指定对象的所有可枚举属性。
当使用 for...in 去遍历数组时，返回的是数组元素的下标值。
语法格式
for (i in obj) {
}
五. 函数
在 JavaScript 中有两种函数，一种是有返回值的函数，一种是没有返回值的函数。
1. 函数定义格式
function 函数名(参数){
...
return 返回值;
}
2. 变量的作用域
作用域是变量与函数的可访问范围，在 JavaScript 中，变量的作用域有全局作用域和局部作用域两种。
2.1 局部作用域
在函数内声明的变量为局部变量，作用域只在函数内部有效，也只能被函数内部访问。
注：正因为局部变量只作用于函数内部，所以不同函数在函数内部是可以使用相同名称的变量；函数开始执行时创建局部变量，函数执行完成后局部变量会自动销毁。
2.2 全局作用域
在函数外部声明的变量，即为全局变量。全局变量的作用域针对整个全局，简单来说，就是网页的所有脚本和函数都能够访问它。
六. 内置对象
1. 数学对象Math
JavaScript 中的数学对象为 Math，它的内部有一些数学的属性和函数方法。
1.1 Math的常用属性
1.2 Math的常用方法
2. 日期对象Date
在 JavaScript 中，日期对象是 Date，用于处理日期和时间
2.1 常用方法
注：getMonth( )获取月份，取值为0（一月）到11（十二月）之间的整数，用的时候要+1
3. 数组对象Array
在 JavaScript 中，数组对象是 Array
3.1 语法格式
var 数组名 = new Array(元素1, 元素2,...,元素n);
注意：我们在定义数组时，不一定要写入元素，可以只定义一个空数组。
创建数组我们还可以简写为：
var 数组名 = [元素1, 元素2,...,元素n];
3.2 slice( )方法
slice() 是用来做数组切片操作的，也就是取数组中的部分值，例如：
arr.slice(2, 4);
表示取名为 arr 的数组中下标从 2 到 4 的值。
原数组未被修改
3.3 unshift( )方法
unshift() 可以在数组的头部增加新的元素，但返回值是新数组的长度
使用格式
数组名.unshift(待添加项);
3.4 shift( )方法
shift() 可以删除数组的首元素，但返回值是被删除的元素
使用格式
数组名.shift();
3.5 sort( )方法
sort() 可以给数组中的元素从小到大进行排序。
使用格式
数组名.sort();
3.6 reverse( )方法
reverse() 可以将数组中的元素进行逆序排列，返回翻转之后的数组，同时原数组已经被修改
使用格式
数组名.reverse();
3.7 join( )方法
join() 可以将数组中的字符拼接成字符串。
使用格式
数值名.join("内容");
就是将数组中的逗号换成内容并拼接成字符串
3.8 获取数组长度
我们可以使用 length 来获取数组的长度。
使用格式
数组名.length;
3.9 concat( )方法
concat() 可以将两个数组拼接在一起。返回值是处理后的新数组
使用格式
// 将 数组2 拼接到 数组1 里 数组1.concat(数组2);
3.10 includes( )方法
includes() 可以用来判断该数组中是否包含某个元素。
使用格式
数组.includes(元素);
3.11 toString( )方法
toString() 可以将数组中的值转换成字符串类型。
使用格式
数组名.toString();
3.12 indexOf( )方法
indexOf() 可以用来查找指定元素的下标值。
如果没有该元素则返回 -1
如果查找到多个匹配的元素时，返回的是第一个匹配的元素下标。
使用格式
arr.indexOf(元素);
3.13 push( )方法
push() 可以在数组末尾添加元素，但返回值是新数组的长度
使用格式
arr.push(元素1,元素2)
3.14 pop( )方法
pop()可以删除数组最后一个元素，返回值是被删除的元素
使用格式
arr.pop()
4. 字符串对象String
我们通常定义一个字符串，方法如下：
var str = "HELLO";
其实这是以种简写的方式，完整的定义方法如下：
var str = new String("HELLO");
4.1 获取字符串长度
获取字符串的长度与获取数组的长度是一样的，都是使用 length。
使用格式
字符串.length;
4.2 toLowerCase( )方法
toLowerCase() 可以把字符串的大写字母转换成小写字母。
使用格式
字符串.toLowerCase();
4.3 toUpperCase( )方法
toUpperCase() 可以把字符串中的小写字母转换成大写字母。
使用格式
字符串.toUpperCase();
4.4 charAt( )方法
charAt() 是用于根据指定下标从一个字符串中返回指定的字符。
使用格式
字符串.charAt(下标值);
4.5 substring( )方法
substring() 可以通过下标来选取字符串中的部分字符。
使用格式
字符串.substring(起始位置下标，结束位置下标); //截取起始-结束下标间的字符串
4.6 replace( )方法
replace() 可以用来替换指定字符串的内容。
使用格式
字符串.replace(待替换的字符串, 新的字符串);
4.7 split( )方法
split 可以使用指定的分隔符将一个字符串分割成子字符串数组。
使用格式
字符串.split(字符);
把字符串以某个字符变成逗号分割成数组
4.8 indexOf( )方法
indexOf() 是寻找某个字符在字符串中首次出现的位置。
使用格式
字符串.indexOf(字符);
4.9 substr( )方法
substr()截取指定位置指定长度的字符串
使用格式
字符串.substr(截取的起始位置下标，截取的字符串长度)
七. DOM与BOM
1. DOM
1.1 DOM属性
如果有多个，返回的是数组
1.2 DOM方法
2. BOM
2.1 什么是BOM
BOM（Browser Object Mode）是浏览器对象模型，通过操作对象的属性和方法来实现与浏览器的交互。
BOM 的构成如下所示：
从图中可以看出，window 是顶级对象，它也是我们学习的核心。
在 window 下面有：
- document 是 DOM 对象。
- location 是用于获取或设置窗体。
- navigation 包含浏览器配置相关的信息。
- history 浏览器的历史记录。
- screen 用于显示设备信息。
2.2 window对象的方法
八. 事件
1. 鼠标事件
鼠标事件是当用鼠标对页面进行一些操作时会触发的事件。
2. 键盘事件
常用：
- onkeydown：键盘按下会触发的事件。
- onkeyup：键盘松开会触发的事件。
- onkeypress：键盘按下时触发，不能识别功能键如ctrl，shift
执行顺序：down->press->up
3. 表单事件
常用：
九. event对象
event 对象，是事件对象，通过事件对象的属性，我们可以了解一个事件的详细情况。
var value = document.getElementById("btn");
value.onclick = function (e) {}; //这里的e就是event对象
1. 属性
常用的 event 对象属性如下表所示：
keyCode 属性已经从 Web 标准中删除，这里了解即可。
2. DOM 0 级事件与DOM 2 级事件
2.1 DOM 0 级事件的使用
DOM 0 级事件是直接使用像 onclick 这样的方式来实现相应的事件，例如，你可以在 HTML 标签里直接写 onclick 事件或者在 JavaScript 中直接使用 onclick = function(){}。
<input type="button" value="点我" οnclick="alert('欢迎来到蓝桥云课');" />
或者我们可以把上面代码修改成 JavaScript 版的。
document.getElementById("btn").onclick = function () {
alert("欢迎来到蓝桥云课");
};
需要注意的是：在 DOM 0 级事件中，如果有多个事件，后面的事件会覆盖前面的事件
2.2 DOM 2 级事件的使用
DOM 2 级事件可以让多个事件执行。
在 DOM 2 级事件里，所有的 DOM 节点都有两个方法，分别是 addEvenetListener 和 removeEventListener。
addEvenetListener 和 removeEventListener 的语法格式如下所示：
target.addEvenetListener(type,listener[,useCapture]);// 添加事件 target.removeEventListener(type,listener[,useCapture]);// 移出事件
其参数说明如下所示：
- type 是事件类型。
- listener 是事件处理的方法。
- useCapture 指定事件是否在捕获或冒泡阶段执行，其值为布尔类型，当取值为 true 时，事件句柄在捕获阶段执行，当取值为 false 时，事件句柄在冒泡阶段执行。
removeEventListener 可以移除 addEventListener 添加的事件句柄，但使用时需要注意，两者的处理方法必须相同，removeEventListener 才会生效
十. 原生AJAX
1. 认识AJAX
AJAX 的英文全称为 Asynchronous JavaScript And XML，Asynchronous 是异步的意思。何为异步呢？在这里异步是指通过 AJAX 向服务器请求数据，在不刷新整个页面的情况下，更新页面上的部分内容。
其工作原理图如下所示：
用户在浏览器执行一些操作，通过 AJAX 引擎发送 HTTP 请求到服务器请求数据，请求成功后，由服务器把请求的数据拿给 AJAX 引擎，再由 AJAX 拿给浏览器。AJAX 在这个过程中相当于是服务员，用户点好菜，由服务员把菜单交给厨师，厨师做好菜，由服务员把菜送到用户的餐桌上。
同学们可能会想，我直接把菜单交给厨师，省去中间人沟通岂不是更简单？
浏览器如果直接向服务器请求数据的话，在请求过程中，你是不能对页面进行其他操作的，这叫同步请求，而把请求数据这个活外包给 AJAX 后，在请求过程中，用户还是可以对页面进行其他操作，这就是我们的异步请求了，也是 AJAX 的核心特点。
2. 创建AJAX的基本步骤
2.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.2 向服务器发送请求
在步骤一中我们已经创建了用于服务器交换数据的 XMLHttpRequest 对象，要向服务器发送请求，我们需要调用该对象中的 open 和 send 方法。
其使用如下：
// 规定发送请求的一些要求
httpRequest.open("method", "url", async);
// 将请求发送到服务器
httpRequest.send();
open 方法中的参数说明如下：
- method 是请求的类型，常见的有 GET 和 POST。
- url 是请求的地址。
- async 是设置同步或者异步请求，其值为布尔类型，当为 true 时，使用异步请求；当为 false 时，使用同步请求，默认为 true。
2.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 代表请求完成。
十一. 正则表达式
1. 什么是正则表达式
正则表达式是用来验证字符串的模版，开发中为了验证邮箱、手机号、身份证号等字符串是否符合要求，通常会使用正则表达式。
作为匹配字符串的模版，正则表达式本身也是字符串，例如 aaa 就是一个最简单的正则表达式，只不过该表达式只能匹配字符串 aaa，如果一个正则表达式只能匹配 aaa 那么它作为正则表达式的意义就没多大了。真正的正则表达式是能够匹配多个字符串的通用的字符串。
2. 如何使用正则表达式
正则表达式的使用大致分为两步：
第一步： 编写一个正则表达式。
var regularExpression = /正则表达式/;
/ / 里面写的内容就是我们的正则表达式，具体写法因为比较复杂我们稍后再说。我们先来学习如何使用写好的正则表达式进行验证。
第二步： 使用正则表达式验证目标字符串。
假设第一步我们的正则表达式已经编写完毕，那么我们使用正则表达式去验证目标字符串是否符合格式要求很简单，只需要使用下列代码验证即可。
var flag = regularExpression.test("目标字符串");
上述代码调用了正则表达式的 test 方法进行验证，调用时传入一个需要验证的目标字符串，验证通过返回 true ，不通过返回 false。
3. 常用的正则表达式
3.1 常用表达式
3.2 常用的元字符（特殊字符）
3.3 常用的限定符
3.4 常用的修饰符
3.5 其他
扫一扫
6510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
