Javascript笔记大全01，会持续更新~

于 2021-07-26 20:45:48 发布
阅读量533 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qwq_666/article/details/119117972
本文详细介绍了JavaScript的基础知识，包括变量的声明、赋值和初始化，数据类型如Number、String、Boolean，以及运算符、流程控制、数组、函数、对象等内容，适合初学者入门。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

JS的组成

  1. ECMAScript：JavaScript语法
  2. DOM：页面文档对象模型
  3. BOM：浏览器对象模型

注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//  1.单行注释   Ctrl + /
			/* 
				2.多行注释
				  多行注释
				  多行注释
			 */
		</script>
	</head>
	<body>
	</body>
</html>

输入输出语句

方法说明归属
alert(msg)浏览器弹出警示框浏览器
console.log(msg)浏览器控制台打印输出信息浏览器
document.write向body中输出内容
prompt(info)浏览器弹出输入框，用户可以输入浏览器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>输入输出</title>
	</head>
	<body>
		<script type="text/javascript">
			//这是一个输入框
			prompt('请输入您的年龄');
			
			// 浏览器弹出一个警告框 展示给用户的
			alert('最爱琴女E！');
			
			// 让计算机在页面中输出一个内容
			// 可以向body中输出一个内容
			document.write('哈哈哈哈哈');
			
			// 向控制台输出 给程序员测试用的
			console.log('求抽到琴女DJ皮肤！！！');
		</script>
	</body>
</html>

<!-- 可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码 -->
a <a href="javascript:alert('点');">点一下</a>
<!-- 不会有任何反应 -->
 a <a href="javascript:;">也点一下</a>

标识符

命名一个标识符需要遵守如下的规则：

  1. 标识符中可以含有字母、数字、_、$
  2. 标识符不能以数字开头
  3. 标识符不能是关键字或保留字
  4. 标识符一般采用驼峰命名法
    • 首字母小写，每个单词的开头字母大写，其余字母小写：helloWorld xxxYyyZzz

变量

白话：变量就是一个装东西的盒子

通俗：变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改

声明

//声明变量
var age;//声明一个名称为age的变量

var是一个js关键字，用来声明变量，使用该关键字声明变量后，计算机会自动为变量分配内存空间

age是程序员定义的变量名

赋值

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

= 用来把右边的值赋给左边的变量空间中，此处代表赋值的意思

变量值是程序员保存到变量空间里的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.声明一个age变量
			var age;
			// 2.赋值
			age = 18;
			// 3.输出
			console.log(age);
		</script>
	</head>
	<body>
	</body>
</html>

变量初始化

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

案例

  1. 弹出一个输入框，提示用户输入姓名
  2. 弹出一个对话框，输出用户刚输入的姓名
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.用户输入姓名
			var myname = prompt('请输入您的名字');
			//2.输出这个用户名
			alert(myname);
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

变量语法扩展

更新变量

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

var age = 18;
age = 81;//最后的结果就是81，因为18被覆盖掉了
同时声明多个变量

同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开

var age = 10, name = '阿波', sex = 1;

特殊情况

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

案例：交换两个变量的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// js是编程语言有很强的逻辑性在里面,实现这个要求的思路:先怎么做后怎么做,
			// 1. 我们需要一个临时变量帮我们
			// 2. 把apple1 给我们的临时变量 temp
			// 3. 把apple2 里面的苹果给 apple1
			// 4. 把临时变量里面的值给 apple2
			var temp;
			var apple1 = '青苹果';
			var apple2 = '红苹果';
			temp = apple1; //把右边给左边
			apple1 = apple2;
			apple2 = temp;
			console.log(apple1);
			console.log(apple2);
		</script>
	</head>
	<body>
	</body>
</html>

数据类型

在js中一共有六种数据类型

  1. String 字符串
  2. Number 数值
  3. Boolean 布尔值
  4. Null 空值
  5. Undefined 未定义
  6. Object 对象

其中String、Number、Boolean、Null、Undefined属于基本数据类型，而Object属于引用数据类型

Number

在js中，所有的数值都是Number类型，包括整数和浮点数

数值型进制：常见的有：二进制、八进制、十进制、十六进制

//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

JavaScript中数值的最大和最小值

alert(Number.MAX_VALUE);//1.7976931348623157e+308
alert(Number.MIN_VALUE);//5e-324

三个特殊值

alert(Infinity);//Infinity，代表无穷大，大于任何数值
alert(-Infinity);//-Infinity，代表无穷小，小于任何数值
alert(NaN);//NaN，代表一个非数值
isNaN()

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

var usrAge = 21;
var isOk = isNaN(usrAge);
console.log(isNum);			  //false,21不是一个非数字
var userName = '阿波';
console.log(isNaN(userName)); //true,'阿波'是一个非数字
typeof

用来检测变量的数据类型

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

Boolean

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

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

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

Null 和 Undefined

Null类型的值只有一个，就是null，null这个值专门用来表示一个为空的对象，使用typeof检查null值时，会返回object

Undefined类型的值只有一个，就是undefined，一个声明后没有被赋值的变量会有一个默认值undefined,使用typeof检查undefined值时，会返回undefined

数据类型转换

通俗来讲就是把一种数据类型的变量转换成另外一种数据类型

转换为字符串
方式说明案例
toString()转成字符串var num = 1;alert(num.toString());
String()强制转换转成字符串var num = 1;alert(Strinig(num));
加号拼接字符串和字符串拼接的结果都是字符串var num = 1;alert(num + “我是字符串”);
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.把数字型转换为字符串型 变量.toString()
			var num = 10;
			var str = num.toString();
			console.log(str);
			console.log(typeof str);
			//2.我们利用String（变量）
			console.log(String(num));
			//3.利用 + 拼接字符串的方法实现转换效果
			console.log(num + '');
		</script>
	</head>
	<body>
	</body>
</html>
转换为数字型（重点）
方式说明案例
parseInt(string)函数将String类型转换成整数数值型parseInt(‘78’)
parsFloat(string)函数将String类型转换成浮点数数值型parseFloat(‘78.26’)
Number()强制转换函数将String类型转换为数值型Number(‘12’)
js隐式转换(- * /)利用算术运算隐式转换为数值型‘12’ - 0
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.parseInt(变量) 可以把 字符型转换为数字型 得到的是整数
			console.log(parseInt('3.14'));//3 取整
			console.log(parseInt('3.94'));//3 取整
			console.log(parseInt('120px'));//120 会去掉这个px单位
			console.log(parseInt('rem120px'));//NaN
			//2.parseFloat（变量） 可以把字符型转换为数字型 得到的是小数 浮点数
			console.log(parseFloat(3.14));
			console.log(parseFloat('120px'));//120 会去掉这个px单位
			console.log(parseFloat('rem120px'));//NaN
			//3.利用Number（变量）
			var str = '123';
			console.log(Number(str));
			console.log(Number('12'));
			//4.利用了算术运算 - * / 隐式转换
			console.log('12' - 0);//12
			console.log('123' - '120');
		</script>
	</head>
	<body>
	</body>
</html>
简单加法器案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//先弹出一个输入框，提示用户输入第一个值，保存起来
			//再弹出一个输入框，提示用户输入第二个值，保存起来
			//把这两个值相加，并将结果赋给新的变量（注意数据类型转换）
			//弹出警示框（alert），把计算的结果输出
			var num1 = prompt('请您输入第一个值：');
			var num2 = prompt('请您输入第二个值：');
			var result = parseFloat(num1) + parseFloat(num2);
			alert('您的结果是：' + result);
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

转换为布尔型
方式说明案例
Boolean()函数其他类型转成布尔值Boolean(‘true’);
  1. 代表空、否定的值会被转换为false，如“、0、NaN、null、undefined
  2. 其余值都会被转换为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

String

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

var strMsg = "我爱北京天安门~";//使用双引号表示字符串
var strMsg2 = 'WDNMD';		 //使用单引号表示字符串
//常见错误
var strMsg3 = 哈哈哈;		  //报错，没使用引号，会被认为是js代码，但是js没有这些语法
转义符
转义符解释说明
\n换行符，n是newline的意思
\斜杠\
’单引号‘
"双引号"
\ttab 缩进
\b空格，b是blank的意思
字符串长度

通过字符串的length属性可以获取整个字符串的长度

var strMsg = '我是阿波！';
alert(strMsg.length);//显示5
字符串拼接
//1.1字符串“相加”
alert('hello' + ' ' + 'world');//hello world
//1.2数值字符串”相加“
alert('100' + '100');//100100
//1.3数值字符串 + 数值
alert('11' + 12);//1112

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

字符串拼接加强
console.log('阿波' + 18);		  	  //只要有字符就会相连
var age = 18;
//console.log('阿波age岁啦');		//这样不行哦
console.log('阿波' + age);		 //阿波18
console.log('阿波' + age + '岁啦'); //阿波18岁啦

运算符

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

浮点数精度问题

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

var result = 0.1 + 0.2;			//结果不是0.3，而是：0.30000000000000004
console.log(0.7 * 100);			//结果不是7，而是：7.000000000000001

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

<script type="text/javascript">
	//浮点数 算术运算里面会有问题
	//我们不能直接拿着浮点数来进行相比较 是否相等
	var num = 0.1 + 0.2;
	console.log(num == 0.3);//false
</script>

递增和递减运算符

前置递增运算符

++num 前置递增，就是自加1，类似于num = num + 1，但是 ++num 写起来更简单

<script type="text/javascript">
	//1.想要一个变量自己加1 num = num + 1 比较麻烦
	var num = 1;
	num = num + 1;//++num
	console.log(num);//2
	//2.前置递增运算符 ++ 写在变量的前面
	var age = 10;
	++age;
	console.log(age);//11
	//3.先加1 后返回值
	var p = 10;
	console.log(++p + 10);//21
