开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript那点事儿 -> 正文阅读

[JavaScript知识库]JavaScript那点事儿

第一章 javaScript基础语法

一、javaScript介绍

1.浏览器执行js
浏览器分成两部分：渲染引擎和JS引擎
渲染引擎：用来解析HTML和CSS，俗称内核
JS引擎：也成为JS解释器，用来读取网页中的javascript代码，对其处理后运行。

2.js组成：
ECMAScript（javascript语法）、DOM（页面文档对象模型）、BOM（浏览器对象模型）

3.js三种书写位置：行内、内嵌、外部
行内式
可以将单行或少量js代码写在html标签的事件属性中（以on开头的属性），如：onclick
在html中推荐使用双引号，js中推荐使用单引号

<input type="button" value="点我试试" onclick="alert('Hello World')"/>

内嵌

<script>
	alert(' hello world!')
</script>

外部
引用外部js文件的script标签中间不可以写代码

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

4.js注释
单行注释 // 默认快捷键 ctrl + /
多行注释 /* */ 默认快捷键 shift+alt+a

5.javascript 输入输出语句
alert()：浏览器弹出警示框
console.log()：浏览器控制台打印输出信息
prompt()：浏览器弹出输入框，用户可以输入，获取过来的数据默认是字符串类型

二、变量

1.变量是程序在内存中申请的一块可以用来存放数据的空间
2.变量的初始化

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

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

var age=10,myname="张三", sex=1;

4.声明变量特殊情况

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

5.变量名命名规范

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成
严格区分大小写
不能以数字开头
不能是关键字、保留字

三、数据类型

1.分类
js把数据类型分为两类：

简单数据类型：Number,String,Boolean,Undefinded,Null
复杂数据类型：object

2.数字型 Number
JavaScript数字类型既可以用来保存整数值，也可以保存小数。
在js中八进制前面加0，十六进制前面加0x
数字型三个特殊值：

Infinity ，代表无穷大，大于任何数值
-Infinity ，代表无穷小，小于任何数值
NaN ，Not a number，代表一个非数值

isNaN()用来判断一个变量是否为非数字的类型，如果是数字返回false;如果不是数字返回true。

3.字符串类型 String
length：获取整个字符串的长度如,console.log(“123aa”.length)
字符串拼接：

多个字符串使用+进行拼接，字符串+任何类型=拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

4.布尔型 Boolean
布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。
5.Undefined
一个声明后没有被复制的变量会有一个默认值undefined

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

6.Null
一个声明变量给null值，里面存的值为空

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

7.获取变量数据类型 typeof

var num = 18;
console.log(typeof num) // 结果 number

8.数据类型转换

转换为字符串：

变量.toString()
String(变量)
加号拼接字符串

转换为数字型：

方式	说明
parseInt(string)函数	将string类型转成整数数值型
parseFloat(string)函数	将string类型转成浮点数数值型
Number()	将string类型转成数值型
js隐式转换（- * /）	利用算术运算隐式转换为数值型

<script>
	console.log(parseInt("3.14")); // 3
	console.log(parseInt("3.94")); // 3
	console.log(parseInt("120px")); // 120
	console.log(parseInt("rem120px")); // NaN
</script>

转换成布尔型
Boolean()函数

代表空、否定的值会被转换成false，如’’、0、NaN、null、undefined
其余值都会被转成true

四、运算符

1.算术运算符（+ - * / %）
注意浮点数的精度问题
浮点数值的最高精度是17位数，但在进行算术计算时其精度远远不如整数
所以：不要直接判断两个浮点数是否相等

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

2.递增（++）和递减（–）运算符
后置递增(i++)：先返回原值，后自加(先人后己)
前置递增(++i)：先自加，后返回值(先己后人)

var e = 10;
var f = e++ + ++e; // e++=10 e=11, e=12 ++e=12
console.log(f); //10+12=22

3.比较运算符
< 、> 、>=、 <=、 == 、!= 、===、 ! ==
注意：

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

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

逻辑与&&：两边都是true才返回true，否则为false
逻辑或||：两边都为false才返回false，否则都为true
逻辑非!：取反符，用来取一个布尔值相反的值

短路运算（逻辑中断）
短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;
逻辑与

语法：表达式1&&表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

逻辑或

语法：表达式1||表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2

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

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

var num = 0;
console.log(123 || num++);
console.log(num); //0

