JavaScript

1.1 JavaScript历史

​ 创始人：布兰登.艾奇（1961~）

​ 在1995年用10天完成JavaScript设计。

​ 网景公司最初命名为LiveScript

alert(msg) ：浏览器弹出警示框 用来展示给用户看的

console.log(msg):浏览器控制台输出信息

prompt(info):浏览器弹出输入框，用户可以输入

1. 变量：

用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改。（变量就是一个装东西的盒子）

1.1 声明变量

var age; //声明一个名称为age的变量  （variable变量的意思）

1.2 赋值

age=10; //给age这个变量赋值为10

1.3 变量的初始化

var age = 18 ; //声明变量的同时赋值为18

声明一个变量并赋值，我们称之为变量的初始化。

1.4 变量语法扩展

1.4.1 更新变量：

一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

var age =18;
age =81; //最后的结果就是81，因为18被覆盖掉了

1.4.2 同时声明多个变量：

只需要写一个var，多个变量名之间使用英文逗号隔开，最后一个分号结尾。

var age =10, name='zs', sex =2;

1.4.3 声明变量的特殊情况

情况	说明	结果
var age; console.log(age);	只声明 不复赋值	undefined(未定义的)
console.log(age);	不声明 不赋值 直接使用	报错
age =10; console.log(age);	不声明 只赋值	10

1.4.4 变量命名规范

①由字母（A-Za-z）、数字（0-9）、下划线（_）、美元符号（$）组成，如：\ast \ast usrAge\ast \ast ,\ast \ast nym01\ast \ast ,\ast \ast$name**, _sex

②严格区分大小写。 var app; 和var App; 是两个变量

③不能 以数字开头。 18age 是错误的

④不能 是关键字、保留字。例如：var、for、while

⑤变量名必须有意义。 MMD BBD nl➡age

⑥遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFristName

⑦推荐翻译网站：有道 爱词霸

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ts42D3Fw-1657280263962)(C:\Users\Timi\AppData\Roaming\Typora\typora-user-images\image-20220303094434503.png)]

2. 数据类型

2.1 为什么需要数据类型

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

简单来说，数据类型就是数据的类别型号。比如姓名’‘张三’'，年龄18 这些数据的类型是不一样的。

2.2 变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。**JavaScript是一种弱类型或者说动态语言。**这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age =10;          //这是一个数字型
var areYouOk ="是的";  //这是一个字符串

在代码运行时，变量的数据类型是由js引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

JavaScript拥有动态类型，同时也就意味着相同的变量可用作不同的类型：

var x = 6;       //x为数字型
var x = "Bill";  //x为字符串

2.3 数据类型的分类

JS把数据类型分为两类：

①简单的数据类型（Number,String,Boolean,Undefined,Null）

②复杂数据类型（object）

2.4 简单数据类型

2.4.1 简单数据类型（基本数据类型）

JavaScript中的简单数据类型及其说明如下：

简单数据类型	说明	默认值
Number	数字型，包含 整型值和浮点型值，如21、0.21	0
Boolean	布尔值类型，如true、false、等价于1和0	false
String	字符串类型，如"张三" 注意咱们js里面，字符串都带引号	“”
Undfined	var a; 声明了变量a但是没有给值，此时a=undefined	undefined
Null	var a = null; 声明了变量a为空值	null

2.4.2 数字型Number

JavaScript数字类型既可以用来保存整数值，也可以保存小数（浮点数）。

var age = 21;      //整数
var Age = 21.3747; //小数

2.4.2.1 数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。

//1.八进制数字序列范围：0~7
var num1 = 07;     //对应十进制的7
var num2 = 019;    //对应十进制的19
var num3 = 08;     //对应十进制的8
//2.十六进制数字序列范围：0~9以及A~F
var num = 0xA;

在js中八进制前面加0，十六进制前面加0x

2.4.2.2 数字型范围

JavaScript中数值的最大和最小值

alert(Number.MAX_VALUE);   //这个值为：1.7976931348623157e+308
alert(Number.MIN_VALUE);   //这个值为：5e-324

2.4.2.3 数字型三个特殊值

alert(Infinity);  //Infinity   代表无穷大，大于任何数值
alert(-Infinity); //-Infinity  代表无穷小，小于任何数值
alert(NaN);       //NAN        Not a number,代表一个非数值

2.4.2.4 isNaN()

用来判断一个变量是否为非数字的类型，返回true或者false

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yRl4OIPb-1657280263964)(C:\Users\Timi\AppData\Roaming\Typora\typora-user-images\image-20220408095114977.png)]

var userAge = 21;
var isOk = isNaN(userAge);
console.log(isOk);          //false ,21 不是一个非数字
var userName = "andy";
console.log(isNaN(userName));// true，"andy"是一个非数字
var str = "123";
console.log(isNaN(str))  //flase  先隐式转换 再判断
var nan = NaN;
console.log(isNaN(nan)) //true     Not a number,代表一个非数值

2.4.3 字符串型String

字符串型可以是引导中的任意文本，其语法为双引号""和单引号’’

var strMsg = "我爱北京天安门~";  //使用双引号表示字符串
var strMsg = '我爱吃猪蹄~'；    //使用单引号表示字符串
//常见错误
var strMsg3 = 我爱大肘子;       //报错，没使用引号，会被认为是js代码，但js没有这些语法

因为HTML标签里面的属性使用的是双引号，js这里我们更推荐使用单引号。

2.4.3.1 字符串引号嵌套

js可以用单引号嵌套双引号，或者用**双引号嵌套单引号（外双内单，外单内双）

var strMsg = '我是"高帅富"程序猿';  //可以用''包含""
var strMsg2 = "我是'高帅富'程序猿"; //也可以用""包含''
//常见错误
var badQuotes = 'What on earth?";//报错，不能单双引号搭配

2.4.3.2 字符串转义字符

类似HTML里面的特殊字符，字符串中也有特殊字符， 我们称之为转义符。

转义符都是\开头的，常用的转义符及其说明如下：

转义符	解释说明
\n	换行符，n是newline的意思
\\	斜杠\
\’	’ 单引号
\"	" 双引号
\t	tab 缩进
\b	空格，b是blank的意思

2.4.3.3 字符串长度

字符串是由若干字符组成，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。

var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length);   //输出11

2.4.3.4 字符串拼接

①多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符串

②拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

//1.字符串+字符串
alert('hello'+''+'world');   //输出 hello world
//2.数值字符串+数值字符串
alert('100'+'100');  //输出 100100
//3.数值字符串+数值
alert('11'+12);  //输出 1112
//4.数值+数值
alert(12+12);  //输出 24

+号总结口诀：数值相加，字符相连。

2.4.3.4 字符串拼接加强

console.log('pink老师' + 18);  //只要有字符串就会相连 
var age = 18;
//console.log('pink老师age岁啦')； //错误写法
console.log('pink老师' + age);  //输出 pink老师18
console.log('pink老师' + age + '岁啦');  //输出 pink老师18岁啦

①经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值

②变量是不能添加引号的，因为加引号的变量会变成字符串

③如果变量两侧都有字符串拼接，口诀"引引加加"，删掉数字，变量加中间

2.4.4 布尔型 Boolean

布尔类型有两个值：true 和false，其中true表示真（对），false表示假（错）。

布尔型和数字型相加的时候，true的值为1 ，false的值为0.

console.log(true + 1); // 输出 2
console.log(false + 1);  //输出 1

2.4.5 Undefined 和 Null

null的加（+）、减（-）、乘（*）、除（/）和取模（%）运算

1、null的加（+）运算
① null与undefined||NaN进行加（+）运算，不分先后，结果为：NaN。
② null与null||boolean||number进行加（+）运算，不分先后，结果为：数字类型的数据，注意正负。
③ null与字符串进行加（+）运算，不分先后，结果为字符串相加，包括字符串类型的数字。
④ null与数组进行加（+）运算时会调用.toString()方法，不分先后，结果为：‘’||‘1,2’||‘1,2,3’，并从左往右按字符串相加。
⑤ null与对象进行加（+）运算时会调用.toString()方法，不分先后，结果为：[object Object]，并从左往右按字符串相加。

2、null的减（-）运算
① null与undefined||NaN||对象||数组（除[]||[1]||[‘3’]外），因为这些数据类型不能正常转为数字类型的字符串，所以进行减（-）运算时，不分先后，结果为：NaN。
② null与能转换为数字类型的数据进行减（-）运算，不分先后，结果为数字类型的数据，注意正负。console.log(null - ‘’); // 0||console.log(null - []); // 0||console.log(null - [1]); // 1
③ 值得注意的是’true’ || ‘false’是不能正常转为1 || 0。这两个值与’1’ || '0’的转换方式不同，‘1’ || '0’可以转为1 || 0。

3、null的减（*）运算
① null与undefined||NaN||对象||数组（除[]||[1]||[‘3’]外），因为这些数据类型不能正常转为数字类型的字符串，所以进行乘（）运算时，不分先后，结果为：NaN。
② null与能转换为数字类型的数据进行乘（）运算，不分先后，结果为：0。

4、null的减（/）运算
① null作为除数时，与true||大于0的数字类型数据||[1]进行除（/）运算时结果为：Infinity。
② null作为被除数时，与大于0的数字类型数据进行除（/）运算时，结果为：0。
③ 其余情况的除（/）运算结果为：NaN。

5、null的减（%）运算
① null作为被除数时，与true||大于0的数字类型数据||[1]进行取模（%）运算时结果为：0。
② 其余情况的取模（/）运算结果为：NaN。

一个声明后没有赋值的变量会有一个默认值undefined（如果进行相连或者相加时，注意结果）

var variable;
console.log(variable);    //输出 undefined
console.log('你好' + variable);  //输出 你好undefined
console.log(11 + variable);  //输出 NaN
console.log(true + variable);  //输出 NaN

一个声明变量给null值，里面存的值为空（学习对象时，继续研究null）

var vari = null;
console.log('你好' + vari);  //输出 你好null
console.log(11 + vari);  //输出 11
console.log(true + vari);  //输出 1

2.5. 获取变量数据类型

2.5.1 获取检测变量的数据类型

typeof可用来获取检测变量的数据类型

根据控制台输出的字体颜色判断数据类型

控制台输出的字体是蓝色的 属于 数字型、输出的字体是黑色的 属于 字符型、输出的字体颜色是深蓝色的 属于布尔型、输出的字体是灰色的 属于 undefined（未定义的）或null。

2.5.2 字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

①数字字面量：8 , 9 , 10

②字符串字面量：‘黑马程序员’ , ‘大前端’

③布尔字面量：true , false

2.6 数据类型转换

2.6.1 什么是数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

通常会实现3种方式的转换：

①转换为字符串类型

②转换为数字型

③转换为布尔型

2.6.2 转换为字符串

方式	说明	案例
toString()	转成 字符串	var num = 1; alert(num.toString());
String() 强制转换	转成 字符串	var num = 1; alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num = 1; alert(num + ‘我是字符串’)；

①toString() 和 String() 使用方法不一样

②三种转换方式，我们更喜欢用第三种加号拼接字符转换，这种方式也称之为隐式转换。

2.6.3 转换为数字型（重点）

方式	说明	案例
parseInt(string) 函数	将string类型转成整数数值型	parseInt(‘78’)
parseFloat(string) 函数	将string类型转成浮点数数值型	parseFloat(‘78.21’)
Number() 强制转换函数	将string类型转换为数字型	Nubmber(‘12’)
js 隐式转换(- * /)	利用算术运算隐式转换为数值型	‘12’ - 0