</script>
后置递增运算符

num++ 后置递增，就是自加1，类似于num = num + 1，但是 num++ 写起来更简单

使用口诀：先返回原值，后自加

<script type="text/javascript">
	var num = 10;
	num++;// num = num + 1 ++num;
	//前置自增和2后置自增如果单独使用 效果是一样的
	var age = 10;
	console.log(age++ + 10);//20
	//这里age = 11
</script>
总结
  1. 后置：先原值运算，后自加（先人后己）
  2. 前置：先自加，后运算（先己后人）
  3. 开发时，大多使用后置递增/减，并且代码独占一行，例如：num++ 或者 num–;

比较运算符

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

运算符名称说明案例结果
<小于号1 < 2true
>大于号1 > 2false
>=大于等于号（大于或者等于）2 >= 2true
<=小于等于号（小于或者等于）3 <= 2false
==判等号37 == 37true
!=不等号37 != 37false
=== !==全等 要求值和数据类型都一致37 === ‘37’false
<script type="text/javascript">
	//1.程序里面的等于符号是 == 默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以
	console.log(3 == 5)//false
	console.log('阿波' == '波波');//false
	console.log(78 == 78);//true
	console.log(78 == '78');//true
	console.log(78 != 78);//false
	//2.程序里面有全等 一模一样 要求 两侧的值 还有 数据类型完全一致才可以true
	console.log(18 === 18);//true
</script>
符号作用用法
=赋值把右边给左边
==判断判断两边值是否相等（注意此时有隐式转换）
===全等判断两边的值和数据类型是否完全相同

逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。

逻辑运算符说明案例
&&“逻辑与”，简称 “与” andtrue && false
||“逻辑或”，简称 “或” ortrue || false
!“逻辑非”，简称 “非” not! true

逻辑与&&：两边都是true才返回true，否则返回false

逻辑或||：两边都为false才返回false，否则都为true

逻辑非!：也叫取反符，用来取一个布尔值相反的值，如true的相反值是false

var isOk = !true;
console.log(isOk);//false
短路运算（逻辑中断）

当有多个表达式时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值

逻辑与

如果第一个表达式的值为真，则返回表达式2

如果第一个表达式的值为假，则返回表达式1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.用我们的布尔值参与的逻辑运算 true && false == false
			//2.123 && 456是值 或者是 表达式 参与逻辑运算？
			//3.逻辑与短路运算 如果表达式1为真 则返回表达式2 如果表达式1为假的 返回表达式1
			console.log(123 && 456);//456
			console.log(0 && 456);//0
			console.log(0 && 1 + 2 && 456 * 56789);//0
			console.log('' && 1 + 2 && 456 * 56789)//''
			//如果有空的或者否定的为假 其余是真的 0、''、null、undefined、NaN
		</script>
	</head>
	<body>
	</body>
</html>
逻辑或

如果表达式1为真，则返回表达式1

如果表达式1为假，则返回表达式2

console.log(123 || 456);//123
console.log(0 || 456);//456
console.log(123 || 456 || 789);//123

赋值运算符

赋值运算符说明案例
=直接赋值var usrName = ‘我是值’
+=、-=加、减一个数 后再赋值var age = 10;age += 5; //15
*=、/=、%=乘、除、取模 后再赋值var age = 2; age *= 5; //10
var age = 10;
age += 5;//相当于 age = age + 5
age -= 5;//相当于 age = age - 5
age *= 10;//相当于 age = age * 10

运算符优先级

优先级运算符顺序
1小括号()
2一元运算符++ – !
3算术运算符先 * / % 后 + -
4关系运算符> >= < <=
5相等运算符== != === !==
6逻辑运算符先 && 后 ||
7赋值运算符=
8逗号运算符,

流程控制

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构

顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行

分支结构

由上到下执行代码的过程中，根据不同条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

JS提供了两种分支结构语句：if语句 和 switch语句

if分支语句
// 语法结构：
// 条件成立执行代码，否则什么也不做
if(条件表达式) {
	执行语句
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var year = prompt('请输入年龄');
			if(year >= 18) {
				alert('允许进入网吧');
			}
		</script>
	</head>
	<body>
	</body>
</html>
if else语句（双分支语句）
// 语法结构：
// 条件成立执行if里面的代码，否则执行else里面的代码
if(条件表达式) {
    //if条件成立执行的代码
} else {
    //否则 执行的代码
}

<script type="text/javascript">
	var age = prompt('请输入年龄');
	if(age >= 18) {
		alert('我带你去网吧偷键盘');
	} else {
		alert('滚！回家做作业去！');
	}
</script>
判断闰年
<script type="text/javascript">
	var year = prompt('请输入一个年份');
	if(year % 4 == 0 & year % 100 != 0) {
		alert('闰年');
	} else {
		alert('平年');
	}
</script>
if else if 语句（多分支语句）
// 语法结构：
// 适合检查多重条件
if(条件表达式1) {
    语句1;
} else if (条件表达式2) {
    语句2;
} else if (条件表达式3) {
    语句3;
    ...
} else {
    // 上述条件都不成立执行此处的代码
}

<script type="text/javascript">
	var grade = prompt('请输入你的分数');
	if(grade >= 90) {
		alert('成绩为A等级');
	} else if(grade >= 80 && grade < 90) {
		alert('成绩为B等级');
	} else if(grade >= 70 && grade < 80) {
		alert('成绩为C等级');
	} else if(grade >= 60 && grade < 70) {
		alert('成绩为D等级');
	} else if(grade < 60) {
		alert('成绩为E等级');
	}
</script>
三元表达式
// 语法结构：
条件表达式 ? 表达式1 : 表达式2
// 如果条件表达式结果为真 则返回 表达式1的值
// 如果条件表达式结果为假 则返回 表达式2的值

<script type="text/javascript">
	var num = 10;
	var result = num > 5 ? '是的' : '不是的';
	console.log(result);
</script>
数字补0案例
  1. 用户输入0~59之间的一个数字
  2. 如果数字小于10，则在这个数字面前补0（加0），否则不做操作
  3. 用一个变量接受这个返回值，输出
<script type="text/javascript">
	var time = prompt('请输入一个0~59之间的一个数字');
	// 三元表达式
	var result = time < 10 ? '0' + time : time;// 把返回值赋值给一个变量
	alert(result);
</script>
switch语句

当要针对变量设置一系列的特定值的选项时，就可以使用switch

// 语法结构：
switch(表达式) {
    case value1:
        // 表达式等于 value1 时执行的代码
        break;
    case value2:
        // 表达式等于 value1 时执行的代码
        break;
    default:
        // 表达式不等于任何一个value时要执行的代码
}

<script type="text/javascript">
	//switch注意事项
	var num = 3;
	switch (num) {
		case 1:
			console.log(1);
			break;
		case 2:
			console.log(2);
			break;
		case 3:
			console.log(3);
			break;
	}
	//1.我们开发里面 表达式经常写成变量
	//2.我们num里的值和case里面的值相匹配的时候是 全等 必须是值和数据类型一致才可以 num === 1
	//3.break 如果当前的case里面没有break则不会退出switch 是继续执行下一个case
</script>
查询水果案例

用户在弹出框里面输入一个水果，如果有就弹出该水果的价格，如果没有该水果就弹出“没有此水果”。

<script type="text/javascript">
	var fruit = prompt('请输入您查询的水果：');
	switch (fruit) {
		case '苹果':
			alert('苹果一斤5块钱');
			break;
		case '香蕉':
			alert('香蕉一斤2块钱');
			break;
		case '西瓜':
			alert('西瓜一斤3块钱');
			break;
		case '桃子':
			alert('桃子一斤6块钱');
			break;
		default:
			alert('没有此水果');
	}
</script>

循环

在JS中，主要有三种类型的循环语句：

  1. for循环
  2. while循环
  3. do…while循环
for 循环
// 语法结构
for (初始化变量; 条件表达式; 操作表达式) {
    //循环体
}

<script type="text/javascript">
	for (var i = 1; i <= 100; i++) {
		console.log('哈哈哈~');
	}
	/*
		初始化变量 就是用var声明一个普通变量，通常用于作为计数器使用
		条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
		操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）
	*/
</script>

执行过程

  1. 首先执行里面的计数器变量 var i = 1，但是这句话在for里面只执行一次
  2. 去i <= 100 来判断是否满足条件，如果满足 就去执行 循环体 不满足就退出循环
  3. 最后去执行i++ 第一轮结束，接着去执行i <= 100 如果条件满足 就去执行 循环体 ……依此类推

断点调试

断点调试可以帮我们观察程序的运行过程

  1. 浏览器中按F12—>sources—>找到需要调试的文件—>在程序的某一行设置断点

    Watch：监视，通过watch可以监视变量的值的变化，非常的常用

  2. F11：程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化

<script type="text/javascript">
	//for循环可以执行相同的代码
	for (var i = 1; i <= 10; i++) {
		console.log('哈');
	}
	//我们可以让用户控制输入的次数
	var num = prompt('请输入次数');
	for (var i = 1; i <= num; i++) {
		console.log("嘿");
	}
</script>

for循环可以重复执行不同的代码，因为我们有计数器变量i的存在，i每次循环后值都会变化

<script type="text/javascript">
	//想要输出1个人从1到100岁
	// for (var i = 1; i <= 100; i++) {
	// 	console.log('这个人今年' + i + '岁了');
	// }
	for (var i = 1; i <= 100; i++) {
		if (i == 1) {
			console.log('这个人今年1岁了，他出生了');
		} else if (i == 100) {
			console.log('这个人今年100岁了，他死了');
		} else {
			console.log('这个人今年' + i + '岁了');
		}
	}
</script>

在这里插入图片描述

案例1

1-100之间所有整数的累加和

  1. 需要循环100次，需要一个计数器i
  2. 需要一个存储结果的变量sum，但是初始值一定是0
  3. 核心算法：1 + 2 + 3 + 4……，sum = sum + i；
<script type="text/javascript">
	//求1-100之间所有的平均数
	var sum = 0;
	for (var i = 1; i <= 100; i++) {
		sum += i;
	}
	alert(sum);//5050
</script>
案例2

输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均值

  1. 弹出输入框输入总的班级人数（num）
  2. 依次输入学生的成绩（保存起来score），此时我们需要用到for循环，弹出次数跟班级总人数有关系 条件表达式 i <= num
  3. 进行业务处理，计算成绩，先求总成绩（sum），之后求平均成绩（average）
  4. 弹出结果
<script type="text/javascript">
	var num = prompt('请输入班级的总人数：');//num 总的班级人数
	var sum = 0;// 求和的变量
	var average = 0;// 求平均值的变量
	for (var i = 1; i <= num; i++) {
		var score = prompt('请输入第' + i + '个学生的成绩');
		//因为从prompt取过来的数据是字符串型的，需要转换为数字型
		sum = sum + parseFloat(score);
	}
	average = sum / num;
	alert('班级总的成绩是：' + sum);
	alert('班级平均分是：' + average);
</script>
案例3

打印五颗星星

<script type="text/javascript">
	// 一行打印五个星星 分析
	// 1.
	// console.log('★★★★★');
	// 2.
	// var str = '';
	// for (var i = 1; i <= 5; i++) {
	// 	str = str + '★';
	// }
	// console.log(str);
	// 3. 一行打印N颗星星
	var num = prompt('请输入星星的个数');
	var str = '';
	for (var i = 1; i <= num; i++) {
		str = str + '★';
	}
	console.log(str);
</script>
双重for循环

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构。

// 双重for循环 语法结构
for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
    for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
        //执行语句;
    }
}

