JavaScript超全基础知识点JavaScript 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。Jav

JavaScript超全基础知识点

一、JavaScript简介

1.1 JavaScript的起源

JavaScript语言的前身是LiveScript语言，这是由Netscape（网景）公司为1995年发布的Navigator 2.0 浏览器的应用而开发的脚本语言。与Sun（升阳）公司（现已被甲骨文公司收购）联手完成LiveScript语言的开发后，就在Navigator 2.0 被正式发布前，Netscape公司将其改名为JavaScript，也就是最初的JavaScript 1.0 版本。虽然当时该版本还存在很多缺陷，却丝毫不影响以JavaScript 1.0 版本为基础的JavaScript 2.0 在浏览器市场上的主宰地位。

因为JavaScript 1.0 如此成功，所以Netscape公司在Navigator 3.0 中发布了 JavaScript 1.1 版本。同时微软开始进军浏览器市场，发布了 Internet Explorer 3.0 并搭载了一个JavaScript的类似版本，其注册名称为JScript。这成为JavaScript语言发展过程中的重要一步。

在微软进入浏览器市场后，此时有3种不同的JavaScript版本同时存在，Navigator中的JavaScript、IE中的JScript以及CEnvi中的ScriptEase。与其他编程语言不同的是，JavaScript并没有一个标准来统一其语法或特性，而这3种不同的版本恰恰突出了这个问题。1997年，JavaScript 1.1 版本作为一个草案被提交给欧洲计算机制造商协会（ECMA）。最终，由来自 Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成了 TC39委员会，以制定一个标准化的，可通用、跨平台、中立于厂商的脚本语言。TC39委员会制定了“ECMAScript程序语言的规范书”（又称为“ECMA-262标准”），该标准通过国际标准化组织（ISO）采纳通过，成为各种浏览器生产开发所使用的脚本程序的统一标准。

1.2 JavaScript的特点

（1）解释型语言

JavaScript不同于一些编译性的程序语言，如C、C++等，它是一种解释性的程序语言，其源代码不需要经过编译，而是直接在浏览器运行时被解释。

（2）基于对象

JavaScript是一种基于对象的语言，这意味着它能运用已经创建的对象，因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

（3）事件驱动

JavaScript可以直接对用户或客户输入作出响应，无需经过Web服务程序，它对用户的响应，是以事件驱动的方式进行的。

所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，此动作被称为事件。例如：按下鼠标、移动窗口、选择菜单等都可以视为事件，当事件发生时，可能会引起相应的事件反应。

（4）跨平台性

JavaScript依赖于浏览器本身，与操作环境无关，只要是能运行浏览器的计算机，就可以正确执行。

（5）安全性

JavaScript是一种安全性语言，不允许访问本地的硬盘，不能将数据存入服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，因此可有效地防止数据的丢失。

1.3 JavaScript的使用

1.3.1 内嵌式JS

HTML中，在script标签中就可以编写JavaScript代码

<script>
    alert('Hello,world!');
</script>

1.3.2 行内式JS

行内式JS，可以直接写到元素的内部，该种情况只有在特殊情况下才使用

<input type="button" value="点击一下" onclick="alert('Hello,world!')">

1.3.3 外部JS文件

在一个单独的js文件中也可以编写JavaScript代码，然后在HTML文件中使用script标签进行引用

my.html

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

my.js

alert('Hello,World!')

1.4 JavaScript的输出

1.4.1 页面输出

在页面中直接输出该部分内容

<script>
    // 页面输出
    document.write('这是一条消息');
</script>

1.4.2 输入框输出

在浏览器中弹出输入框，用户可以输入内容

<script>
    // 这是一个输入框
    prompt('请输入你的年龄');
</script>

1.4.3 弹出窗口输出

打开浏览器时，弹出窗口提示

<script>
    // alert 弹出窗口
    alert('欢迎进入页面！');
</script>

1.4.4 控制台输出

在控制台中可以看到该部分输出内容

注意：控制台可在浏览器或者VS中查看

VS快捷键：Ctrl + Shift + u

谷歌浏览器快捷键：Ctrl + Shift + i

<script>
    // concole 控制台输出
    console.log('我是程序员能看到的。');
</script>

1.5 JavaScript的注释

注释可以解释程序某些语句的作用和功能，使程序更易于理解，通常用于代码的解释说明

注释的分类：单行注释、多行注释

单行注释快捷键：ctrl + /

多行注释快捷键：默认为 shift + alt + a，后期可自己修改（我这里修改成了ctrl + shift + /）

1.5.1 单行注释

<script>
    // 这是单行注释
    document.write('这是一条消息');
</script>

1.5.2 多行注释

<script>
    /* 
        这是多行注释
    */
    document.write('这是一条消息');
</script>

二、JavaScript基础语法

2.1 数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

每一种编程语言都有自己所支持的数据类型，JavaScript的数据类型分为基本数据类型和复合数据类型。（关于复合数据类型中的对象、数组和函数等，后面再做详细介绍）

JavaScript的基本数据类型有数值型、字符串型、布尔型以及两个特殊的数据类型。

2.1.1 数值型

数值型（number）是JavaScript中最基本的数据类型。和其它语言不同的是，它并不区分整型数值和浮点型数值，在JavaScript中，所有的数值都是由浮点型表示的。

当一个数字直接出现在JavaScript程序中时，称为数值直接量，JavaScript支持数值直接量的形式有以下几种：

（1）十进制：

十进制的整数是一个由0~9组成的数字序列

（2）十六进制：

以“0X”或者“0x”开头，其后跟随十六进制的数字序列，十六进制的数字可以是0 ~ 9的某个数字，也可以是 a（A）~ f（F）的某个字母，它们用来表示0~15的某个值

（3）八进制：

以数字0开头，其后跟随一个数字序列，这个序列中的每个数字都为0~7（包括0和7）

ECMAScript标准不支持八进制数据，因此最好不要使用以0为开头的整数类型

（4）浮点型数据：浮点型数据可以具有小数点，其表示方法有两种：传统记数法、科学记数法

传统记数法：将一个浮点数分为整数部分、小数点和小数部分，如果整数为0，则可以省略整数部分，如：1.2、1.9963、.123

科学记数法：实数后跟随字母e 或者 E，后面加上一个带正号或者负号的整数指数，其中正号可以忽略，如：6e+3、3.12e11、1.23E-12

（5）特殊值Infinity（无穷大）：

如果一个数值超出了 JavaScript 所能表示的最大值的范围，那么JavaScript就会输出 Infinity；如果一个数值超出了JavaScript所能表示的最小值的范围，则输出 -Infinity。

（6）特殊值NaN（not a number）:

在进行数字运算时产生了未知的结果或错误，JavaScript就会返回 NaN，它表示该数字运算的结果是一个非数字。

2.1.2 字符串型

字符串（string）是由0个或多个字符组成的序列，它可以包含大小写字母、数字、标点符号或者其他字符，也可以包含汉字。字符串书写时需要使用单引号或者多引号括起来。

字符串引号匹配混乱问题解决方法：使用转义字符 “\”

常见的转义字符（\后面加字符）：

转义字符	描述
\b	退格
\n	换行
\t	水平制表符，Tab空格
\f	换页
'	单引号
"	双引号
\v	垂直制表符
\r	Enter符
\	反斜杠

转义字符“\n”在警示框中会产生换行，但是在document.write();语句中使用转义字符时，只有将其放在格式化文本块中才会起作用，所以脚本必须放在 pre 的标签中。

示例：

<script>
    // alert('网页设计\n基础');
    document.write('<pre>');
    document.write('网页设计\n基础');
    document.write('</pre>');
</script>

2.1.3 布尔型

