JavaScript基础知识点汇总

1 JavaScript基础

1.1 编程语言

​ 编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守

​ 编程语言有机器语言、汇编语言、高级语言
​ 高级语言需要一个翻译器转换为计算机识别的机器语言

编程语言与标记语言的区别

​ 编程语言是主动的有很强的逻辑和行为能力，标记语言是被动的，没有逻辑和行为能力

编译和解释语言的区别

​ 翻译器翻译的方式有两种：一个是编译，一个是解释。
​ 区别在于：翻译的时间点不同
​ 编译： 先编译，再执行
​ 解释： 边解释边运行

1.2 计算机基础

​ 常见的数据存储单位及其换算关系:

	- 位(bit)：   1bit 可以保存一个 0 或者 1 （最小的存储单位）
	- 字节(Byte)：1B = 8b
	- 千字节(KB)：1KB = 1024B
	- 兆字节(MB)：1MB = 1024KB
	- 吉字节(GB):  1GB = 1024MB
	- 太字节(TB):  1TB = 1024GB


内存的主要作用以及特点:
	内存作用：存储运行中程序的数据
	内存特点：运行速度极快，断电数据丢失

1.3 初识JavaScript

​ JavaScript：是一种运行在客户端（电脑、浏览器）的脚本语言 ***
​ 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行解释并执行

	编译型语言：java 		1. 编译：翻译   2. 运行
	解释型语言：JavaScript   	边解释边运行
	js 解释器( js 引擎） ： 翻译器

JavaScript 的发展历史：布兰登·艾奇10天完成开发，刚开始叫做LiveScript，后改名为JavaScript。
JS作用：
	- 表单动态校验（密码强度检测）  （ JS 产生最初的目的 ）
	- 网页特效
	- 服务端开发(Node.js)
	- 桌面程序(Electron)
	- App(Cordova) 
	- 控制硬件-物联网(Ruff)
	- 游戏开发(cocos2d-js)

浏览器执行JS过程/原理
浏览器通过内置的JS引擎执行代码，逐行解释每一句源码（转换为机器语言），然后由计算机去执行
JavaScript 语言归为脚本语言，会逐行解释执行。
JS引擎 ：Js解释器 ， 将js高级语言转换为机器语言

JS三部分

​ ECMAScript：Js语法
​ DOM：文档对象模型 操作html文档的工具
​ BOM：浏览器对象模型 操作浏览器的工具

JS三种书写位置

行内式 ：直接写到元素的内部 用的比较少

<input type="button" value="唐伯虎" onclick="alert('秋香姐')">

内嵌式 ： 学习时常用的方式

外链式： 工作中常用

注意： 外链式不要与内嵌式混用

JS输入输出语句

​ JavaScript 三个输入输出语句：
​ 浏览器 弹出警示框： alert(‘msg’)
​ 浏览器 控制台打印输出信息： onsole.log(‘msg’) 控制台log日志输出 ， 记录程序执行过程中的信息
​ 浏览器 弹出输入框，用户可以输入： prompt(‘msg’)

2 变量

​ 变量：用于存放数据的容器
​ 本质：变量是程序在内存中申请的一块用来存放数据的空间。
​ 酒店的房间，一个房间就可以看做是一个变量。
​ 旅客去酒店开房：js声明变量
​ 酒店：内存条
​ 房间：存储数据的空间
​ 旅客：数据
​ 房间号：变量名 （通过变量来找到内存条中存储的数据）

变量使用

使用步骤：1.变量声明 2.变量赋值
	变量声明：定义变量，创建变量
	变量赋值：
	变量的初始化 （变量声明+变量赋值）

• 变量语法扩展
  1.声明变量统一使用 var
  2.变量更新：变量初始化之后，可以重新赋值
  3.同时声明多个变量 , 以英文逗号分隔
  同时初始化多个变量：
  var age = 10, name = ‘zs’, sex = 2;
  同时声明多个变量：
  var age , name , sex ;
  同时赋值多个变量：
  age = 10 ， name = ‘zs’ , sex = 2;

• 特殊情况
  1.只声明 不赋值：undefined（变量的默认值）
  2.不声明 不赋值: 报错
  3.不声明 只赋值: 正常，但不规范

变量命名规范

• 由字母(A-Z a-z)、数字(0-9)、下划线(_)、美元符号( $ )组成
  区分大小写
  不能 以数字开头
  不能 是关键字、保留字
  变量名必须有意义，见名知意
  遵守驼峰命名法。首字母小写，后面单词的首字母需要大写

3 数据类型

数据类型：不同的数据所需占用的存储空间是不同的，定义不同的数据类型，充分利用存储空间
JavaScript 是一种弱类型语言
声明变量后，无法确定变量的数据类型，只能赋值之后才确定

JavaScript 是一种动态语言
相同的变量可用作不同的类型
如：一个变量，先存储数字，可再重新赋值为字符串

JS把数据类型分为两类：

• 简单数据类型 （Number String Boolean Undefined Null）

• 复杂数据类型 （object)

