前端-JavaScript API笔记（超级详细版本）

我的博客：https://520526.xyz/

JavaScript初识

JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成支持用户交互并响应相应事件的动态页面。

在HTML中的使用

在页面中直接嵌入JavaScript

在HTML文档中可以使用标记将JavaScript脚本嵌入到其中。
​script属性：

属性	说明
language	不常用
type	用于指定使用的脚本类型
src	指定外部脚本文件路径
defer	不常用

type属性的语法格式：

html

<script type = "text/javascript"></script>

链接外部JavaScript文件

语法格式：多了个src属性

html

<script type = "text/javascript" src = "js文件的rul路径"></script>

注意：

1. 外部JavaScript文件中只能包含JavaScript代码，不能包含HTML和``标签。
2. 在``标签内部不要存在其他的JavaScript代码。
3. 在链接外部JavaScript文件时``结束标签不能省略。

作为标签的属性值使用

在HTML文档中可以在标签、标签 中使用JavaScript脚本作为它们的属性值。
通过“JavaScript”调用

html

<a href="javascript:alert('你好JavaScript')">测试</a>

与实践结合调用

html

<input type="button" value="测试" onclick="alert('你好JavaScript ')" />

---

基本语法

执行顺序

程序按照在HTML文件中出现的顺序逐行执行。

大小写敏感

在输入语言的关键字、函数名、变量时，都必须采用正确的大小写形式。

空格与换行

在JavaScript中会忽略程序中的空格、换行和制表符。

每行结尾的分号可有可无

为了养好习惯，经量写上分号。

注释

注释就是向文件代码中添加的–些说明性的文字，或者对代码进行暂时屏蔽。//内容ro /*内容*/

---

数据结构

数据类型

数值型

数值类型	说明
十进制	由0~9组成的数字序列
十六进制	“0X”或“0x”开头数字序列
八进制	以0开头
浮点型	传统计数法、科学计数法e或E后面的整数表示10的指数次幂
特殊值Infinity	超出最大值范围，则正 超出最小范围，则负
特殊值NaN	非数字

科学计数法
语法格式：

text

[digits] [.digits] [E|e[(+|-)]]

例子：

4E+2=4∗102=4004E+2=4∗102=400

3.14e4=3.14∗104=314003.14e4=3.14∗104=31400

.14e4=0.14∗104=1400.14e4=0.14∗104=1400

314E−2=314∗10−2=3.14314E−2=314∗10−2=3.14

字符串型

字符串是由0个或多个字符组成的序列，它可以包含太小写字母、数字、标点符号或其他字符，也可以包含汉字。程序中的字符串型数据是包含在单引号或双引号中的。
由单引号定界的字符串中可以含有双引号，由双引号定界的字符串中也可以含有单引号。

text

"I'm legend" = I'm legend 
'你好"JavaScript"' = 你好"JavaScript"

空字符串不包含任何字符，也不包含任何空格，用一对引号表示，即 “” 或 ‘ ‘
转义字符是\，通过转义字符可以在字符串中添加不可显示的特殊字符（例如\n, \t），或者防止引号匹配混乱的问题

转义字符

转义字符	描述
\r	回车符
\t	水平制表符，Tab空 格
\b	退格
\v	垂直制表符
\f	换页
\n	换行符
\ \	反斜杠
\OOO	八进制，范围000~777
\ ‘	单引号
\xHH	十六进制整数，范围00~FF
\ “	双引号
\uhhhh	十六进制编码Unicode字符

在document. write语句中使用转义字符时，只有将其放在格式化文本块中才会起作用，即脚本必须放在``标签内。
代码：

javascript

<script type="text/javascript">
    document.write("<pre>");
    document.write("网页基础:\nHTML\nCSS\nJavascript");
    document.write("<pre>");
</script>

布尔型

布尔数据类型只有两个值，一 个是true （真），一个是false （假），它说明了某个事物是真还是假。
特殊数据类型：
未定义值就是undefined，表示还没赋值

空值 nullnull

用于定义空的或不存在的引用。

常量与变量

常量：固定不变数据
变量：存储要用的数据
如果只是声明了变量，并未对其赋值，则其值默认为undef ined。可以使用var语句重复声明同一个变量，也可以在重复声明变量时为该变量赋一个新值。
在JavaScript中的变量必须要先定义后使用，没有定义过的变量不能直接使用。