布尔数据类型只有两个值：true（真）和 false（假）

2.1.4 特殊数据类型

（1）未定义值：未定义值就是 underfined，表示变量还没有赋值（如：var a;）

（2）空值：空值即 null，是一个特殊的值，用于定义空洞或不存在的引用

null 与 underfined 的区别：

null表示一个变量被赋予了空值。

underfined表示该变量尚未被赋值。

2.1.5 数据类型转换-转换为字符串

（1）方法1：toString()

var num = 10;
var str = num.toString();

（2）方法2：String()强制转换

var num = 10;
console.log(String(num));

（3）方法3：加号拼接字符串

var num = 10;
console.log(num + 'pink');

2.1.6 数据类型转换-转换为数字型

（1）方法1：parseInt()

var age = prompt('请输入您的年龄');
console.log(parseInt(age));
console.log(parseInt('3.14'));   //3 取整

（1）方法2：parseFloat()

console.log(parseFloat('3.14'));

（1）方法3：Number()强制转换函数

var str = '123';
console.log(Number(str));
console.log(Number('12'));

（1）方法4：隐式转换（-、*、/）

console.log('12' - 0);
console.log('123' - '120');

2.1.7 数据类型转换-转换为布尔型

转换函数：Boolean()函数

注意：代表空、否定的值会被转换为false，如''、0、NaN、null、undefined；其余值都会被转换为true

console.log(Boolean(''));
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log('------------------------------');
console.log(Boolean('123'));
console.log(Boolean('你好吗'));
console.log(Boolean('我很好'));

2.2 常量和变量

2.2.1 常量

常量是指在程序运行过程中保持不变的数据，如123、“hello”、true、false等，这些都是不可以改变的，因此在实际使用场景中很少用到常量。

2.2.2 变量

变量是指程序中一个已经命名的存储单元，主要作用是为数据操作提供存储信息的容器。相比于常量而言，变量的值可能会随着程序的执行而改变，其基本特征为：变量名+变量值。

变量使用时要明确变量的命名、变量的声明、变量的赋值以及变量的类型。

（1）变量的命名规则：

必须以字母或下划线开头，其他字符可以是数字、字母或下划线
变量名不能包含空格或加号、减号等符号
JavaScript的变量是严格区分大小写的
不能使用JavaScript的关键字

（2）变量的声明：使用var关键字声明一个变量

var age;

（3）变量的赋值：

变量的赋值有两种，可以在声明变量的同时使用等号对变量进行初始化赋值，也可以在声明变量后使用等号再对变量进行赋值。

<script>
    // 声明变量后再赋值
    var age = 18;
    age = 18;

    // 声明变量的同时直接赋值
    var age = 18;
</script>

（4）变量的类型：数值型、字符串型、布尔型等，因为JavaScript是一种弱类型的程序语言，因此可以把任意类型的数据赋值给变量。

2.3 运算符

运算符也被称为操作符，它是完成一系列操作的符号。

2.3.1 算术运算符

算术运算符用于在程序中进行加、减、乘、除等运算。

运算符	描述
+	加运算符
-	减运算符
*	乘运算符
/	除运算符
%	取余运算符
++	自增运算符
--	自减运算符

自增运算符有两种情况：

（1）i++：在使用i之后，使i的值加1

（2）++i：在使用i之前，使i的值加1

自减运算符有两种情况：

（1）i--：在使用i之后，使i的值减1

（2）--i：在使用i之前，使i的值减1

在使用“/”运算符进行除法运算时：

（1）被除数不是0，除数是0：结果为Infinity

（2）被除数和除数都是0：结果为NaN

2.3.2 字符串运算符

字符串运算符是用于两个字符串型数据之间的运算符，它的作用是将两个字符串连接起来。

运算符	描述
+	连接两个字符串
+=	连接两个字符串，并将结果赋给第一个字符串

2.3.3 比较运算符

比较运算符用来比较两个值是否相等，根据对应的比较运算符来返回true或者false。

运算符	描述
==	相等运算比较，只比较大小，不比较数据类型，若两个比较的对象数据类型不一致，则会自动进行类型转换，将其转换为相同的类型，再进行比较
!=	不相等运算比较，如果不相等返回true，否则返回false，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
===	全等运算比较，若比较对象的数据类型不一致，直接返回false，并不会做自动类型转换
!==	不全等运算比较，若比较对象的数据类型不一致，直接返回true，并不会做自动类型转换

2.3.4 赋值运算符

赋值运算符用于给变量赋值，以下是比较基础的赋值运算符，这里以 x=8，y=2来举例

运算符	描述
=	x = y，将y的值赋给X，即 x = 2
+=	x += y，将 x + y 的值赋给 x，即 x = 10
-=	x -= y，将 x - y 的值赋给 x，即 x = 6
*=	x = y，将 x y 的值赋给 x，即 x = 16
/=	x /= y，将 x / y 的值赋给 x，即 x = 4
%=	x %= y，将 x % y 的值赋给 x，即 x = 0

2.3.5 逻辑运算符

逻辑运算符用于对一个或多个布尔值进行逻辑运算，逻辑运算符有：&&（与）、||（或）、!（非）。

运算符	描述
与	当a与b都为真时，结果为真，否则为假
或	当a为真或者b为真时，结果为真，否则为假
非	当a为假时，结果为真，否则为假

2.3.6 条件运算符

条件运算符是JavaScript支持的一种特殊的三目运算符

语法格式：

表达式？结果1：结果2

解析：如果表达式的值为true，则整个表达式的结果为结果1，否则为结果2

2.3.7 其他运算符

（1）逗号运算符：将多个表达式排在一起，整个表达式的值为最后一个表达式的值

示例：

var a,b,c,d;
a = (a = 3, c = 4, d = 6);
console.log(a);    //a的值为6

（2）typeof运算符：用于判断操作数的数据类型，它可以返回一个字符串，该字符串说明了操作数是什么数据类型。

语法格式： typeof 操作数

不同的数据类型使用typeof运算符的返回值如表2.8所示：

数据类型	返回值
数值	number
字符串	string
布尔值	boolean
undefined	undefined
null	object
对象	object
函数	function

（3）new运算符：在JavaScript中有很多内置对象，如字符串对象、日期对象和数值对象等，通过new运算符可以用来创建一个新的内置对象实例。

语法格式：

对象实例名称 = new 对象类型（参数）

对象实例名称 = new 对象类型

2.3.8 运算符优先级

优先级比较高的运算符将先于优先级较低的运算符进行运算，下表从上往下优先级由高到低排列。

运算符	顺序
小括号	()
一元运算符	++ -- !
算数运算符	先 * / % 后 + -
关系运算符	> >= < <=
相等运算符	== != === !==
逻辑运算符	先与后或
赋值运算符	=
逗号运算符	,

三、流程控制

3.1 条件判断语句

条件判断语句，即对语句中不同条件的值进行判断，进而根据判断结果执行不同的操作。

判断语句主要包括两类：if语句、switch多分支语句

3.1.1 简单if语句

语法格式如下：

if(expression) {
    statement1;
}

参数说明：

（1）expression：必选项，用于指定条件表达式，可以使用逻辑运算符

（2）statement1：待执行的语句序列，当expression的值为true时，执行该语句块

3.1.2 if...else语句

语法格式如下：

if(expression) {
    statement1;
}else {
    statement2;
}

参数说明：

在if语句的标准形式中，首先对expression的值进行判断，如果它的值是true，则执行statement1语句块中的内容；否则执行statement2语句块中的内容。

3.1.3 if...else if语句

语法格式如下：

if(expression1) {
    statement1;
}else if(expression2) {
    statement2;
}else{
    statement3;
}

参数说明：