3.1 数字型Number

数字型进制：
最常见的进制有：二进制、八进制 0、十进制、十六进制 0x
数字型范围：

- 最大值：Number.MAX_VALUE
- 最小值：Number.MIN_VALUE

数字型三个特殊值：
Infinity 代表无穷大
-Infinity 代表无穷小
NaN （Not a number） 代表一个非数值，属于Number类型 （字符串与数值做运算）

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

3.2 字符串型String

​ 1.字符串型可以是引号中的任意文本，其语法为 双引号 “” 或 单引号’’
​ 2.字符串引号嵌套：单套双 / 双套单
​ 3.字符串转义符
​ 类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符
​ 转义符：可将特殊字符转义为非特殊字符，也可将非特殊字符转义为特殊字符
​ 转义符以 \ 开头
​ 常用转义符：
​ 换行符： \n
​ 斜杠： \
​ tab缩进： \t
​ 退格： \b -----backspace-----视频中有问题

字符串长度以及拼接

• 通过length属性获取字符串长度。
  ​ var str=“”;
  ​ str.length;

• 拼接：‘字符串’ + 任何类型 +任何类型 … = 新字符串

3.3 boolean与undefined和null

​ 布尔类型有两个值：true 和 false ，true 表示真（1），而 false 表示假（0）
​ 布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0
​ undefined：只声明 未赋值的变量，变量的默认值
​ var i;
​ console.log(i); // undefined
​ console.log(‘你好’ + i); // 你好undefined
​ console.log(11 + i); // NaN
​ console.log(true + i); // NaN
​ null
​ var n = null;
​ console.log(‘你好’ + n); // 你好null
​ console.log(11 + n); // 11 , 空代表没有，意味0
​ console.log(true + n); // 1

typeof 检测变量数据类型
typeof 可用来获取检测变量的数据类型：
typeof xxx
typeof(xxx)

3.4 常见的三种转换

3.4.1转换为字符串类型

xxx.toString()
String(xxx)
xxx+"" 通过 + 空字符串来实现转换 隐式转换

3.4.2转换为数字型

parseInt(String)

​ 将字符串类型转为整数类型
​ var num1 = parseInt(“12.3abc”); // 返回12
​ var num2 = parseInt(“abc123”); // 返回NaN

parseFloat(String)

​ 把字符串转换成浮点数
​ parseFloat(‘12.34.56’); //返回12.34

Number(String)

​ 将字符串转换成数值，但字符串中存在字符，返回NaN
​ 运算符：减 - 乘 * 除 / 隐式转换

3.4.3转换为布尔型

​ 语法：Boolean(xxx)
​ 仅代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined

4 运算符

常用运算符
	算数运算符+ - * / %
	递增 / 递减运算符
	比较运算符
	逻辑运算符
	赋值运算符

4.1 算数运算符

算数运算符 + - * / %
% 取余，返回除法的余数
浮点数精度问题：在含有小数的数字进行运算时，会出现精度丢失问题

4.2 递增++/递减–运算符

​ 前置 递增运算符
​ 语法：++num
​ 先自加，后返回值

​ 后置 递增运算符
​ 语法：num++
​ 先返回原值，后自加

4.3 比较运算符

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

• ​ 大于> 小于< 大于等于>= 小于等于<=

• ​ 相等== 内容相等 （隐式转换：会把字符串数据转换为数字型）
  ​ 全等=== 内容和类型全都相等
  ​ 不相等!=
  ​ 不全等 !==

4.4 逻辑运算符

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

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

• 逻辑 或 || 两边都是 false才返回 false，否则返回 true

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