5.赋值运算符
=、+=、-=、*=、/=、%=
6.运算符优先级

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

五、流程控制和分支结构

1.流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构
在这里插入图片描述
2.JS 语言提供了两种分支结构语句： if 语句和switch 语句
3.if语句

if (条件表达式) {
	//条件成立执行的代码语句
}

4.if else语句

if (条件表达式) {
	// 如果条件成立执行的代码
} else {
	// 条件不成立执行的代码
}

5.if else if 语句

if (条件表达式1) {
	// 语句1；
} else if (条件表达式2) {
	// 语句2；
} else if (条件表达式3) {
	// 语句3;
} else {
	// 上述条件都不成立执行此处代码
}

6.三元表达式
语法结构

条件表达式 ？ 表达式1 ：表达式2

如果条件表达式为true,则返回表达式1的值，如果为false,则返回表达式2的值
7.switch语句
switch 语句也是多分支语句，实现多选一，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。

switch(表达式){
	case value1:
		执行语句1 等于 value1 时要执行的代码;
		break;
	case value2:
		执行语句2 等于 value2 时要执行的代码;
		break;
	...
	default:
		执行最后的语句 不等于任何一个 value 时要执行的代码;
}

switch表达式的值会与结构中的case的值作比较，如果存在匹配全等（===），则与该case关联的代码块会被执行，并在遇到break时停止，整个switch语句代码执行结束，如果所有的case值都和表达式的值不匹配，则执行default里的代码
注：执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。
示例：

<script>
	switch (2){
		case 1:
			console.log("这是1");
			break;
		case 2:
			console.log("这是2");
			break;
		case 3:
			console.log("这是3");
			break;
		default:
			console.log("没有匹配结果");
	}
</script>

8.switch 语句和 if else if 语句的区别

一般情况下，它们两个语句可以相互替换
switch…case 语句通常处理 case为比较确定值的情况，而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
当分支比较少时，if… else语句的执行效率比 switch语句高。
当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

六、循环结构

1.在js中，主要有三种类型的循环语句：for循环、while循环、do…while…循环
2.for循环

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句
语法结构

for (初始化变量; 条件表达式; 操作表达式){
	// 循环体
}

初始化变量：通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。
示例：

for (var i = 1; i <= 100; i++){
	console.log('hello world');
}

执行过程
- 初始化变量，初始化操作在整个 for 循环只会执行一次。
- 执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。
- 执行操作表达式，此时第一轮结束。
- 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
- 继续执行操作表达式，第二轮结束
- 后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。
断点调式
- 浏览器中按 F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点
- Watch: 监视，通过watch可以监视变量的值的变化
- F11: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
for循环重复相同的代码

// 用户输入次数
var num = prompt("请输入次数：");
for (var i = 1; i <= num; i++){
	console.log("你好~");
}

for 循环重复不相同的代码

for (var i = 1; i <= 100; i++){
	if (i == 1){
		console.log("这个人今年1岁了，他出生了");
	}  else if (i == 100){
		console.log("这个人今年100岁了，它死了");
	} else {
		console.log("这个人今年"+ i + "岁了");
	}
}

for 循环重复某些相同操作

var sum = 0;
for (var i = 1; i <= 100; i++){
	sum += i;
}
console.log("1-100之间整数的和 = " + sum);

3.双重for循环

语法

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
	for (内循环的初始; 内循环的条件; 内循环的操作表达式) { 
		需执行的代码; 
	} 
}

说明：外层循环执行一次，内层循环要执行全部次数

打印n行n列五角星
核心：内层循环负责一行打印n个星星，外层循环负责打印n行

var rows = prompt("请您输入行数：");
var cols = prompt("请您输入列数：");
var str = "";
for (var i = 1; i <= rows; i++){
	for (var j = 1; j <= cols; j++){
		str = str + "☆";
	}
	str += "\n";
}
console.log(str);

打印倒三角形
核心算法：每一行星星的个数 j=i; j<=n; j++

var str = '';
for (var i = 1; i <= 10; i++){
	for (var j=i; j<=10; j++){
		str = str + '☆';
	}
	str += '\n';
}
console.log(str);

打印九九乘法表
核心算法：每一行的个数和行数一致， j<=i