注意parseInt和parseFloat单词的大小写，这2个是重点

2.6.4 转换为布尔型

方式	说明	案例
Boolean	其他类型转成布尔型	Boolean(‘true’);

①代表空、否定的值会被转换为false，如"、0、NaN、null、undefined

②其余值都会被转换为true

console.log(Boolean(''));  //输出 false
console.log(Boolean(0));  //输出 false
console.log(Boolean(NaN));  //输出 false
console.log(Boolean(null));  //输出 false
console.log(Boolean(undefined));  //输出 false
console.log(Boolean('小白'));  //输出 true
console.log(Boolean(12));  //输出 true

解释型语言和编译型语言

概述

计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qcrQnuL9-1657280263965)(C:\Users\Timi\AppData\Roaming\Typora\typora-user-images\image-20220305101121654.png)]

①翻译器的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同。

②编译器是在代码执行之前进行编辑，生成中间代码文件

③解释器是在运行时进行及时解释，并立即执行（当编译器以解释方式运行的时候，也称之为解释器）。

执行过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AMsxcGFZ-1657280263966)(C:\Users\Timi\AppData\Roaming\Typora\typora-user-images\image-20220305101644430.png)]

类似于请客吃饭：

①编译语言：首先把所有菜做好，才能上桌吃饭

②解释语言：好比吃火锅，边吃边涮，同时进行

标识符、关键字、保留字

标识符

标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字。

标识符不能是关键字或保留字。

关键字

关键字：是指JS本身已经使用了的字，不能再用他们充当变量名、方法名。

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、swith、this、try、typeof、var、void、while、with等。

保留字

保留字：实际上就是预留的"关键字"，意思是现在虽然还不是关键字，但未来可能会成为关键字，同样不能使用它们当变量名或方法名。

包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile等。

3. 运算符

运算符（operator）也被称为操作符，用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有：

①算数运算符

②递增和递减运算符

③比较运算符

④逻辑运算符

⑤赋值运算符

3.1 算术运算符

概念：算术运算使用的符号，用于执行两个变量或值的算术运算。

运算符	描述	案例
+	加	10 + 20 =30
-	减	10 - 20 = -10
*	乘	10 * 20 = 200
/	除	10 / 20 = 0.5
%	取余数（取模）	返回除法的余数9 % 2 = 1

3.2 浮点数的精度问题

浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数。

console.log(0.1 + 0.2);  // 结果不是0.3，而是：0.30000000000000004    15个0
console.log(0.07 * 100);  // 结果不是7， 而是：7.000000000000001    14个0

所以：不要直接判断两个浮点数是否相等！

一个数的余数是0就说明这个数能被整除，这就是%取余运算符的主要用途。

3.3 表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

简单理解：是由数字、运算符、变量等组成的式子

3.4 递增和递减运算符

3.4.1 递增和递减运算符概述

如果需要反复给数字变量添加或减去1，可以使用**递增（++）和递减（–）运算符来完成。

在JavaScript中，递增（++）和递减（–）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。

注意：递增和递减运算符必须和变量配合使用。

3.4.2 递增运算符

++num前置递增，就是自加1再赋值，类似于num = num +1。 口诀：先自加，后返回值

num++后置递增，就是先赋值再自加1，类似于num = num ，然后num=num+1 。 口诀：先返回值，后自加

3.4.3前置递增和后置递增小结

①前置递增和后置递增运算符可以简化代码的编写，让变量的值 +1 比以前写法更简单

②单独使用时，运行结果相同

③与其他代码联用时，执行结果会不同

④后置：先原值运算，后自加（先人后己）

⑤前置：先自加，后运算（先己后人）

⑥开发时，大多使用后置递增/减，并且代码独占一行，例如：num++；或者num–；

3.5 比较运算符

3.5.1 比较运算符概述

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果。

运算符名称	说明	案例	结果
<	小于号	1 < 2	true
>	大于号	1 > 2	false
>=	大于等于号（大于或者等于）	2 >= 2	true
<=	小于等于号（小于或者等于）	3 <= 2	false
==	判等号（会转型）	37 == 37	true
!=	不等号	37 != 37	false
=== !==	全等 要求值和 数据类型都一致	37 === ‘37’	false

3.5.2 = 小结

符号	作用	用法
=	赋值	把右边给左边
==	判断	判断两边值是否相等（注意此时有隐式转换）
===	全等	判断两边的值和数据类型是否完全相同

console.log(18 == '18');
console.log(18 === '18')

3.6 逻辑运算符

3.6.1 逻辑运算符概述

概念：逻辑运算符是用来进行布尔值运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

逻辑运算符	说明	案例
&&	“逻辑与”,简称"与" and	true && false
||	“逻辑或”,简称"或" or	true || false
！	“逻辑非”,简称"非" not	!true

3.6.2 逻辑与 &&

只有两个都是真，结果才是真。

3.6.3 逻辑或 ||

如果一个为真，则为真；

3.6.4 逻辑非 ！

指本来值的反值

3.7运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ – ！（逻辑非的优先级很高）
3	算数运算符	先 * / % 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&& 后|| （逻辑与比逻辑或优先级高）
7	赋值运算符	=
8	逗号运算符	，

分支语句

if 的语法结构 如果if

if(条件表达式){

//执行语句

}else{
 //执行语句
}

执行思路 如果 if 里面的条件表达式结果为真 true 则执行大括号里面的 执行语句

如果 if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码

if 多分支语句

多分支语句

就是利用多个条件来选择不同的语句执行 得到不同的结果 多选1 的过程

if else if 语句是多分支语句

语法规范

if(条件表达式1){
    // 语句1；
}else if(条件表达式2){
    // 语句2;
}else if(条件表达式3){
    // 语句3;
}else{
    // 最后语句;
}
//执行思路  
//如果条件表达式1 满足就执行 语句1 执行完毕，退出整个if 分支语句
//如果条件表达式1 不满足，则判断条件表达式2 满足的话，执行语句2
//如果上面的所有条件表达式都不成立，则执行else 里面的语句
//注意  多个分支语句还是多选1 最后只能有一个语句执行
        else if 里面的条件理论上是可以任意多个的
        else if 中间有个空格了

swith

swith语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以试用swith。

1.swith 语句也是多分支语句 也可以实现多选1

2.语法结构

swith 转换、开关 case 小例子或者选项的意思

switch(表达式){
    case value1:
        执行语句1;
        break;
    case value2:
        执行语句2;
        break;
        ...
    default:
        执行最后的语句;
}

3.执行思路

利用我们的表达式的值 和case 后面的选项值想匹配 如果匹配上，就执行该case里面的语句 如果都没有匹配上，那么执行 default里面的语句

4注意事项

①我们开发里面 表达式我们经常写成变量

②我们num 的值 和case里面的值相匹配的时候是 全等 必须是值和数据类型一致才可以 num === 1

③break 如果当前的case里面没有break 则不会退出swith 是继续执行下一个case

swith 语句和 if else if 语句的区别

①一般情况下，它们两个语句可以相互替换。

②swith…case 语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)。

③swith 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else语句有几种条件，就得判断多少次。

④当分支比较少时，if…else语句的执行效率比swith语句高。

⑤当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

for循环

for重复执行某些代码，通常跟计数有关

for 语法结构

for(初始化变量;条件表达式;操作表达式){

//循环体

}

初始化变量

就是用var声明的一个普通变量，通常用于作为计数器使用

条件表达式

就是用来决定每一次循环是否继续执行 就是终止的条件

操作表达式

是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）

for循环的执行过程

for(var i = 1; i <= 100; i++){
    console.log('你好吗');
}

①首先执行里面的计数器变量 var i = 1,但是这句话在for 里面只执行一次 index

②去 i <= 100 来判断是否满足条件，如果满足条件 就去执行 循环体 不满足条件退出循环

③最后去执行 i++ i++是单独写的代码 递增 第一轮结束

④接着去执行i<=100 如果满足条件 就去执行循环体 不满足条件退出

双重for循环

语法结构

for(外层的初始化变量;外层的条件表达式;外层的操作表达式){
    for(里层的初始化变量;里层的条件表达式;里层的操作表达式){
         //执行语句
    }
}

外循环

我们可以把里面的循环看做是外层循环的语句

特点

外层循环循环一次，里面的循环执行全部（执行到不满足条件语句）

for循环小结

①for循环可以重复执行某些相同代码

②for循环可以重复执行些许不同的代码，因为我们有计数器

③for循环可以重复执行某些操作，比如算术运算符加法操作

④随着需求增加，双重for循环可以做更多、更好看的效果

⑤双重for循环，外层循环一次，内层for循环全部执行

⑥for循环是循环条件和数字直接相关的相关

⑦分析要比写代码更重要

⑧一些核心算法想不到，但要是学会，分析它执行过程

while 循环

语法结构

while 当…的时候

while(条件表达式){

//循环体

}

执行思路

当条件表达式结果为true 则执行循环体 否则 退出循环

do while

语法结构

do{

//循环体

}while(条件表达式)

执行思路

跟着while不同的地方在于 do while 先执行一次循环体 再判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环体

特点

do while 循环体至少执行一次

continue 关键字

continue关键字用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的代码就会少执行一次）。

break 关键字

break 关键字用于立即跳出整个循环（循环结束）。

函数

函数的概念

在js里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。

虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用js中的函数

函数的使用

函数在使用时分为两步：声明函数和调用函数。

声明函数

//function 函数名(){
    // 函数体
//}
function say(){
    console.log('hi~');
}

注意：

① function 声明函数的关键字 全部小写

② 函数时做某件事情，函数名一般是动词

③ 函数不调用自己不执行

调用函数

// 函数名();  //通过调用函数名来执行函数体代码

function say(){
    console.log('hi~');
}
say();

注意： 调用函数的时候千万不要忘记加小括号 。

​ 声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

口诀： 函数不调用，自己不执行。

函数的封装

函数的封装是把一个或者多个功能通过 函数的方式封装起来，对外只提供一个简单的函数接口。

函数声明和函数表达式的区别

① 函数声明会被提升到当前作用域的顶部，函数表达式则不会。

② 把函数声明放在调用它的语句后不会报错，

带参函数

形参和实参

在 声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为 形参，而在 **调用该函数时，**同样也需要传递相应的参数，这些参数被称为 实参。

参数	说明
形参	形式上的参数 函数定义的时候传递的参数 当前并不知道是什么
实参	实际上的 参数 函数调用 的时候传递的参数 实参是传递给形参的

参数的作用：在 函数内部某些值不能固定，我们可以通过参数在 调用函数时传递不同的值进去。

①我们可以利用函数的参数实现函数重复不同的代码

function 函数名(形参1,形参2) { //在声明函数的小括号里面是 形参（形式上的参数） 
     //JavaScript语句;
}
函数名(实参1,实参2); //在函数调用的小括号里面是实参（实际的canshu）

②形参和实参的执行过程

function cook(a){   //形参是接受实参的 aru = '酸辣土豆丝'  形参类似于一个变量
    console.log(a);
}
cook('酸辣土豆丝');
cook('大肘子');

③ 函数的参数可以有，也可以没有个数不限

函数形参和实参个数不匹配问题

参数个数	说明
实参个数等于形参个数	输出正确结果
实参个数多于形参个数	只取到形参的个数(有几个形参 取几个实参)
实参个数小于形参个数	多的形参定义为undefined，结果为NaN