JavaScript的关键字

abstract	continue	finally	instanceof	private
boolean	default	float	int	public
break	do	for	interface	return
byte	double	function	long	short
case	else	goto	native	static
catch	extends	implements	new	super
char	false	import	null	switch
class	final	in	package	synchronized
this	throw	typeof	true	var
void	while	with

---

算术运算符

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

比较运算符

对操作数进行比较，然后返回一个布尔值true或faIse.

< , <= , > , >= , == , != , === 绝对等于绝对等于 , !==绝对不等于绝对不等于

赋值运算符

简单赋值运算符：=
符合赋值运算符：+= , -= , *= , /= , %=

字符串运算符

用于两个字符串型数据之间的运算符，它的作用是将两个字符串连接起来。
如果比较字符串，则逐个比较字符的ASCIl码值，ASCII码值大的字符串大。ASCII码值都相等，字符数多的字符串大。

逻辑运算符

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

条件运算符

表达式?结果1:结果2
结果1为: true
结果2为: false

逗号运算符

用于将多个表达式排在一起，整个表达式的值为最后一个表达式的值。
例子：

javascript

var a , b , c , d;
a = (b=3 , c=4 , d=1);
document.write("a最终值为"+a);
//结果为 1

运算符 typeoftypeof

typeof 用于判断操作数的数据类型。语法格式：

javascript

typeof 操作数;

数据类型（操作数）	返回值
数值型	number
字符串型	string
布尔型	boolean
undefined	nudefined
null	object
对象	object
函数	functio

运算符 newnew

new 用来创建一个新的对象实例。语法格式：

格式1：
对象实例名称 = new 对象类型参数参数;
格式2：
对象实例名称 = new 对象类型2;

运算符的优先级

优先级	结合性	运算符
最高	向左	、[]、
由高到低依次排列		++、–、-、！、delete、new、typeof、void
	向左	*、/、%
	向左	+、-
	向左	<<、>> 、>>
	向左	<、<=、>、>=、in、instanceof
	向左	=、!=、=== 、 绝对不等于
	向左	&
	向左	^
	向左	|
	向左	&&
	向左	||
	向右	?:
	向右	=
	向右	=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、^=、|=
最低	向右	,

结合性
左结合：除了赋值、条件和单目运算符
右结合：赋值运算符、条件运算符

---

表达式

是运算符和操作数组合而成的式子。运算结果可分为：算术表达式、字符串表达式、逻辑表达式
表达式是一个相对的概念，在表达式中可以含有若千个子表达式，而且表达式中的一个常量或变量都可以看作是一个表达式。

表达式类型转换

转换为数值型

类型	转换为数值型
undefined	NaN
null	0
逻辑型	true,则为 1 ;false,则为 0
字符串型	若内容为数字，则相应的数字，否则为NaN
其他对象	NaN（非数字）

转换为布尔型

类型	转换为布尔型
undefined	false
null	false
数值型	值为0或NaN,则结果为false,否则为true
字符串型	长度为0，则结果为false,否则为true
其他对象	true

转换为字符串型

类型	转换为字符串型
undefined	“undefined”
null	“null”
数值型	NaN、0或者与数值相对应的字符串
逻辑型	值true,则为”true”,值为false,则结果为”false”
其他对象	若存在，结果为toString方法的值，否则结果为”undefined”

---

语句结构

赋值语句

···

判断语句 ifif

if语句，语法格式：

javascript

if(表达式){
  语句
}

if…else语句，语法格式：

javascript

if(表达式){
  语句1
}else{
  语句2
}

if…else if语句，语法格式：

javascript

if(表达式1){
  语句1
}else if(表达式2){
    语句2
}···
else if(表达式n){
    语句n
}else{
    语句n+1
}

if语句的嵌套

套娃格式，if中的if。语法格式：

javascript

if(表达式1){
    if(表达式2){
        语句1
    }else{
        语句2
    }
}else{
    if(表达式3){
        语句3
    }else{
        语句4
    }
}

分支语句 switchswitch

switch 它根据一个表达式的值，选择不同的分支执行。语法格式：

javascript

switch (表达式){
    case 常量表达式1 :
        语句1;
        ···;
        break;
    case 常量表达式2 :
        语句2;
        ···;
        break;
        ···
    case 常量表达式n :
        语句n;
        ···;
        break;
    default:
        语句n+1;
        break;
}