短路运算
原理：
当有多个表达式（值）时（不是布尔值）,左边的表达式值可以确定结果时,就不再继续运算右边的表达式值;
短路运算，返回起决定性作用的一方

• ​ 逻辑中断 逻辑与（碰到false，就中断）
  ​ 碰到false（ ‘’、0、NaN、null、undefined），返回当前值；反之，返回最后面的值
  ​ console.log( 123 && 456&& 789 ); // 789

• ​ 逻辑中断 逻辑或（碰到true，就中断）
  ​ 碰到true，返回当前值；反之，返回相邻后面的值
  ​ console.log( 0 || 111 || 222); // 111

4.5 赋值运算符

​ 概念：用来把数据赋值给变量的运算符。
​ = += -= *= /= %= 先操作，在赋值
​ num += 1等于num = num + 1

! 运算符优先级

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

5 流程控制

​ 流程控制就是来控制代码按照一定结构顺序来执行

流程控制分类：
	顺序结构
	分支结构
	循环结构

5.1 顺序结构

​ 程序会按照代码的先后顺序，依次执行

5.2 分支结构

​ 分支结构：由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果
​ JS 语言提供了两种分支结构语句：if 语句、switch 语句

if 语句

if分支语句

​ 语法：

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

if else双分支语句

​ 语法：

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

if和else if多分支语句

​ 语法：

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

三元表达式

​ 三元表达式：if else(双分支)的简写
​ 语法：

表达式1 ? 表达式2 : 表达式3;

​ 如果表达式1为 true ，返回表达式2的值
​ 如果表达式1为 false，返回表达式3的值

switch语句

​ switch为多分支语句，根据不同的条件执行不同的代码
​ 语法：

switch( 表达式或值 ){ 			//括号内通常是一个变量
	case value1: 
								// 表达式 等于 value1 时要执行的代码
		break;
	case value2:
								// 表达式 等于 value2 时要执行的代码
		break;
	default:
								// 表达式 不等于任何一个 value 时要执行的代码
}

switch和if elseif 区别

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

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

5.3 循环结构

循环的目的
在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行的语句

循环分类：
	for 循环
	while 循环
	do…while 循环

for循环

语法：

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

例子：

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

断点调试


Watch: 监视，通过watch可以监视变量的值的变化

步骤：
	打断点 （js代码第一行）
	刷新，运行程序
	观察变量
	发现问题

例子：
1、输出1到100岁，并提示出生、死亡
for (var i = 1; i <= 100; i++) {
	if (i == 1) {
		console.log('这个人今年1岁了， 它出生了');
	} else if (i == 100) {
		console.log('这个人今年100岁了，它死了');
	} else {
		console.log('这个人今年' + i + '岁了');
	}
}

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

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

双for循环

​ 1.双重for循环：
​ 循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，
​ 这样的 for 循环语句我们称之为双重for循环。
​ 2.语法：
​

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

​ 3.注意：
​ 内层循环可以看做外层循环的语句
​ 内层循环执行的顺序也要遵循 for 循环的执行顺序
​ 外层循环执行一次，内层循环要执行全部次数
九九乘法表

var num = '';
for (var i = 1; i <= 9; i++) {
	for (var j = 1; j <= i; j++) {
	num = num + j + '*' + i + '=' + j * i + '\t';
	}
	num += '\n';
}
console.log(num);

while循环

语法

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

执行流程

• 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
• 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false
  时，整个循环过程才会结束
  注意
  ​ - 使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
  ​ - while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

while案例

打印人的一生，从1岁到100岁

var i = 1;
	while (i <= 100) {
		console.log('这个人今年' + i + '岁了');
		i++;
	}

while循环也有 初始化变量，条件表达式，循环体代码，操作表达式

do while循环

语法

 do {
    ​			// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
    ​		} while(条件表达式);

执行流程

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

while与do while的区别

• while先判断条件，再执行循环体

• do while，先执行一次循环体，再判断条件

  do while至少执行一次循环体代码

do while案例

打印人的一生，从1岁到100岁

var i = 1;
do {
	console.log('这个人今年' + i + '岁了');
	i++;
} while (i <= 100)

循环小结

JS 中循环有 for 、while 、 do while

• 如果是用来计次数，跟数字相关的，用 for
• while 和 do…while 可以做更复杂的判断条件，比 for 循环灵活一些
• while 和 do…while 执行次数不一样，do…while 至少会执行一次循环体， 而 while 可能一次也不执行
• 实际工作中，我们更常用for 循环语句，它写法更简洁直观