1.函数形参实参个数匹配
function getSum(num1,num2){
    console.log(num1+num2);
}
//1.如果实参的个数和形参的个数一致  则正常输出结果
getSun(1,2);
2.如果实参的个数多于形参的个数 会取到形参的个数
getSum(1,2,3);
3.如果实参的个数小于形参的个数 多于的形参定义为undefined 因为一个定义了一个未定义两个相加为非数字   最终的结果就是 NaN
//形参可以看做是不用声明的变量 num2 是一个变量但是没有接受值 结果就是undefined
getSum(1); //NaN
//建议 我们尽量让实参的个数和形参相匹配

注意：在JavaScript中，形参的默认值是undefined。

小结：

① 函数可以带参数也可以不带参数；

② 声明函数的时候，函数名括号里面的是形参，形参的默认值为undefined；

③ 调用函数的时候，函数名括号里面的是实参；

④ 多个参数中间用逗号分隔；

⑤ 形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配。

示例：5行6列表格

function  table(tr,td){
            var  str = ""for(var i=1; i<=tr;i++){
                      str+=""for(var j =1; j <=td; j++){
                        str+=""};
                      str+=""}
               str+="

                  

                         
"+i+"行"+j+"列
            
                      
    
                   
"
            document.write(str)
        }
table(5,6)

函数的返回值

① 函数是做某件事或者实现某种功能

function cook(aru){
    console.log(aru);
}
cook('大肘子');

② 函数的返回值格式

function 函数名(){
    return 需要返回的结果;
}
函数名();

(1) 我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return 实现的

(2) 只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名()= return 后面的结果

③ 代码验证

function getResult(){
    reyurn 666;
}
getResult(); // getResult() = 666
console.log(getResult());

function cook(aru){
    return aru;
}
console.log(cook('大肘子')); //大肘子

④ 求任意两个数的和

function getSun(num1,num2){
    return num1 + num2;
}
console.log(setSum(1,2)); // 3

求两个数的最大值

function getMax(num1,num2){
     //if(num1 > num2){
     //   return num1;
     //}else{
     //    return num2;
     // }
     return num1 > num2 ? num1 : num2;   可以实现和上面的代码同样的效果
}
console.log(getMax(1,3));  // 3 
console.log(getMax(11,3)); // 11

求数组中的最大值

//利用函数求数组[5,2,99,101,67,77]中的最大值。

function getArrMax(arr){  //arr 接受一个数组 arr = [5,2,99,101,67,77]
    var max = arr[0];
    for(var i = 1; i <= arr.length; i++){
        if(arr[i] > max){
            max = arr[i];
        }
    }
    return max; 
}
//getArrMax([5,2,99,101,67,77]); // 实参是一个数组送过去
//在我们实际开发里面，我们经常用一个变量来接受 函数的返回结果 使用更简单
var re = getArrMax([5,2,99,101,67,77]);
console.log(re);//101

函数的返回值

return 的返回值

return只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

注意：

1.return 终止函数

function getSum(num1,num2){
    return num1 + num2; //return 后面的代码不会被执行
    alert('我是不会被执行的哦');
}
console.log(getSum(1,2)); // 3

2.return 只能返回一个值

function fn(num1,num2){
    return num1,num2;  //返回的结果是最后一个值
}
xonsole.log(fn(1,2)); // 2 

3.我们求任意两个数的 加减乘除结果

function getResult(num1,num2){
    return[num1 + num2, num1 - num2, num1 * num2, num1 / num2];
}
var re = getResult(1,2); //返回的是一个数组
console.log(re);  // [3, -1, 2, 0.5]

4.我们的函数如果有 return 则返回的是 return 后面的值，如果函数没有 return 则返回undefined

函数都是有返回值的

① 如果有return则返回return后面的值

② 如果没有return则返回undefined

function fun1(){
    return 666;
}
console.log(fun1()); //返回 666

function fun2(){
    
}console.log(fun2()); // 函数返回的结果是undefined

break，continue，return 的区别

break：结束当前的循环（如for、while）；

continue：跳出本次循环，继续执行下次循环（如for、while）；

return：不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码。

arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中 储存了传递的所有实参。

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有一下特点：

① 具有length属性；

② 按索引方式储存数据；

③ 不具有数组的push,pop等方法。

arguments 的使用

只有函数才有 arguments对象 而且是每个函数都内置好了这个arguments

function fn(){
    console.log(arguments); //里面存储了所有传递过来的实参
    console.log(arguments.length); // 3
    console.log(arguments[2]); // 3
    //我们可以按照数组的方式遍历arguments
    for(var i = 0; i < arguments.length; i++){
        console.log(arguments[i]);
    }
}
fn(1,2,3);

伪数组并不是真正意义上的数组

① 具有数组的length属性

② 按照索引的方式进行存储的

③ 它没有真正数组的一些方法 pop() push() 等等

利用函数求任意个数的最大值

function getMax(){
    var max = arguments[0];
    for(var i = 1; i < arguments.length; i++){
        if(arguments[i] > max){
            max = arguments[i];
        }
    }
    return max;
}
console.log(getMax(1,2,3)); // 3
console.log(getMax(1,2,3,4,5)); // 5
console.log(getMax(11,2,34,444,5,100)); // 444

利用函数翻转任意数组 reverse 翻转

function reverse(arr){
    var newArr = [];
    for(var i = arr.length - 1; i >= 0; i--){
        newArr[newArr.length] = arr[i];
    }
    return newArr;
}
var arr1 = reverse([1,2,3,4]);
console.log(arr1); // 4,3,2,1

利用函数冒泡排序 、sort 排序