var str = '';
for (var i = 1; i <=9; i++){
	for (j=1; j<=i; j++){
		// 1 x 2 = 2
		str += j + "x" + i + "=" + i*j + '\t';
	}
	str += '\n';
}
console.log(str)

4.while循环

语法结构
- while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
- while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

while (条件表达式){
	// 循环体代码
}

示例：

var password = prompt("请输入密码：");
while (password != '123456'){
	password = prompt("密码错误，请重新输入：");
}
alert("密码正确");

5.do while 循环

语法结构
do while 会先执行一次循环体，再判断条件，如果条件表达式结果为真，则继续执行循环体，否则退出循环。
注意：do while 循环语句至少会执行一次循环体代码。
```
do {
	// 循环体	
} while(条件表达式)
```

6.continue
continue 关键字用于立即跳出本次循环，继续下一次循环。
示例：求1~100之间，除了能被7整除之外的整数和

var sum = 0;
for (var i = 1; i <= 100; i++){
	if (i % 7 == 0 ){
		continue;
	}
	sum += i;
}
console.log(sum);

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

var sum = 0;
for (var i = 1; i <= 100; i++){
	if (i % 7 == 0 ){
		break;
	}
	sum += i;
}
console.log(sum);

七、数组和冒泡排序

1.数组的概念
数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式
2.创建数组
js中创建数组有两种方式：

利用new 创建数组

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

利用数组字面量创建数组
```
var arr = []; // 创建一个空数组
```

3.获取数组中的元素

索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）。
数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[索引]”的形式来获取数组中的元素。

// 定义数组
var arr = [1, 2, 3];
// 获取数组中的第二个元素
alert(arr[1]);

4.遍历数组

遍历: 就是把数组中的每个元素从头到尾都访问一次

var arry = ['red', 'green', 'blue'];
for (var i = 0; i < 3; i++){
	alert(arry[i]);
}

数组的长度

使用数组名.length访问数组元素的数量（数组长度）。

var arry = ['red', 'green', 'blue'];
for (var i = 0; i < arry.length; i++){
	alert(arry[i]);
}

求数组中最大值

var arr = [2, 6, 1, 77, 52, 25, 7];
var max = arr[0];
for (var i = 1; i < arr.length; i++){
	if (arr[i] > max){
		max = arr[i];
	}
}
alert(max);

5.数组中新增元素

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

var arr = ['red', 'green', 'blue'];
console.log(arr.length); // 数组长度为3
arr.length = 5; // 把数组长度修改为5
console.log(arr);
console.log(arr[3]); // undefined
console.log(arr[4]); // undefined

通过修改数组索引新增数组元素

var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'yellow';
console.log(arr);

示例：筛选数组

 // 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组。
 // 方法1：
 var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
 var newArr = [];
 var j = 0;
 for (var i = 0; i < arr.length; i++){
	if (arr[i] >= 10){
		newArr[j] = arr[i];
		j++;
	}
}
console.log(newArr);
// 方法2：
 var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
 var newArr = [];
 for (var i = 0; i < arr.length; i++){
	if (arr[i] >= 10){
		newArr[newArr.length] = arr[i];
	}
}
console.log(newArr);

6.数组案例

删除指定数组元素

// 将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组。
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++){
	if (arr[i] != 0){
		newArr[newArr.length] = arr[i];
	}
}
console.log(newArr);

翻转数组

// 将数组 ['red', 'green', 'blue', 'pink', 'purple'] 的内容反过来存放。
var arr = ['red', 'green', 'blue', 'pink', 'purple'];
var newArr = [];
for (var i = arr.length-1; i >= 0; i--){
	newArr[newArr.length] = arr[i];
}
console.log(newArr);

冒泡排序

var arr = [4, 1, 2, 3, 5];
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;
		}
	}
}

八、函数

1.函数：就是封装了一段可被重复调用执行的代码块。
2.函数的使用

函数在使用时分为两步：声明函数和调用函数。
函数不调用，自己不执行。

声明函数

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

调用函数

函数名();

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

函数可以带参数也可以不带参数
声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
调用函数的时候，函数名括号里面的是实参
多个参数中间用逗号分隔

function 函数名(形参1, 形参2, ...){
	// 函数体
}
函数名(实参1, 实参2...);

示例：求任意两个数之间的和

function getSum(num1, num2){
	var sum = 0;
	for (var i = num1; 1 <= num2; i++){
		sum += i;
	}
	console.log(sum);
}
getSum(1, 100);

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

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