5.4 continue break关键字

continue 关键字

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

break 关键字

​ 用于立即跳出整个循环（循环结束）

6 数组

​ 1.数组Array是指一组数据的集合，使用一个变量同时存储多个数据
​ 2.数组中的数据被称作元素，元素的数据类型没有限制，并提供方便的访问(获取)方式
​ 3.在数组中一般把相关且数据类型相同的数据存放一起

创建方式

​ 1.利用 new 创建数组
​ var 数组名 = new Array() ； // 创建一个新的空数组
​ 2.利用数组字面量创建数组
​ var 数组名 = [ ]；

	注意： 数组内部存储数据的形式：
		var dogs = ['小白','小黑','大黄','rui奇'];

​ var dogs = [0:‘小白’ , 1:‘小黑’ , 2:‘大黄’ , 3:‘rui奇’];
​ 通过索引来操作数组(获取、新增、修改)的元素 dogs[0]

访问数组元素

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

• ​ 从数组中取出来指定元素：利用数组的索引值取元素

• ​ 如果通过索引值获取数组中没有的元素，得到的值是undefined

• ​ 语法：数组名[索引]

遍历数组

​ 1.遍历数组：通过循环过程中的计数器变量，把数组中的元素从头到尾访问一遍

​ 2.通过for循环获取

​ 3.遍历数组的写法：

​ for( var i = 0 ; i< 数组arr的长度 ；i++ ){
​ arr[ i ] ; // 遍历到的数组arr的元素
​ }

数组长度

​ 使用“数组名.length”可以访问数组元素的数量（数组长度）。
​ 例子：
​ var i = [1,2,3];
​ alert(i.length); // 3

数组新增元素

• 通过数组[新索引]的方式追加数组元素，如果是旧索引，则会覆盖原元素

• 通过索引来操作数组(获取、新增、修改)的元素

  题目：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组

  var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
  		var newArr = [];							// 刚开始 newArr.length 就是 0							
  		for (var i = 0; i < arr.length; i++) {
  			if (arr[i] >= 10) {						// 新数组索引号应该从0开始 依次递增								
  				newArr[newArr.length] = arr[i];
  			}
  		}
  		console.log(newArr);
  

  此题重点，大家需要会通过arr[arr.length]=新元素，来动态给数组添加元素

冒泡排序

冒泡排序：把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小）

							
	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]) {					// 内部交换2个变量的值 前一个和后面一个数组元素相比较
				var temp = arr[j];
				arr[j] = arr[j + 1];
				arr[j + 1] = temp;
			}
		}
	}
	console.log(arr);									// var arr = [5, 4, 3, 2, 1];

7 函数

函数：就是封装了一段可被重复调用执行的代码块，实现了一个功能。通过此代码块可以实现大量代码的重复使用。

函数的使用

使用步骤：声明函数和调用函数。

• 声明函数：
  function 函数名() {
  //函数体代码
  }
  注意：
  由于函数一般是为了实现某个功能才定义的， 通常将函数名命名为动词，比如 getSum

• 调用函数：
  函数名( ); // 通过函数名(),来执行函数体代码
  注意：
  声明函数本身并不会执行函数内部代码，只有调用函数时才会执行函数体代码

函数的封装

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

利用函数求1~100累加和

1. 声明函数

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

2. 调用函数
   getSum();

函数的参数

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

1. 形参：在声明函数时，可以在函数名称后面的小括号中添加一些参数 相当于声明了一个变量
2. 实参：调用该函数时，传递的参数 相当于给变量赋值

函数的返回值return

1. 函数将值返回给调用者，通过使用 return 语句实现

2. 语法：
   ​ 声明函数 ​ function 函数名（）{ ​ … ​ return 需要返回的值； ​ }
   ​ 调用函数 ​ var result = 函数名(); // 此时调用函数就可以得到函数体内return 后面的值

3. 注意：

   	在使用 return 语句时，函数会停止执行，并返回指定的值 ​				
   	如果函数没有 return，默认也有返回值，默认是 undefined
   

• 函数使用的整个过程案例

1. 没有参数，没有返回值

function getSums() {
      	var sum = 0;
      	for (var i = 1; i <= 100; i++) {
       	  sum += i;
     	 }
    	  console.log(sum);
}