首先对expression1的值进行判断，如果它的值是true，则执行statement1语句块中的内容，如果它的值是false，则对expression2的值进行判断，如果值是true，则执行statement2语句块中的内容，否则执行statemen3语句块中的内容。

3.1.4 if语句的嵌套

语法格式：

if (expression) {
    if (condition) {
        // 函数体
    } else {
        // 函数体
    }
} else {
    if (condition) {
        // 函数体
    } else {
        // 函数体
    }
}

3.1.5 switch语句

switch语句是典型的多路分支语句，其作用与嵌套if语句基本相同，switch语句与if语句更具有可读性，而且允许在找不到匹配条件的情况下执行默认的一组语句。

语法格式：

switch (expression) {
    case value1:
        // 函数体
        break;
    case value2:
        // 函数体
        break;
    default:
        // 函数体
        break;
}

参数说明：

（1）expression：任意的表达式或者变量。

（2）value：任意的常数表达式，当expression的值与某个value的值相等时，就执行此case后的函数体语句；若expression的值与所有的value的值都不相等，则执行default后面的函数体语句。

（3）break：用于结束switch语句，使JavaScript只执行匹配的分支，如果没有break语句，则该switch语句的所有分支都将被执行一遍，switch语句也就失去了使用的意义。

3.2 循环控制语句

循环语句，就是在满足条件的情况下可反复的执行某一个操作，循环控制语句主要包括while语句、do...while语句和for语句。

3.2.1 while语句

while循环语句也被称为前测试循环语句，即利用一个先期条件来控制是否要重复执行循环体。

语法格式：

while (expression) {
    // statement
}

参数说明：

（1）expression：一个包含比较运算符的条件表达式，用于指定循环条件

（2）statement：用来指定循环体，在循环条件的结果为true时，重复执行该循环体。

while循环语句之所以被称为前测试循环，是因为它要先判断循环条件是否成立，然后进行重复执行的操作。

3.2.2 do...while语句

do...while循环语句也被称为后测试循环语句，它也是利用一个条件来控制是否要重复执行循环体，与while循环所不同的是，do...while先执行一次循环体，然后判断条件，确定是否继续执行。

语法格式：

do {
    // statement
} while (expression);

参数说明：

（1）statement：用来指定循环体，循环开始时，首先执行一次循环体，然后在循环条件的结果为true时，重复执行循环体。

（2）expression：一个包含比较运算符的条件表达式，用来指定循环条件。

do...while循环语句的执行过程:先执行一次循环体，然后判断条件表达式，如果条件表达式的值为true，则继续执行循环体；否则退出循环。（即do...while循环语句中的循环体至少要被执行一次）

注意：do...while语句结尾处有一个分号“;”

3.2.3 for语句

for循环语句也被称为计次循环语句，一般用于循环次数已知的情况下，在JavaScript中应用比较广泛。

语法格式：

for(initialize;test;increment) {
    statement
}

参数说明：

（1）initialize：初始化语句，用来对循环变量进行初始化赋值。

（2）test：循环条件，一个包含比较运算符的表达式，用来限定循环变量的边限，如果循环变量超过了该边限，则停止该循环语句的执行。

（3）increment：用来指定循环变量的步幅。

（4）statement：用来指定循环体，在循环条件的结果为true时，重复执行该循环体。

3.2.4 循环语句的嵌套

在一个循环语句的循环体中也可以包含其他的循环语句，这被称为循环语句的嵌套。

如果循环语句A的循环体中包含循环语句B，而循环语句B中不包含其他循环语句，那么就把循环语句A叫作外层循环，而把循环语句B叫作内层循环。

3.3 跳转语句

3.3.1 continue语句

continue语句和break语句类似，不同之处在于，break语句用于退出循环，而continue语句用于终止本次循环并开始下一次循环。

当使用contine语句终止本次循环后，如果循环条件的结果为false，则退出循环，否则继续执行下一次循环。

语法格式：

continue;

3.3.2 break语句

break语句用于退出包含在最内层的循环或者退出一个switch语句。

语法格式：

break;

四、函数

函数实际上是可以被作为一个逻辑单元对待的一组JavaScript代码，使用函数可以使代码更为简洁，提高重用性。

4.1 函数的定义

语法格式：

function name(params1,params2) {
    statements;
    return expression;
}

参数解析：

（1）name：必选项，用于指定函数名，在同一个页面中，函数名必须是唯一的，并且区分大小写

（2）params：可选项，用于指定参数列表，当使用多个参数时，参数间使用逗号分隔，一个函数最多可以有255个参数

（3）statements：必选项，用于指定函数体，即实现函数功能的语句

（4）expression：可选项，用于返回函数值，expression为任意的表达式、变量或常量

4.2 函数的调用

函数被定义后，并不会自动执行。要执行一个函数，需要在特定的位置处调用该函数，调用函数需要创建调用语句，调用语句包含函数名称、参数具体值等。

4.2.1 函数的简单调用

语法格式：

name(params1,params2);

参数解析：

（1）name：函数的名称

（2）params：参数名称

注意：函数的参数分为形式参数和实际参数。

形式参数为函数赋予的参数，代表函数的位置和类型，系统并不为形参分配相应的存储空间；调用函数时传递给函数的参数称为实际参数，实参通常在调用函数之前就已经被分配了内存，并且赋予了实际的数据。

4.2.2 在事件响应中调用函数

当用户单击某个按钮或者选中某个复选框时，将触发事件，编写程序时对事件作出相应的行为被称为相应事件。

示例：

<input type="button" value="问候" onclick="test();">

4.2.3 通过超链接调用函数

函数除了可以在响应事件中被调用以外，还可以在超链接中被调用

语法格式：

javascript:test();

示例：

<a href="javascript:test();">test函数</a>

4.3 函数的参数

在函数名后面的圆括号内可以指定一个或多个参数，指定参数的作用在于，当调用函数时，可以为被调用的函数传递一个或者多个值。

把定义函数时指定的参数称为形式参数，简称形参；把调用函数时实际传递的值称为实际参数，简称实参。

示例：

<script>
    function show(bookname, author) {
        alert('图书名称：' + bookname + '\n图书作者：' + author);
    }
    show('活着' , '余华');
</script>

4.4 函数的返回值

有时需要在函数中返回一个值，以便于被其他函数使用。

语法格式：

return result;

示例：

<script>
    function price(unitPrice, number) {
        var totalPrice = unitPrice * number;
        return totalPrice;
    }
    var phone = price(5000, 2);
    var computer = price(4000, 10);
    var total = phone + computer;
    alert('购物车的商品总价是' + total + '元');
</script>

4.5 嵌套函数

在JavaScript中允许使用嵌套函数，嵌套函数就是在一个函数的函数体中使用了其他的函数，嵌套函数的使用包括函数的嵌套定义和函数的嵌套调用。

4.5.1 函数的嵌套定义

函数的嵌套定义就是在函数内部再定义其他的函数

语法格式：

<script>
    function outFun() {
        function inFun(x, y) {
            alert(x + y);
        }
        inFun(1, 5);
    }
    outFun()
</script>

代码解析：先定义了一个外部函数outFun()，然后在该函数的内部又嵌套定义了一个函数inFun()，inFun()函数的作用是输出两个参数的和，接着在外部函数中调用了内部函数并传递参数，最后调用外部函数。

4.5.2 函数的嵌套调用

在JavaScript中，允许在一个函数的函数体中对另一个函数进行调用，这就是函数的嵌套调用。

语法格式：

function a() {
    alert('你好呀');
}
function b() {
    a();
}
b();

4.6 递归函数

所谓递归函数就是函数在自身的函数体内调用自身，使用递归函数时一定要注意，处理不当将会使程序进入死循环。