function sort(arr){
    for(var i = 0; i < arr.length - 1; i++){
        for(var j = 0; j <arr.length - i - 1; j++){
            if(arr[j] > arr[j + 1]){
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
}
var arr1 = sort([1,4,2,9]);
console.log(arr1); // 1,2,4,9

利用函数判断闰年

function isRunYear(year){
    //如果是闰年我们返回 true 否则 返回false
    var flag = false;
    if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
        flag = true;
    }
    return flag;
}
console.log(isRunYear(2000));  // ture
console.log(isRunYear(1999));  // false

函数调用别的函数

函数可以调用另外一个函数

因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况。

//函数是可以相互调用的
function fn1(){
    console.log(11);
    fn2(); // 在fn1 函数里面调用了 fn2 函数
}
fn2();
function fn2(){
    console.log(22);
}

function fn1(){  
    console.log(111); //第二步
    fn2(); // 第三步
    console.log('fn1'); // 第四步
}
function fn2(){
    console.log(222); 
    console.log('fn2'); 
}
fn1(); // 第一步

函数的两种声明方式

利用函数关键字自定义函数（命名函数）

function fn(){}
fc();

函数表达式

// var 变量名 = function(){};
var fun = function(aru){
    console.log('我是函数表达式');
    console.log(aru)
}
fun('pink老师');
// ① fun是变量名 不是函数名
// ② 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数
// ③ 函数表达式也可以进行传递参数

函自调用

(function(){
        console.log("函数自调用")

    })()

// 可以提前将要执行的代码提前加载到内存中  可以开辟属于自己的空间
    // var  a = 2;

    (function(){
        console.log("函数自调用")
        var  a = 1;
    })()

    console.log(a)

function 属于引用数据类型

typeof 没有设计好

回调函数

函数可以作为参数

以一个函数作为另一个函数的参数 就是回调函数

// 回调函数
          function  fn1(callback){
                callback()
          }
          function fn2(){
              console.log("这是fn2打印出来的东西")
          }
          fn1(fn2)

return

终止函数 并且返回结果 返回给函数体

function  table(tr,td){
               var str = ""for(var i=1; i<=tr; i++){
                         str+=""for(var j =1; j <=td; j++){
                               str+=""};
                         str+=""}
                   str +="

                      

                               
"+i+"行"+j+"列"+"
                            
                     
";
                  
                  return str
          }
         var dom =  table(10,10);

         document.write(dom)

闭包函数

函数之内嵌套函数

在函数体之内 函数内部可以访问函数外部的变量 函数外部访问不了函数内部的变量

主要作用就是：延伸了变量的作用范围

1. 优点：

   ①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突
   ②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）。
   ③匿名自执行函数可以减少内存消耗。（function（）{}）{}

闭包的坏处

​ 闭包：函数内部包裹函数，作用域链得不到释放，造成消耗内存。如果写多了还容易造成内存泄漏

​ 如果用完了之后不用的情况下记得给null清空

​ 外部会改变内部函数变量

 function foo(){
             var count =1;
             return  function bar(){
                console.log( ++count)
             }
         }
         var bar = foo();
         bar(); //2
         bar(); //3
         bar(); //4

作用域

概述：通常来说，一段程序代码在中所用到的名字并不是有效和可用的，而限定这个名字的 可用性的代码范围就是这个名字的 作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

作用域概念

就是代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性更重要的是 减少命名冲突。

全局作用域与局部作用域

js的作用域（es6）之前：全局作用域 、局部作用域

全局作用域

全局作用域：整个script标签 或者是一个单独的js文件

var num = 10;
var num = 30;
console.log(num); // 30

局部作用域

局部作用域（函数作用域）：在函数内部就是局部作用域、这个代码的名字只在函数内部器效果和作用。

var num = 10;
function fn(){
    var num = 20;
    console.log(num);
}
fn(); // 20

变量作用域分类

在JavaScript中，根据作用域的不同，变量可以分为两种：全局变量和局部变量。

全局变量

在全局作用下声明的变量叫做 全局变量（ 在函数外部定义的变量）。

① 全局变量在代码的任何位置都可以使用、在函数内部也可以使用全局变量；

② 在全局作用域下var声明的变量 是全局变量；

③ 特殊情况下，在函数内部不使用var声明的变量也是全局变量（不建议使用）。

注意： 如果在函数内部 没有声明直接赋值的变量也属于全局变量

var num = 10; //num 就是一个全局变量
console.log(num); // 10

function fn(){
    consoel.log(num);
}
fn(); // 10

局部变量

在局部作用域下的变量、或者在函数内部的变量就是 局部变量（在函数内部定义的变量）

①局部变量只能在该函数 内部使用；

② 在函数内部var声明的变量是局部变量；

③ 函数的形参实际上就是局部变量。

**注意：**函数的形参也可以看做是局部变量

console.log(aru);
function fun(aru){
    var num1 = 10; // num1就是局部变量 只能在函数内部使用
    num2 = 20;
}
fun();
// console.log(num1); // undefined
// console.log(num2); // 20

从执行效率来看全局变量和局部变量

① 全局变量只有浏览器关闭的时候才会销毁，比较占内存；

② 局部变量 当我们程序执行完毕就会销毁，比较节约内存资源。

全局变量和局部变量的区别

① **全局变量：**在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存；

② **局部变量：**只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间。

全局变量：在函数外声明的变量，网页上的所有脚本和函数都能访问它
局部变量：在函数内部声明的变量（使用var），只能在函数内部访问它
可以在不同的函数中使用名称相同的局部变量
生存期
局部变量在函数运行以后被删除
全局变量在页面关闭后被删除

js中没有块级作用域

js作用域：全局作用域 局部作用域 现阶段我们js 没有 块级作用域

我们js 也是在es6 的时候新增的块级作用域

块级作用域：{} if{ } 、for{ }

作用域链

概念：内部函数访问外部函数的变量，采用的是链式查找的方式来决定取哪个值、这种结构我们称为 作用域链。 就近原则

① 只要是代码，就至少有一个作用域；

② 写在函数内部的局部作用域；

③ 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；

④ 根据在内部函数可以访问外部函数变量的这种机制，用 链式查找决定哪些数据能被内部函数访问，就称作 作用域链。

//作用域链
var num = 10;

function fn(){ // 外部函数
    var num = 20;
    
    function fun(){ // 内部函数
        console.log(num);  // 20 就近原则 站在目标出发，一层一层的往外查找
    }
    fun();
}
fn(); // 20

沿着作用域链一级一级地搜索的过程。搜索过程始终从作用域链底端开始，然后逐级向上回溯，直到找到为止（如果找不到，通常会报错）

隐式全局变量
指声明变量时没有使用声明变量的关键字

var a1=1; //全局变量
a2=2; //隐式全局变量
delete a1;
delete a2;
console.log(typeof a1);//number
console.log(typeof a2);//undefined

结论：隐式全局变量是可以被删除的，但是全局变量是不能被删除的

切记 不要使用隐式全局变量

预解析

js引擎运行js分为两步： 预解析 代码执行

①预解析 js引擎会把js 里面所有的var 还有 function 提升到当前作用域的最前面

②代码执行 按照书写的顺序从上往下执行

预解析分为 变量预解析（变量提升）和 函数预解析（函数提升）

①变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作

②函数提升 就是把所有的函数声明提升到当前作用域的最前面 不用调用函数

面向对象

对象

现实生活中万物皆对象，对象是 一个具体的事物，看得见摸得着的实物。例如：一本书、一个人、可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象 ”。

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有事物都是对象，例如字符串、数值、数组、函数等。

对象是由 属性和 方法组成的。

① 属性：事物的 特征，在对象中用 属性来表示（常用名词）；

② 方法：事物的 行为，在对象中用 方法来表示（常用动词）。

为什么使用对象

保存一个值时，可以使用 变量，保存多个值（一组值）时，可以使用 数组。

创建对象的三种方式

在JavaScript中，现阶段我们可以采用三种方式创建对象（object）：

① 利用 字面量创建对象；

② 利用 new Object创建对象

③ 利用 构造函数创建对象

利用字面量创建对象

**对象字面量：**就是花括号{ } 里面包含了表达这个具体事物（对象）的属性和方法。

{ }里面采取 键值对的形式表示

① **键：**相当于属性名；

② **值：**相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型、函数类型等）。

1.利用对象字面量创建对象 { }

var obj = {
    uname: '张三疯',
    age: 18,
    sex: '男'，
    sayHi: function(){
        console.log('hi~');
    }
}

① 里面的属性或者方法我们采用键值对的形式 键 属性： 值 属性 ；

②多个属性或者方法中间用逗号隔开的；

③ 方法冒号后面跟的是一个匿名函数。

2.使用对象

①调用对象的属性 我们采取 对象名.属性名 . 我们理解为 的

console.log(obj.uname); // 张三疯

② 调用属性还有一种方法 对象名[‘属性名’]

console.log(obj['age']); // 18

③ 调用对象的方法 sayHi 对象名.方法名

obj.sayHi();

对象的调用

① 对象里面的属性调用：对象.属性名，这个小点，就理解为“的”；

② 对象里面属性的另一种调用方式： 对象[‘属性名’]，注意方括号里面的属性 必须加引号，我们后面会用；

③ 对象里面的方法调用： 对象.方法名()，注意这个方法名字后面一定加括号。

变量、属性、函数、方法的区别

变量和属性的相同点：他们都是用来存储数据的

var num = 10;
var obj = {
    age: 18;
}
consoel.log(obj.age);
// console.log(age); //undefined

变量 单独声明并赋值 使用的时候直接写变量名 单独存在；

属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性。

函数和方法的不同点 都是实现某种功能 做某件事

函数是单独声明 并且调用的 函数名() 单独存在的；

方法 在对象里面 调用的时候 对象. 方法()。

变量、属性、函数、方法总结

① **变量：**单独声明赋值，单独存在；

② **属性：**对象里面的变量称为属性，不需要声明，用来描述该对象的特征；

③ **函数：**单独存在的，通过“函数名()” 的方法就可以调用；

④ **方法：**对象里面的函数称为方法，方法不需要声明，使用“对象.方法()”的方式就可以调用，方法用来描述该对象的行为和功能。

遍历对象

//遍历对象
var obj = {
    name: 'pink老师',
    age: 18,
    sex: '男',
    fn: function(){
        
    }
}
//console.log(obj.name);
//console.log(obj.age);
//console.log(obj.sex);
//for in 遍历我们的对象
//for(变量 in 对象){
//}
for(var k in obj){
    console.log(k); // k 变量 输出 得到的是 属性名
    console.log(obj[k]); // obj[k] 得到的是 属性值
}
//我们使用 for in 里面的变量 我们喜欢写 k 或者 key 

利用 new Object 创建对象

var obj = new Object(); // 创建了一个空的对象
obj.uname = '张三疯';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function(){
    console.log('hi~');
}
// ① 我们是利用 等号 = 赋值的方法 添加对象的属性和方法
// ② 每个属性和方法之间用 分号结束
console.log(obj.uname);
console.log(obj['sex']);
obj.sayHi();

构造函数

之前的两种创建对象的方式一次只能创建一个对象，我们一次创建一个对象，里面很多的属性和方法是大量相同的，我们只能复制，

因此我们可以利用函数的方法，重复这些相同的代码，我们就把这个函数称为 构造函数。

又因为这个函数不一样，里面封装的不是普通代码，而是 对象；

**构造函数：**是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。我们可以把我们对象里面一些相同的属性和方法抽象出来封装到函数里面。

this

指向调用当前函数的对象

new的作用

1.new会在内存中创建一个新的空对象

2.new会让this指向这个新的对象

3.执行构造函数里面的代码 目的：给这个新对象加属性和方法

4.new会返回这个新对象（所以构造函数里面不需要return）

继承方式：

①原型链继承：

Student.prototype = new Person();
Student.prototype.constructor = Student;

②直接继承

Student.prototype = Person.prototype;
Student.prototype.constructor = Student;   

③利用空对象

var F = function () { }
F.prototype = Person.prototype;
Student.prototype = new F();

④apply()

function Student(foot, head) {
    Parent.apply(this, [foot, head]);
}

⑤伪经典继承

function Student() {
    Person.call(this);
}
Student.prototype = new Person();
Student.prototype.constructor = Student;

⑥拷贝继承

function extend(Chid, Parent) {
     var person =  Parent.prototype;
     var student = Chid.prototype;
     for (var k in person) {
         student[k] = person[k];
     }
}
extend(Student, Person);

利用构造函数创建对象

语法：

function 构造函数名(){
    this.属性 = 值;
    this.方法 = function(){ }
}
new 构造函数名();

function Star(uname,age,sex){
    this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang){
        console.log(sang);
    }
}
// var 了一个 ldh  this 就指向 ldh
var ldh = new Star('刘德华',18,'男'); // 调用函数返回的是一个对象
// consoel.log(typeof ldh);
console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨'); //把值传给了 sang
// var 了一个 zxy  this 就指向 zxy
var zxy = new Star('张学友',19,'男');
console.log(zxy.name);
console.log(zxy.age);
zxy.sing('李香兰');

1.构造函数名字首字母要大写

2.我们构造函数不需要return，就可以返回结果

3.我们调用构造函数 必须使用new

4.我们只要new Star() 调用函数就创建一个对象 ldh{ }

用混合的方式构建对象

构造函数+prototype
构造函数：属性
原型prototype：方法

function  User(name,pass){
              this.name = name;
              this.pass = pass;
          }

          function Person(){

          }

          Person.prototype = User.prototype.show = function(){
              document.write(this.name)
          }
          var  user = new User("张三",123456)  
          // new  做的事情就是将函数进行实例化
          console.log(user)


          var  arr = new  Array();

          console.log(arr)

原型链继承

如果替换了prototype对象：o.prototype = {};
要为新的prototype对象加上constructor属性，并将这个属性指回原来的构造函数：o.prototype.constructor = o;

示例：

 function  Person(){
               this.foot = 2;
               this.head = 1;

          }

          function Student(name,no){
              this.name = name;
              this.no = no;
          }
          // constructor 构造函数的构造器
          // console.log(new Person())
          Student.prototype = new  Person();
          Student.prototype.constructor = Student;

          var  student = new  Student("张三",'121313')



          console.log(student)

直接修改prototype

function  Person(){

          }
          Person.prototype.head = 1;
          Person.prototype.foot = 2;
          function  Student(name,no){
              this.name = name;
              this.no = no;
          }
          Student.prototype =  Person.prototype;
          Student.prototype.constructor = Student;
          var student = new Student("张三","12212")
          console.log(student)

          Student.prototype.eye = 2;

          var person =  new Person();
          console.log(person)

优点：效率比较高（不用执行和建立Person的实例了）
缺点：Student.prototype和Person.prototype现在指向了同一个对象，任何对Student.prototype的修改，都会反映到Person.prototype

利用空对象作为中介

function Person(){}
          Person.prototype.head = 1;
          Person.prototype.foot = 2;



          function  Student(name,no){
             this.name = name;
             this.no = no;
          }
          
          var  F =  function(){}
          F.prototype = Person.prototype;
          Student.prototype = new F();
          Student.prototype.eye = 2;
          Student.prototype.constructor = Student;

          var  student =  new Student("张三",'12');
          console.log(student);
          console.log(student.head)

利用空对象作为中介

空对象，几乎不占内存
修改Student的prototype对象，不会影响到Person的prototype对象

示例：

function Person(){}
        Person.prototype.head = 1;
        Person.prototype.foot = 2;

        function Student(name,no){
            this.name = name;
            this.no = no;
        }

        function  extend(Child,Parent){
             var  F =  function(){};
             F.prototype = Parent.prototype;
             Child.prototype = new F();
             Child.prototype.constructor = Child;
        }

        extend(Student,Person);

        var  student = new Student("张三",1212);
        console.log(student)

继承实例属性 实例方法

function Person(head,foot){
              this.head = head;
              this.foot = foot;
          }
          function  Student(name,age,head,foot){
              // Person.call(this,head,foot)
              Person.apply(this,[head,foot]);
              this.name = name;
              this.age = age;
          }
          var  student = new  Student("张三",16,2,1);
          console.log(student)

组合继承

function Person(){
             this.head = 1;
             this.foot = 2;
         }
         Person.prototype.show = function(){
             document.write(this.head)
         }
         function Student(name,age){
             this.name = name;
             this.age = age;
             Person.call(this)
         }
         Student.prototype = new Person();
         Student.prototype.constructor =Student;

         var  student = new  Student("张三",'212');

         student.show()

拷贝继承

把父对象的所有属性和方法，拷贝进子对象
将父对象的prototype对象中的属性，一一拷贝给Child对象的prototype对象

 function  Person(){
               this.head = 1;
               this.foot = 2;
          }
          Person.prototype.show= function(){
               document.write("有"+this.head+"个头"+this.foot+"只脚.");
          }
          function Student(name,age){
              this.name = name;
              this.age = age;
              Person.call(this);
          }

          function  extend(Person,Child){
              var  person =  Person.prototype;
              var  child  = Child.prototype;

              for(var name  in person){
                  child[name]= person[name]
              }
          }
          extend(Person,Student);
          var  student = new  Student("张三",16);
          student.show()
          console.log(student)

js 内置对象

概念：JavaScript中的对象分3种：自定义对象、内置对象、浏览器对象；

内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）。

内置对象最大的优点就是帮助我们快速开发，

JavaScript提供了多个内置对象：Math、Date、Array、String等

数组 array的 属性和方法

时间 date 的方法

Aarry() 对象

声明数组

两种声明数组的方式

①利用new 对象方式 创建数组

var arr = new Array();  //创建了一个空数组

var arr2 = new Array(2); // 这个 2 表示数组的长度为2 里面有两个空的数组元素
var arr2 = new Array(2,3); //等价于[2,3] 这样写表示 里面有2个数组元素 是 2 和 3

②利用数组字面量创建数组

var arr = [];   //创建了一个空的数组

var arr2 = [1,2,3];

数组字面量是方括号[ ]

声明数组并赋值称为数组的初始化

检测是否为数组

①instanceof 运算符 可以用来检测是否为数组

var arr =[];
console.log(arr instanceof Array);   //true

var obj = {};
console.log(obj instanceof Aarry);   //false

②Array.isArray(参数); H5新增的方法 ie9以上版本支持

var arr =[];
console.log(Array.isArray(arr));   //true

var obj = {};
console.log(Array.isArray(obj));   //false

注意：数组里面的数据一定用逗号分隔

数组里面的数据 比如1，2 我们称为数组元素

具有相同数据类型的一个或多个值的集合

如果以对象的方式声明 传入一个number类型的数字，代表的是可以存放多少数组 也就是lenght 多少

如果是存放多个的时候 代表的就是数组

var week= new Array ("星期日","星期一"……);

array 也是一种数据类型 但是是引用数组类型

数组元素类型

数组中可以存放任意类型的数据，例如字符串，数字，布尔值

var = [1,2,'pink',true];

数组的索引

索引（下标）：用来访问数组元素的序号（数组下标从 0 开始）。

var arr = ['小白','小黑','大黄','瑞奇'];
    // 索引号：0     1     2      3

数组可以通过索引来 访问、设置、修改对应的数组元素，我们可以通过 “数组名[索引]” 的形式来获取数组中的元素（访问就是得到的意思）

获取数组元素

格式： 数组名[索引号] 索引号从0开始

数组属性和方法

**属性 ：**length

数组名.length : 数组的长度是数组的元素个数 不要和索引号混淆

arr.length 动态监测数组元素的个数

方法： push() 末尾添加 、 join() 数组转化字符串、 pop() 末尾删除 、 unshift() 首个添加、 shift() 第一个删除 、 sort() 排序、 concat() 合并数组 、 slice() 截取 、 splice() 数组更新、 indexOf() 从开头查询 查询到即结束 、 lastIndexOf() 从末尾查询 查询到即结束、 reverse() 数组倒序

1.join() （数组转字符串）

数组转字符串，方法只接收一个参数：即默认为逗号分隔符。

var arr=[1,2,3,4];
	console.log(arr.join()); //1,2,3,4
	console.log(arr.join(":")); //1:2:3:4
	console.log(arr); //[1,2,3,4],原数组不变

2.push()和pop()（数组尾操作）

push()：方法可向数组的末尾添加一个或多个元素，会改变原数组 并返回新的长度。

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

var arr=[1,2,3,4];
	//push
	var push_arr=arr.push("Tom","Sun");
	console.log(arr); //[1,2,3,4,"Tom","Sun"];
	console.log(push_arr); // 6
	//pop
	var pop_arr=arr.pop();
	console.log(arr); //[1,2,3,4,"Tom"];
	console.log(pop_arr); // Sun	

3.shift() 和 unshift()（数组首操作）

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

unshift()：方法可向数组的开头添加一个或更多元素，会改变原数组 并返回新的长度。

var arr=[1,2,3,4];
	//shift
	var shift_arr=arr.shift();
	console.log(arr); // [2, 3, 4]
	console.log(shift_arr); // 1
	//unshift
	var unshift_arr=arr.unshift("Tom");
	console.log(arr); // ["Tom", 2, 3, 4]
	console.log(unshift_arr); // 4

4.sort()（排序）

方法用于对数组的元素进行排序。

var arr=[1,100,5,20];
	console.log(arr.sort()); // [1, 100, 20, 5]
	console.log(arr); // [1, 100, 20, 5] (原数组改变)

请注意，上面的代码没有按照数值的大小对数字进行排序，是按照字符编码的顺序进行排序，要实现这一点，就必须使用一个排序函数：

升序：

var arr=[1,100,5,20];
	function sortNumber(a,b){return a - b};
	console.log(arr.sort(sortNumber)); //[1, 5, 20, 100]
	console.log(arr); //[1, 5, 20, 100] (原数组改变)

降序：

var arr=[1,100,5,20];
	function sortNumber(a,b){return b - a};
	console.log(arr.sort(sortNumber)); // [100, 20, 5, 1]
	console.log(arr); // [100, 20, 5, 1] (原数组改变)

5.reverse() （反转数组）

方法用于颠倒数组中元素的顺序。

var arr=[12,25,5,20];
	console.log(arr.reverse()); // [20, 5, 25, 12]
	console.log(arr); // [20, 5, 25, 12] (原数组改变)

6.concat() （连接两个或多个数组）

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。

var arr=[1,2,3,4];
	var arr2=[11,12,13] 
	var arrCopy = arr.concat(arr2);
	console.log(arr.concat()); // [1, 2, 3, 4] (复制数组)
	console.log(arrCopy); // [1, 2, 3, 4, 11, 12, 13]
	console.log(arr); // [1, 2, 3, 4] (原数组未改变)

7.slice()（数组截取）

arr.slice(start , end);

start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值：返回一个新的数组，包含从 start 到 end （不包括该元素 包头不包尾）的 arr 中的元素。

var arr = [1,4,6,8,12];
	var arrCopy1 = arr.slice(1);	
	var arrCopy2 = arr.slice(0,4);	
	var arrCopy3 = arr.slice(1,-2);
	var arrCopy4 = arr.slice(-5,4);
	var arrCopy5 = arr.slice(-4,-1)
	console.log(arrCopy1);  // [4, 6, 8, 12]
	console.log(arrCopy2);  // [1, 4, 6, 8] 
	console.log(arrCopy3);  // [4, 6] 
	console.log(arrCopy4);  // [1, 4, 6, 8]
	console.log(arrCopy5);  // [4, 6, 8]
	console.log(arr);  // [1, 4, 6, 8, 12] (原数组未改变) 

8.splice() （数组更新）

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。（该方法会改变原始数组）

arr.splice(index , howmany , item1,…,itemX)

index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1, …, itemX：可选。向数组添加的新项目。

返回值：含有被删除的元素的数组，若没有删除元素则返回一个空数组。

<script>
	var arr = ["张三","李四","王五","小明","小红"];
	/**************删除"王五"****************/
	var arrReplace1 = arr.splice(2,1);	
	console.log(arrReplace1);  // ["王五"] 
	console.log(arr);  // ["张三", "李四", "小明", "小红"] (原数组改变)
	//删除多个
	var arrReplace2 = arr.splice(1,2);	
	console.log(arrReplace2);  //  ["李四", "小明"] 
	console.log(arr);  // ["张三", "小红"]
	/**************添加"小刚"****************/
	var arrReplace3 = arr.splice(1,0,"小刚");
	console.log(arrReplace3);  // [] (没有删除元素，所以返回的是空数组)
	console.log(arr);  // ["张三", "小刚", "小红"]
	//添加多个
	var arrReplace4 = arr.splice(3,0,"刘一","陈二","赵六");
	console.log(arrReplace4);  // []
	console.log(arr);  // ["张三", "小刚", "小红", "刘一", "陈二", "赵六"]
	/**************"王五"替换"小刚"****************/
	var arrReplace5 = arr.splice(1,1,"王五");
	console.log(arrReplace5);  // ["小刚"]
	console.log(arr);  // ["张三", "王五", "小红", "刘一", "陈二", "赵六"]
	//替换多个
	var arrReplace6 = arr.splice(1,4,"李四");
	console.log(arrReplace6);  // ["王五", "小红", "刘一", "陈二"]
	console.log(arr);  // ["张三", "李四", "赵六"]
script>

9. 2个索引方法：indexOf()和 lastIndexOf()

两个方法都返回要查找的项在数组中首次出现的位置，在没找到的情况下返回-1

indexOf()--------array.indexOf(item,start) （从数组的开头（位置 0）开始向后查找）

item： 必须。查找的元素。

start：可选的整数参数。规定在数组中开始检索的位置。如省略该参数，则将从array[0]开始检索。

lastIndexOf()--------array.lastIndexOf(item,start) （从数组的末尾开始向前查找）

item： 必须。查找的元素。

start：可选的整数参数。规定在数组中开始检索的位置。如省略该参数，则将从 array[array.length-1]开始检索。

<script>
	var arr = [1,4,7,10,7,18,7,26];
	console.log(arr.indexOf(7));        // 2
	console.log(arr.lastIndexOf(7));    // 6
	console.log(arr.indexOf(7,4));      // 4
	console.log(arr.lastIndexOf(7,2));  // 2
	console.log(arr.indexOf(5));        // -1		
script>

数组排重

 var arr=[5,4,26,9,4,8,5,14];
        var newarr = [];
        for (var i = 0; i < arr.length; i++) {
            if(newarr.indexOf(arr[i])===-1){
                newarr.push(arr[i])
            }
        }
        console.log(newarr)

冒泡排序

// 冒泡排序
          var  arr =  [5,14,58,78,85,5,10,50,47];
          // 外层执行一次
          for (var i = 0; i < arr.length; i++) {
                // 里层执行一遍
                for(var j = 0; j<arr.length-i-1; j++){
                    if(arr[j]>arr[j+1]){
                        // 先把前面的数进行保存
                        var  temp = arr[j];
                        // 再把前面的位置替换成小的那个数
                        arr[j] = arr[j+1];
                        // 后面的位置换成大的数
                        arr[j+1] = temp;
                    } 
                }
          };

          console.log(arr)

Date() 对象

Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象

// var   date =  new  Date("4,5,2011,5:6:3");

 var   date =  new  Date("2021-10-05,20:52:6")

使用Date()

如果没有参数 返回当前系统的当前时间

①获取当前时间必须实例化

var date = new Date();
console.log(date);

②Date() 构造函数的参数

如果括号里面有时间，就返回参数里面的时间。

例如：日期格式字符串为 ‘2019-5-1’ , 可以写成 new Date(‘2019-5-1’)或者 new Date(‘2019/5/1’)

参数常用写法

数字型 2019，10，01

var date = new Date(2019,10,1);
console.log(date);  //输入的是10月 返回的是 11月

字符串型 ‘2019-10-1 8:8:8’

var date2 = new Date('2019-10-1 8:8:8');
console.log(date2); //输入的是10月 返回的也是10月

日期格式化

方法	说 明
getDate ()	返回 Date 对象的一个月中的每一天，值介于 1 ～ 31 之间
getDay ()	返回 Date 对象的星期中的每一天，值介于 0 ～ 6 之间（注： 0为周日 ）
getHours ()	返回 Date 对象的小时数，值介于 0 ～ 23 之间
getMinutes ()	返回 Date 对象的分钟数，值介于 0 ～ 59 之间
getSeconds ()	返回 Date 对象的秒数，值介于 0 ～ 59 之间
getMonth()	返回 Date 对象的月份，值介于 0 ～ 11 之间（注： 0为一月份 ）
getFullYear()	返回 Date 对象的年份，值为 4 位数

返回的月份小1个月 记得月份+1

示例：

var  date =  new  Date();
          var  mon = date.getMonth();
          var  day = date.getDate()+5;

          var weekDay = new Date(2022,mon,day);

          var  week = weekDay.getDay();

          console.log(week);

          switch(week){
             case 1:
                alert("星期一");
                break;
             case 2:
                alert("星期二");
                break;
             case 3:
                alert("星期三");
                break;
             case 4:
                alert("星期四");
                break;
             case 5:
                alert("星期五");
                break;
             case 6:
                alert("星期六");
                break;
             case 0:
                alert("星期日");
                break;
              default:
                alert("输入不正确")
          }

深 浅拷贝

// js  分为两种数据类型 

// 1.   基础数据类型  number  boolean   null  undefined  string

// 2.   引用数据类型  array

  浅拷贝  当b发生改变 或者a发生改变  他们之间可以相互看的见  用的是同一个地址  相互之间会受到影响 
  
     var  a = [1, 2, 3];
	 var  b = a;
  
  深拷贝  ：  重新在堆区开辟一个新的空间出来   a  和 b 之间相互不受影响 深拷贝
  
 var b  = JSON.parse(JSON.stringify(a));

String() 对象

String 对象用于处理文本（字符串）

语法

var 字符串对象=new String(参数)
参数 是要存储在 String 对象中或转换成原始字符串的值

var str=new String(“kgc”);

String常用方法和属性

类别	名称	说明
属性	length	字符串的长度
方法	charAt()	返回在指定位置的字符（注：字符串中第一个字符的下标是0）
	concat()	连接字符串
	replace()	用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
	split()	把一个字符串分割成字符串数组
	indexOf()	返回某个指定的字符串值在字符串中首次出现的位置
	lastIndexOf()	返回一个指定的字符串值最后出现的位置
	match()	可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
	toLowerCase()	把字符串转换为小写
	toUpperCase()	把字符串转换为大写
	substr()	从起始索引号提取字符串中指定数目的字符（不建议使用） (索引号,数目几个)
	substring()	提取字符串中两个指定的索引号之间的字符 (索引号,索引号)
	slice()	提取字符串的某个部分，并以新的字符串返回被提取的部分

charAt()

根据数据位置返回字符 (index:在这里指的是索引号)

①charAt(index) 根据位置返回字符

var str = 'andy';
console.log(str.charAt(3));   // y

②charCodeAt(index) 返回相应索引号的字符ASCII值 目的： 判断用户按下了哪个键

var str = 'andy';
console.log(str.charCodeAt(0));  //  97

③ str[index] H5新增

var str = 'andy';
console.log(str[0]);  // a

有一个对象 来判断是否有该属性 对象[‘属性名’]

var o = {
    age: 18;
}
if(o['age']){
    console.log('里面有该属性');
}else{
    console.log('没有该属性');    
    }

实例：

判断一个字符串"abcoefoxyozzopp" 中出现次数最多的字符，并统计其次数。

核心算法：利用charAt() 遍历这个字符串

把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就+1

遍历对象，得到最大值和该字符

var str ="abcoefoxyozzopp";
var o = {};
for(var i = 0;i<str.length;i++){
    var chars = str.charAt(i); //chars 是 字符串的每一个字符
    if(o[chars]){ // o[chars] 得到的是属性值
        o[chars]++;
    }else{
        o[chars] = 1;
    }
}
consoel.log(o);
// 2.遍历对象
var max = 0;
var ch = '';
for(var k in o){
    // k 得到的是 属性名
    // o[k] 得到的是属性值
    if(o[k]>max){
        max = o[k];
        ch =k;
    }
}//循环完max 就是最大值
console.log(max); 
console.log('最多的字符就是'+ch);

concat()

var str ='andy';
console.log(str.concat('red'));

substr()

substr(‘截取的起始位置’,‘截取几个字符’);

var str1 ='改革春风吹满地';
console.log(str1.substr(2,2)); // 春风
// 第一个2 是索引号的2 就是从第几个开始，第二个2 是取几个字符

replace()

替换字符 replace(‘被替换的字符’,‘替换为的字符’); 它只会替换第一个字符

var str = 'andyandy';
console.log(str.replace('a','b')); //  bndyandy

实例： 把字符串"abcoefoxyozzopp" 里面所有的 o 替换为 *

var str1 = "abcoefoxyozzopp";
while(str1.indexOf('o') != -1){
    str1 = str1.replace('o','*');
} // while 再判断str1 里面有没有 o 直到没有o停止
console.log(str1)

split()

字符转换为数组 split(‘分隔符’);

var str2 = 'red,pink,blue';
console.log(str2.split(','));
var str3 = 'red&pink&blue';
console.log(str3.split('&'));

Math()

概念

① Math数学对象 不是一个构造函数，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可。

② Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值、取整、最大值等）可以使用Math 中的成员。

属性：

PI 圆周率

console.log(Math.PI);  // 一个属性 圆周率

方法：

Math.floor();   //向下取整
Math.ceil();  // 向上取整
Math.round();  //四舍五入版 就近取整     ！注意： -3.5  结果是 -3
Math.abs();  // 绝对值
Math.max();  // 最大值
Math.min();  // 最小值

floor()向下取整

floor 地板 向下取整 往小了取值

console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1

ceil()向上取整

ceil 天花板 向上取整 往大了取值

console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2

round()四舍五入

console.log(Math.round(1.1));  // 1
conosle.log(Math.round(1.5))； // 2 
console.log(Math.round(-1.1));  // -1
console.log(Math.round(-1.5));  // -1  往大的那边取 -1 > -2  所以结果为-1

abs() 绝对值

console.log(Math.abs(1));  // 1
console.log(Math.abs(-1));  // 1
console.log(Math.abs('-1'));  // 隐式转换 会把字符串型 -1 转换为数字型
console.log(Math.abs('pink'));  // NaN

**max() ** 最大值

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

语法：

console.log(Math.max(1,99,3));  // 99
console.log(Math.max(-1,-10));  // -1

返回值：返回给定的一组数字中的最大值。如果给定的参数中至少有一个参数无法被转换成数字，则返回NaN。

如果没有参数，则结果为 -Infinity；如果有任一参数不能被转换为数值，则结果为NaN。

console.log(Math.max()); //  -Infinity
console.log(Math.max(1,99,'pink')); // NaN

利用对象封装自己的数学对象 里面有PI最大值和最小值

var myMath ={
    PI:3.141592653,
    max: function() {
        var max = arguments[0];
        for(var i = 1;i < arguments.length; i++) {
            if (argumrnts[i] > max) {
                max = arguments[i];
            }
        }
        return max;
    },
    max: function() {
        var min = arguments[0];
        for(var i = 1;i < arguments.length; i++) {
            if (argumrnts[i] < min) {
                min = arguments[i];
            }
        }
        return min;
    }
}
console.log(maMath.PI);  // 3.141592653
console.log(myMath.max(1,5,9));  // 9
console.log(myMath.min(1,5,9));  // 1

random() 随机数

① 返回一个浮点，随机数在范围[0,1)，也就是说，从0（包括0）往上，但是不包括1（排除1） 0 =< x < 1 。

② random() 方法里面不跟参数；

得到一个两数之间的随机数，包括两个数在内

function fc(min,max){
    min = Math.ceil(min); //向上取整
    max = Math.floor(max); // 向下取整
    return Math.floor(Math.random()*(max - min + 1)) + min;
}
fc(小的数,大的数);

随机点名

var arr = ['老大','小二','张三','李四','王五','老六'];
function getRandom(min,max){
    return Math.floor(Math,random() * (max - min + 1)) + min ;
}
console.log(arr[getRandom(0,arr.length-1)]);

简单数据类型和复杂数据类型

简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

① 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型

string , number , boolean , undefined , null

唯独 null 返回的是一个空的对象 object 属于bug 如果有个变量我们以后打算存储为对象，暂时没想好放啥，这时候就给 null

② 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用）因此叫做引用数据类型

通过 new 关键字创建的对象（系统对象、自定义对象），如Object、Array 、Date等

堆和栈

堆栈空间分配区别：

① 栈（操作系统） ：由操作系统分配释放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈； 简单数据类型存放到栈里面

②堆（操作系统）：存储复杂类型（对象）、一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。 复杂数据类型存放到堆里面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O3WjTKgv-1657280263968)(C:\Users\Timi\AppData\Roaming\Typora\typora-user-images\image-20220410163741581.png)]