*default语句可以省略。在表达式的值不能与任何一个case语句中的值相匹配的情况下，JavaScript会直接结束switch语句，不进行任何操作。*
*case后面常量表达式的数据类型必须与表达式的数据类型相同，否则匹配会全部失败，而去执行default语句中的内容。*
*在switch语句中漏写break语句。则会影响其他语句*

循环语句 whilewhile

while 判断，它是利用一个条件来控制是否要继续重复执行这个语句。语法格式：

javascript

while(表达式)(
   语句（循环体）
)

*在使用while语句时，一定要保证循环可以正常结束，即必须保证条件表达式的值存在为false的情况，否则将形成死循环。*

循环语句 do…whiledo…while

do…while 后判断，它也是利用一个条件来控制是否要继续重复执行这个语句。语法格式：

javascript

do{
   语句
}while(表达式);

循环语句 forfor

for 计次循环，一般用于循环次数已知的情况。语法格式：

javascript

if(初始化表达式;条件表达式;迭代表达式){
    语句（循环体）
}

*在使用for语句时，也一定要保证循环可以正常结束，也就是必须保证循环条件的结果存在为false的情况，否则循环体将无休止地执行下去，从而形成死循环。*

跳转语句

continue语句

用于跳过本次循环，并开始下一次循环。
当使用continue语句跳过本次循环后，如果循环条件的结果为false,则退出
循环，否则继续下一次循环。
*continue语句只能应用在while、for、do…while语句中.*

break语句

在循环语句中，break语句用于跳出循环。

*continue语句只能应用在while、for、do…while或switch语句中。在嵌套的循环语句中，break语句只能跳出当前这一层的循环语句，而不是跳出所有的循环语句。*

---

函数

函数的定义

函数是定义一次，可以调用或执行多次的一段JavaScript代码。定义函数的语法格式：

javascript

function 函数名([参数1,参数2...]){
    语句
    [return返回值]
}

函数调用

函数的简单调用

调用的语法格式：

javascript

函数名(传递给函数的参数1,传递给函数的参数2,....);

函数名有大小写的区分

在事件响应中调用函数

事件处理流程：

触发事件→调用和执行函数→在页面中产生响应

javascript

<input type="button" value="提交" onclick="[调用函数]"/>

通过链接调用函数

在 < a > 标签中的href链接地址链接地址属性中使用javascript:函数名()格式来调用函数，单击这个链接时，函数将被执行。

javascript

<a href="javascaript:[调用函数]"> 单击链接 </a>

函数的参数

函数的参数分为 形参 和 实参
形参：定义函数时指定的参数
实参：调用函数时实际传递的值
语法格式：

javascript

定义函数参数的语法格式:
function 函数名(形参1,形参2...){
    函数体
}

调用函数语法格式:
函数名(实参1,实参2...);

形参和实参要对应

函数的返回值

在函数中，可以使用return语句为函数返回一个值。语法格式：

javascript

retutn 表达式;

嵌套函数

函数的嵌套定义

函数的嵌套定义就是在函数内部再定义其他的函数。 会使程序的可读性降低

函数的嵌套调用

允许在一个函数的函数体中对另一个函数进行调 用

递归函数

所谓递归函数就是函数在自身的函数体内调用自身，只在特定的情况下使用。语法格式：

javascript

function 函数名(参数1){
    函数名(参数2);
}

注意判断结束条件，否则死循环！！！

内置函数

内置函数
parseInt	数值处理 前四个
parseFloat
isNaN
isFinite
eval	字符串处理函数 后五个
escape
unescape
encodeURI
decodeURI

数值处理函数

字符转数字函数 parseIntparseInt

parseInt 将首位为数字的字符串转换成数字，字符串开头不是数字的字符，则返回NaN，前提是默认十进制。语法格式：（默认十进制）

javascript

parseInt(String,[进制数]) 
如: parseInt("e2b",16)
结果为:3627

字符转浮点函数 parseFloatparseFloat

parseFloat 将首位为数字的字符串转化成浮点型数字，字符串不是以数字开头，则返回NaN。语法格式：

javascript

parseFloat(String)
如: parseFloat("5.411")

检验函数 isNaNisNaN