2. 有参数

function getSums(start, end) {
      var sum = 0;
      for (var i = start; i <= end; i++) {
          sum += i;
      }
      console.log(sum);
  }

3. 有参数，有返回值

function getSums(start, end) {
      var sum = 0;
      for (var i = start; i <= end; i++) {
          sum += i;
      }
      return sum;
  }
var result = getSums(1,100);
console.log(result);

​ 函数： 封装了一个带有功能性的代码，并将结果返回

• return终止函数并且只能返回一个值

  1. return 语句之后的代码不被执行
  2. return 只能返回一个值，如果用逗号隔开多个值，以最后一个为准。

• 函数返回值2个注意事项

  1. 函数都是有返回值的
     如果有return 则返回 return 后面的值
     如果没有return 则返回 undefined

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

  如何编写一个函数：

               1.  确定函数名  
               2.  确定参数 ： 只要有一个不确定的因素，都可以变成一个参数
               3.  确定返回值  ： 运算结果
  

函数使用的整个过程案例

1. 没有参数，没有返回值

function getSums() {
      	var sum = 0;
      	for (var i = 1; i <= 100; i++) {
       	  	sum += i;
     	 }
    	 console.log(sum);
}

2. 有参数

function getSums(start, end) {
      var sum = 0;
      for (var i = start; i <= end; i++) {
          sum += i;
      }
      console.log(sum);
  }

3. 有参数，有返回值

function getSums(start, end) {
      var sum = 0;
      for (var i = start; i <= end; i++) {
          sum += i;
      }
      return sum;
  }
var result = getSums(1,100);
console.log(result);

arguments(参数)使用

• 在JS中，仅函数有arguments对象，arguments 对象中存储了传递的所有实参

• arguments展示形式是一个伪数组，可以进行遍历

• 伪数组具有以下特点：
  ​ 具有 length 属性
  ​ 按索引方式储存数据
  ​ 不具有数组的 push , pop 等方法

• arguments的应用场景：用户调用函数时，不确定传递多少个参数时，函数声明，不使用形参，使用arguments

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

  function maxValue() {
        var max = arguments[0];
        for (var i = 0; i < arguments.length; i++) {
           if (max < arguments[i]) {
                      max = arguments[i];
           }
        }
        return max;
  }
   console.log(maxValue(2, 4, 5, 9));
   console.log(maxValue(12, 4, 9));
  

函数调用另外一个函数

1. 因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况。		
2. **可以相互调用，但是不能 同时 相互调用，会形成死循环**

函数的两种声明方式

1. 自定义函数方式(命名函数)

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