<script type="text/javascript">
	// 1.我们可以把里面的循环看作是外层循环的语句
	// 2.外层循环 循环一次，里面的循环执行全部
	for (var i = 1; i <=3; i ++) {
		console.log('这是外层循环第' + i + '次');
		for (var j = 1; j <= 3; j++) {
			console.log('这是里层循环第' + j + '次');
		}
	}
</script>

在这里插入图片描述

打印五行五列星星
  1. 内层循环负责一行打印5个星星
  2. 外层循环负责打印5行
<script type="text/javascript">
	// 打印五行五列星星
	var str = '';
	for (var i = 1; i <= 5; i++) {
		for (var j = 1; j<= 5; j++) {
			str += '★';
		}
		//如果一行打印完5个星星，就要另起一行 加\n
		str = str + '\n';
	}
	console.log(str);
</script>

在这里插入图片描述

打印倒三角
<script type="text/javascript">
	//打印倒三角
	var str = '';
	for (var i = 1; i <= 10; i++) { //外层循环控制行数
		for (var j = i; j <= 10; j++) { // 里层循环控制打印的个数不一样 j = i
			str += '*';
		}
		str += '\n';
	}
	console.log(str);
</script>
打印正三角
<script type="text/javascript">
	//打印正三角
	var str = '';
	for (var i = 1; i <= 10; i++) {
		for (var j = 1; j <= i; j++) {
			str += '*';
		}
		str += '\n';
	}
	console.log(str);
</script>
九九乘法表
  1. 一共有9行，但是每行的个数不一样
  2. 外层的for控制行数i，循环9次，打印9行
  3. 内层的for控制每行公式j
  4. 核心算法：每一行公式的个数正好和行数一致，j <= i;
  5. 每行打印完毕，都需要换行
<script type="text/javascript">
	var str = '';
	for (var i = 1; i <= 9; i++) {
		for (var j = 1; j <= i; j++) {
			// 1 x 2 = 2
			str += j + 'x' + i + '=' + i * j + '\t';
		}
		str += '\n';
	}
	console.log(str);
</script>
while循环
while (条件表达式) {//while 当……的时候
    //循环体代码
}

执行思路：

  1. 先执行条件表达式，如果结果为true，则执行循环体代码，如果为false，则退出循环，执行后面的代码
  2. 执行循环体代码
  3. 循环体代码执行完毕之后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为false时，整个循环过程才会结束
<script type="text/javascript">
	var num = 1;
	while (num <= 10) {
		console.log('哈哈哈~');
		num++;
	}
	// 里面应该也有计数器 初始化变量
	// 里面应该也有操作表达式 完成计数器的更新 防止死循环
</script>
计算1~100之间所有整数的和
<script type="text/javascript">
	var sum = 0;
	var i = 0;
	while (i <= 100) {
		sum += i;
		i++;
	}
	console.log(sum);
</script>
do while循环
do {
    //循环体代码 --- 条件表达式为true时重复执行
} while (条件表达式);

执行思路：

  1. 先执行一次循环体代码
  2. 再执行条件表达式，如果结果为true，则继续执行循环体代码，如果为false，则退出循环，继续执行后面的代码

注意：先执行循环体，再判断，do…while循环语句至少会执行一次循环体代码

<script type="text/javascript">
	var i = 1;
	do {
		console.log('How are you?');
		i++;
	} while (i <= 100);
</script>
计算1~100之间所有整数的和
<script type="text/javascript">
			var sum = 0;
			var i = 0;
			do {
				sum += i;
				i++;
			} while (i <= 100);
			console.log(sum);//5050
		</script>
continue

continue关键字用于立即跳出本次循环，继续下一次循环

例如：吃5个包子，第三个包子有虫子，就扔掉第3个，继续吃第4个第5个包子

<script type="text/javascript">
	for (var i = 1; i <= 5; i++) {
		if (i == 3) {
		// console.log('第' + i + '个包子有虫子，不吃，扔掉');
		continue;
		}
		console.log('正在吃第' + i + '个包子');
	}
</script>

在这里插入图片描述

break

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

例如：吃5个包子，吃到第3个发现里面有半个虫子，没胃口，其余的不吃了

<script type="text/javascript">
	for (var i = 1; i <= 5; i++) {
		if (i == 3) {
			// console.log('第' + i + '个包子有虫');
			break;
		}
		console.log('正在吃第' + i + '个包子');
	}
</script>

在这里插入图片描述