isNaN 检验某个值是否为NaN。语法格式：

javascript

isNaN(num)

返回值：
结果为NaN 函数返回值为true
否则，函数返回值为false

检验限度函数 isFiniteisFinite

isFinite 检验其参数是否有限。语法格式：

javascript

isFinite(num)

num：需要验证的数字

返回值：
有限数字，则返回true
NaN或无穷大，则返回false

代码示范：

css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var no1 = "123abc";
        var no2 = "abc123";
        var no3 = "e2b";
        var no4 = "3434.43";
        var no5 = "abb434.43";
        var no6 = "12322";
        var no7 = "1232a2";
        var no8 = "123";
        var no9 = "123abc";
        var no10 = "1/0";
        document.write("parseInt:"+"<br/>");
        document.write("123abc = "+parseInt(no1)+"<br/>");
        document.write("abc123 = "+parseInt(no2)+"<br/>");
        document.write("e2b = "+parseInt(no3,16)+"<br/>");
        document.write("<br/>"+"parseFloat:"+"<br/>");
        document.write("3434.43 = "+parseFloat(no4)+"<br/>");
        document.write("abb434.43 = "+parseFloat(no5)+"<br/>");
        document.write("<br/>"+"isNaN:"+"<br/>");
        document.write("12322 = "+isNaN(no6)+"<br/>");
        document.write("1232a2 = "+isNaN(no7)+"<br/>");
        document.write("<br/>"+"isFinite:"+"<br/>");
        document.write("123 = "+isFinite(no8)+"<br/>");
        document.write("123abc = "+isFinite(no9)+"<br/>");
        document.write("1/0 = "+isFinite(no10)+"<br/>");
    </script>
</body>
</html>

字符串处理函数

字符表达式值函数 evaleval

eval 计算字符串表达式的值并执行。语法格式：

javascript

eval(String)
//如: eval("5 * 4")

字符串编码函数 escapeescape

escape 将一些特殊字符(不包括字母和数字字符以及*、@、一、_、+、.和/)进行编码，它可以将这些特殊字符转换为“%XX” 格式的数字。语法格式：

javascript

escape(String)
//如: escape("You & Me") →You%20%26%20Me

字符串解码函数 unescapeunescape

unescape 对应用escape函数编码后的字符串进行解码。它可以将字符串中“%XX”格式的数字转换为字符。语法格式：

javascript

unescape(String)
//如: unescape("You%20%26%20Me") →You & Me

URL编码函数 encodeURIencodeURI

encodeURI 将URI字符串进行编码，语法格式：

javascript

encodeURI(uri)
//如:encodeURI("https://www.baidu.com/?name=测试");

URL解码函数 decodeURIdecodeURI

decodeURI **对已编码URI字符串进行解码，**语法格式：

javascript

decodeURI(uri)
//如:decodeURI("https://www.baidu.com/?name=%E6%B5%8B%E8%AF%95")

代码示范：

css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        document.write("eval:"+"<br/>");
        document.write("3+5 ="+eval("3+5")+"<br/>");
        document.write("3*4/2+1 = "+eval("3*4/2+1")+"<br/>");
        eval("x = 5 ; y = 6 ; document.write(x * y)");
        document.write("<br/><br/>"+"escape:"+"<br/>");
        document.write("I%20love%20JS%20%21%21%21 ="+escape("I love JS !!!")+"<br/>");
        document.write("<br/>"+"unescape:"+"<br/>");
        document.write("I love JS !!! = "+unescape("I%20love%20JS%20%21%21%21")+"<br/>");
        document.write("<br/>"+"encodeURI:"+"<br/>");
        document.write("https://www.baidu.com/?name=%E6%B5%8B%E8%AF%95 = "+encodeURI("https://www.baidu.com/?name=测试")+"<br/>");
        document.write("<br/>"+"decodeURI:"+"<br/>");
        document.write("https://www.baidu.com/?name=测试 = "+decodeURI("decodeURI(\"https://www.baidu.com/?name=%E6%B5%8B%E8%AF%95\")")+"<br/>");
    </script>
</body>
</html>

定义函数的其他方法

定义匿名函数

语法格式：

javascript

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

Function 构造函数

语法格式：

javascript

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

Function构造函数中的所有参数和函数体都必须是字符串类型，因此一定要用双引号或单引号引起来。