JavaScript基础整理

「爱情、让人受尽委屈。」 2022-05-11 15:46 172阅读 0赞

# JavaScript基础整理 #

--------------------

## 前言 ##

*  @author: zengjiahao
 *  @date: 2018/10/21

## 内容目录 ##

--------------------

## Js基础-01(变量,数据类型,运算符,表达式,Math高级函数) ##

### 1.js入门概念 ###

1.前端三老铁
    	HTML：确定网页的结构
    	CSS：确定网页的样式
    	JavaScript(js):确定网页的行为(交互)
    2.js语言组成
    	ECMAScript
    		确定js的语法规范
    			一些特定的可以被计算机识别的代码
    	DOM
    		js操作网页内容
    	BOM
    		js操作浏览器
    3.js三种写法
    	行内
    		<button onclick="window.alert('哥')">点我就告诉你谁最帅</button>
    	内联
    		写在script标签里面
    			<script >alert("这是JS内联样式")</script >
    	外联
    		写在js文件中，使用script标签的src属性来导入
    			<script src="./01-JS外联写法.js"></script>
    4.js注释
    	// 单行注释
    	/*  多行注释  */
    5.js五句话
    	alert():网页弹窗
    	console.log():打印台打印消息
    	prompt():弹出输入框
    	confirm():弹出一个确认框
    	document.write():网页加内容，不常用

### 2.数据类型与直接量 ###

1.直接量：可以直接使用的数据
    	符合数据类型
    		string
    		number
    		boolean
    		获取一个变量的数据类型语法：typeof 数据或者typeof (数据) 得到的是一个变量类型的字符串
    2.数据类型:
    	string：字符串
    	number: 数字
    	boolean：只有两个值
    		true：真
    		false：假
    	undefined: 只有一个值，就是undefined
    		undefined:未定义,当一个变量有声明，但是没有赋值，那么这个变量的值就是undefined(未定义值)
    	null: 只有一个值，就是null
    		null这个值只能手动设置，变量在任何时候它的值都不会是null
    		应用场景：一般用在函数中，表示这个函数返回数据失败 后面阶段会学习
    3.undefined与null的区别
    	null == undefined: 成立，他们的值都是空
    	null === undefined: 不成立，他们的值相等但是数据类型不同

### 3.变量 ###

作用：存储数据
    var:本质是内存中某一块空间
    1.声明变量
    	var a;
    		声明
    	var num = 10
    		变量的初始化：在声明的时候赋值
    	var a,b,c;
    		变量的批量声明：同时声明多个变量
    	var num1 = 10,num2 = 20,num3 = 30;
    		批量声明的时候也可以赋值
    2.变量赋值
    	a = 10;
    3.变量取值
    	a
    	
    注意点
    	1.变量的重复声明:会把已经存在的变量覆盖掉
    	2.变量的重复赋值：修改变量里面存储的数据
    	3.变量的值是另一个变量的值
    		var n1 = 20;
    		var n2 = n1; //将n1的值拷贝一份赋值给n2
    			
    相关知识,后面整理
    	js预解析
    	es6 const/let 
    		const定义常量
    		let 定义变量

### 4.运算符与表达式 ###