语法格式：

function functionName(paramenter1) {
    functionName(paramenter2);
}

示例：

<script>
	// 求10！
    function f(num) {
        if(num <=1) {
            return 1;
        }else{
            return f(num-1)*num;
        }
    }
    alert('10!的结果为'+f(10));
</script>

4.7 JavaScript中的内置函数

在使用JavaScript语言时，除了可以自定义函数外，还可以使用JavaScript的内置函数，这些内置函数是由JavaScript语言自身提供的函数，常见内置函数：

函数	描述
parseInt()	将字符型转换为整型
parseFloat()	将字符型转换为浮点型
isNaN()	判断一个数值是否为NaN
isFinite()	判断一个数值是否有限
eval()	求字符串中表达式的值
encodeURI()	将URI字符串进行编码
decodeURI()	对已编码的URI字符串进行解码

4.7.1 数值处理函数

（1）parseInt()函数：将首位为数字的字符串转换成数字，如果字符串不是以数字开头，那么将返回NaN.

格式如下：

parseInt(string,[n])

参数解析：

@ string：需要转换为整型的字符串

@ n：用于指出字符串中的数据是几进制的数据，该参数不是必选项

示例：

<script>
    var str1 = '123abc';
    var str2 = 'abc123';
    document.write(parseInt(str1)+ '<br>');     //123
    document.write(parseInt(str1,8)+ '<br>');   //83
    document.write(parseInt(str2)+ '<br>');     //NaN
</script>

（2）parseFloat()函数：主要将首位为数字的字符串转换为浮点型数字，如果字符串不是以数字开头，那么将会返回NaN。

语法格式：

parseFloat(string)

参数说明-string：需要转换为浮点型的字符串

示例：

<script>
    var str1 = '123.456abc';
    var str2 = 'abc123.456';
    document.write(parseFloat(str1)+ '<br>');    //123.456
    document.write(parseFloat(str2)+ '<br>');    //NaN
</script>

（3）isNaN()函数：主要用于检验某个值是否为NaN。

语法格式：

isNaN(num)

参数说明-num：需要验证的数字，如果参数num为NaN，则函数返回值为true，如果参数num不是NaN，则函数返回值为false。

示例：

<script>
    var num1 = 123;
    var num2 = '123abc';
    document.write(isNaN(num1)+ '<br>');    //false
    document.write(isNaN(num2));            //true
</script>

（4）isFinite()函数：主要用于检验其参数是否有限

语法格式：

isFinite(num)

参数说明-num：需要验证的数字，如果参数num是有限数字（或可转换为有限数字），则函数返回值为rue，如果参数num是NaN或者无穷大，则函数返回值为false。

示例：

<script>
    document.write(isFinite(123)+'<br>');         //true
    document.write(isFinite('123abc')+'<br>');    //false
    document.write(isFinite(1/0));                //false
</script>

4.7.2 字符串处理函数

（1）eval()函数：计算字符串表达式的值，并执行其中的JavaScript代码。

语法格式：

eval(string)
参数说明：
string：需要计算的字符串，其中含有要计算的表达式或要执行的语句

示例：

<script>
    document.write(eval('3+6'));           //9
    document.write('<br>')
    eval('x=5;y=6;document.write(x*y)');  //30
</script>

（2）encodeURI()函数:用于将URI字符串进行编码。

语法格式：

encodeURI(url)
参数说明：
url：需要编码的URI字符串

示例：

<script>
    var URI = 'http://127.0.0.1/save.html?name=测试';
    document.write(encodeURI(URI));     //http://127.0.0.1/save.html?name=%E6%B5%8B%E8%AF%95
</script>

注意：URI和URL都可以表示网络资源地址，但URI比URL表示范围更加广泛，在一般情况下，URI和URL可以是等同的。

（3）decodeURI()函数：用于对已编码的URI字符串进行解码。

语法格式:

decodeURI(url)
参数说明：
url：需要解码的URI字符串

示例：

<script>
    var URI = encodeURI('http://127.0.0.1/save.html?name=测试');
    document.write(decodeURI(URI));   //http://127.0.0.1/save.html?name=测试
</script>

注意：decodeURI()函数可以将使用encodeURI()转码的网络资源地址转换为字符串并返回，也就是说decodeURI()函数是encodeURI()函数的逆向操作。

4.8 定义匿名函数

除了使用基本的function语句之外，还可使用另外两种方式来定义函数，即在表达式中定义函数和使用Function()构造函数来定义函数。

4.8.1 在表达式中定义函数

在表达式中直接定义函数，语法与function语句非常相似。

语法格式：

var 变量名 = function(参数1，参数2，......) {
    函数体
};

函数说明：上述定义函数的方法不需要指定函数名，把定义的函数赋给一个变量，后面的程序就可以通过这个变量来调用这个函数。

示例：

<script>
    var sum = function(x,y) {
        return x+y;
    };
    alert('10+20='+sum(10,20));    //10+20=30
</script>

4.8.2 使用Function()构造函数

使用Function()构造函数来定义函数，这种方式可以动态的创建函数。

语法格式：

var 变量名 = new Function('参数1','参数2',......'函数体');

注意：

（1）使用Function()构造函数可以接收一个或者多个参数作为函数的参数，也可以不接收任何参数，Function()构造函数的最后一个参数为函数体内容。

（2）Function()构造函数中的所有参数和函数体都必须是字符串类型，因此要用引号引起来。

示例：

<script>
    var sum = new Function('x','y','alert(x+y)');
    sum(10,20);     //30
</script>

五、JavaScript对象与数组

对象是JavaScript中的基本数据类型之一，是一种复合的数据类型，它将多种数据类型集中在一个对象单元中，并允许通过对象来存取这些数据的值。

5.1 JavaScript内部对象

JavaScript中的内部对象按照使用方式可分为动态对象和静态对象，当引用动态对象的属性和方法时，首先必须使用new关键字创建一个对象实例，然后才能使用“对象实例名.成员”的方式来访问其属性和方法；当引用静态对象的属性和方法时，不需要使用new关键字创建对象实例，直接使用“对象名.成员”的方式来访问其属性和方法。

5.1.1 创建对象

Object对象提供了对象的最基本功能，这些功能构成了其他对象的基础，同时还提供了创建自定义对象的简单方式，不需要再定义构造函数。

创建对象有两种方法：

语法格式：

方法1：
<script>
    var person = new Object();
    person.name = "小杨同学";
    person.age = 18;
    console.log(person);
</script>

方法2：
<script>
    var person = {
        name:'小杨同学',
        age:18
        };
    console.log(person);
</script>

5.1.2 访问属性

访问属性有两种方式：

方法1：
对象.属性名
方法2：
对象[‘属性名’]

示例：

<script>
    var person = new Object();
    person.name = "小杨同学";
    person.age = 18;
	
    // 访问属性的两种方法：
    document.write(person.name);
    document.write(person['age']);
</script>

5.1.3 删除属性

删除对象的属性可以使用delete关键字，语法格式如下：

delete 对象.属性名

示例：

<script>
    var person = {
        name:'小杨同学',
        age:18
    };
    console.log(person);
    // 删除name属性
    delete person.name;
    console.log(person);
</script>

5.2 对象访问语句

5.2.1 for...in循环语句

for...in循环语句和for循环语句十分相似，用来遍历对象中的所有属性，每次都将属性名作为字符串，保存到变量中。

语法格式：

for (var 变量 in 对象) {
    循环语句块
}

示例：

<script>
    var person = {
        name: "小杨同学",
        age: 18
    };

    for (var personKey in person) {
        var personVal = person[personKey];
        console.log(personKey + ":" + personVal);
    }
</script>