5.函数的返回值

function 函数名 (){
	// 函数体
	return 需要返回的值;
}
函数名(); // 调用函数就可以得到函数体内return 后面的值

在使用 return 语句时，函数会停止执行，并返回指定的值,return 语句之后的代码不被执行
如果有return 则返回 return 后面的值；如果函数没有 return ，返回的值是 undefined
return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

示例：

// 利用函数求任意数组中的最大值
function getArrMax(arr){
	var max = arr[0];
	for (var i = 1; i <= arr.length; i++){
		if (arr[i] > max){
			max = arr[i];	
		}
	}
	return max;
}
var result = getArrMax([3, 33,45,64,23]);
console.log(result);

6.arguments的使用
当我们不确定有多少个参数传递的时候，可以用arguments来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。
arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点:

具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法

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

function getMax(){
	var max = arguments[0];
	for (var i = 1; i < arguments.length; i++){
		if (arguments[i] > max){
			max = arguments[i];
		}
	}
	return max;
}
result = getMax(1, 4, 56,23, 666,33)
console.log(result)

7.函数案例
示例一：利用函数翻转任意数组

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

示例二：利用函数冒泡法排序

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 result = sort([5,3,4,1,2])
console.log(result)

示例三：利用函数判断闰年（闰年：能被4整除并且不能被100整数，或者能被400整除）

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

案例四：（函数调用）用户输入年份，输出当前年份2月份的天数，如果是闰年，则2月份是 29天，如果是平年，则2月份是 28天

function backDay(){
	var year = prompt('请您输入年份：');
	if (isRunYear(year)){
		alert(year + '是闰年，2月份29天');
	} else {
		alert(year + '是平年，2月份28天');
	}
}
backDay()
function isRunYear(year){
	var flag = false;
	if (year%4==0 && year%100!=0 || year%400==0){
		flag = true;
	}
	return flag;
}

8.函数的两种声明方式

利用函数关键字自定义函数（命名函数）
调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

// 声明定义方式
function fn(){...}
// 调用
fn();

函数表达式方式（匿名函数）
函数调用的代码必须写到函数体后面
fn是变量名，不是函数名

var fn = function(){...};
fn();

九、作用域及预解析

1.作用域

变量在某个范围内起作用和效果，目的是为了提高程序的可靠性和减少命名冲突。
（es6之前）作用域有两种：全局作用域和局部作用域（函数作用域）
全局作用域：作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。
作用于函数内的代码环境，只在函数内部起作用和效果，就是局部作用域。

2.变量的作用域

在JavaScript中，根据作用域的不同，变量可以分为两种：全局变量和局部变量
全局变量
- 在全局作用域下声明的变量叫做全局变量
- 全局变量在代码的任何位置都可以使用
- 在全局作用域下 var 声明的变量是全局变量
- 特殊情况下，在函数内不使用 var 声明的变量也是全局变量
局部变量
- 在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
- 局部变量只能在该函数内部使用
- 在函数内部 var 声明的变量是局部变量
- 函数的形参实际上就是局部变量
全局变量和局部变量的区别:
- 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
- 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被
  销毁，因此更节省内存空间

3.作用域链

根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
采取就近原则的方式来查找变量最终的值。

var num = 10;

function fn(){ // 外部函数
	var num = 20;
	function fun() { // 内部函数
		console.log(num); // 20
	}
	fun();
}
fn();

4.预解析

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行
- 预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
- 代码执行：从上到下执行JS语句
- 预解析只会发生在通过 var 定义的变量和 function 上。
预解析分为变量预解析（变量提升）和函数预解析（函数提升）
- 变量提升：把所有的变量声明提升到当前作用域最前面，不提升赋值操作
- 函数提升：把所有的函数声明提升到当前作用域的最前面，不调用函数

示例1

// 结果是undefined
var num = 10;
fun();
function fun() {
	console.log(num);
	var num = 20;
}

// 相当于执行了以下操作
var num;
function fun(){
	var num;
	console.log(num);
	num = 20;
}
num = 10;
fun();

示例2

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

// 相当于执行了以下操作
var a;
function f1() {
	var b;
	var a
	b = 9;
	console.log(a);
	console.log(b);
	a = '123';
}
a = 18;
f1();

示例3