2. 函数表达式方式(匿名函数）

var fun = function(){…}；// 这是函数表达式写法，匿名函数后面跟分号结束

fun();// 调用的方式，函数调用必须写到函数体下面

注意：
fun是变量名，不是函数名
函数表达式方式原理跟声明变量方式是一致的

应用场景：在对象中声明函数时，使用函数表达式方式 ***

命名函数： 有名字：fn

匿名函数： 没有名字，有变量名fun

​

JS作用域

1. 作用域：变量起作用的范围

2. 作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突

3. JS（es6前）中的作用域有两种：
   全局作用域 （函数外部）
   局部作用域 （函数内部）（函数作用域）

4. 全局作用域：整个 script 标签内部 或者 一个独立的 js 文件

5. 局部作用域（函数作用域）：作用于函数内的代码环境

全局变量和局部变量

1. 全局变量：
1. 在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量 ）	
2. 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用） （隐式全局变量）

2. 局部变量：
   1. 在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
   2. 局部变量只能在该函数内部使用
   3. 函数的形参 是 局部变量

3. 区别：
   全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，比较占内存
   局部变量：只在函数内部使用，当代码块被执行时，被初始化；当函数运行结束后，被销毁，节省内存空间

JS目前没有块级作用域（在ES6之前）

​ 块作用域由 { } 包括

作用域链

1. 作用域链：函数嵌套函数，作用域中有作用域，形成作用域链
2. 规律：采取就近原则的方式来查找变量最终的值

预解析

1. JavaScript 代码是由浏览器中的 JS引擎来执行的。JS引擎运行JS代码分为两步：**预解析	代码执行**
2. 预解析：js引擎会把JS里面所有的 var  和 function 提升到当前作用域的最前面
 		在代码执行之前，先读一遍代码，找var，function

3. 预解析做两件事情：

    1. **变量声明提升** ：变量的声明会被提升到当前作用域的最上面，不提升赋值操作
    2. **函数声明提升** ：函数的声明会被提升到当前作用域的最上面，不调用函数
   

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

   var a=b=c=9; 预解析： var a ; a=b=c=9; → 全局变量

   var a=9,b=9,c=9; 预解析： var a ; var b ; var c ; a=9; b=9; c=9;

---

8 对象

1. 在JavaScript中，对象是一组无序的相关属性和方法的集合

2. 对象由属性和方法组成

   • 属性：事物的特征（常用名词） 对象中的变量
   • 方法：事物的行为（常用动词） 对象中的函数

3. 对象可以让代码结构更清晰

创建对象方式

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

利用字面量创建对象

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

  • { } 里面采取 键值对 的形式
    键：相当于属性名
    值：相当于属性值，任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

  • 例子：

  var star = {
  	name : 'pink',
  	age : 18,
  	sex : '男',
  	sayHi : function(){
  		alert('大家好啊~');
  	}
  };
  

• 对象使用

  • 调用对象的属性 : 对象.属性名 star.name
    调用对象的属性的另一种方式 : 对象[‘属性名’]，方括号里的属性必须加引号 star[‘name’]
  • 调用对象的方法：对象.方法名() star.sayHi()

对象与数组

1. 声明：

var star = {
		name : 'pink',
		age : 18,
		sex : '男',
		sayHi : function(){
			alert('大家好啊~');
		}
}
var arr = [1,2,3];  
var arry = [
			0: 1,
			1: 2,
			2: 3
		]

2. 存储结构：
   都是key:value
   对象的key是：属性名
   数组的key是：索引

3. 获取： 都是通过key获取value
   star[‘name’]; 通过中括号key获取对象的value，需要添加引号。
   arr[0]

变量 属性 函数 方法 的区别
变量：单独声明赋值，单独存在
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
函数：单独存在，调用通过“函数名()”的方式
方法：对象里面的函数称为方法，不需要声明，调用使用“对象.方法名()”的方，用来描述该对象的行为和功能

利用new Object创建对象

对象复杂数据类型object

• 利用new Object创建对象

var andy = new Object();
		andy.name = 'pink';  // 新增加属性
		andy.age = 18;
		andy.sex = '男';
		andy.sayHi = function(){
			alert('大家好啊~');
		}

• 利用字面量创建对象

		var star = { 
			name : 'pink',
			age : 18,
			sex : '男',
			sayHi : function(){
				alert('大家好啊~');
			}
		}

利用构造函数创建对象

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

2. 例子

//构造函数
function Person(name, age, sex) {
		 // 1. 创建了Person的对象this  *js内部做的第一件事情*
		 this.name = name;
		 this.age = age;
		 this.sex = sex;
		 this.sayHi = function() {
		  alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
		}
		// 2. return this;   *js内部做的第二件事情*
}
//对象
var dabai = new Person('大白', 100, '男');

var xiaobai = new Person('小白', 21, '男');

3. 注意

• 构造函数约定首字母大写

• 函数内的属性和方法前面需添加 this ，表示当前对象的属性和方法

• 构造函数中不需要 return 返回结果

• 创建对象时，必须用 new 调用构造函数

构造函数和对象区别
1.构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，泛指某一大类（class） 比如苹果
2.创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程 称为对象实例化 比如这个被我咬的红苹果

类	构造函数	对象
某一类事物	那如何创建出某一类的具体一个对象呢	具体的一个事物
万物皆为对象，通过类进行分类		通过new 构造函数()创建出来
Person：人类	Person()	zs,ww
Star：歌星	Star()	刘德华，张学友
Array：数组类	Array()	arr1,arr2 (具体Array分类的对象)
Object：万物	Object()	obj1,obj2 （普通Object的对象）

new关键字执行过程

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

遍历对象

1. for…in 语句
   用于对对象的属性进行循环操作

2. 语法：
   for (变量 in 对象名字) {
   // 在此执行代码
   }

3. 例子

   var obj = {
   	key:value,
   	name:'zs',
   	age:18
   	}
   for (var k in obj) {
   	console.log(k);      // 这里的 k 是属性名
   	console.log(obj[k]); // 这里的 obj[k] 是属性值
   }
   

内置对象

1. JS中的对象分3种：自定义对象 、内置对象、 浏览器对象
2. 自定义对象 、内置对象是JS 基础内容，属于 ECMAScript； 浏览器对象属于JS 独有， JS API 讲解
3. 内置对象指 JS 语言自带的对象，供开发者使用，提供了一些常用的，最基本且必要的功能（属性和方法）
4. JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

学会查阅MDN文档
1.内置对象的使用，学会其常用成员的使用即可，通过查询MDN/W3C文档
2.开发者网络（MDN）提供了包括 HTML、CSS 和万维网及 HTML5 应用的API等有关开放网络技术（Open Web）的信息
3.MDN: https://developer.mozilla.org/zh-CN/

数学对象Math

1. Math 对象不是构造函数，它具有数学常数和函数的属性和方法。使用Math中的成员 进行 数学相关的运算（求绝对值，取整、最大值等）
2. Math对象的属性和方法：
                      **Math.PI**		 // 圆周率
                                    		Math.floor() 	 // 向下取整     地板   往最小了取值
                                    		Math.ceil()            // 向上取整     天花板  往最大了取值
                                    		**Math.round()**           // 四舍五入版 就近取整   注意 -3.5   结果是  -3 
                                    		**Math.abs()**		// 绝对值      **隐式转换** 会把字符串型 '-1'转换为数字型1
                                    		**Math.max()/Math.min()**	 // 求最大和最小值 
3. 案例：封装自己的数学对象

 // 利用对象封装自己的数学对象  里面有 PI 最大值和最小值
    var myMath = {
        PI: 3.141592653,
        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 (var i = 1; i < arguments.length; i++) {
                if (arguments[i] < min) {
                    min = arguments[i];
                }
            }
            return min;
        }
    }
    console.log(myMath.PI);
    console.log(myMath.max(1, 5, 9));
    console.log(myMath.min(1, 5, 9));