注意： JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式，便于将来学习其他语言。

简单类型的内存分配

① 值类型（简单数据类型）：string , number , boolean , undefined , null

② 值类型变量的数据直接存放在变量（栈空间）中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KniAfyc6-1657280263969)(C:\Users\Timi\AppData\Roaming\Typora\typora-user-images\image-20220410164131254.png)]

复杂类型的内存分配

① 引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象）、如Object、Array、Date等

② 引用类型变量（栈空间）里面存放的是地址，真正的对象实例存放在堆空间中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CtazG0EK-1657280263970)(C:\Users\Timi\AppData\Roaming\Typora\typora-user-images\image-20220410164654129.png)]

简单类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实时把变量在栈空间里面的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

function fn(a){
    a++;
    console.log(a);
}
var x =  10;
fn(x);  // 11
console.log(x);  // 10

Web APIs 和 JS

JS基础学习 ECMAScript 基础语法为后面做铺垫，Web APIs是 JS 的应用，大量使用JS 基础语法做交互效果。

**API：**简单的来说，就是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

Web API： 是浏览器提供的一套操作 浏览器功能和 页面元素的 API(BOM 和 DOM)。

比如：让浏览器弹出警示框，直接使用alert(‘弹出’)

总结：

① API 是我们程序员提供的一个接口，帮助我们实现某种功能，会使用就可以了；