简易ATM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var money = 100;// 原先的钱,余额
			while (a != 4) {
				var a = prompt('请输入您要的操作：' + '\n'
						+ '1.存钱' + '\n'
						+ '2.取钱' + '\n'
						+ '3.显示余额' + '\n'
						+ '4.退出');
				if (a == 1) {
					var add = prompt('请输入存储的钱数：');
					money += parseFloat(add);
					continue;
				} else if (a == 2) {
					var sub = prompt('请输入要取出的钱数：');
					money -= parseFloat(sub);
					continue;
				} else if (a == 3) {
					alert('当前余额为：' + money + '元');
					continue;
				} else if (a == 4) {
					alert('退出');
				}
				else {
					alert('错误，请输入1~4之间的数字！');
					continue;
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

数组

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素

//普通变量一次只能存储一个值
var num = 10;
//数组一次可以存储多个值
var arr = [1,2,3,4,5];

创建方式

JS中创建数组有两种方式：

  1. 利用 new 创建数组
  2. 利用数组字面量创建数组

利用 new 创建数组

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

注意：Array()，A要大写

利用数组字面量创建数组

// 1.使用数组字面量方式创建空的数组
var 数组名 = [];
// 2.使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','大黄','阿橘'];
  1. 数组的字面量时方括号[ ]
  2. 声明数组并赋值称为数组的初始化
  3. 这种字面量方式也是我们以后最多使用的方式
<script type="text/javascript">
	// 利用 new 创建数组
	var arr = new Array();// 创建了一个空的数组
	// 利用数组字面量创建数组 []
	var arr1 = [];// 创建了一个空的数组
	var arr2 = [1,2,'阿波',true];
	// 数组里面的数据一定用逗号分隔
	// 数组里面的数据，我们称为数组元素
</script>

数组元素的类型

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

var arrStus = ['小白',12,true,28.9];

数组的索引

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

var 数组名 = ['小白','小黑','大黄','阿橘'];
索引号：        0      1      2      3

<script type="text/javascript">
	var arr1 = [1,2,'阿波',true];
	console.log(arr1);
	console.log(arr1[2]);// 阿波
	console.log(arr1[3]);// true
			
	var arr2 = ['琴瑟仙女','厄运小姐','放逐之刃'];
	console.log(arr2[0]);// 琴瑟仙女
	console.log(arr2[1]);// 厄运小姐
	console.log(arr2[2]);// 放逐之刃
	console.log(arr2[3]);// 因为没有这个数组元素，所以输出结果是 undefined
</script>

遍历数组

遍历数组就是把数组的元素从头到尾访问一次

<script type="text/javascript">
	var arr = ['red','green','blue'];
	for (var i = 0; i < 3; i++) {
		console.log(arr[i]);
	}
	// 1.因为我们的数组索引号从0开始，所以 i 必须从0开始
	// 2.输出的时候 arr[i] i 计数器当索引号来用
</script>
案例

请将[‘关羽’,‘张飞’,‘赵云’,‘马超’,‘黄忠’]; 数组里的元素依次打印到控制台

<script type="text/javascript">
	// 数组长度 ---> 数组名.length
	var arr = ['关羽','张飞','赵云','马超','黄忠'];
	for (var i = 0; i < arr.length; i++) {
		console.log(arr[i]);
	}
	// 1. 数组的长度是元素个数 不要跟索引号混淆
	// 2. arr.length 动态监测数组元素的个数
</script>

求数组[2,6,1,7,4] 里面所有元素的和以及平均值

<script type="text/javascript">
	// 求数组的和以及平均值
	// 1.声明一个求和变量 sum
	// 2.遍历这个数组，把里面每个数组元素加到 sum 里面
	// 3.用求和变量 sum 除以数组长度就可以得到数组的平均值
	var arr = [2,6,1,7,4];
	var sum = 0;
	var average = 0;
	for (var i = 0; i < arr.length; i++) {
		sum += arr[i];// 我们加的是数组元素 arr[i] 不是计数器 i
	}
	average = sum / arr.length;
	console.log(sum,average);// 20 4
    // 想要输出多个变量，用逗号分隔开即可
</script>

求数组中的最大值

  1. 声明一个保存最大元素的变量max
  2. 默认最大值可以取数组中的第一个元素
  3. 遍历这个数组，把里面每个数组元素和 max 相比较
  4. 如果这个数组元素大于 max 就把这个数组元素存到 max 里面，否则继续下一轮比较
  5. 最后输出这个 max
<script type="text/javascript">
	var arr = [2,6,1,77,52,26,78,99];
	var max = arr[0];
	for (var i= 0; i < arr.length; i++) {
		if (arr[i] > max) {
			max = arr[i];
		}
	}
	console.log('该数组里面的最大值是：' + max);
</script>

数组转换为分割字符串

要求将数组[‘red’,‘blue’,‘pink’] 转换为字符串，并且用 | 或其他符号分割，输出：‘red|green|blue|pink|’

  1. 需要一个新变量用于存放转换完的字符串str
  2. 遍历原来的数组，分别把里面的数据取出来，加到字符串里面
  3. 同时在后面多加一个分隔符
<script type="text/javascript">
	var arr = ['red','blue','pink'];
	var str = '';
	var sep = '|';
	for (var i = 0; i < arr.length; i++) {
		str += arr[i] + sep;
	}
	console.log(str);// red|blue|pink|
</script>

数组的四个方法

方法名说明返回值
push(参数1…)末尾添加一个或多个元素，注意修改原数组并返回新的长度
pop()删除数组最后一个元素，把数组长度减1 无参数、修改原数组返回它删除的元素的值
unshift(参数1…)向数组的开头添加一个或更多元素，注意修改原数组并返回新的长度
shift()删除数组的第一个元素，数组长度减1 无参数、修改原数组并返回第一个元素的值
push

该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度

可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾

// 创建数组
var arr = ['孙悟空','猪八戒','沙和尚'];

var result = arr.push('唐僧','蜘蛛精','白骨精');
console.log(arr);
console.log('result = ' + result); // 6
pop

该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回

// 创建数组
var arr = ['孙悟空','猪八戒','沙和尚'];
var result = arr.push('唐僧','蜘蛛精','白骨精');
console.log(arr); // 孙悟空 猪八戒 沙和尚 唐僧 蜘蛛精 白骨精
console.log('result = ' + result); // 6
			
result2 = arr.pop();
console.log(arr); // 孙悟空 猪八戒 沙和尚 唐僧 蜘蛛精
console.log('result2 =' + result2); // 白骨精
unshift

向数组开头添加一个或多个元素，并返回新的数组长度，向前边插入元素以后，其他的元素索引会依次调整

// 创建数组
var arr = ['孙悟空','猪八戒','沙和尚'];
var result = arr.push('唐僧','蜘蛛精','白骨精');
console.log(arr); // 孙悟空 猪八戒 沙和尚 唐僧 蜘蛛精 白骨精
console.log('result = ' + result); // 6
			
result2 = arr.pop();
console.log(arr); // 孙悟空 猪八戒 沙和尚 唐僧 蜘蛛精
console.log('result2 =' + result2); // 白骨精
			
arr.unshift('二郎神');
console.log(arr); // 二郎神 孙悟空 猪八戒 沙和尚 唐僧 蜘蛛精 白骨精
shift

可以删除数组的第一个元素，并将被删除的元素作为返回值返回

// 创建数组
var arr = ['孙悟空','猪八戒','沙和尚'];
var result = arr.push('唐僧','蜘蛛精','白骨精');
console.log(arr); // 孙悟空 猪八戒 沙和尚 唐僧 蜘蛛精 白骨精
console.log('result = ' + result); // 6
			
result2 = arr.pop();
console.log(arr); // 孙悟空 猪八戒 沙和尚 唐僧 蜘蛛精
console.log('result2 =' + result2); // 白骨精
			
arr.unshift('二郎神');
console.log(arr); // 二郎神 孙悟空 猪八戒 沙和尚 唐僧 蜘蛛精
			
result3 = arr.shift();
console.log(arr); // 孙悟空 猪八戒 沙和尚 唐僧 蜘蛛精
console.log('result3 =' + result3); // 二郎神

数组新增元素

1.通过修改length长度新增数组元素

// length属性是可读写的
var arr = ['red','green','blue','pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);

其中索引号4，5，6的空间没有给值，就是声明变量未给值，默认值就是undefined

2.修改索引号追加数组元素

不能直接给数组名赋值，否则会覆盖掉以前的数据

var arr = ['red','green','blue','pink'];
arr[4] = 'hotpink';
console.log(arr);// ['red','green','blue','pink','hotpink']
案例

新建一个数组，里面存放10个整数（1~10）

  1. 使用循环来追加数组
  2. 声明一个空数组arr
  3. 循环中的计数器 i 可以作为数组元素存入
  4. 由于数组的索引号是从0开始，因此计数器从0开始更合适，存入的数组元素要 +1
<script type="text/javascript">
	var arr = [];
	for (var i = 0; i < 10; i++) {
		// arr = i; 不要直接给数组名赋值 否则以前的元素都没了
		arr[i] = i + 1;
	}
	console.log(arr);
</script>

筛选数组

要求：将数组 [2,0,6,1,78,0,52,0,26,7] 中大于等于10的元素选出来，放入新数组

  1. 声明一个新的数组用于存放新数据newArr
  2. 遍历原来的旧数组，找出大于等于10的元素
  3. 依次追加给新数组newArr
<script type="text/javascript">
	var arr = [2,0,6,1,78,0,52,0,26,7];
	var newArr = [];
	var j = 0;
	for (var i = 0; i < arr.length; i++) {
		if (arr[i] >= 10) {
			// 新数组索引号应该从0开始 依次递增
			newArr[j] = arr[i];
			j++;
		}
	}
	console.log(newArr);
	// 方法2
	var arrs = [2,0,6,1,78,0,52,0,26,7];
	var newArrs = [];
	// 刚开始 newArrs.length 就是0
	for (var i = 0; i < arrs.length; i++) {
		if (arrs[i] >= 10) {
			// 新数组索引号应该从0开始 依次递增
			newArrs[newArrs.length] = arrs[i];
		}	
	}
	console.log(newArrs);
</script>

删除指定数组元素

要求将数组中的0去掉后，形成一个不包含0的新数组

  1. 需要一个新数组存放筛选之后的数据
  2. 遍历原来的数组，把不是0的数据添加到新数组里面
  3. 新数组里面的个数，用length不断累加
<script type="text/javascript">
	var arr = [2,0,6,1,78,0,52,0,26,7];
	var newArr = [];
	for (var i = 0; i < arr.length; i++) {
		if (arr[i] != 0) {
			newArr[newArr.length] = arr[i];
		}
	}
	console.log(newArr);
</script>

翻转数组

要求将数组 [‘娑娜’,‘璐璐’,‘莫甘娜’,‘格温’,‘娜美’] 的内容反过来存放

输出：[娜美’,‘格温’,‘莫甘娜’,‘璐璐’,‘娑娜’]

<script type="text/javascript">
	// 1.声明一个新数组newArr
	// 2.把就数组索引号第4个取过来（arr.length - 1） 给新数组索引号第0个元素（newArr.length）
	// 3.我们采取 递减的方式 i--
	var arr = ['娑娜','璐璐','莫甘娜','格温','娜美'];
	var newArr = [];
	for (var i = arr.length - 1; i >= 0; i--) {
		newArr[newArr.length] = arr[i];
	}
	console.log(newArr);
</script>

slice和splice

slice

可以用来从数组中提取指定元素

参数：

  1. 截取开始的位置的索引
  2. 截取结束的位置的索引
var arr = ['娑娜','莉莉娅','莫甘娜','艾瑞利亚','妮蔻'];
var result = arr.slice(0,2);
console.log(result); // 娑娜 莉莉娅
			
// 第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
var result2 = arr.slice(3);
console.log(result2) // 艾瑞利亚 妮蔻
// 索引可以传递一个值，如果传递一个负值，则从后往前计算
// -1 倒数第一个
// -2 倒数第二个
var result3 = arr.slice(1,-2);
console.log(result3) // 莉莉娅 莫甘娜
splice

使用splice会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回

参数：

  1. 第一个表示开始位置的索引
  2. 第二个表示删除的数量
  3. 第三个及以后。。。可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
var arr = ['娑娜','莉莉娅','莫甘娜','艾瑞利亚','妮蔻'];
			
var result = arr.splice(1,1,'凯尔','崔丝塔娜');
console.log(arr); // ["娑娜", "凯尔", "崔丝塔娜", "莫甘娜", "艾瑞利亚", "妮蔻"]
console.log(result); // 莉莉娅

数组的剩余方法

concat

可以连接两个或多个数组，并将新的数组返回。该方法不会对原数组产生影响

var arr = ['娑娜','迦娜','格温'];
var arr2 = ['莫甘娜','凯尔','戴安娜'];
var arr3 = ['波比','崔丝塔娜','璐璐'];
			
var result = arr.concat(arr2,arr3,'娜美','霞');
console.log(result); // ["娑娜", "迦娜", "格温", "莫甘娜", "凯尔", "戴安娜", "波比", "崔丝塔娜", "璐璐", "娜美", "霞"]
join

该方法可以将数组转换为一个字符串

该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回

var arr = ['娑娜','格温'];
			
			result = arr.join();
			console.log(result); // 娑娜,格温,阿狸
			console.log(typeof result); // String
			// 在join中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
			// 如果不指定连接符，则默认使用逗号作为连接符
			result2 = arr.join('辅助');
			console.log(result2); // 娑娜辅助格温
reverse

该方法用来反转数组（前边去后边，后边去前边），该方法会直接修改原数组

var arr = ['A','B','C','D'];
			
arr.reverse();
console.log(arr); // ["D", "C", "B", "A"]
sort

可以用来对数组中的元素进行排序，也会影响原数组，默认会按照Unicode编码进行排序

注意：对于纯数字的数组，使用sort排序时，也会按照Unicode编码来排序，所以对数字进行排序时，可能会得到错误的结果

var arr = ['B','D','A','C'];

arr.sort();
console.log(arr); // ["A", "B", "C", "D"]
			
// 可以指定排序的规则
// 在sort添加一个回调函数，来指定排序规则
// 回调函数中需要定义两个形参
// 浏览器会分别使用数组中的元素作为实参去调用函数
// 使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
// 浏览器会根据回调函数的返回值来决定元素的顺序
// 如果返回一个大于0的值，则元素会交换位置
// 如果返回一个小于0的值，则元素位置不变
// 如果返回一个0，则认为两个元素相等，也不交换位置
			
// 如果需要升序排列，则返回a - b，需要降序排列，则返回b - a
arr2 = [5,4,2,1,3,6,8,7];
arr2.sort(function(a,b){
	// 升序排列
	return a - b;		
	// 降序排序
	// return b - a;
});
console.log(arr2);

函数

函数就是封装了一段可以被重复执行调用的代码块，目的：就是让大量代码重复使用

声明函数

// 声明函数
function 函数名() {
    // 函数体代码
}

function是声明函数的关键字，必须小写

由于函数一般是为了实现某个功能才定义的，所以通常我们将函数命名为动词，比如getSum

调用函数

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

调用的时候千万不要忘记添加小括号

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

注意：声明函数本身并不会执行代码，只有调用函数才会执行函数体代码

<script type="text/javascript">
	// 声明函数
	function sayHi() {
		console.log('hi~~');
	}
	// 调用函数
	sayHi();
</script>
利用函数求1~100累加和
<script type="text/javascript">
	function getSum() {
		var sum = 0;
		for (var i = 1; i <= 100; i++) {
			sum += i;
		}
		console.log(sum);
	}
	// 调用函数
	getSum();
</script>

函数的参数

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

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

<script type="text/javascript">
	// 1.函数可以重复相同的代码
	function cook() {
		console.log('野菇鸡肉串');
	}
	cook();
	cook();
	// 2.可以利用函数的参数实现函数重复不同的代码
	// function 函数名(形参1,形参2…) { // 在声明函数的小括号里面是 形参 （形式上的参数）
				
	// }
	// 函数名(实参1,实参2…);// 在函数调用的小括号里面是实参 （实际的参数）
	// 3.形参和实参的执行过程
	function cook(aru) { // 形参是接收实参的 aru = '野菇鸡肉串' 形参类似于一个变量
		console.log(aru);
	}
	cook('野菇鸡肉串');
	cook('蒙德烤鱼');
	// 4.函数的参数可以有，也可以没有个数不限
</script>

<script type="text/javascript">
	// 1.利用函数求任意两个数的和
	function getSum(num1,num2) {
		console.log(num1 + num2);
	}
	getSum(1,3);// 4
	getSum(3,8);// 11
	// 2.利用函数求任意两个数之间的和
	function getSums(start,end) {
		var sum = 0;
		for (var i = start; i <= end; i++) {
			sum += i;
		}
		console.log(sum);
	}
	getSums(1,100);// 5050
</script>

函数形参和实参匹配问题

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

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

<script type="text/javascript">
	// 函数形参实参个数匹配
	function getSum(num1,num2) {
		console.log(num1 + num2);
	}
	// 1.如果实参的个数和形参的个数一致 则正常输出结果
	getSum(1,2);
	// 2.如果实参的个数多于形参的个数 会取到形参的个数
	getSum(1,2,3);
	// 3.如果实参的个数小于形参的个数 多于的形参定义为undefined 最终的结果就是 NaN
	// 形参可以看做是不用声明的变量 num2 是一个变量但是没有接收值 结果就是undefined
	getSum(1);// NaN
	// 建议：我们尽量让实参的个数和形参相匹配
</script>

函数的返回值return

<script type="text/javascript">
	// 函数的返回值格式
	// function 函数名() {
	// 	return 需要返回的结果;
	// }
	// 函数名();
	// (1) 我们函数只是实现某种功能,最终的结果需要返回给函数的调用者函数名()通过return 实现的
	// (2) 只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果
	// 代码验证
	function getResult() {
		return 666;
	}
	getResult(); // getResult() = 666
	console.log(getResult());
			
	function cook(aru) {
		return aru;
	}
	console.log(cook('蒙德薯饼'));
	console.log(cook('蜜酱胡萝卜煎肉'));
			
	// 求任意两个数的和
	function getSum(num1,num2) {
		return num1 + num2;
	}
	console.log(getSum(1,2));// 3
</script>

求两个数的最大值

<script type="text/javascript">
	function getMax(num1,num2) {
		// if (num1 > num2) {
		// 	return num1;
		// } else {
		// 	return num2;
		// }
		return num1 > num2 ? num1 : num2;
	}
	console.log(getMax(1,3));
	console.log(getMax(11,3));
</script>

return的返回值

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

函数都是有返回值的

  1. 如果return则返回return后面的值
  2. 如果没有return则返回undefined
<script type="text/javascript">
	// 函数返回值注意事项
	// 1.return 终止函数
	function getSum(num1,num2) {
		return num1 + num2;// return 后面的代码不会被执行
		alert('我是不会被执行的哦！');
	}
	console.log(getSum(1,2));
	// 2.return 只能返回一个值
	function fn(num1,num2) {
		return num1,num2; // 返回的结果是最后一个值
	}
	console.log(fn(1,2));// 2
	// 3.求任意两个数的加减乘除结果
	function getResult(num1,num2) {
		return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];// 3 -1 2 0.5 
	}
	var re = getResult(1,2); // 返回的是一个数组
	console.log(re);
	// 4.我们函数如果有return 则返回的是 return 后面的值，如果函数没有return 则返回undefined
	function fun1() {
		return 666;
	}
	console.log(fun1()); // 返回666
	function fun2() {}
	console.log(fun2()); // 函数返回的结果是 undefined
</script>

break、continue、return的区别

  1. break：结束当前循环体（如for、while）
  2. continue：跳出本次循环，继续执行下次循环（如for、while）
  3. return：不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码

arguments

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

arguments展示形式是一个伪数组，具有以下特点：

  1. 具有length属性
  2. 按索引方式存储数据
  3. 不具有数组的push、pop等方法
<script type="text/javascript">
	// arguments 的使用
	function fn() {
		// console.log(arguments);// 里面存储了所有传递过来的实参 arguments = [1,2,3]
		// console.log(arguments.length); // 3
		// console.log(arguments[1]);// 2 
		// 按照数组的方式遍历arguments
		for (var i = 0; i < arguments.length; i++) {
			console.log(arguments[i]);
		}
	}
	fn(1,2,3); // 1,2,3
	// fn(1,2,3,4,5);// 1,2,3,4,5
</script>

求任意个数的最大值

<script type="text/javascript">
	// 利用函数求任意个数的最大值
	function getMax() { // arguments = [1,2,3]
		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
</script>

利用函数判断闰年

<script type="text/javascript">
	// 利用函数判断闰年
	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)); // true
	console.log(isRunYear(1999)); // false
</script>

函数调用函数

<script type="text/javascript">
	// 函数是可以互相调用的
	function fn1() {
		console.log(11);
		fn2(); // 在fn1函数里面调用了fn2函数
	}
	fn1();
	function fn2() {
		console.log(22);
	}
	// 结果：
	// 11
	// 22
</script>
案例

用户输入年份，输出当前年份2月份的天数，如果是闰年，则2月份是29天，如果是平年，则2月份是28天

<script type="text/javascript">
	function backDay() {
		var year = prompt('请输入年份：');
		if (isRunYear(year)) {
			alert('当前年份是闰年，2月份有29天');
		} else {
			alert('当前年份是平年，2月份有28天');
		}
	}
	backDay();			
	//判断是否为闰年的函数
	function isRunYear(year) {
		// 如果是闰年返回true 否则 返回false
		var flag = false;
		if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
			flag = true;
		}
		return flag;
	}