5.2.2 with语句

with语句用于需要多次访问某个对象的属性或者方法的情况下，可避免重复使用指定对象的引用。

语法格式：

with(对象){
    语句块
}

示例：

<script>
    function Student(name, sex, age) {
        this.name = name;
        this.sex = sex;
        this.age = age;
    }
    var student = new Student('小杨同学', '女', '18');
    with (student) {
        document.write('姓名：' + name + '<br>性别：' + sex + '<br>年龄：' + age);
    }
</script>

注意：在一段代码中，如果多次使用某个对象的多个属性或方法，那么只要在with关键字后的括号()中写出该对象实例的名称，就可以在随后的大括号{}中的程序语句中直接引用该对象的属性名或方法名，不必再在每个属性名或方法名前都加上对象实例名和“.”。

5.3 JavaScript中的数组

5.3.1 定义数组

数组是JavaScript中唯一用来存储和操作有序数据集的数据结构。

定义数组的方法：

（1）定义空数组：使用不带参数的构造函数可以定义一个空数组

语法格式：
arrayObject = new Array()
示例：
<script>
    var arr = new Array();
    arr[0] = '张三';
    arr[1] = '李四';
    document.write(arr);
</script>

（2）指定数组长度：在定义数组的同时可以指定数组元素的个数

语法格式：
arrayObject = new Array(size)
示例：
<script>
    var arr = new Array(2);
    arr[0] = 1;
    arr[1] = 2;
    document.write(arr);
</script>

（3）指定数组元素：在定义数组的同时可以直接给出数组元素的值

语法格式：
arrayObject = new Array(element1,element2,element3...)
示例：
<script>
    var arr = new Array(12,'张三',true);
    document.write(arr);
</script>

（4）直接定义数组：不需要使用构造函数，直接将数组元素放在一个中括号中，元素与元素之间用逗号分割开

语法格式：
arrayObject = [element1,element2,element3...]
示例：
<script>
    var arr = [12,'张三',true];
    document.write(arr);
</script>

5.3.2 数组元素的输入和输出

（1）数组元素的输入

在定义数组对象时直接输入数组元素
利用数组元素的元素下标向其输入数组元素
利用for语句向数组对象中输入数组元素

（2）数组元素的输出

用下标获取指定元素值
用for语句获取数组中的元素值
用数组对象名输出所有元素值

5.3.3 数组对象的属性

（1）length属性：用于返回数组的长度

语法格式：array.length

（2）prototype属性：返回创建数组对象的原型函数，与Object对象的prototype属性相同

5.3.4 数组对象的方法

数组对象中的方法如下表：

方法	说明
concat()	连接两个或者更多的数组，并返回结果
pop()	删除并返回数组中的最后一个元素
push()	向数组的尾部添加一个或多个元素，并返回新的长度
shift()	删除并返回数组中的第一个元素
splice()	删除元素，并向数组中添加新元素
unshift()	向数组的头部添加一个或多个元素，并返回新的长度
reverse()	颠倒数组中元素的顺序
sort()	对数组中的元素进行排序
slice()	从某个已有的数组中返回选定的元素
toSource()	代表对象的源代码
toString()	把数组转换为字符串，并返回结果
toLocaleString()	把数组转换为本地字符串，并返回结果
join()	把数组中的所有元素放入一个字符串，元素间通过指定的分隔符进行分割
valueOf()	返回数组对象的原始值

5.3.5 数组的添加和删除

数组的添加和删除可以使用concat()、shift()、pop()、push()、unshift()方法实现。

（1）concat()方法：用于将其他数组连接到当前数组的尾端。

语法格式：
arrayObject.concat(arrayX,arrayY...)
解析：
1、arrayObject为数组名称
2、arrayX,arrayY：该参数可以是具体的值，也可以是数组对象

（2）shift()方法：用于把数组中的第一个元素从数组中删除，并返回删除元素的值。

语法格式：
arrayObject.shift()
解析：
1、arrayObject为数组名称
2、返回值：在数组中删除的第一个元素的值

（3）pop()方法：用于删除并返回数组中的最后一个元素。

语法格式：
arrayObject.pop()
解析：
1、arrayObject为数组名称
2、返回值：在数组中删除的最后一个元素的值

（4）push()方法：用于向数组的末尾添加一个或多个元素，并返回添加后的数组长度。

语法格式：
arrayObject.push(newelement1,newelement2...newelementX)
解析：
1、arrayObject为数组名称
2、newelement1：表示要添加到数组中的第一个元素
3、newelement2：表示要添加到数组中的第二个元素
4、newelementX：表示要添加到数组中的第X个元素
5、返回值：把指定的值添加到数组中后的新长度

（5）unshift()方法：向数组的头部添加一个或多个元素，并返回新的长度。

语法格式：
arrayObject.unshift(newelement1,newelement2...newelementX)
解析：
1、arrayObject为数组名称
2、newelement1：表示要添加到数组中的第一个元素
3、newelement2：表示要添加到数组中的第二个元素
4、newelementX：表示要添加到数组中的第X个元素
5、返回值：把指定的值添加到数组中后的新长度

5.3.6 设置数组的排列顺序

通过reverse()和sort()方法可以将数组中的元素按照指定的顺序进行排列

（1）reverse()方法：用于颠倒数组中元素的顺序

语法格式：
arrayObject.reverse()
解析：
1、arrayObject为数组名称
2、reverse()方法会改变原来的数组，但不创建新数组

（2）sort()方法：用于对数组的元素进行排序

语法格式：
arrayObject.sort(sortby)

解析：
1、arrayObject为数组名称
2、sortby：规定排序的顺序，必须是函数

注意：
如果调用sort()方法时没有使用参数，将按字母顺序对数组中的元素进行排序，也就是按照字符的编码顺序排序。

5.3.7 获取数组中的某段数组元素

获取数组中的某段数组元素主要用slice()方法实现，slice()方法可以从已有的数组中返回选定的元素。

语法格式：
arrayObject.slice(start,end)

解析：
1、start：必选项，规定从何处开始选取，如果是负数，说明从数组尾部开始选取（-1指最后一个元素，-2指倒数第二个元素）
2、end：可选项，规定从何处结束选取（不包含当前下标），该参数是数组片段结束处的数组下标，如果没有指定该参数，那么截取的数组包含从start位置开始到数组结束的所有元素（如果这个参数是负数，那么将从数组尾部开始算起）
3、返回值：返回截取后的数组元素（该方法返回的数据中不包括end索引所对应的数据）

5.3.8 将数组转换成字符串

将数组转换成字符串主要通过toString()、toLocaleString()和join()方法实现。

（1）toString()方法：可以把数组转换成字符串，并返回结果。

语法格式：arrayObject.toString()
解析：
1、arrayObject：必选项，表示数组名称
2、返回值：以字符串显示arrayObject，返回值与没有参数的join()方法返回的字符串相同
注意：转换成字符串后，数组中的各个元素之间以逗号进行分隔

（2）toLocaleString()方法：用于将数组转换成本地字符串

语法格式：arrayObject.toLocaleString()
解析：
1、arrayObject：必选项，表示数组名称
2、返回值：本地字符串

（3）join()方法：以指定的分隔符将数组中的所有元素放入一个字符串中

语法格式：arrayObject.join(separator)
解析：
1、separator：可选项，表示要使用的分隔符，如果省略该参数，则使用逗号作为分隔符
2、返回值：返回一个字符串，该字符串是把arrayObject的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入separator字符串而引起的

六、字符串与数值处理对象

6.1 String对象

6.1.1 String对象的创建

String对象是动态对象，使用构造函数可以显式创建字符串对象，String对象用于操作和处理文本串，通过它可以获取字符串的长度、提取子字符串，以及将字符串转换为大写或小写字符。