② Web API 主要针对与浏览器提供的接口，主要针对于浏览器做交互效果。

③ Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）。

JS组成

**Web APIs : ** BOM 浏览器对象模型、 DOM 文档对象模型

JavaScript基础： ECMAscript 语法

ECMAscript 语法

CMAScript是一种语法标准
语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象
编码遵循ECMAScript标准

BOM

BOM：Browser Object Model（浏览器对象模型）
提供了独立于内容与浏览器窗口进行交互的对象

DOM

DOM：Document Object Model（文档对象模型）
是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档

window

警告框	window.alert()	用于确保用户可以得到某些信息
确认框	window.confirm()	用于验证是否接受用户操作
提示框	window.prompt()	用于提示用户在进入页面前输入某个值

window.location

用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

location.href	返回当前页面的 URL 或者可以重定向一个url地址
location.pathname	返回 URL 的路径名----> 当前页面所在的位置
location.assign()	加载新的文档

示例：

<a href="http://www.baidu.com">百度一下a>
    <button onclick="asstxt()">点击加载button>
    <button onclick="topath()">点击跳转button>
    <script type="text/javascript">
         function topath(){
            window.location.href="http://www.baidu.com"
         }

         var  url =  window.location.href;

         console.log(url)

         var pathname = window.location.pathname;

         console.log(pathname)

         function asstxt(){
             window.location.assign("index.txt")
         }
    script>

Dom 文档对象模型

DOM：Document Object Model（文档对象模型）
是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档。是W3C组织推荐的处理可拓展标记语言（HTML或者XML）的标准 程序接口。

通过DOM接口可以改变网页的内容、结构和样式。

**文档：**一个页面就是一个文档，DOM中使用document表示。

**元素：**页面中的所有标签都是元素，DOM中使用element表示。

**节点：**网页中的所有内容都是节点（标签、属性、文本、注释等）、DOM中使用node表示，也叫DOM树。

获取元素

① 根据ID 获取

② 根据标签名获取

③ 根据HTML5 新增的方法获取

④ 特殊元素获取

根据id获取 dom

使用 document.getElementById(); 获取带有id的元素对象