</script>

函数的两种声明方式

<script type="text/javascript">
	// 函数的两种声明方式
	// 1.利用函数关键字自定义函数（命名函数）
	function fn() {}
	fn();
	// 2.函数表达式（匿名函数）
	// var 变量名 = function(){};
	var fun = function(aru) {
		console.log('我是函数表达式');
		console.log(aru);
	}
	fun();
	// (1)fun是变量名 不是函数名
	// (2)函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数
	// (3)函数表达式也可以进行传递参数
</script>

JavaScript作用域

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

根据作用域的不同我们变量分为全局变量和局部变量

全局变量和局部变量

<script type="text/javascript">
	// 1.全局变量：在全局作用域下的变量 在全局下都可以使用
	// 注意：如果在函数内部 没有声明直接赋值的变量也属于全局变量
	var num = 10;// num就是一个全局变量
	console.log(num);// 10
			
	function fn() {
		console.log(num);
	}
	fn(); // 10
	// 2.局部变量 在局部作用域下的变量 后者在函数内部的变量就是 局部变量
	// 注意：函数的形参也可以看做是局部变量
	function fun(aru) {
		var num1 = 10;// num1 就是局部变量 只能在函数内部使用
		num2 = 20;
	}
	fun();
	// console.log(num1);
	// console.log(num2);// 20