4. 随机数方法random()
   • Math.random() 方法随机返回一个小数，取值范围[0，1)
   • 方法里面不跟参数
   • 例：两个数之间的随机整数 并且 包含这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));

日期对象Date

1. Date 对象是构造函数，需要实例化后才能使用
 - Date：内置类，需要通过new 构造函数，来自己创建日期对象
 - Math：内置对象，直接就是一个对象。  Math.属性/方法

2. Date()方法的使用
   1. 获取当前时间必须实例化

				var now = new Date();	//如果Date()不写参数，就返回当前时间
										//如果Date()里写参数，就返回括号里面输入的时间
        		console.log(now)

​ 2. Date() 构造函数的参数

​ 日期格式：字符串为‘2019-5-1’

​ new Date(‘2019-5-1’) 或 new Date(‘2019/5/1’)

​ 将字符串格式的时间，转换为了Date对象

3. 日期格式化

方法名	获取日期指定部分	代码
getFullYear()	年
getMonth()	月(0-11)
getDate()	日
getDay()	星期(0-6，0周日)
getHours()	时
getMinutes()	分
getSeconds()	秒

Date总的毫秒数（时间戳）

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

  • 获取时间戳方法：

       var now = new Date();	//实例化Date对象
    

    • 获取对象的原始值
      onsole.log(date.valueOf())
      console.log(date.getTime())
    • 简写
      var now = + new Date();
    • HTML5中提供的方法，有兼容性问题
      var now = Date.now();

• 案例：倒计时

数组对象Array

• 创建数组对象的两种方式

  1. 利用数组字面量***(常用)
     var arr = [1, 2, 3];
     console.log(arr[0]);
  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 运算符，可以判断一个对象是否属于某种类型 instance: 实例 （对象）
  arr instanceof Array : 判断arr是否是Array数组对象
  2. Array.isArray(arr) 判断一个对象arr是否为数组，isArray() 是 HTML5 中提供的方法
  - instanceof 与 typeof
  - typeof用于检查数据是否为简单数据类型和object (没有办法检测object的具体分类)
  - instanceof用于某个对象是否为某个类的实例（某个构造函数创建出来的） ， 用于检测具体是哪一类对象 ： Person，Star，Array
  - 与Object进行对比，都为true，万物即为对象
  - console.log(arr instanceof Object); // true
  - Array是Object其中的一种分类，Array属于Object