var timer = document.getElementById('item');
console.log(timer);
//console.dir() 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
var app =  document.getElementById("app"); 
        app.onclick = function(){
            alert("点击了div")
       }

根据class类名获取 dom

根据类名获取 获取过来的是伪数组 要查找每一个元素 应该加下标

document.getElementsByClassName()

var item =  document.getElementsByClassName('item');

        for (var i = 0; i < item.length; i++) {
            item[i].onclick = function(){
                alert("点击")
            }
        };

根据标签获取

var li = document.getElementsByTagName(“li”);

 var  li =  document.getElementsByTagName("li");
        for (var i = 0; i < li.length; i++) {
            li[i].onclick = function(){
                 alert("点击li")
            }
        };

querySelector(“”);

var box = document.querySelector(“.box”); 可以通过 id class tag 来进行获取 只能获取单一个

**注意：**返回相同类名的第一个元素 （也可以写标签名）

querySelectorAll(“”);

获取多个

**注意：**返回相同类名的所有元素 对象集合 （也可以写标签名）

var item = document.querySelectorAll(“.item”);

var box =  document.querySelector(".box");
         console.log(box)

         var item = document.querySelectorAll(".item");

         for (var i = 0; i < item.length; i++) {
             item[i].onclick=  function(){
                alert("点击")
             }
         };

获取body元素

var bodyEle = document.body;
console.log(body); // 返回body元素对象

获取html元素

var htmlEle = document.documentElement;
console.log(html);  // 返回html元素对象

操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性。

innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉(不识别html标签会以文本形式展示)

element.innerText

innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行(识别html标签)

element.innerHTML

document.write()

document.write()	改变 HTML 输出流
对象.innerHTML=新的 HTML	改变 HTML 内容
对象.attribute=新属性值	改变 HTML 属性

<button id='ldh'>刘德华button>
<button id='zxy'>张学友button>
<img src='../images/ldh.jpg' alt='' title='刘德华' />
<script>
var ldh = document.querySelector('#ldh');
var zxy = document.querySelector('#zxy');
var img = document.querySelector('img');
zxy.onclick = function() {
    img.src = '../images/zxy.jpg';
    img.title = '张学友';
}
ldh.onclick = function() {
    img.src = '../images/ldh.jpg';
    img.title = '刘德华';
}
script>

innerText 改变纯文本

表单属性设置

//获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
//2.注册事件 处理程序
btn.onclick = function(){
    // input.innerHTML = '被点击了'; 这个是 普通盒子 比如 div 标签里面的内容
    // 表单里面的值 文字内如是通过value 来修改的
    input.value = '被点击了';
    //如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
    //btn.disabled = true;
    this.disabled = true;
    //this 指向的是事件函数的调用者  btn是事件源
}

遍历精灵图背景位置

//1.获取元素 所有的小li
var lis = document.querySelectorAll('li');
for(var i = 0; i < lis.length; i++){
    //让索引号 乘以 44 就是 每个li 的背景坐标 y 就是我们的y坐标
    var y = i * 44;
    lis[i].style.bakgroundPosition = '0 -'+y+'px';
}

HTML DOM - 改变 CSS

语法	说明
对象.style.property=新样式	通过id属性获取对象

var  img = document.getElementById("img");

        img.style.width = "400px";

示例：

<div id="app">div>
    <script type="text/javascript">
       var  arr = ['研发编程',"虚拟现实",'研发编程',"虚拟现实",'研发编程',"虚拟现实",'研发编程',"虚拟现实"]
       var  str = "
"
                for (var i = 0; i < arr.length; i++) {
                    str+= "
"+arr[i]+"
"
                };
            str += "
"
            app.innerHTML = str;
            var  ul = document.getElementsByTagName("ul")[0];

            ul.style.width="200px";
            ul.style.backgroundColor = "#ccc";
            var  li = document.getElementsByTagName("li");

            for (var i = 0; i < li.length; i++) {
                li[i].style.lineHeight = "48px";
                li[i].style.paddingLeft = "20px";
            };
    script>

计时器

setInterval(“调用的函数”,间隔的毫秒数)

clearInterval(setInterval()返回的ID值) 用来清除setInterval

		 var num = 10;
         var btn = document.getElementById("btn");
         var close = document.getElementById("close");
         var text = document.getElementById("text");

         var status=null;
         btn.onclick = function(){
             status = setInterval(function(){
                if(num===0){
                    clearInterval(status);
                    alert("倒计时停止")
                    return 
                }
                num--;
                text.innerHTML = num;
             },1000)
         }
         close.onclick = function(){
             clearInterval(status)
        }

this 指向事件源

如果谁受到点击 this就指向谁

选项卡效果

var  item =  document.getElementsByClassName("item");
        var  list =  document.getElementsByClassName("list");
        for (var i = 0; i < item.length; i++) {
            // 每循环一次 先给每一个dom元素上保存一个自定义的下标
            item[i].index = i;
            item[i].onclick = function(){
                // 先把全部的元素变为黑色
                for (var j = 0; j < item.length; j++) {
                     item[j].style.backgroundColor = "#222";
                     list[j].style.display = "none";
                };
                // 再把选中的那个元素变为红色  ----》this 
                // 新的关键字 如果谁是事件源this就指向谁
                this.style.backgroundColor = "red";
                list[this.index].style.display ="block";
            }
        };

节点

节点属性

parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

var items =  document.getElementsByClassName("items")[0];
var four  = document.getElementsByClassName("four")[0];
var  next = four.nextSibling;
var  dom =next.nextSibling;
     console.log(dom.previousSibling);
          // 通过当前节点去查找父节点
          var parent =  items.parentNode; 
          console.log(parent)

          // 这个childNodes 会连续将空格算在内 
          function getChild(dom){
              var child = dom.childNodes;
              var arr = [];
              for (var i = 0; i < child.length; i++) {
                   // console.log(child[i].nodeType,child[i])
                   if(child[i].nodeType===1){
                       arr.push(child[i])
                   }
              };
              return arr
          }
          var dom =  getChild(items);

Element属性

firstElementChild	返回节点的第一个子节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

 var  four = document.getElementsByClassName("four")[0];
        var  items = document.getElementsByClassName("items")[0];

        // 直接找element属性
        var  next= four.nextElementSibling || four.nextSibling;
        var  first = items.firstElementChild || items.firstChild;

        console.log(first);
        console.log(next)

节点信息

nodeName：节点名称
nodeValue：节点值
nodeType：节点类型

nodeName 返回元素节点的字符 为大写

nodeValue

1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值

nodeType：节点类型

元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

自定义属性

setAttribute 设置属性

自定义设置属性 什么都可以设置

getAttribute 获取属性

获取属性值

removeAttribute 移除属性

删除指定的属性

示例：

创建节点

document.createElement(''div “”);

A.appendChild(B) 将B节点插入A节点的末尾

父级.insetBefore(new,old) 将new插入到old之前

// 创建节点
         var  div = document.createElement("div");
         div.innerHTML="这是第一个盒子"
         // 插入节点
         var body  = document.getElementsByTagName("body")[0];
         // 把B节点插入A 节点的末尾  A是B的父级
         body.appendChild(div);

         //把A 节点插入B 节点之前
         var divs =  document.createElement("div");
         divs.innerHTML ="这是第二个盒子"
         body.insertBefore(divs, div)

定时器

setTimeout --------》 setInterval

setTimeout 只执行一次 是在定义好的时间到达之后马上执行

clearTimeout 在时间未到达之前 阻止setTimeout往下执行

示例：

// 只执行一次
          var  timer =setTimeout(function(){
               console.log(12212)
          },2000)

          clearTimeout(timer)

使用setTimeout 实现setInterval

 function  newInterval(func, delay){
             function inner(){
                  // 走了这里的回调函数
                  func();  
                  // 发现这里的setTimeout
                  // 1000之后立即执行inner
                  setTimeout(inner, delay)
             };

             // 第一 走的是这里  1000
             setTimeout(inner, delay)
         }

         // 类似于 setIntetval 的用法
         newInterval(function(){
            console.log(11111)
         } ,1000)

dom元素的位置

offsetLeft 返回距离上一级左边的距离 上一级或者祖先元素必须在定位的情况下

offsetTop 返回距离上一级顶部的距离 上一级或者祖先元素必须在定位的情况下

offsetWidth 返回可见宽度

offsetHeight 返回可见高度

scrollTop 返回匹配元素滚动条的垂直位置

scrollLeft 返回匹配元素滚动条的水平位置

document.documentElement.scrollTop 用法

window.onscroll = function(){
            var  top = document.documentElement.scrollTop;
            console.log(top)
}

clientWidth 返回元素的实际宽度 不算边框

clientHeight 同理

事件

事件概述

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。

**简单理解：**出发—响应机制

事件三要素： 事件源 事件类型 事件处理程序

① 事件源：事件被触发的对象 （谁被触发了 例如 按钮被触发了按钮就是事件源）

② 事件类型：如何触发 什么事件 （比如鼠标点击触发（onclick） 还是鼠标经过触发（onmouseover） 还是键盘按下触发（onkeydown）

③ 事件处理程序：通过一个函数赋值的方式 来完成

执行事件的步骤

① 获取事件源；

② 注册事件（绑定事件）；

③ 添加事件处理程序（采取函数赋值形式）。

onclick 点击事件

onmouseover 鼠标移入

onmouseout 鼠标移出

onscroll 滚轮事件

事件是文档或者浏览器窗口中发生的，特定的交互瞬间 ------ 事件

典型事例：
页面加载完毕，触发load事件

浏览器窗口放大或缩小，触发resize事件

用户单击元素，触发click事件

事件绑定的三种方式

<button onclick="fn()">点击button>
    <button id="btn">点击button>
    <button id="btn2">点击button>
    <script type="text/javascript">
          function  fn(){
              alert("点击")
          }
          var btn = document.getElementById("btn");

          // 绑定事件
          btn.addEventListener("click",function(){
              alert("这是绑定的事件")
          })
        
        
          var btn2 =  document.getElementById("btn2");

          btn2.onclick = function(){
             alert("点击")
          }
    script>

鼠标事件

onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseup	某个鼠标按键被松开

表单事件

onfocus	元素获得焦点
onblur	元素失去焦点
onchange	用户改变域的内容
onreset	表单重置时触发
onsubmit	表单提交时触发

密码框的显示与隐藏

当点击密码框后面的小眼睛的时候 密码显示，再次点击隐藏。

<div class='box'>
    <label for=''>
          <img src="闭眼图片" alt="" id="eye" />
    label>
    <input type="password" name="" id="pwd" />
div>

<script>
//1.获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
//2.注册事件 处理程序
var flag = 0;
eye.onclick = function() {
    //点击一次之后 falg 一定要变化
    if(flag == 0){
        pwd.type = 'text';
        eye.src = '睁眼图片';
        flag = 1;
    }else{
        pwd.type = 'passward';
        eye.src = '闭眼照片';
        falg = 0;
    }
}
script>

onfocus 与 onblur 事件小案例

<form action="">
        <div>
            用户名：<input type="text" id="user" name="user"  value="请搜索"/>
        div>
    form>
    <script type="text/javascript">
          user.onfocus=function(){
             if(this.value==="请搜索"){
                this.value = "";
             }
             this.style.borderColor= "yellow"
          }
          user.onblur = function(){
              if(this.value===""){
                 this.value="请搜索"
              }
          }
          
    script>