</script>
全局变量
  1. 全局变量在代码的任何位置都可以使用
  2. 在全局作用域下var声明的变量是全局变量
  3. 特殊情况下，在函数内不使用var声明的变量也是全局变量（不建议使用）
局部变量
  1. 局部变量只能在该函数内使用
  2. 在函数内部var声明的变量是局部变量
  3. 函数的形参实际上就是局部变量
区别

(1) 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
(2) 局部变量 当我们程序执行完毕就会销毁，比较节约内存资源

作用域链

  1. 只要是代码，就至少有一个作用域
  2. 写在函数内部的局部作用域
  3. 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
  4. 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
<script type="text/javascript">
	// 作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构我们称为作用域链 就近原则
	var num = 10;
	function fn() { // 外部函数
		var num = 20;
				
		function fun() { // 内部函数
			console.log(num);
		}
		fun();
	}
	fn();// 20
</script>
案例
<script type="text/javascript">
	// 案例1：结果是几？
	function f1() {
		var num = 123;
				
		function f2() {
			var num = 0;
				console.log(num);// 站在目标出发，一层一层的往外查找
			}
		f2();
	}
	var num = 456;
	f1();// 0
			
	// 案例2：结果是几？
	var a = 1;
	function fn1() {
		var a = 2;
		var b = '22';
		fn2();
		function fn2() {
			var a = 3;
			fn3();
			function fn3() {
				var a = 4;
				console.log(a);// a的值？
				console.log(b);// b的值？
			}
		}
	}
	fn1();
</script>

预解析

JavaScript代码是由浏览器中的JavaScript解析器来执行的。

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

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

    (2). 代码执行 按照代码书写的顺序从上往下执行

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

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

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

// 案例1
var num = 10;
fun();
			
function fun() {
	console.log(num);
	var num = 20;
	console.log(num);
}
// 相当于执行了以下操作
// var num;
			
// function fun() {
		//	var num;
		// 	console.log(num);
		//	var num = 20;
		//	console.log(num);
// }
// num = 10;
// fun();
// 结果：
// undefined
// 20

var a = 18;
f1();
function f1() {
	var b = 9;
	console.log(a);
	console.log(b);
	var a = '123';
}
/*
	结果：
	undefined
	9
*/

对象

现实生活中，万物皆对象，对象是一个具体的事物，看得见摸得着。如：一本书、一辆汽车、一个人……

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

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

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

创建对象的三种方式

  1. 利用字面量创建对象
  2. 利用new Object创建对象
  3. 利用构造函数创建对象
利用字面量创建对象

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

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

键：相当于属性名

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

// var obj = {}; // 创建了一个空的对象
var obj = {
	uname: '阿波',
	age: 18,
	sex: '男',
	sayHi: function() {
		console.log('hi~');
	}
}
// (1) 里面的属性或者方法我们采取键值对的形式	键 属性名 ： 值 属性值
// (2) 多个属性或者方法中间用逗号隔开
// (3) 方法冒号后面跟的是一个匿名函数
// 使用对象
// (1) 调用对象的属性		我们采取 对象名.属性名	.我们理解为	的
console.log(obj.uname);
// (2) 调用属性还有一种方法 对象名['属性名']
console.log(obj['age']);
// (3) 调用对象的方法 sayHi 对象名.方法名() 千万别忘记添加小括号
obj.sayHi();

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

// 1.变量和属性的相同点 他们都是用来存储数据的
var num = 10;
var obj = {
	age: 18,
	fn: function() {
					
	}
}
console.log(obj.age);
// 变量	单独声明并赋值	使用的时候直接写变量名   单独存在
// 属性 在对象里面的不需要声明的	使用的时候必须是	对象.属性
// 2.函数和方法的相同点	都是实现某种功能 做某件事
// 函数是单独声明 并且调用的 函数名() 单独存在
// 方法 在对象里面 调用的时候 对象.方法()
利用new Object创建对象
var obj = new Object();// 创建了一个空的对象
obj.uname = '阿波';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
	console.log('hi~');
}
// (1) 我们是利用 等号= 赋值的方法 添加对象的属性和方法
// (2) 每个属性和方法之间用 分号结束
console.log(obj.uname);
console.log(obj['sex']);
obj.sayHi();
构造函数

我们依次创建一个对象，里面很多属性和方法是大量相同的 我们只能复制。因此我们可以利用函数的方法，重复这些相同的代码，我们就把这个函数称为构造函数，又因为这个函数不一样，里面封装的不是普通代码，而是对象。构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面。

// 创建四大天王的对象 相同的属性：名字、年龄、性别 相同的方法：唱歌
// 构造函数的语法格式
// 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);
	}
}
// new Star('刘德华',18,'男');
var ldh = new Star('刘德华',18,'男');// 调用函数返回的是一个对象
// console.log(typeof ldh);
console.log(ldh.name);
console.log(ldh.age);
console.log(ldh['sex']);
ldh.sing('冰雨');
			
var zxy = new Star('张学友',19,'男');
console.log(zxy.name);
console.log(zxy.age);
console.log(zxy['sex']);
zxy.sing('吻别');
// 1.构造函数名字首字母要大写
// 2.构造函数不需要return就可以返回结果
// 3.调用构造函数 必须使用new
// 4.只要new Star() 调用函数就创建一个对象 ldh {}
// 5.我们的属性和方法前面必须添加this
构造函数和对象的区别
// 1.构造函数 明星 泛指某一大类 它类似于Java里面的 类（class）
function Star(uname,age,sex) {
	this.name = uname;
	this.age = age;
	this.sex = sex;
	this.sing = function(sang) {
		console.log(sang);
	}
}
// 2.对象特指一个具体的事物 刘德华 == {name:'刘德华',age: 18,sex:'男',sing:f}
var ldh = new Star('刘德华',18,'男');// 调用函数返回的是一个对象
console.log(ldh);
// 3.利用函数构造创建对象的过程我们也称为对象的实例化
立即执行函数

函数定义完，立即被调用，这种函数叫做立即执行函数

立即执行函数往往只会执行一次

(function() {
    alert('我是一个匿名函数~~~');
})();
(function(a,b) {
    console.log('a =' + a); // 123
    console.log('b =' + b); // 456
})(123,456);

垃圾回收GC

当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，所以必须进行清理。

JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作。

对象的基本操作

修改对象的属性值

语法：对象.属性名 = 新值
obj.name = 'tom'

删除对象的属性

语法：delete 对象.属性名
delete obj.name;
console.log(obj.name); // undefined

如果使用特殊的属性名，不能采用.的方式来操作

需要使用另一种方式：

语法：对象['属性名'] = 属性值
obj['123'] = 789;
console.log(obj['123']);

遍历对象

var obj = {
	uname: '阿波',
	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

内置对象

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

学习一个内置对象，只要学会其常用成员的使用即可，我们可以通过查文档学习

MDN：https://developer.mozilla.org/zh-CN/

如何学习对象中的方法

  1. 查阅该方法的功能
  2. 查看里面参数的意义和类型
  3. 查看返回值的意义和类型
  4. 通过demo进行测试
Math对象
// Math数学对象 不是一个构造函数，所以我们不需要new来调用，而是直接使用里面的属性和方法即可
console.log(Math.PI); // 一个属性 圆周率
console.log(Math.max(1,99,3)); // 99
console.log(Math.max(-1,-10)); // -1
console.log(Math.max(1,99,'阿波')); // NaN
console.log(Math.max()); // -Infinity

// 1.绝对值方法
console.log(Math.abs(1)); // 1
console.log(Math.abs(-1));// 1
console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为 数字型
console.log(Math.abs('pink')); // NaN
			
// 2.三个取整方法
// （1）Math.floor() 地板 向下取整 往小了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1
// （2）Math.ceil() ceil 天花板 向上取整 往大了取值
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2
// （3）Math.round() 四舍五入 其他数字都是四舍五入，但是 .5 特殊 它往大了取
console.log(Math.round(1.1)); // 1
console.log(Math.round(1.5)); //2
console.log(Math.round(1.9)); //2
console.log(Math.round(-1.1)); //-1
console.log(Math.round(-1.5)); // 这个结果是 -1
Math随机数方法
// 1.Math对象随机数方法 random() 返回一个随机的小数 0 =< x < 1
// 2.这个方法里面不跟参数
// 3.代码验证
console.log(Math.random());
// 4.我们想要得到两个数之间的随机整数 并且 包含这个2个整数
// Math.floor(Math.random() * (max - min + 1)) + min;
function getRandom(min,max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1,10));
   		
// 随机点名
var arr = ['娑娜','璐璐','凯尔','戴安娜','莫甘娜','卡尔玛'];
// console.log(arr[0]);
console.log(arr[getRandom(0,arr.length - 1)]);
猜数字游戏

程序随机生成一个1~10之间的数字，并让用户输入一个数字

  1. 如果大于该数字，就提示数字大了，继续猜
  2. 如果小于该数字，就提示数字小了，继续猜
  3. 如果等于该数字，就提示猜对了，结束程序
1. 随机生成一个1~10的整数，需要用到Math.random()方法
2. 需要一直猜到正确为止，所以一直循环
3. 用while循环更合适更简单
4. 核心算法：使用if else if 多分支语句来判断大于、小于、等于