语法格式：

var 对象名 = new String(StringText)
参数说明：
StringText：可选项，表示字符串文本

示例：

<script>
    var str = new String('hello world');
    document.write(str);
</script>

6.1.2 String对象的属性

在String对象中有3个属性，分别是length、constructor、prototype。

（1）length属性：用于获得当前字符串的长度

语法格式：

对象名.length

示例：

<script>
    // length属性
    var str = new String('qwertyui');
    document.write(str.length);
</script>

（2）constructor属性：用于引用当前对象的构造函数

语法格式：

对象名.constructor

示例：

<script>
    // constructor属性
    var str = new String('hello world');
    if (str.constructor == String) {
        document.write('这是一个字符串对象');
    }
</script>

（3）prototype属性：可以为字符串对象添加自定义的属性或方法

语法格式：

String.prototype.name = value
参数说明：
（1）name：要添加的属性名或者方法名
（2）value：添加属性的值或执行方法的函数

示例：

<script>
    // prototype属性
    String.prototype.getLength = function() {
        alert(this.length);
    }
    var str = new String('asdfghjkl');
    str.getLength();
</script>

6.1.3 String对象的方法

6.1.3.1 查找字符串

（1）charAt()字符串：可以返回字符串中指定位置的字符

语法格式：

对象名.charAt(index)

参数说明
index：必选参数，表示字符串中某个位置的数字，即字符在字符串中的下标

示例：

<script>
    var str = '你好，世界！';
    document.write(str.charAt(3));
</script>

注意：字符串中第一个字符的下标是0，因此index参数的取值范围为【0~string.length-1】，若参数index超出了这个范围，则返回一个空字符串。

（2）indexOf()字符串：可以返回某个子字符串在字符串中首次出现的位置

语法格式：

对象名.indexOf(substring,startindex)

参数说明：
substring：必选参数，要在字符串中查找的子字符串
startindex：可选参数，用于指定在字符串中开始查找的位置，取值范围为0~string.length-1，若省略该参数，则从字符串的首字母开始查找。

示例：

<script>
    var str = '你好，JavaScript';
    document.write(str.indexOf('a') + '<br>');       //4
    document.write(str.indexOf('a', 5) + '<br>');     //6
    document.write(str.indexOf('java') + '<br>');    //-1
    document.write(str.indexOf('Java') + '<br>');    //3
</script>

（3）lastIndexOf()方法：可以返回某个子字符串在字符中最后出现的位置

语法格式：

对象名.lastIndexOf(substring,startindex)

参数说明：
substring：必选参数，要在字符串中查找的子字符串
startindex：可选参数，用于指定在字符串中开始查找的位置，在这个位置从后向前查找，取值范围是0~string.length-1，如果省略该参数，则从字符串的最后一个字符开始查找，如果要查找的子字符串没有出现，则返回-1。

示例：

<script>
    var str = '你好，JavaScript';
    document.write(str.lastIndexOf('a') + '<br>');       //6
    document.write(str.lastIndexOf('a', 5) + '<br>');     //4
    document.write(str.lastIndexOf('java') + '<br>');    //-1
    document.write(str.lastIndexOf('Java') + '<br>');    //3
</script>

6.1.3.2 截取字符串

（1）slice()方法：可以提取字符串的片段，并在新的字符串中返回被提取的部分

语法格式：

对象名.slice(startindex,endindex)
参数说明：
startindex：必选参数，用于指定要提取的字符串片段的开始位置，该参数可以是负数（即-1指字符串的最后一个字符，-2指倒数第二个字符）。
endindex：可选参数，用于指定要提取的字符串片段的结束位置，若省略该参数，则结束位置为字符串最后一个字符，若该参数是负数，则从字符串的尾部开始算起。

示例：

<script>
    var str = '你好，JavaScript';
    document.write(str.slice(2)+'<br>');      //，JavaScript
    document.write(str.slice(2,6)+'<br>');    //，Jav
    document.write(str.slice(0,-6)+'<br>');   //你好，Java
    document.write(str.slice(-2)+'<br>');     //pt
</script>

（2）substr()方法：可以从字符串的指定位置开始提取指定长度的子字符串

语法格式：

对象名.substr(startindex,length)
参数说明：
startindex：必选参数，用于指定要提取的字符串片段的开始位置，该参数可以是负数，如果是负数，则从字符串的尾部开始算起。
length：可选参数，用于指定提取的子字符串的长度，如果省略该参数，则表示结束位置为字符串的最后一个字符。

示例：

<script>
    var str = '你好，JavaScript';
    document.write(str.substr(2)+'<br>');      //，JavaScript
    document.write(str.substr(2,5)+'<br>');    //，Java
</script>

（3）substring()方法：用于提取字符串中两个指定的索引号之间的字符。

语法格式：

对象名.substring(startindex,endindex)
参数说明：
startindex：必选参数，一个非负整数，指定要提取的字符串片段的开始位置；
endindex：可选项，一个非负整数，指定要提取的字符串片段的结束位置，如果省略该参数，则表示结束位置为字符串的最后一个字符。

示例：

<script>
    var str = '你好，JavaScript';
    document.write(str.substring(3) + '<br>');       //JavaScript
    document.write(str.substring(3, 7) + '<br>');    //Java
    document.write(str.substring(5, 3));             //Ja
</script>

注意：

1、使用substring()方法提取的字符串片段中，不包括endindex下标所对应的字符；

2、若startindex和endindex相等，那么该方法返回的是个空字符串；若startindex大于endindex，那么JS会自动交换这两个参数值。

6.1.3.3 大小写转换

（1）toLowerCase()方法：用于把字符串转化为小写

（2）toUpperCase()方法：用于把字符串转换为大写

示例：

<script>
    var str = '你好，JavaScript';
    // 转换为小写
    document.write(str.toLowerCase());   //你好，javascript
    // 转换为大写
    document.write(str.toUpperCase());   //你好，JAVASCRIPT
</script>

6.1.3.4 连接和拆分

（1）concat()方法：用于连接两个或多个字符串

语法格式：

对象名.concat(string1,string2,...)
参数说明：
string：必选参数，表示将被连接的字符串（一个或者多个）

示例：

<script>
    var str1 = '你好';
    var str2 = 'JavaScript';
    document.write(str1.concat(str2));
</script>

（2）split()方法：用于把一个字符串分割成字符串数组

语法格式：

对象名.split(separator,limit)
参数说明：
separator：必选参数，用于指定分割符。该参数可以是字符串，也可以是正则表达式，如果把空字符串（''）作为分割符，那么字符串对象中的每个字符都会被分割；
limit：可选参数，用于指定返回数组的最大长度。

示例：

<script>
    var str = 'I like JavaScript';
    document.write(str.split(' ') + '<br>');
    document.write(str.split('') + '<br>');
    document.write(str.split(' ',2) + '<br>');
</script>

6.1.3.5 格式化字符串

方法	说明
anchor()	创建HTML锚
big()	使用大号字体显示字符串
small()	使用小号字体显示字符串
fontsize()	使用指定的字体大小显示字符串
bold()	使用粗体显示字符串
italics()	使用斜体显示字符串
link()	将字符串显示为超链接
strike()	使用删除线来显示字符串
blink()	显示闪动字符串，此方法不支持IE浏览器
fixed()	以打字机文本显示字符串
fontcolor()	使用指定的颜色显示字符串
sub()	把字符串显示为下标
sup()	把字符串显示为下标

6.2 数值处理对象

6.2.1 Math对象

（1）Math对象的属性