表单事件

    <form action="" id ="form">
        <div>
            用户名：<input type="text" id="user" name="user"  value="请搜索"/>
        div>
        <div>
            选择：
            <select name="" id="sel">
                <option value="1">第一个option>
                <option value="2">第二个option>
                <option value="3">第三个option>
                <option value="4">第四个option>
                <option value="5">第五个option>
            select>
        div>
        <div>
            <input type="reset" />
            <input type="submit" />
        div>
    form>
    <script type="text/javascript">
          // 得到焦点
          user.onfocus=function(){
             if(this.value==="请搜索"){
                this.value = "";
             }
             this.style.borderColor= "yellow"
          }
          // 失去焦点
          user.onblur = function(){
              if(this.value===""){
                 this.value="请搜索"
              }
          }
          // 改变域的内容
          sel.onchange = function(){
              console.log(this.value)
          }

          // 重置事件
          form.onreset = function(){
              console.log("点击了重置")
          }

          // 提交
          form.onsubmit = function(){
              console.log("当条件不合格的时候不想提交 可以使用return false")
              return false
          }

    script>

显示隐藏文本框内容

当点击文本框是，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示。

//1.获取元素
var text = document.querySelector('input');
//2.注册事件 获得焦点事件 onfocus
text.onfocus = function(){
    if(this.value === '手机'){
        this.value = '';
    }
}
text.onblur = function() {
    if(this.value === ''){
        this.value = '手机';
    }
}

键盘事件

onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下并释放一个键时发生
onkeyup	某个键盘的键被松开

键盘事件的事件次序：onkeydown onkeypress onkeyup

 window.onkeydown = function(){
             console.log("键盘按下")
        }
        window.onkeypress = function(){
              console.log("键盘被按下并释放")
        }
        window.onkeyup = function(){
              console.log("键盘被抬起")
        } 

keyCode 在 e对象中

js判定不能输入某个字母或符号
οnkeydοwn=“if(event.keyCode==32) return false”

字母和数字键的键码值(keyCode)（左侧）

按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

数字键盘上键的键码值（右侧）

按键	键码	按键	键码	按键	键码
0	96	6	102	Enter	108
1	97	7	103	-	109
2	98	9	104	.	110
3	99	9	105	/	111
4	100	*	106
5	101	+	107

F键键码值

按键	键码	按键	键码
F1	112	F7	118
F2	113	F8	119
F3	114	F9	120
F4	115	F10	121
F5	116	F11	122
F6	117	F12	123

控制键键码值(keyCode)

按键	键码	按键	键码	按键	键码	按键	键码
BackSpace	8	Esc	27	Right Arrow	39	-_	189
Tab	9	Spacebar	32	Dw Arrow	40	.>	190
Clear	12	Page Up	33	Insert	45	/?	191
Enter	13	Page Down	34	Delete	46	`~	192
Shift	16	End	35	Num Lock	144	[{	219
Control	17	Home	36	;:	186	|	220
Alt	18	Left Arrow	37	=+	187	]}	221
Cape Lock	20	Up Arrow	38	,<	188	'"	222

多媒体键码值

按键	键码
音量加	175
音量减	174
停止	179
静音	173
浏览器	172
邮件	180
搜索	170
收藏	171

示例：

window.onkeydown = function(e){
            if(e.keyCode===13){
                 alert("按的是回车")
            }
 }

UI事件

onscroll ------>滚轮事件

onload -------> 加载 window.οnlοad= function

保证 页面中所有元素都加载 html css 音频 视频 图片全部加载进来之后开始执行

onresize -------> 监听浏览器的变化

event

event对象 用来知晓鼠标点击的位置 以及一些其他的具体信息

示例：

 document.onclick =function(e){
             // 处理兼容 
             var  oEvent =  e || event;

             console.log(oEvent.clientX ,oEvent.clientY);

        }

事件冒泡

当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window

示例：

var bigbox =  document.getElementsByClassName("bigbox")[0];
          var smallbox = document.getElementsByClassName("smallbox")[0];

          bigbox.onclick = function(){
              alert("点击的大盒子")
          }

          smallbox.onclick = function(){
             alert("点击的小盒子")
          }

          function  bodyFn(){
             alert("点击的body")
          }
          function  htmlFn(){
             alert("点击的html")
          }

阻止事件冒泡

非IE下：event.stopPropagation();
IE下：event.cancelBubble=true;

 var bigbox =  document.getElementsByClassName("bigbox")[0];
          var smallbox = document.getElementsByClassName("smallbox")[0];

          bigbox.onclick = function(e){
             var  oEvent = e || event;
             oEvent.stopPropagation();
             oEvent.cancelBubble = true;
              alert("点击的大盒子")
          }

          smallbox.onclick = function(e){
             var  oEvent = e || event;
             oEvent.stopPropagation();
             oEvent.cancelBubble = true;

             alert("点击的小盒子")
          }

          function  bodyFn(e){
            var  oEvent = e || event;
             oEvent.stopPropagation();
             oEvent.cancelBubble = true;
             alert("点击的body")
          }
          function  htmlFn(e){
            var  oEvent = e || event;
             oEvent.stopPropagation();
             oEvent.cancelBubble = true;
             alert("点击的html")
          }

事件捕获

示例：

var bigbox = document.getElementsByClassName("bigbox")[0];
         var smallbox = document.getElementsByClassName("smallbox")[0];

         bigbox.addEventListener("click",function(){
              alert("点击了大盒子")
         },true)
         smallbox.addEventListener("click",function(){
             alert("点击了小盒子")
         },true)
         document.addEventListener("click",function(){
             alert("点击了文档")
         },true)

addEventListener 第三个参数 如果为false 事件冒泡 如果为true 就是事件捕获 默认Wiefalse

阻止浏览器默认行为

return false

document.oncontextmenu=function(){
		return false;  //阻止默认行为
}

排他思想

首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们称为排他思想

<button>1button>
<button>2button>
<button>3button>
<button>4button>
<script>
//获取所有按钮元素
    var btns = document.getElementsById('button');
    //btns得到的是伪数组  里面的每一个元素 btn[i]
    for(var i = 0; i < btns.length; i++){
       btns[i].onclick = function(){
           // ① 我们先把所有的按钮背景颜色去掉  默认样式循环一遍
           for(var i = 0; i < btns.length; i++){
               btns[i].style.backgroundColor='';
           }
           // ② 然后才让当前的元素背景颜色为pink  再设置点击谁谁变背景色
           this.style.backgroundColor = 'pink';
       } 
    }
script>

正则

了解表单的应用

了解正则表达式的概念和作用
掌握正则表达式的使用方法
会使用正则表达式验证表单

为什么要进行表单验证

减轻服务器的压力
保证输入的数据符合要求

正则表达式

构造函数：var reg=new RegExp(pattern,modifiers);
字面量：var reg=/pattern/modifiers;

修饰符

常用表达式

[a-z]	查找任何从小写 a 到小写 z 的字符
[A-Z]	查找任何从大写 A 到大写 Z 的字符
[0-9]	查找任何从 0 至 9 的数字
[abc]	查找括号内的任意一个字符
[^abc]	查找除了括号内的任意字符

reg.test(string) 返回值为布尔值true匹配，false不匹配

元字符

\w	匹配数字、字母、下划线
\W	匹配非数字、字母、下划线
\d	匹配数字
\D	匹配非数字
\s	匹配空白字符（空格、换行）
\S	匹配非空白字符
\n	匹配换行符

注意大小写

示例：

  var  reg = /\W/;
         var  str = "gf_gfdg122";
         var  falg =reg.test(str);
         console.log(falg)

         var n = /\D/;
         var num = 112;
         console.log(n.test(num));

         var str1 = /\s/;
         var s = "    ";
         console.log(str1.test(s))

匹配字符串的次数

*	*表示匹配前面的字符0个或多个
+	+表示前面的字符1个或多个
?	？表示放在其他字符后面表示前面的字符可以有，也可以没有，或者放在*、+后面表示匹配尽可能少的字符
{n}	匹配确定的 n 次
{n,}	至少匹配n 次
{n,m}	最少匹配 n 次且最多匹配 m 次

**注：*表示只能是多个数字，只能是多个整数，只能是多个字母，一般用，当然+也可以，但有时候会出错。

^和$

^ 匹配字符串开头

$ 匹配字符串结尾

[\u4e00-\u9fa5] 用来匹配汉字

示例：

/*验证26个英文字母组成的字符串*/
var str="sgfhdfGIYYjhj";
var reg=/^[a-zA-Z]+$/;   //一次或多次 "+"
console.log(reg.test(str));
/*验证由数字和26个英文字母组成的字符串*/
var str="abc123DFjh";
var reg=/^[0-9a-zA-Z]+$/;
console.log(reg.test(str));
/*验证由数字、字母、下划线组成的字符串*/
var str="abc_123_DFjh";
var reg=/^\w+$/;
console.log(reg.test(str));
/*验证汉字*/
var str="课工场";
var reg=/^[\u4e00-\u9fa5]+$/
console.log(reg.test(str));

邮箱：

/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/

手机号：

/^1[35789][0-9]{9}$/

常用的正则表达式验证方式

1、验证邮箱：/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

2、验证手机号码：/^1[34578][0-9]{9}$/

3、清除前面空格：/^\s*/g
清除后面空格：/\s*$/g
清空所有空格 ：/\s*/g
用法：str.replace(上面选一个表达式,'');

4、验证身份证：/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

5、验证真实姓名：/^[\u4e00-\u9fa5]{2,4}$/;

6、用户名正则，4到16位（字母，数字，下划线，减号）： /^[a-zA-Z0-9_-]{4,16}$/;  

7、密码强度正则：
/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/  

8、正整数正则：/^\d+$/;

9、负整数正则：/^-\d+$/;  

10、整数正则： /^-?\d+$/; 

11、数字正则：
    1、正数正则   /^\d*\.?\d+$/; 
    2、负数正则   /^-\d*\.?\d+$/; 
    3、数字正则  /^-?\d*\.?\d+$/;   
12、 QQ号码正则： /^[1-9][0-9]{4,10}$/;  

13、 微信号正则： /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;  

14、车牌号正则： /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/

15、 包含中文正则： /[\u4E00-\u9FA5]/; 

reg.test(string) 返回值为布尔值 true匹配，false不匹配

示例：

 var  reg = /^1[35789][0-9]{9}$/;
 var  phone = 18636454485;
 var  falg = reg.test(phone);
 alert(falg);

reg.exec(string) 匹配成功返回数组，并确定其位置，否则返回null

示例：

var  reg = /^[a-z]+/;
var  str = "aggfd";
var  index =reg.exec(str);
console.log(index)

正则表达式方法

search 搜索 匹配字符串中的下标 如果找不到返回 -1

示例：

var  str = "hello kgc";
console.log(str.search(/kgc/));
console.log(str.search(/KGC/));
console.log(str.search(/KGC/i))

match 如果没有找到匹配的任何文本,返回null 否则 它将返回一个数组（需要用全局匹配标志）

var  str = "1  and 2 and 3";
console.log(str.match(/\d/))
console.log(str.match(/\d/g))
console.log(str.match(/kgc/g))

replace 用来替换指定的位置 返回新的字符串

var  str = "hello c49";
var  reg = /[0-9]/g;
var  newstr = str.replace(reg,2);
console.log(newstr)

验证字母

var reg = /¹+$/;

验证数字字母

var reg= /²+$/;

验证数字字母下划线

var reg = /^\w+$/;

验证汉字

var reg=/³+$/

---

1. a-zA-Z ↩︎

2. a-zA-Z0-9 ↩︎

3. \u4e00-\u9fa5 ↩︎