• 添加数组元素

  1. push(参数1,参数2…)
     末尾添加一个或多个元素，返回新长度
     2. unshift(参数1,参数2…) shift：去掉

     	开头添加一个或多个元素，返回新长度
     

• 删除数组元素

  1. pop()
     删除数组最后一个元素，返回被删除的元素
  2. shift()
     删除数组的第一个元素，返回被删除元素

• 数组排序

  • arr.reverse() 翻转数组arr
  • arr.sort() 排序数组arr
    • arr.sort(function(a, b) {return a - b;}) 升序 （a在前，正序）
    • arr.sort(function(a, b) {return b - a;}) 降序 （b在前，倒序）

• 获取数组元素索引
  1.indexOf(元素)
  ​ 查找元素在数组中第一次出现的索引，如果不存在返回-1
  ​ arr.indexOf(‘pink’) arr.indexOf(‘pink’，3)
  ​ 2.lastIndexOf(元素)
  ​ 查找元素在数组中最后一次出现的索引，如果不存在返回-1

  • 案例：数组去重
    • indexOf(元素)
    • push(参数1,参数2…)

• 数组转换为字符串

  1. toString()
     将数组元素以逗号分隔，转换为字符串
  2. join(‘分隔符’)

			var arr1 = ['green', 'blue', 'pink'];
			console.log(arr1.join()); 				// green,blue,pink
			console.log(arr1.join('-')); 			// green-blue-pink
			console.log(arr1.join('&')); 			// green&blue&pink	

• 其他方法 : 自己查询用法

  1. concat()

  2. slice()

     3. splice()

     

字符串对象String

• 基本包装类型

  • 基本包装类型：JS把简单数据类型(仅String、Number和 Boolean)自动包装成为复杂数据类型，基本数据类型便有了属性和方法

• 字符串不可变

  1. 字符串被重新赋值后，之前的值一直存在，内存中新开辟了一个内存空间存放新值，只是地址更改了
  2. 字符串所有的操作方法，都不会修改字符串本身，每次操作都会创建一个新的字符串

• 根据 字符 返回 位置

  1. indexOf(‘要查找的字符’,开始的位置)
     从头到尾查找 找不到返回-1

  2. lastIndexOf(‘xxx’,startIndex)
     从尾到头查找 找不到返回-1

  3. 数组： 根据元素返回位置

     1. indexOf(xxx)
        查找xxx在数组中第一次出现的索引，如果不存在返回-1
        arr.indexOf(‘pink’)
     2. lastIndexOf(xxx)
        查找xxx在数组中最后一次出现的索引，如果不存在返回-1

  4. 例题：求某个字符出现的位置以及次数

• 根据 位置 返回 字符

  1. charAt(index)
     获取index位置处的字符

  2. charCodeAt(index)

     ​ 获取index位置处的字符的ASCII码

  3. str[index]
     获取index位置处的字符
     注意：

       		Html5新增，和charAt(index)等效
       		**str**为字符串变量
       		字符串：字符数组
     

  4. 例题：统计出现次数最多的字符

• 拼接以及截取字符串

  作用	方法名	说明
  拼接字符串	concat(str1,str2…)	连接两个或多个字符串，与+一样
  截取字符串	substr(start,length)	从start（索引号）位置开始，length取的字符个数
  	substring(start,end)	从start（索引号）位置开始,截取到end（索引号）位置，end取不到

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

  • replace(a,b)
    将a替换为b

  • split(‘分隔符’)
    将字符串按照分隔符，分隔为数组
    例子：
    var str = ‘a,b,c,d’;
    console.log(str.split(’,’)); // 返回的是一个数组 [a, b, c, d]

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

数据类型内存分配

1. 简单类型又叫 基本数据类型 或 值类型，复杂类型 又叫 引用类型
2. 值类型：在存储时变量中存储的是值本身
 	string ，number，boolean，undefined，null

3. 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用）
   通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

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

1. 栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；
   简单数据类型存放到栈里面
2. 堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
   复杂数据类型存放到堆里面

简单数据类型传参

​ 栈空间 存放 变量值

复杂数据类型传参

​ 栈空间 存放 堆地址，堆空间存放变量值

对象的属性获取方式
var o = {a:1,b:1}
o[chars] chars = 变量
o[‘chars’] 等价于o.chars chars=属性名

​ 总结：获取对象的属性值，属性是不确定时，通过变量来表达，用 o[变量名] 获取