// 结果是 9 9 9 9 9 报错，a is not defined
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
	var a = b = c = 9;
	console.log(a);
	console.log(b);
	console.log(c);
}

// 相当于执行了以下操作
function f1() {
	var a;
	a = b = c = 9;
	// var a = b = c = 9; 相当于var a=9;b=9;c=9; b和c直接赋值，没有var声明，当全局变量看
	// 集体声明写法 var a=9,b=9,c=9;
	console.log(a);
	console.log(b);
	console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);

十、JavaScript 对象

1.对象

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，对象是由属性和方法组成的。
属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

为什么需要对象？JS 中的对象表达结构更清晰，更强大。

person.name = '张三疯';
person.sex = '男';
person.age = 128;
person.height = 154；

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

字面量
new Object
构造函数

3.利用字面量创建对象

对象字面量，就是花括号{}里面包含了表达这个具体对象的属性和方法。{}里面采取键值对的形式表示。
对象的调用
- 对象的属性调用：对象.属性名或者 对象['属性名']
- 对象的方法调用：对象.方法名()

var obj = {}; // 创建了一个空的对象
var object = {
	uname: '张三',
	age: 18,
	sex: '男',
	sayHi: function(){
		console.log('hello~')
	}
}
console.log(object.uname);
console.log(object['age']);
object.sayHi();

4.利用new Object创建对象

var obj = new Object(); // 创建了一个空对象
obj.uname = "老王";
obj.age = 18;
obj.sayHi = function(){
	console.log('hello~')
}
console.log(obj.uname);
console.log(obj['age']);
obj.sayHi();

5.利用构造函数创建对象
构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
构造函数的语法格式

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

注意：

构造函数约定首字母大写。
函数内的属性和方法前面需要添加this，表示当前对象的属性和方法。
构造函数中不需要 return返回结果。
当创建对象的时候，必须用 new来调用构造函数。
通过 new 关键字创建对象的过程称为对象实例化

function Person(name, age, sex){
	this.name = name;
	this.age = age;
	this.sex = sex;
	this.sayHi = function(){
		alert('我的名字叫：' + this.name + ', 年龄：' + this.age + ',性别：' + this.sex);
	}
}
var person = new Person('隔壁老王', 20, '男'); // 调用函数返回的是一个对象
console.log(person.name);
person.sayHi();

6.new关键字
new 在执行时会做四件事情：

在内存中创建一个新的空对象。
让 this 指向这个新的对象。
执行构造函数里面的代码，给这个新对象添加属性和方法。
返回这个新对象（所以构造函数里面不需要return）。

7.遍历对象属性
for...in语句用于对数组或者对象的属性进行循环操作
语法结构

for (变量 in 对象名字){
}

var obj = {
	name:'李四',
	age:18,
	sex:'男',
	fn:function(){console.log('你好~')}
}
for(var k in obj){
	console.log(k); // 属性名
	console.log(obj[k]); //属性值
}

十一、内置对象及案例

1.内置对象

JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象
JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

2.文档

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

3.Math对象

Math 对象不是构造函数，所以不需要new来调用，它具有数学常数和函数的属性和方法，直接使用即可。

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

示例1：封装数学对象

var myMath = {
	PI: 3.1415926,
	max:function(){
		var max = arguments[0];
		for(var i = 1; i < arguments.length; i++){
			if(arguments[i] > max){
				max = arguments[i];
			}
		}
		return max;
	},
	min:function(){
		var min = arguments[0];
		for (i = 1; i < arguments.length; i++){
			if (arguments[i] < min){
				min = arguments[i];
			}
		}
		return min;
	}
}
console.log(myMath.PI);
console.log(myMath.max(1, 4, 6, 2, 3));
console.log(myMath.min(1, -4, 6, 2, 3));

随机数方法random()
random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1
得到一个两数之间的随机整数，包括两个数在内
```
function getRandom(min, max){
	return Math.floor(Math.random() * (max-min+1)) + min;
}
console.log(getRandom(1, 10))
```

4.日期对象Date
Date 对象是一个构造函数，所以需要实例化后才能使用。

获取当前时间

var now = new Date();
console.log(now);  // Sat Aug 14 2021 21:30:55 GMT+0800 (中国标准时间)

Date() 构造函数的参数

数字型 2021, 8, 14
字符串型 ‘2021-08-14 8:8:8’