属性	描述
E	欧拉常量
LN2	2的自然对数
LN10	10的自然对数
SORT2	2的平方根
LOG2E	以2为底的e的对数
LOG10E	以10为底的e的对数
PI	圆周率常数π
SORT1-2	0.5的平方根

（2）Math对象的方法

方法	描述
abs(x)	返回x的绝对值
acos(x)	返回x弧度的反余弦值
asin(x)	返回x弧度的反正弦值
atan(x)	返回x弧度的反正切值
atan2(x,y)	返回从x轴到点(x,y)的角度，其值为-PI~PI
ceil(x)	返回大于或等于x的最小整数
cos(x)	返回x的余弦值
exp(x)	返回e的x乘方
floor(x)	返回小于或等于x的最大整数
log(x)	返回x的自然对数
max(x,y)	返回x和y中的最大数
min(x,y)	返回x和y中的最小数
pow(x,y)	返回x的y次方
random()	返回0~1的随机数
round(x)	返回最接近x的整数，即四舍五入函数
sin(x)	返回x的正弦值
sqrt(x)	返回x的平方根
tan(x)	返回x的正切值

6.2.2 Number对象

由于JS使用简单数值完成日常数值的运算，因此Number对象很少被使用

使用情况：需要访问某些常量值，如：数字的最大最小能值、正无穷大、负无穷大。

（1）创建Number对象

语法格式：

num = new Number(value)
参数说明：
num：要赋值为Number对象的变量名
value：可选项，表示新对象的数值，若忽略，则返回值为0

（2）Number对象的属性

属性1：MAX_VALUE：用于返回Number对象的最大可能值

属性2：MIN_VALUE：用于返回Number对象的最小可能值

属性3：NEGATIVE_INFINITY：用于返回Number对象负无穷大的值

属性4：POSITIVE_INFINITY：用于返回Number对象正无穷大的值

（3）Number对象的方法

 1、toString()方法：可以把Number对象转换为一个字符串，并返回结果

 2、toLocaleString()方法：可以把Number对象转换为本地格式的字符串

 3、toFixed()方法：可以把Number对象四舍五入为指定小数位数的数字，然后转换为字符串

 4、toExponential()方法：利用指数计数法计算Number对象的值，然后将其转化为字符串

 5、toPrecision()方法：将Number对象转换为字符串，并根据不同的情况选择定点计数法或指数计数法

6.2.3 Boolean对象

Boolean值经常用于条件对结果进行检测，Boolean值可以从Boolean对象中获得相关的属性和方法，也可以通过Boolean对象的相关方法将Boolean值转换为字符串。

（1）创建Boolean对象

语法格式：

bool = new Boolean(boolvalue)
参数说明：
bool：要赋值为Boolean对象的变量名
boolvalue：可选项，表示新对象的初始Boolean值，如果忽略该字段，或者其值为false、0、bull、NaN及空字符串，则初始值为false，否则为true

（2）Boolean对象的属性

属性1：constructor：用于对当前对象的函数进行引用

属性2：prototype：可以为对象添加属性和方法

（3）Boolean对象的方法

方法1：toString()方法：用于将Boolean值转化成字符串

方法2：valueOf()方法：用于返回Boolean对象的原始值

七、正则表达式

7.1 正则表达式基础

正则表达式是一种用于模式匹配和替换的强有力的工具，它由一系列普通字符和特殊字符组成，能明确描述文本字符的文字匹配模式。

正则表达式描述了一种字符串的匹配模式，可以用来检查一个字符串是否含有某子字符串、将匹配的子字符串做替换或者从某个字符串中取出符合某个条件的子字符串等。

7.2 正则表达式语法

7.2.1 创建正则对象

（1）字面量形式创建

var reg = /abcd/;
console.log(reg);
console.log(typeof reg);

（2）内置构造函数创建

var reg2 = new RegExp('abcd');
console.log(reg2);
console.log(typeof reg2);

7.2.2 正则表达式的两个方法

（1）匹配：验证字符串是不是符合正则规则

语法格式：

对象名.test()

示例：
var reg = /abcd/;
console.log(reg.test('sjdnab'));  //false

（2）捕获：从字符串里面获取符合正则规则的那一部分片段

语法格式：

对象名.exec()

示例：
var reg = /abcd/;
var res = reg.exec('aaaabcdddd');   
console.log(res2);      //[0:"abcd"]

7.2.3 基础元字符

元字符	描述
\s	表示一个空格
\S	表示一个非空格
\t	表示一个制表符（tab），一个制表符就是制表符，不是空格
\d	表示一个数字
\D	表示一个非数字
\w	表示一个数字、字母、下划线（三者任其一）
\W	表示一个非数字字母下划线，即数字、字母、下划线以外的任意一个
点（.）	表示非换行的任意字符
斜线（\）	表示转义符

示例：

// 表示字符串中需要有一个非换行的任意字符
var reg3 = /./; 
console.log(reg3.test('asdndj'));       //true

// 表示字符串中需要有一个 点 文本
var reg4 = /\./;
console.log(reg4.test('wfhrssg'));      //false
console.log(reg4.test('wf.hrssg.'));    //true

7.2.4 边界元字符

（1）用“^”匹配目标字符串的开始位置

使用场景：

// 表示字符串需要有一个数字开头
var reg = /^\d/;
console.log(reg.test('ahsgv123'));     //false
console.log(reg.test('3ahsgv'));       //true

（2）用“$”匹配目标字符串的结尾位置

使用场景：

// 表示字符串中需要以一个数字结尾
var reg = /\d$/;
console.log(reg.test('asdfg123'));    //true

示例：

// 表示字符串从开头到结尾只能有一个数字
var reg = /^\d$/;
console.log(reg.test('1b2'));    //false
console.log(reg.test('5'));      //true

7.2.5 限定元字符

限定元字符写在普通元字符或者字母符号的后面，用来修饰前面一个字符的出现次数。

字符	描述
*	表示出现 0~ 多次
+	表示出现 1~ 多次
?	表示出现 0~1 次
{n}	表示出现 n 次
{n,}	表示出现 n ~ 多次
{n,m}	表示出现 n ~ m 次

示例：

// 表示字符串中只能有1~多个数字组成
var reg = /^\d+$/;
console.log(reg.test(''));         //false
console.log(reg.test('1'));        //true

7.2.6 贪婪性和非贪婪性

默认情况下，正则表达式使用最长匹配原则，即贪婪匹配原则。

（1）正则的贪婪性：若给一个符号使用限定符，在捕获的时候，他会尽可能多的去捕获内容

示例：

var reg1 = /\d+/;     
// 在捕获的时候会捕获能捕获到的最大程度，就是 12345678
console.log(reg1.exec('abc12345678sfd'));          //12345678

（2）正则的非贪婪性：若给一个符号使用限定符的时候在后面多加一个“?”，在捕获的时候则尽可能的按照最小值来捕获

示例：

var reg2 = /\d+?/;        
// 在捕获的时候会按照最少的数量来捕获
console.log(reg2.exec('abc12345678sfd'));    //1

7.2.7 正则表达式的特殊字符

特殊字符	描述
()	表示一个整体，可以实现小括号内单独捕获
(?:)	整体匹配但不捕获，只是标志一个整体，但捕获的时候不会单独捕获
或	占位或，表示左边（整体）或者右边（整体）的都行，通常和()连用
[]	表示中括号里面的任意一个就可以，一个[]占一个字符位置
[^]	表示非中括号里面的任意一个就可以，一个[^]占一个字符位置
-	是使用在[]里面的一个符号，表示从哪一个字符 - 哪一个字符（ASCI值是相连的）

特殊组合：

（1）[0-9a-zA-Z_]等价于 \w

（2）[^0-9a-zA-Z_]等价于 \W

（3）[0-9]等价于 \d