1.js中+号的含义
    	字符串连接符
    		+号两边只要有一边是字符串
    	数学算术加法运算
    		两边是数字
    	相关知识,后面整理
    		隐式转换
    算术运算符
    	+ - * / %
    复合算术运算符
    	+= -= *= /= %=
    自增自减运算符
    	++ -- 变量自身+1 - 1
    		前自增
    			++num
    				先+1（变量自身+1），后赋值（将变量的值赋值给自增表达式的结果）
    		后自增
    			num++
    				先赋值，后+1
    	最常用： num++
    关系运算符
    	> >= < <= == != === !==
    	==:只比较值，不比较数据类型
    	===：先比较值，再比较数据类型
    	关系表达式的结果一定是布尔类型：true代表成立，false代表不成立
    逻辑运算符
    	&&：一假则假
    	||：一真则真
    	！：取反  假变真  真变假
    	    /**运算符优先级：确定不同运算符的运算顺序
    		     * 1.()      小括号：作用就是提升优先级
    		     * 2.自增与自减
    		     * 3.算术运算符（先乘除后加减）
    		     * 4.比较运算符
    		     * 5.逻辑运算符
    		     * 6.赋值运算符
    运算符与表达式
    	表达式一定有结果，要么直接打印，要么用变量存起来
    	关系表达式的结果一定是布尔类型的数据

### 5.Math高级数学函数 ###

天花板向上取整:Math.ceil()
    地板向下取整:Math.floor()
    四舍五入:Math.round()
    求最大值：Math.max()
    求最小值:Math.min()
    生成0-1随机数:Math.random ()
    幂运算:Math.pow()
    圆周率:Math.PI()
    绝对值:Math.abs ()
    用到时查阅文档

## Js基础-02(数据类型的显式转换与隐式转换,JS分支语句) ##

### 1.数据类型补充 ###

5种基本数据类型
    		string
    		number
    			NaN：not a number 不是一个数字
    				NaN是number数据类型中一个特殊的数值，是数学计算错误得到的一个结果
    				例如： '张三' - 100,在数学上这是一种错误的计算，它的结果就是NaN
    				NaN与任何数字都不等，包含它本身
    				NaN与任何数字计算得到的都是NaN
    			isNaN(数据)：检测一个数据是不是NaN 得到的结果是布尔类型
    				例如：isNaN(NaN),结果为true
    				例如：isNaN(123),结果为false，表示123不是NaN
    			number类型浮点数（小数）精度丢失问题
    				小数在进行数学计算时，会有一定的误差，这是计算机本身的bug，不仅是js语言，其他语言也有这个问题
    				解决方案：不要让两个小数比较大小，这种情况一般不会影响正常开发
    		boolean
    		undefined
    			只有一个值就是undefined
    			如果一个变量只声明，未定义，默认值就是undefined
    		null
    			只有一个值就是null
    			只能手动去设置这个值（变量在任何时候自己都不会是null）
    		undefined与null的区别
    			undefined == null        true
    			undefined === null        false
    	复杂数据类型
    		Object Array 等

### 2.数据类型转换 ###

1.显示数据类型转换（程序员主动调用关键字来转换）
    		转成number
    			parseInt（）：转换整数
    				从左往右逐个字符解析，遇到非数字字符结束，将已经解析好的整数返回
    			parseFloat（）：转换小数
    				与parseInt（）的区别就是可以识别第一个小数点
    			Number():布尔类型转成数字（0false和1true）
    				有任何的非数字字符得到NaN
    				既可以转整数也可以转小数
    		转成string
    			String()
    				可以识别undefined与null
    					与toString()的唯一区别就是如果变量的值为undefined或者null不会报错，会得到undefined或者null
    			变量名.toString()
    				如果是undefined和null程序就会报错
    		转成boolean
    			Boolean()
    				八种情况转成false
    					0  -0  undefined null NaN  false  ''  document.all()
    				其他一切数据转成true
    				
    	2.隐式数据类型转（编译器帮我们转换）
    		当运算符两边数据类型不一致时，编译器会帮我们转成一致在运算
    		转成number
    			【常用】+ :数学正号
    				写在一个数据前面
    			自增自减（++ --）
    			算术运算符（+ - * / %）
    			比较运算符(> < >= <= == != === !==)
    				说明：全等与不全等会先比较值（此时会隐式转换再比较），然后再比较数据类型
    		转成string
    			字符串连接符 +
    				+号的两边只要有一边是字符串
    		转成boolean
    			逻辑非： !
    				!0
    					!0的结果是true
    					Boolean(0) = false
    					!false

### 3.程序流程控制（顺序结构,分支结构） ###

1.顺序结构
    	（默认）从上往下顺序执行
    2.分支结构
    	根据条件执行代码
    	[常用]if分支结构
    		if
    			某种条件判断
    			if(条件){满足条件需要执行的代码}
    		if-else
    			两个互斥的条件
    			if(条件){ 成立执行 }else{ 不成立执行 }
    				if-else中的代码一定只会执行一个
    		if-esle if -else
    			多个条件的判断
    			所有大括号中的代码最多只会执行一个
    			if(){}else if{}else{}
    	switch-case分支结构
    		适用于固定值匹配
    		switch(表达式){}
    			case 值1:
    				表达式的结果 === 值1，需要执行的代码
    				break;
    			default:
    			      表达式的结果和上面所有的case后面的值都不全等，则会执行这里的代码
    			      break;
    		break关键字
    			结束swtich语句
    			防止穿透
    			合理利用穿透
    				多个值需要执行的代码相同
    	三元运算符
    		相当于if-else结构的一种简写形式
    		?:
    		条件？代码1:代码2
    			1.如果表达式成立则执行代码1，否则执行代码2
    			如果代码1或者代码2有运算结果则三元运算式的结果就是他们其中的一个循环结构

### 4.计算机进制了解 ###

一般情况下，我们写的数字都是十进制，而且其他进制在使用时极少，所以只做了解即可
    在js代码中我们在数字的前面加上进制标识符表示进制
    二进制标识符:0b
    八进制标识符：0
    十进制无标识符：默认进制
    十六进制标识符：'0x'
    示例
    	//分别用不同进制表示数字188
    	    //二进制 10111100
    	    var bin = 0b10111100;
    	    //八进制 274
    	    var oct = 0274;
    	    //十进制 188
    	    var dec = 188;
    	    //十六进制 bc
    	    var hex = 0xbc;

## Js基础-03(JS循环结构) ##

### 1.程序流程控制（循环结构） ###

1.顺序结构：（默认）代码从上往下执行
    2.分支结构：代码根据条件执行
    3.循环结构：代码重复执行
    	while循环
    		循环次数不固定
    	do-while循环
    		循环次数不固定，循环体至少要执行一次
    	for循环
    		循环次数固定的
    	关键字
    		break
    			结束循环，执行大括号后面代码
    			结束switch-case分支结构
    		continue
    			结束本次循环体，立即进入下一次循环
    			continue后面的代码都不执行

### 2.逻辑运算符短路运算符 ###

逻辑运算符短路运算符
    	1.短路运算：如果第左边式子就可以决定逻辑表达式的结果，右边的式子不执行
    	2.逻辑表达式的结果不一定是布尔类型的值
    	3.逻辑与表达式：找假 ，左边式子能转为false，结果就是左边式子的值，反之就是右边式子的值
    	4.逻辑或表达式：找真 ，左边式子能转为true，结果就是左边式子的值，反之就是右边式子的值

## Js基础-04数组(数组介绍) ##

### 1.数组 ###

1.作用:
    一个变量可以存储多个数据
    2.数组三要素:
    	元素：
    		数组中的数据
    	下标：
    		数组中元素的位置
    		下标从0开始
    	长度：
    		数组中元素的数量
    3.数组语法
    	声明
    		var 数组名 = [元素1，元素2…………]
    	取值/赋值
    		取值
    			数组名[下标]
    				如果下标超出最大下标：undefined
    		赋值
    			数组名[下标] = 值
    				如果超出最大下标，往数组添加元素
    		长度语法 
    			数组名.length
    		数组相关特点
    			1. 长度 = 最大下标 + 1
    			2. 往数组后面添加元素： 数组名[数组名.length] = 值
    			3. 改变数组的长度会改变数组的元素
    4.数组的遍历
    	固定的for循环结构
    	for(var i = 0;i<数组长度;i++){     数组名[i]   }

### 2.冒泡排序原理 ###

核心原理：数组两个相邻元素比较大小，交换位置
    步骤
    	1.外层循环决定比较的轮数   arr.length - 1
    	2.内层循环决定每一轮比较的次数
    		arr.length - 1 - i
    	3.交换位置

### 3.其他知识点(数组去重,二维数组) ###

补充知识点
    	1。数组去重
    	    * 开关比较法
         	* 1.先定义个空的新数组newArr
         	* 2.遍历旧数组arr中所有元素
         	* 3.定义一个bollean变量表示开关，默认为开启状态
         	* 4.遍历新数组所有元素与旧数组元素比较
         	* 5.如果该元素存在于新数组中，开关为关闭状态。否则开关为开启状态
         	* 6.如果开关为开启状态，则将旧数组的元素添加到新数组中
    	2.二维数组
    		定义
    			var school = [ [99, 98, 75],[93, 91, 86],[90, 0, 0]];
    		取值
    			数组名[行][列]    行决定第几个元素下标，列决定该元素中的子元素下标
    			var zhangsan = school[1][2];//86
    		遍历
    			双重循环
    			for (var i = 0; i < school.length; i++) {//第一层循环遍历行
            		for (var j = 0; j < school[i].length; j++) {//第二层循环遍历列
                		console.log(school[i][j]);//获取二维数组中的每一个数据
            		}
        		}
    	3.数组应用案例
    	4.数组的另一种声明方式
    		简洁方式
    			[]
    		标准方式
    			new Array()
    		区别：
    			数组中只有一个元素的含义不同
    			例子:
    				[10]; // 简洁方式
    				new Array(10); // 标准模式
    				简洁方式：声明一个长度为1，只有一个元素10的数组
    				标准方式：声明一个长度为10的空数组

## Js基础-05函数(作用域,预解析,函数) ##

### 1.函数介绍 ###

1.函数使用
    	函数特点
    		1.代码需要执行多次
    		2.完成一个独立的小功能
    	函数的本质
    		将一段代码存入变量中
    	声明语法
    		function 函数名(){   函数体：代码 }
    	调用语法
    		函数名()
    		只有函数调用才会执行函数体代码
    2.关于函数的参数
    	参数作用
    		1.调用者传递数据给函数
    		2.函数无法独立完成功能，需要调用者传递数据的时候
    	语法：
    		传：  调用者   函数名（实参）
    		收：函数    function 函数名(形参){ 函数体 }
    	函数传参的本质：
    		实参给形参赋值
    3.关于返回值
    	返回值作用：函数将计算的结果告诉调用者
    	语法
    		返回：函数    function 函数名()   {  return 值 }
    		收： 调用者   函数名()
    		只有函数调用可以得到返回值，谁调用这个函数，函数就返回给谁
    		要么打印，要么使用变量来存储
    	return关键字：
    		结束函数的调用 （类似于break关键字,只能用于函数体中）
    		return后面的代码不会执行

### 2.作用域及预解析 ###

1.作用域
    	变量可以起作用的范围
    	两种作用域
    		全局作用域：全局变量（函数外面声明）
    		局部作用域：局部变量（函数内声明）
    		js中只有函数可以开辟作用域
    	作用域链
    		变量的访问规则：
    			就近原则
    		就近原则简介:
    			访问变量时，会优先访问的是在自己作用域链上声明的变量，如果自己作用域链上没有声明这个变量，
    			那么就往上一级去找有没有声明这个变量，如果有就访问，如果没有就继续往上找有没有声明，
    			直到找到0级作用域链上，如果有，就访问，如果没有就报错
    2.预解析
    	预解析：js在解析代码之前，会先看一眼。预解析的时候会做一件事：变量的提升
    	变量的提升
    		a.变量的声明会提前到当前作用域的最顶端，赋值在原地
    		b:函数的声明也会提前，调用在原地

### 3.函数补充知识点(arguments,函数声明方式,引用类型与值类型的区别) ###

1.arguments
    	作用：
    		函数中有一个arguments关键字来获取所有的实参
    	使用场景:
    		js是一门弱语言,声明函数的时候假如只有一个形参，实际上在调用的时候无论我们传入多少实参程序都不会报错,
    		如果想获取所有传入的实参,可以使用arguments关键字获取
    	特点：
    		1.只能在函数体中使用，在函数外使用会报错
    		2.是一个特殊的数组(伪数组)
    		（伪数组说明：只有数组的下标、元素、长度，没有数组其他方法）
    		3.与形参一一对应
    		4.修改形参，arguments也会修改
    		5.修改arguments，形参也会改
    	好处:
    		可以让函数变得更加灵活,可以让函数根据实参的不同而实现不同的功能(函数中,判断arguments.length的值,来实现不同的功能)
    		
    2.函数的两种声明方式
    	1.函数声明：   function 函数名() {  函数体 }
    	2.表达式声明：  var 函数名 = function(){ 函数体 }
    	3.唯一区别：函数声明在任何地方调用，表达式声明只能在声明后面调用
    3.引用类型与值类型区别
    	引用类型（2复杂数据类型）：栈中存储的是地址，数据存在堆中
    		变量赋值拷贝的是地址，修改拷贝后的数据会对原数据有影响
    	值类型（5基本数据类型）：栈中存储的是数据
    		变量赋值拷贝的是值，修改拷贝后的数据不会对原数据有影响

## Js基础-06回调函数,自调用函数,对象,及总结 ##

### 1.回调函数 ###

1.什么是回调函数：
    	如果一个函数的参数也是一个函数，那么这个参数函数就叫做回调函数
    2.2.为什么要有回调函数？
    	当一个函数调用执行完毕之后，我想执行另一段代码块，也就是调用另一个函数
    	但是有时候可能本函数执行完毕后，根据不同的情况需要调用的函数也不同，那么我们可以使用形参来接收这个函数，然后再调用
    	此时：这个形参函数就称之为回调函数

### 2.自调用函数 ###

1.什么是自调用函数：
    	函数自己调用自己
    	最常见的：
    		匿名函数自调用
    2.自调用函数作用
    	开辟作用域，js中只有函数才可以开辟作用域
    3.匿名函数自调用
    	语法:
    	( function(){} ) ()
    	将整个函数使用小括号包裹，然后在后面再加上小括号调用

### 3.对象相关知识(对象的使用,取值与赋值,this,new) ###

1.以后开发常用，需要掌握的重点
    	1.对象的使用
    		存储多个数据，使用键值对存储，代码易读性更高
    		声明一个对象：  var 对象名 = {}
    		对象初始化  var p = { 属性名:属性值 }
    	2.对象的取值与赋值
    		取值
    			点语法   对象名.属性名
    			字符串语法   对象名['属性名']
    			如果对象没有这个属性，取到的是undefined
    		赋值：  
    			对象名.属性名 = 值
    			对象名['属性名'] = 值
    			如果对象没有这个属性，会动态添加这个属性
    	3.遍历对象的属性
    		固定的特殊的for in循环
    		语法： for(var key in 对象名){ 对象名[key] }
    			只能用字符串语法来取值，因为key是一个属性名字符串
    	4.方法中的this关键字
    		谁调用这个方法，this就代表谁
    	5.new关键字作用
    		1.创建一个空对象
    		2.将this指向这个对象
    		3.完成对象的赋值
    		4.返回这个对象

### 4.容易混淆的知识点 ###

1.对象有四种创建方式，如何选择？
    	如果我只想创建一个对象
    		字面量简洁方式（常用） ： {}
    		构造函数方式（几乎不用）： new Object()
    	如果需要创建多个对象（代码需要复用）
    		自定义构造函数方式（常用）
    		工厂函数方式（几乎不用）
    2.字符串的恒定性
    	结论：字符串是不可以修改的，在调用字符串的API时，一般定义新的变量接收
    	容易混淆：把变量的重新赋值与字符串恒定性混淆在一起

### 5.不需要死记硬背的知识点(用到时查询文档) ###

js内置对象常用API
    	Date对象
    	Array对象
    	String对象
    函数的三种叫法
    	函数
    	方法，通常都是对象的属性，有归属感
    	API：语言作者提前写好的内置对象的方法

### 6.了解即可的知识点 ###

1.基本包装类型
    	1.为什么要有基本包装类型
    	
    		我们字符串属于基本数据类型，只有对象才可以使用点语法，为什么字符串也可以使用点语法呢？
    	2.什么是基本包装类型
    
    		三个特殊的对象类型：基本数据的对象类型
    		string对象:new String()
    		number对象:new Number()
    		boolean对象:new Boolean()
    	3.基本包装类型的意义
    
    		主要是为了让基本数据类型也可以调用对象的方法
    		对开发者影响不大，当我们在使用字符串的api的时候，编译器会自动帮我们转换
    2.json对象（后面阶段会详细讲解）
    	为什么要有json对象：因为在实际开发中，后台并不是只是为了前端服务，他们还需要为android和ios服务 如果直接返回一个js对象，那么其他语言无法转换，为了统一，所以会返回给我们一个json对象，这样前端/安卓/ios都可以识别
    3.逗号运算符
    	1.逗号运算符: ,
    	2.逗号表达式:(表达式1，表达式2，表达式3.............)
    		通常与小括号一起使用，逗号用于连接算式，逗号
    	3.运算规则:
    	（1）逗号运算符连接的每一个式子都会执行
    	（2）逗号运算式的结果是最终一个式子的结果
    4.js转义符
    	转义符： \ 改变原来符号的作用就叫转义符

### 7.数据类型及检测 ###

1.五种基本数据类型：只能存储一个值
    
    	string
    	number
    	boolean
    		只有两个值true和false
    	undefined
    		只有一个值undefined
    	null
    		只有一个值null
    		a.在检测数据类型的时候，得到的是object，但是仍然是一个单独的数据类型
    2.两种复杂数据类型
    
    	array
    	obejct
    	函数function属于对象object
    3.检测数据类型
    	1.除数组之外，所有的数据类型都可以使用 typeof 变量名来判断
    	2.数组是一个例外，如果使用 typeof 数组名得到的是object
    	可以使用下面方式来检测数组类型
    		数组名 instanceof Array：得到boolean类型
    		Array.isArray ( 数组名 )：得到boolean类型