var date1 = new Date(2021, 8, 14);
console.log(date1); // Tue Sep 14 2021 00:00:00 GMT+0800 (中国标准时间)
var date2 = new Date('2021-08-14 8:8:8');
console.log(date2);  // Sat Aug 14 2021 08:08:08 GMT+0800 (中国标准时间)

日期格式化

方法名	说明
getFullYear()	获取当年
getMonth()	获取当月（0-11）
getDate()	获取当天日期
getDay()	获取星期几（周日0到周六6）
getHours()	获取当前小时
getMinutes()	获取当前分钟
getSeconds()	获取当前秒钟

// 2021年8月14日 星期日
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var day = date.getDay();
var arr = ['星期日', '星期一','星期二','星期三','星期四','星期五','星期六'];
console.log(year + '年' + month + '月' + dates + '日 '  + arr[day]);

// 08:08:08
function getTime(){
	var time = new Date();
	var h = time.getHours();
	h = h < 10 ? '0' + h : h;
	var m = time.getMinutes();
	m = m < 10 ? '0' + m : m;
	var s = time.getSeconds();
	s = s < 10 ? '0' + s : s;
	return h + ':' + m + ':' + s;
}
console.log(getTime());

获取日期的总的毫秒(时间戳)
Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数

// 方法1：
var date = new Date();
console.log(date.valueOf());
// 方法2：
var date = new Date();
console.log(date.getTime());
// 方法3:(最常用写法)
var date = +new Date();
console.log(date);
// 方法4：（H5 新增 有兼容性问题）
console.log(Date.now());

倒计时案例

核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时
用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数
把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）
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;
	var d = parseInt(times/60/60/24);
	d = d < 10 ? '0' + d : d;
	var h = parseInt(times/60/60%24);
	h = h < 10 ? '0' + h : h;
	var m = parseInt(times/60%60);
	m = m < 10 ? '0' + m : m;
	var s = parseInt(times%60);
	s = s < 10 ? '0' + s : s;
	return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2021-8-16 08:30:00'))

5.数组对象

数组对象的创建

// 创建数组元素的两种方式
// 1.数组字面量
var arr = [1, 2, 3];
// 2.new Array()
var arr1 = new Array(); // 创建了一个空的数组
var arr2 = new Array(2); // 这个2表示数组的长度，里面有2个空的数组元素
var arr3 = new Array(2, 3); // 等价于[2, 3]

检测是否为数组

instanceof
Array.isArray() h5新增方法，ie9以上版本支持

var arr = [1, 2];
console.log(arr instanceof Array); // true
console.log(Array.isArray(arr)); // true

添加删除数组元素的方法

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

var arr = [1, 2, 3]
a = arr.push(4, '张三');
console.log(a); // 5
console.log(arr); // [1, 2, 3, 4, "张三"]
b = arr.pop();
console.log(b); // 张三
console.log(arr); // [1, 2, 3, 4]

数组排序

方法名	说明
reverse()	反转数组中元素的顺序，修改原数组
sort()	对数组的元素进行排序，修改元素组

var arr = [1, 64, 9, 6];
arr.sort(function(a, b){
	return a - b; //升序
	// return b - a; // 降序	
});
console.log(arr); // [1, 6, 9, 64]

数组索引方法

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

数组去重案例 [‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’]

目标：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重。
核心算法：我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加。
利用新数组.indexOf(数组元素) 如果返回时 -1 就说明新数组里面没有改元素

function unique(arr){
	var newArr = [];
	for (var i = 0; i < arr.length; i++){
		if (newArr.indexOf(arr[i]) === -1){
			newArr.push(arr[i]);
		}
	}
	return newArr;
}
var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']);
console.log(demo); // ["c", "a", "z", "x", "b"]

数组转换为字符串

方法名说明返回值
toString() 把数组转成字符串，逗号分隔每一项返回一个字符串
join(‘分隔符’) 把数组转成字符串，分隔符分隔每一项返回一个字符串
```
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
var arr1 = [4, 5, 6];
console.log(arr1.join('&')); // 4&5&6
```

其他

方法名	说明	返回值
concat()	连接两个或多个数组，不影响原数组	返回一个新的数组
slice()	数组截取slice(begin,end)	返回被截取的新数组
splice	数组删除 splice(第几个开始，要删除个数)	返回被删除的新数组，会影响原数组

6.字符串对象