（4）[^0-9]等价于 \D

（5）[ ] 等价于 \s

（6）[^ ]等价于 \S

注意：当点（.）出现在 [] 或者 [^]里面的时候，就只表示一个点文本

示例：

// 验证一个字符串，只能由数字字母下划线组成，6到12位，不能以 _ 开头
var reg = /^[a-zA-Z0-9]\w{5,11}$/
console.log(reg.test('abcdef'));           //true
console.log(reg.test('_abcdef'));          //false
console.log(reg.test('abcdef123456'));     //true

7.2.8 预查

正则表达式的预查分为四种情况：正向肯定预查、正向否定预查、负向肯定预查、负向否定预查

（1）正向肯定预查

理解：在捕获一个内容的时候，后面必须跟着是我选择的某一个才可以

格式：(?=)

示例：

// 1、正向肯定预查
var reg = /ES(?=2015|2016)/;
console.log(reg.exec('ES2015'));     //捕获ES
console.log(reg.exec('ES2016'));     //捕获ES
console.log(reg.exec('ES2017'));     //不捕获ES

（2）正向否定预查

理解：在捕获一个内容的时候，后面必须跟着不是我选择的某一个才可以

格式：(?!)

示例：

// 2、正向否定预查
var reg = /ES(?!2015|2016)/;
console.log(reg.exec('ES2015'));      //不捕获ES
console.log(reg.exec('ES2016'));      //不捕获ES
console.log(reg.exec('ES2017'));      //捕获ES

（3）负向肯定预查

理解：在捕获一个内容的时候，前面必须是我选择的某一个才可以

格式：(?<=)

示例：

// 3、负向肯定预查
var reg = /(?<=2015|2016)ES/;
console.log(reg.exec('2015ES'));       //捕获ES
console.log(reg.exec('2016ES'));       //捕获ES
console.log(reg.exec('2017ES'));       //不捕获ES

（4）负向否定预查

理解：在捕获一个内容的时候，前面必须不是我选择的某一个才可以

格式：(?<!)

示例：

// 4、负向否定预查
var reg = /(?<!2015|2016)ES/;
console.log(reg.exec('2015ES'));      //不捕获ES
console.log(reg.exec('2016ES'));      //不捕获ES
console.log(reg.exec('2017ES'));      //捕获ES

7.2.9 重复出现

理解：在 \num 出现后表示正则中第num个可被捕获的(),这个可被捕获的小括号位置处的内容，需要在当前\num处出现一份一模一样的内容即可

格式：\num （num为一个正整数）

示例：

// \1 表示重复出现一个 （） 一模一样的内容一遍
var reg = /(abc|def)\d+\1/;
console.log(reg.test('abc123abc'));      //true
console.log(reg.test('abc123def'));      //false

// 前面的小括号内表示匹配不捕获，因此\1所捕获的则是从下一个小括号开始
var reg = /(?:[abcd])\d+([abcd])\d+\1/
console.log(reg.test('a123b123a'));      //false
console.log(reg.test('a123b123b'));      //true

7.2.10 正则表达式的标识符

标识符是写在正则表达式的外面，用来修饰整个正则表达式

（1）i ：忽略大小写

理解：用该标识符修饰时，字母不区分大小写

示例：

//1、 i 忽略大小写
var reg2= /^[abcd]*$/i
console.log(reg2.test('abcdabcd'));    //true
console.log(reg2.test('abCdabcD'));    //true

（2）g ：全局

理解：当有全局标识符的时候，你捕获的第二次会从第一次的结束位开始查找，直到找不到了，返回null，再后面依次的时候，又回到[0]位置开始捕获（匹配和捕获都可以影响下一次开始位）；若无全局标识符，匹配和捕获的时候，都是只能找到第一个。

示例：

// 2、 g 全局
var str = 'abc123def456ghi789abc'
var reg = /\d{3}/g
console.log(reg.exec(str));   //结束位是[5]，捕获123
console.log(reg.exec(str));   //开始位就是[6]，捕获456
console.log(reg.test(str));   //开始位就是[12]，匹配789
console.log(reg.exec(str));   //开始位就是[15]，捕获找不到了，因此为null
console.log(reg.exec(str));   //开始位就是[0]，捕获123

（3）y ：粘性全局

理解：有该标识符时，每一次捕获的时候，第一次必须是从[0]位置就刚好能捕获到内容，第二次必须是从第一次结束位置开始，就刚好能捕获整个正则表达式的，若不是上述情况，则为空。

示例：

// 3、 y 粘性全局
var str = '123456ghi789abc'
var reg = /\d{3}/y
console.log(reg.exec(str));   //捕获123
console.log(reg.exec(str));   //捕获456
console.log(reg.exec(str));   //为null，从第二次结束位置开始，无法捕获数字

7.3 两种创建正则表达式的区别

字面量创建和内置构造函数创建的区别：

（1）语法：

@ 字面量：var reg = /abcd/igy

@ 构造函数：var reg = new RegExp('abcd','igy')

（2）字符串拼接：

@ 字面量：不能进行字符串拼接

@ 构造函数：可进行字符串拼接

（3）书写基础元字符：

@ 字面量：书写基础元字符的时候，直接写 \x

@ 构造函数：书写基础元字符的时候要书写 \x

示例：

//字面量创建
var reg = /\s\d\w/
//构造函数创建
var reg = new RegExp('\\s\\d\\w')

7.4 字符串和正则相关的方法

（1）search()方法

语法：

1、字符串.search(字符串片段)

2、字符串.search(正则表达式)

返回值：

如果有就是对应的索引，如果没有就是-1

示例：

// 1、search()
var str = 'sada123sjdk';
console.log(str.search('123'));       //4
console.log(str.search(/\d{3}/));     //4

（2）replace()方法

语法：

1、字符串.replace(字符串片段，要替换的内容）

2、字符串.replace(正则表达式，要替换的内容)

返回值：

1、只能替换第一个查找到的内容，返回替换好的字符串

2、

（1）没有全局标识符 g 的时候，只能替换第一个查找到的内容，返回替换好的字符串

（2）有全局标识符 g 的时候，会把字符串内所有满足正则规则的内容全部替换，返回替换好的字符串

示例：

// 2、replace()
var str = 'abcd123abcd123abcd123abcd';
console.log(str.replace('123','**'));            //abcd**abcd123abcd123abcd
console.log(str.replace(/\d{3}/,'**'));          //abcd**abcd123abcd123abcd
console.log(str.replace(/\d{3}/g,'**'));         //abcd**abcd**abcd**abcd

（3）match()方法

语法：

1、字符串.match(字符串片段)

2、字符串.match(正则表达式)

返回值：

1、查找到字符串内一个满足字符串片段的内容返回，返回格式和 exec 一致

2、

（1）当正则表达式没有全局标识符 g 的时候，返回值和 exec 一致

（2）当正则表达式有全局标识符 g 的时候，返回一个数组，里面是所有满足条件的内容

示例：

// 3、match()
var str = 'hello 你好 world hello 你好 world hello 你好 world hello 你好 世界';
console.log(str.match('你好'));                  //['你好', index: 6, input: 'hello 你好 world', groups: undefined]
console.log(str.match(/你好/));                  //['你好', index: 6, input: 'hello 你好 world', groups: undefined]
console.log(str.match(/你好/g));                 //['你好', '你好', '你好', '你好']
console.log(str.match(/[\u4e00-\u9fa5]+/g));     //['你好', '你好', '你好', '你好', '世界']

注意：正则匹配中文

1、在正则表达式里面，\u 表示查找中文，后面带上中文的四位 unicode 编码

2、[\u4e00-\u9fa5] --- 表示任意一个中文字符