function GetRandom(min,max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = GetRandom(1,10);
while (true) { // 死循环
	var num = prompt('你来猜？输入1~10之间的一个数字');
	if (num > random) {
		alert('你猜大了');
	} else if (num < random) {
		alert('你猜小了');
	} else {
		alert('猜对了');
		break; // 退出整个循环结束程序
	}
}
Date日期对象

获取当前时间必须实例化

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

Date()构造函数的参数

如果括号里面有时间，就返回参数里面的时间，例如日期格式字符串为’2021-5-1’,可以写成new Date(‘2021-5-1’) 或者 new Date(‘2021/5/1’)

// Date() 日期对象 是一个构造函数 必须使用new来调用创建我们的日期对象
var arr = new Array(); // 创建了一个数组对象
var obj = new Object(); // 创建了一个对象实例
// 1.使用Date 如果没有参数 返回当前系统的当前时间
var date = new Date(); // Fri Jun 25 2021 15:15:50 GMT+0800 (中国标准时间)
console.log(date);
// 2.参数常用的写法 数字型 2021,10,01 或者是 字符串型 '2021-10-1 8:8:8'
var date1 = new Date(2021,10,1);
console.log(date1); // 返回的是 11月 不是 10月 Mon Nov 01 2021 00:00:00 GMT+0800 (中国标准时间)
var date2 = new Date('2021-10-1 8:8:8');
sconsole.log(date2); // Fri Oct 01 2021 08:08:08 GMT+0800 (中国标准时间)
日期格式化

想要2099-8-8 8:8:8 格式的日期，要怎么办？需要获取日期指定的部分，所以我们要手动的得到这个格式

方法名说明代码
getFullYear()获取当年dObj.getFullYear()
getMonth()获取当月（0-11）dObj.getMonth()
getDate()获取当天日期dObj.getDate()
getDay()获取星期几（周日0到周六6）dObj.getDay()
getHours()获取当前小时dObj.getHours()
getMinutes()获取当前分钟dObj.getMinutes()
getSeconds()获取当前秒钟dObj.getSeconds()
// 格式化日期 年月日
var date = new Date();
console.log(date.getFullYear()); // 返回当前日期的年 2021
console.log(date.getMonth() + 1); // 月份 返回的月份小1个月 记得月份+1哟
console.log(date.getDate()); // 返回的是 几号
console.log(date.getDay()); // 周一返回的是1 周六返回的是6 但是 周日返回的是0
// 写一个2021年 6月 25日 星期五
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay();
console.log('今天是' + year + '年' + month + '月' + dates + '日' + arr[day]);

格式化时分秒

var time = new Date();
console.log(time.getHours()); // 时
console.log(time.getMinutes()); // 分
console.log(time.getSeconds()); // 秒
            
// 要求封装一个函数返回当前的时分秒 格式 08:08:08
function getTime() {
	var t = new Date();
	var h = t.getHours();
	h = h < 10 ? '0' + h : h;
	var m = t.getMinutes();
	m = m < 10 ? '0' + m : m;
	var s = t.getSeconds();
	s = s < 10 ? '0' + s : s;
	return h + ':' + m + ':' + s;
}
console.log(getTime());

获取日期的总的毫秒形式

Date对象是基于1970年1月1日（世界标准时间）起的毫秒数

// 获得Date总的毫秒数 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
// 1.通过 valueOf() getTime()
var date = new Date();
console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数 1624606984660
console.log(date.getTime()); // 1624606984660
// 2.简单的写法（最常用的写法）
var date1 = +new Date(); // +new Date() 返回的就是总的毫秒数
console.log(date1); // 1624606984660
// 3.H5新增的 获得总的毫秒数
console.log(Date.now());
倒计时案例

分析：

  1. 核心算法：输入的时间减去现在的时间就是剩余时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数
  2. 用时间戳来做。用户输入的时间的总毫秒数减去现在的总毫秒数，得到的就是剩余时间的毫秒数
  3. 把剩余时间总的毫秒数转换为天、时、分、秒（时间转换为时分秒）
// 转换公式如下：
d = parseInt(总秒数/60/60/24); // 计算天数
h = parseInt(总秒数/60/60%24); // 计算小时
m = parseInt(总秒数/60%60);    // 计算分数
s = parseInt(总秒数%60);       // 计算当前秒数

function countDown(time) {
	var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
	var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
	var times = (inputTime - nowTime) / 1000; // time是剩余时间总的秒数
	var d = parseInt(times / 60 / 60 / 24); // 天
	var h = parseInt(times / 60 / 60 % 24); // 时
	var m = parseInt(times / 60 % 60); // 分
	var s = parseInt(times % 60); // 当前的秒
	return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2021-6-29 14:30:00'));
var date = new Date();
console.log(date);

数组对象

数组创建的两种方式

// 创建数组的两种方式
// 1.利用数组字面量
var arr = [1,2,3];
console.log(arr[0]); // 1
			
// 2.利用new Array()
// var arr1 = new Array(); // 创建了一个空的数组
// var arr1 = new Array(2); // 这个2表示数组的长度为2，里面有2个空的数组元素
var arr1 = new Array(2,3); // 等价于[2,3] 这样写表示，里面有2个数组的元素，是2和3
console.log(arr1);

检测是否为数组

// 检测是否为数组
// (1) instanceof 运算符 它可以用来检测是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
			
//(2) Array.isArray(参数); H5新增的方法 ie9以上版本支持
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

数组索引方法

方法名说明返回值
indexOf()数组中查找给定元素的第一个索引如果存在返回索引号 如果不存在，则返回-1
lastIndexOf()在数组中的最后一个的索引如果存在返回索引号 如果不存在，则返回-1

字符串对象

JS中的变量都是保存到栈内存中的

基本数据类型的值直接在栈内存中存储，值与值之间是独立存在的，修改一个变量不会影响其他的变量

对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟一个新的空间，而变量保存的是对象的内存地址，如果两个变量保存的是同一个对象引用，当其中一个变量修改属性时，另一个也会受到影响。

当相比较两个基本数据类型的值时，就是比较值

而比较两个引用数据类型时，它比较的是对象的内存地址

基本包装类型

基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法

var str = 'andy';
console.log(str.length);

基本数据类型是没有属性和方法的，对象才有属性和方法，但上面代码却可以执行，这是因为js会把基本数据类型包装为复杂数据类型，其执行过程如下：

// 1.生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2.赋值给我们声明的字符变量
str = temp;
// 3.销毁临时变量
temp = null;
字符串的方法
charAt

可以返回字符串中指定位置的字符，根据索引获取指定的字符

var str = 'Hello Tom';
var result = str.charAt(6);
console.log(result); // T
charCodeAt()

获取指定位置字符的字符编码（Unicode编码）

var str = 'Hello Tom';
var result = str.charCodeAt(0);
console.log(result); // 72
String.formCharCode()

可以根据字符编码去获取字符

var str = 'Hello Tom';
var result = str.charCodeAt(0);
result = String.fromCharCode(0x2692);
console.log(result); // ⚒
str[index]

获取指定位置处字符，HTML5，IE8+支持 和charAt()等效

var str = 'Hello Tom';
// 3.str[index] H5新增的
console.log(str[0]); // H
方法名说明
indexOf(‘要查找的字符’,开始的位置)返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置是index索引号
lastindexOf()从后往前找，只找第一个匹配的
// 字符串对象 根据字符返回位置 str.indexOf('要查找的字符',[起始的位置])
var str = '改革春风吹满地,春天来了';
console.log(str.indexOf('春')); // 2
// 从索引号是3的位置开始往后查找
console.log(str.indexOf('春',3)); // 8

// 查找字符串“abcoefoxyozzopp”中所有o出现的位置以及次数
// 核心算法：先查找第一个o出现的位置
// 然后 只要indexOf 返回的结果不是-1就继续往后查找
// 因为indexOf只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找
var str = "abcoefoxyozzopp";
var index = str.indexOf('o');
var num = 0;
while (index !== -1) {
	console.log(index);
	num++;
	index = str.indexOf('o',index + 1); // 3,6,9,12
}
console.log('o出现的次数是：' + num); // 4
substr(start,length)

从start位置开始(索引号)，length取的个数 重点记住这个

// substr('截取的起始位置','截取几个字符');
var str1 = '最爱琴女E';
console.log(str1.substr(2,2)); // 第一个2是索引号的2，从第几个开始，第二个2是取几个字符
// 结果：琴女
substring()

可以用来截取一个字符串

参数：

  1. 第一个，开始截取位置的索引（包括开始位置）
  2. 第二个，结束位置的索引（不包括结束位置）
  3. 这个方法不能接受负值作为参数，如果参数传递了一个负值，则默认使用0
var str = '最爱琴女E';
var result = str.substring(1,3);
console.log(result); // 爱琴

替换字符串以及转换为数组

// 1.替换字符 replace('被替换的字符','替换为的字符') 它只会替换第一个字符
var str = '阿波';
console.log(str.replace('阿','波')); // '波波'
// 有一个字符串 'abcoefoxyozzopp' 要求把里面所有的 o 替换为 *
var str1 = 'abcoefoxyozzopp';
while (str1.indexOf('o') !== -1) {
	str1 = str1.replace('o','*');
}
console.log(str1); // abc*ef*xy*zz*pp
			
// 2.字符转换为数组 split('分隔符')
var str2 = 'red,pink,blue';
console.log(str2.split(',')); // ["red", "pink", "blue"]
var str3 = 'red&pink&blue';
console.log(str3.split('&')); // ["red", "pink", "blue"]
toUpperCase()

将一个字符串转换为大写并返回

var str = 'abcdefg';
var result = str.toUpperCase();
console.log(result); // ABCDEFG
toLowerCaser()

将一个字符串转换为小写并返回

var str2 = 'ABCDEFG';
var result2 = str2.toLowerCase();
console.log(result2); // abcdefg

正则表达式

用于定义一些字符串的规则，计算机可以根据正则表达式来检查一个字符是否符合规则

创建正则表达式

语法：
var 变量 = new RegExp('正则表达式','匹配模式');
使用typeof检查正则对象，会返回object

var reg = new RegExp('a'); // 这个正则表达式可以来检查一个字符中是否含有a
var str = 'a';

// 在构造函数中可以传递一个匹配模式作为第二个参数
// i 忽略大小写
// g 全局匹配模式
var reg = new RegExp('a','i');

正则表达式的方法

test()

用来检查一个字符是否符合正则表达式的规则，如果符合则返回true，否则返回false

var reg = new RegExp();
var str = '最爱琴女E';
var result = reg.test(str);
console.log(reg.test('E')); // true

检查一个字符串中是否有a或b或c

var reg = new RegExp();
reg = /a|b|c/;
console.log(reg.test('bcd')); // true
// []里的内容也是或的关系
// [ab] == a|b

是否有字母

// [a-z] 任意小写字母
// [A-Z] 任意大写字母
// [A-z] 任意字母
var reg = new RegExp();
reg = /[A-z]/;
console.log(reg.test('c')); // true

是否含有abc或adc或aec

var reg = new RegExp();
reg = /a[bde]c/;

除了

// [^ ] 除了
var reg = new RegExp();
reg = /[^ab]/;
console.log(reg.test('ab')); // false
console.log(reg.test('abc')); // true
split()

可以将一个字符串拆分为一个数组

方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串

// 根据任意字母将字符串拆分
var str = '1a2b3c4d5e6f7';
var result = str.split(/[A-z]/);
console.log(result); // 1,2,3,4,5,6,7
search()

可以搜索字符串是否含有指定内容

如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1

它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串

var str = 'hello abc hello aec afc';
// 搜索字符串中是否含有abc或aec或afc
var result = str.search(/a[bef]c/);
console.log(result); // 6
match()

可以根据正则表达式，从一个字符串中将符合条件的内容提取出来，默认情况下match只会找到第一个符合要求的内容，然后就停止检索

可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容

var str = '1a2b3c4d5e6f7A8B9C';
// 可以为正则表达式设置多个匹配模式，且顺序无所谓
var result = str.match(/[A-z]/gi);
console.log(result); // a,b,c,d,e,f,A,B,C
replace()

可以将字符串中指定内容替换为新的内容

参数：

  1. 被替换的内容，可以接受一个正则表达式作为参数
  2. 新的内容

默认只会替换第一个

var str = '1a2b3c4d5e6f7A8B9C';
// 把字母替换为*
var result = str.replace(/[a-z]/gi,'*');
console.log(result); // 1*2*3*4*5*6*7*8*9*

正则表达式语法

量词

通过量词可以设置一个内容出现的次数

量词只对它前边的内容起作用

{n} 表示正好出现n次

// 创建一个正则表达式检查字符串中是否含有aaa
// a正好出现3次
var reg1 = /a{3}/;
console.log(reg1.test('aaa')); // true

// ab正好出现3次
var reg2 = /(ab){3}/;
console.log(reg2.test('ababab')); // true
// /ab{3}/ 表示a只出现一次，b出现3次

// abbbc
var reg3 = /ab{3}c/;
console.log(reg3.test('abbbc')); // true

{m,n} 表示m-n次

var reg4 = /ab{1,3}c/;
console.log(reg4.test('abc')); // true
console.log(reg4.test('abbc')); // true
console.log(reg4.test('abbbc')); // true
console.log(reg4.test('abbbbc')); // false

{m,} 表示m次以上

// 下面表示b：3次以上
var reg5 = /ab{3,}c/;
console.log(reg4.test('abc')); // false
console.log(reg5.test('abbbbc')); // true

+号表示至少一个，相当于{1,}

// abc至少都要有一个
var reg6 = /ab+c/;
console.log(reg6.test('abc')); // true
console.log(reg6.test('ac')); // false
console.log(reg6.test('abbc')); // true

*号表示0个或多个，相当于{0,}

// abc这三个字母有：0个，1个，多个都行
var reg7 = /ab*c/;
console.log(reg7.test('w')); // 不能全没有 false
console.log(reg7.test('ac')); // true
console.log(reg7.test('abc')); // true
console.log(reg7.test('abbbbbbbc')); // true

?号表示0个或1个，相当于{0,1}

// abc可以有0个或1个，多个不行
var reg8 = /ab?c/;
console.log(reg8.test('ac')); // true
console.log(reg8.test('abc')); // true
console.log(reg8.test('abbc')); // false

检查一个字符串中是否以a开头

^表示开头

// 检查字符串是否以a开头
// 匹配开头的a
var reg9 = /^a/;
console.log(reg9.test('abc')); // true
console.log(reg9.test('bca')); // false

$表示结尾

// 检查字符串是否以a结尾
// 匹配结尾的a
var reg10 = /a$/;
console.log(reg10.test('abc')); // false
console.log(reg10.test('abca')); // true

如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式

// 只能是一个a
var reg11 = /^a$/;
console.log(reg11.test('aaa')); // false
console.log(reg11.test('a')); // true

以a开头或以a结尾

var reg12 = /^a|a$/;
console.log(reg12.test('abc')); // true
console.log(reg12.test('bc')); // false
console.log(reg12.test('bca')); // true

创建一个正则表达式，用来检查一个字符串是否是一个合法手机号

规则：

  1. 以1开头
  2. 第二位3-9任意数字
  3. 三位以后任意数字9个

^1 [3-9] [0-9]{9}$

var phoneStr = '18122471876';
var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(phoneStr)); // true

检查一个字符串中是否含有.（点）

.（点）表示任意字符

在正则表达式中使用 \ 作为转义字符

\ . 来表示. (点)

注意：使用构造函数时，由于它的参数是一个字符串，而 \ 是字符串的中转义字符

如果要使用 \ 则需要使用 \ 来代替

// 检查字符串中是否含有.
var reg1 = /./; // 错误写法
console.log(reg1.test('.')); // true
console.log(reg1.test('abc.def')); // true
console.log(reg1.test('abcdef')); // true
			
var reg2 = /\./;// 正确写法
console.log(reg2.test('.')); // true
console.log(reg2.test('abc.def')); // true
console.log(reg2.test('abcdef')); // false
			
var reg3 = /\\/;
console.log(reg3.test('b\\')); // true

\w

任意字母、数字、下划线() 相当于 [A-z0-9]

var reg4 = /\w/;
console.log(reg4.test('y')); // true
console.log(reg4.test('123')); // true
console.log(reg4.test('x_y')); // true
console.log(reg4.test('!@#')); // false

\W

除了数字、字母、下划线() 相当于 [^A-z0-9]

var reg5 = /\W/;
console.log(reg5.test('y')); // false
console.log(reg5.test('123')); // false
console.log(reg5.test('x_y')); // false
console.log(reg5.test('!@#')); // true

\d

任意数字 相当于 [0-9]

var reg6 = /\d/;
console.log(reg6.test('123')); // true
console.log(reg6.test('abc')); // false

\D

// 除了数字 相当于 [^0-9]
var reg7 = /\D/;
console.log(reg7.test('123')); // false
console.log(reg7.test('abc')); // true

\s

// 空格
var reg8 = /\s/;
console.log(reg8.test('123')); // false
console.log(reg8.test('12 3')); // true
console.log(reg8.test('   ')); // true

\S

// 除了空格
var reg9 = /\S/;
console.log(reg9.test('123')); // true
console.log(reg9.test('12 3')); // true
console.log(reg9.test('   ')); // false

\b

// 单词边界
// 找单词child
var reg10 = /\bchild\b/;
console.log(reg10.test('hello children')); // false
console.log(reg10.test('hello child')); // true

\B

// 除了单词边界
var reg11 = /child\B/;
console.log(reg11.test('hello children')); // true
console.log(reg11.test('hello child')); // false

去除前后空格，保留中间空格

// 接收一个用户输入
// var str = prompt('请输入你的用户名：');
// console.log(str);
// 去除空格
str = '         最爱琴女E      ';
// 去除掉字符串中的前后的空格
// 去除空格就是使用''（空串）来替换空格
console.log(str); //          最爱琴女E      
str = str.replace(/\s/g,'');
console.log(str); // 最爱琴女E
// 假如中间有空格，也会被去除
str2 = '         最   爱   琴女   E      ';
str2 = str2.replace(/\s/g,'');
console.log(str); // 最爱琴女E
			
// 去除开头的0到多个空格
str3 = '         最   爱   琴女   E      ';
str3 = str3.replace(/^\s*/g,'');
console.log(str3); //最   爱   琴女   E      
			
// 去除结尾的0到多个空格
str4 = '         最   爱   琴女   E      ';
str4 = str4.replace(/\s*$/,'');

// 去除开头和结尾的0到多个空格
str5 = '         最   爱   琴女   E      ';
str5 = str5.replace(/^\s*|\s*$/g,'');
console.log(str5); //最   爱   琴女   E

电子邮件

/* 
	电子邮件
	wocao@abc.com.cn
	任意字母数字下划线 点 任意字母数字下划线 @ 任意字母数字 点 任意字母（2-5位） 点 任意字母（2-5位）
	\w{3,}   (\.\w+)*   @   [A-z0-9]+   (\.[A-z]{2,5}){1,2}
*/
var emaiReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var email = 'wocao@abc.com.cn';
console.log(emaiReg.test(email));// true
var email2 = 'wocaoabc.com.cn';
console.log(emaiReg.test(email2));// false
var email3 = 'wocao@abc.com.123';
console.log(emaiReg.test(email3));// false
var email4 = '123abc.hello@163.com';
console.log(emaiReg.test(email4));// true

API 和 Web API

API（Application Programming Interface，应用程序编程接口），是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

MDN详细API：https://developer.mozilla.org/zh-CN/docs/Web/API

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值