一：初始JavaScript
1.什么是JavaScript？
JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言。
脚本语言：不需要编译，运行过程中由js解释器逐行解释并执行。
2.HTML/CSS/JS的关系
HTML和CSS属于 标记语言-描述类语言
HTML决定页面的结构和内容，CSS给页面添加样式。
JS脚本语言-编程类语言
JS实现业务逻辑和页面控制(决定功能)。
3.浏览器执行JS
浏览器分为：渲染引擎和JS引擎
渲染引擎：解析HTML和CSS，俗称 内核
JS引擎：也称为JS解释器，用来读取网页JavaScript代码
浏览器本身不会执行JS代码，是通过内置的JavaScript引擎来执行JS代码，JS引擎执行代码是 逐行解释的（转换成机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言。
4.JavaScript的组成
JavaScript由 ECMAScript(JavaScript语法)+DOM(页面文档对象模型)+BOM(浏览器对象模型)
ECMAScript：规定了js的编程语法和基础核心知识
DOM：是W3C推荐的处理可扩展标记语言的 标准编程接口。通过DOM提供的接口可以实现对页面元素的操作（大小、位置、颜色等）
BOM：提供了独立于内容的 、 可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，如弹出框、浏览器跳转、获取分辨率等
5.JS的书写位置
js分为3种书写位置：行内、内嵌、外部。
二：变量
1.什么是变量？
变量是用于存放数据的容器，我们通过变量名 获取元素，数据可以修改
本质：变量是程序在内存中申请的一块用来存放数据的空间
2.声明多个变量
var a =10,b=20,c=30;
注意： var a=b=c=10; 的执行顺序是
var a=10；——>b=10;——>c=10; b、c是全局变量
3.声明变量的特殊情况
只声明,不赋值： var age; console.log(age); 结果：undefined
不声明,不赋值，直接使用： console.log(age); 结果：报错
不声明,只赋值： age=10; console.log(age); 结果：10
三：数据类型
1.变量数据类型
JavaScript的是一种弱类型的动态语言，这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。在代码运行时变量数据类型由JS引擎根据 =右边变量的值的数据类型来判断，运行完毕后变量就确定了数据类型。
JS把数据类型分为两类：
简单数据类型：Number(数字型)，String(字符串型)，Boolean(布尔值类型)，Undefine，Null
复杂数据类型：object
Number数字类型
数型Number的个特殊值:
- Infinity:代表无穷大，大于任何数值
- -Infinity:代表无穷小，小于任何数值
- NaN,Not a number,代表一个非数值
isNaN(x):x是数字——>true ； x不是数字——>false;
String 字符串类型
字符串的length属性可以获取字符串长度：str.length;
多字符串之间的拼接用 + ， 字符串 + 任何类型 = 拼接后的新字符串
<script>
var a1 = 1;
var a2 = 2;
console.log(typeof(a1)); //number
console.log('a1+a2=' + a1 + a2); //a1+a2=12 'a1+a2=' 是字符串 有字符就是相连
</script>
+号口诀：数值相加 字符相连
Boolean布尔类型
true(1)，false(0)
Undefined和Null
变量声明但是未赋值：Undefined;给变量赋值null，里面存的值就是空
注意：任何类型 +(拼接) Number / Boolean = NaN
2.获取变量数据类型
typeof 变量名
注意：typeof null 的结果是object
3.数据类型转换
使用表单、prompt获取过来的数据默认是 字符串类型的 不能直接进行加法运算 需要转换变量数据类型
一般有三种转换方式
- 转换成字符串类型
- 转换成数字型
- 转换成布尔型
转换成字符串类型：num.toString()、String(num)强制转换、加号拼接字符串（常用！隐式转换）
（和字符串拼接的结果都是字符串）
转换成数字型:parseInt(string)、parseFloat(string)、Number()强制转换、js隐式转换（- * /）
隐式转换是我们再进行算术运算的时候,js自动转换成了数据类型
转换成布尔类型：Boolean(‘true’)
代表空、否定的值会被转换false,如 ’‘，0，NaN，null，undefined
其余值都会被转换成true
三：运算符（操作符）
1.算术运算符
+加 _ -减 _ *乘 _ /除 _ %余
算数优先级：先乘除 后加减 有小括号先算小括号的
2.递增递减运算符
前置递增运算符 ++num 先自加，后返回值
后置递增运算符 num++ 先返回值，后自加
递减同上
3.比较运算符
比较运算符是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果。
js中 == 的隐式转换规则
比如：
1.对象和布尔值进行比较
[] == false; //true
[]对象——>字符串——>数值0
false——>数值0
2.对象和数字进行比较
[111] == 111; //true
[111]对象——>字符串——>数值111
3.对象和字符串进行比较
[1,2,3]== ‘1,2,3’; //true
[1,2,3,]对象——>字符串’1,2,3,’
4.逻辑运算符
逻辑运算符是用来进行布尔值运算的运算符，返回值也是布尔值，开发中经常用于多个条件的判断
逻辑与&&：两边都是true才返回true，否则返回false
栗子1：var a = 2 > 1 && 3 >1//true
解析：
2 > 1 // true
3 > 1 //true
true && true //true
栗子2： var a = 2 > 1 && 3 < 1
解析：
2 > 1 // true
3 < 1 //false
true &&false // false
**逻辑或||：**两边都为false才返回false,否则都为true
栗子1：var a = 2 <1 || 3 <1//true
解析：
2 < 1 // false
3 < 1 //false
false || false // true
栗子1：var a = 2 >1 || 3 <1//true
解析：
2 > 1 // true
3 < 1 //false
true|| false // false
逻辑非！： 也叫做取反符号，用来取一个布尔值相反的值，true的相反值就是false
var isOk = !true;
console.log(isOk);// false;
5.短路运算符
短路运算的原理:当有多个表达式（值）时，左边的表达式可以确定结果时，就不再继续运算右边的表达式的值。
a.逻辑与
- 语法： 表达式1 && 表达式2
- 如果第一个表达式的值为真，则返回表达式2
- 如果第一个表达式的值为假，则返回表达式1
console.log( 123 && 456);//456
console.log( 0 && 456);//0
b.逻辑或 - 语法： 表达式1 || 表达式2
- 如果第一个表达式的值为真，则返回表达式1
- 如果第一个表达式的值为假，则返回表达式2
-console.log( 123 && 456);//123
console.log( 0 && 456);//456
总结：
逻辑与短路运算是从左往右找第一个假，没有找到，就是最后一个为真
逻辑或短路运算是从左往右找第一个真，没有找到，就是最后一个为假
找到之后都是中断
四：流程控制分支
1.流程控制分支三种结构：顺序结构、分支结构、循环结构
顺序结构：按代码先后顺序依次执行
分支结构：根据不同条件执行不同路径的代码
JS提供了两种分支语句
- if语句
- switch语句
2.三元表达式
表达式1 ？ 表达式2 : 表达式3；
表达式1为true 则返回 表达式2的值 否则 返回 表达式3的值
比如我们在写倒计时的案例时 想显示01这种0开头的 我们需要补0
num<10 ? ‘0’ + num : num;
3.闰年算法
能够被4整除，不能被100整除的为闰年 或者 能够被400整除的就是闰年
(year % 4 === 0 && year % 100 !==0 || year % 400 ===0 )
4.switch
switch case
break是退出循环，如果执行case语句，里面没有break,则会继续执行下一个case语句
continue是退出本次循环
五：数组
1.数组概念
数组是一组数据的集合，里面的每个元素被称为元素，数组中可以放任意类型的数据。数组是一种将一组数据存储在单个变量名下的优雅方式
2.数组的创建方式
- 利用new创建数组
- 利用数组字面量创建数组
<script>
// 1.new创建一个空的数组
// var arr = new Array();
// 2.利用数组字面量创建数组 创建了一个空的数组
// var arr = [];
// var arr1 = [1, 2, 3, 'pink', '456'];
//数组中的数据用 , 分割 数组中的数据称为数组元素 数据类型无限制
//数组的声明并赋值 称为数组的初始化
</script>
数组的字面量是方括号[]
3.获取数组元素
a.利用索引 arr[0]
b.遍历数组——>for循环
使用 数组名.length 可以访问数组元素的数量（长度）
4.数组转换成字符串
思路：定义一个 var str = ‘’ ; 再循环遍历数组元素并拼接到str后面
5.数组新增元素
- 通过修改length长度新增数组元素（length属性是可读写的）修改之后增加的部分由于没有赋值默认值为undefined
<script>
// 1.修改length 默认值是undefined
var arr = [1, 2, 3, 4];
console.log(arr.length);
arr.length = 6;
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
</script>
- 通过修改数组索引新增数组元素：通过修改数组索引的方式追加数组元素，但是注意不能直接给数组名赋值，会覆盖掉原来的数据。
// 2.修改索引号
var arr1 = [1, 2, 3, 4];
arr1[1] = 5;
console.log(arr1.length);
console.log(arr1);
arr1 = '别给我直接赋值'; //不要给数组直接赋值，否则里面的全部元素都没有了
console.log(arr1);
console.log(arr1.length);
6.筛选数组
//筛选数组 把大于10的数据放入新的数组
var arr = [11, 5, 6, 45, 7, 8, 6, 34, 45, 78, 12, 66];
var arr1 = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
arr1[j] = arr[i];
//arr1[arr1.length]=arr[i] arr1.length最开始是0 length可以自动检测长度的变化
j++;
}
}
console.log(arr1);
7.数组案例
删除指定元素
//删除指定数组元素 去掉元素中的0
`在这里插入代码片`var arr = [0, 1, 0, 2, 0, 5, 4, 5, 7, 0];
var newArray = []
var i = 0;
for (i = 0; i < arr.length; i++) {
if (arr[i] == 0) {
continue;
}
newArray[newArray.length] = arr[i];
}
console.log(newArray);
冒泡排序
//冒泡排序
var arr = [1, 5, 3, 8, 7, 2, 8, 2, 88, 42, 36, 25, 21, 17, 78];
var newArr = [];
var temp;
for (var i = 0; i < arr.length - 1; i++) {//控制趟数
for (var j = 0; j < arr.length - 1 - i; j++) {//每趟交换变量次数
if (arr[j] > arr[j + 1]) {
temp = arr[j + 1];
arr[j + 1] = arr[j];
arr[j] = temp;
}
}
}
console.log(arr);
数组排序
var arr1 = [1, 58, 23, 668, 17, 88];
//升序
arr1.sort(function(a, b) {
return a - b;
});
//降序
arr1.sort(function(a, b) {
return b - a;
});
console.log(arr1);
数组去重
<script>
//核心思想： 遍历旧数组，拿着旧数组元素查询新数组 如果元素在新数组存在就不放入 如果不存在就放入
//封装一个去重的函数
function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]); //用 追加push(数组元素) 来写
}
}
return newArr;
}
var arr = ['a', 's', 'd', 's', 'd', 'v', 't', 's', 'a', 'v', 'g'];
console.log(unique(arr));
</script>
数组转换成字符串
var arr = [1, 2, 3, 4];
// 1.toString()
console.log(arr.toString());//1,2,3,4
//2. join(分隔符)
var arr1 = ['red', 'blue', 'green'];
console.log(arr1.join()); //red,blue,green
console.log(arr1.join('-')); //red-blue-green
console.log(arr1.join('&')); //red&blue&green 提交表单会用
六：函数
1.函数概念
函数就是封装了一段 可被重复调用执行的代码块。
2.函数使用
步骤：声明函数 和 调用函数
声明函数
function 函数名（参数1，参数2）{
函数体；
}
调用函数
函数名（参数1，参数2）；
注意:声明函数本身并不会执行代码，只有调用函数才会执行代码
3.函数形参、实参个数不同的问题
| 参数个数 | 说明 |
|---|---|
| 实参 = 形参 | 输出正确结果 |
| 实参 > 形参 | 只取到形参的个数 |
| 实参 < 形参 | 多的形参定义为undifned,结果为NaN |
在JavaScript的函数中不可以通过参数个数不同来区别不同的函数，只能是通过函数名来区别
4.函数返回值
如果函数没有return ,返回值就是undefined（使用return 函数会停止执行并返回指定值）
5.break,continue,return 区别
- break:结束当前的循环体
- continue：跳出本次循环，继续执行下次循环
- return:不仅可以退出循环，还能够返回return语句中的值，同时结束当前函数体代码
6.arguments
arguments是函数的内置对象，存储了传递的所有实参
arguments 是一个伪数组，可以进行遍历，为数组特点：
- 具有length属性
- 可以遍历但是不具有数组的pop,push等方法
7.函数的两种声明方式
自定义函数方式（命名函数）、函数表达式方式（匿名函数）
命名函数：
funciton fn(){
//
}
fn();//调用
调用函数的代码可以放到声明函数前面，也可以放后面
匿名函数：
varf fn = function(){//此处的fn是变量名 不是函数名 fn里面存储的是一个函数
//
}
fn();
函数调用必须写到函数体后面
七：作用域
1.作用域概念
限定这个名字的可用性的代码范围就是这个名字的作用域
ES6之前，作用域有两种：全局作用域和局部作用域（函数作用域） ES6之后新增块级作用域
2.变量的作用域
根据作用域的不同，变量可分为两种：全局变量、局部变量
全局变量：在代码任何位置都可以使用；全局作用域下用var声明的变量
局部变量：函数内部声明的变量，形参也是局部变量
3.全局变量和局部变量的区别
- 全局变量在任何一个地方都可以使用，只有在浏览器关闭的时候才会被销毁，因此比较占内存
- 局部变量只能在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，比较节约内存
4.作用域链
只要是代码就至少有一个作用域，写在函数内部的是局部作用域，函数中还有函数，那么这个作用域中又可以诞生一个作用域
柑橘在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能够被内部函数访问，就成为 作用域链
作用域链采取就近原则查找变量最终值
八：预解析
1.JavaScript解析器在运行代码的时候的步骤：预解析和代码执行
预解析:（也叫做变量、函数提升）在当前作用域下，JS执行代码之前，浏览器默认把带有var和function声明的变量在内存中进行提前的声明或者定义。 注意：并不赋值
代码执行：从上到下
2.变量预解析
变量提升：变量的声明提升到作用域最上面，但是变量的赋值不会提升
函数提升：函数的声明会被提升到作用域最上面，但是不会调用函数
九：对象
1.什么是对象？
对象是一个具体的事物，对象由属性和方法组成。
属性：事物的特征，在对象中用属性来表示 （名词）
方法：食物的行为，在对象中用方法来表示 （动词）
2.创建对象的三种方式
- 利用字面量创建对象
- 利用new Object创建对象
- 利用构造函数创建对象(函数名的首字母要大写并且要和new一起使用才有意义 里面的属性和方法要加this哟表示当前对象的属性和方法)
// 字面量创建对象
var dog = {
name: '可可',
type: '阿拉斯加犬',
age: 5,
color: '棕红色',
bark: function() {
alert('汪汪汪');
},
showFilm: function() {
alert('演电影');
}
}
console.log(dog.name);
dog.bark()
//利用new Object创建对象
var people = new Object;
people.name = '鸣人';
people.sex = '男';
people.age = '19';
people.skill = function() {
alert('影分身术');
}
console.log(people.name);
// 构造函数创建对象
function 构造函数名（）{
this.属性=值;
this.方法=function(){
}
}
new 构造函数名()
3.对象的调用
对象属性的调用:
- 对象.属性名
- 对象[ ’ 属性名 ’ ],方括号里面的属性必须加引号 如 star[‘name’]
对象里面的方法调用：对象.方法名()
4.遍历对象属性
for … in
for ( 变量 in 对象名字 ){
//执行代码
}
for ( var k in obj){
console.log( k ); // k 是属性名
console.log( obj[k] ); // obj[k] 是属性值
}
十：内置对象
JavaScript中的对象分为三种：自定义对象、内置对象、浏览器对象
内置对象是指JS语言自带的一些对象，比如Math、Data、Array、String
1.Math对象
Math对象不是构造函数
Math.floor() 向下取整（往小了取）
Math.ceil() 向上取整（往大了取）
Math.round() 四舍五入（就近取值） 注意！-3.5 是 -3 ， .5的时候是取大的
Math.abs() 绝对值
Math.max() / Math.min() 最大值 / 最小值
Math.random() 随即返回小数。[0，1） 左闭右开
求两个数之间的随机整数包括这两个数：
Math.floor(Math.random() * (max - min + 1)) + min;
2.Date对象
Date日期对象是一个构造函数 所以需要实例化后才能使用
new Date();
- 如果 Date() 不写参数，就返回当前时间
- 如果 Date() 写参数，就返回括号里的时间
日期格式化
获取日期总毫秒
Date对象是基于1970年1月1日（世界标准时间）起的毫秒数
我们进场利用毫秒数来计算时间，因为更加精确
//获取Date总的毫秒数（时间戳） 不是当前时间的 而是现在时间距离1970年1月1日 过了多少毫秒
//1.通过 valueOf() getTime()
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
//2.简单写法 开发中常用的
var date1 = +new Date(); // +new Date() 返回就是距离现在过了多少毫秒 现实开发中常用的
console.log(date1);
//3. H5 新增的 低版本浏览器不兼容
console.log(Date.now());
倒计时案例：https://blog.csdn.net/qq_42156918/article/details/108745113
3.数组对象
数组对象创建的两种方式：
- 字面量方式
- new Array()
//1.new创建一个空的数组
var arr = new Array();
//2.利用数组字面量创建数组 创建了一个空的数组
var arr = [];
var arr1 = [1, 2, 3, 'pink', '456'];
检测是否为数组？
instanceof运算符，可以判断一个对象是否属于某种类型
Array.isArray(arr)用于判断一个对象是否为数组，（HTML5中提供的方法）
添加删除数组元素的方法
数组排序
数组索引方法
indexOf() 数组中查找指定元素的一个索引 存在返回索引号，不存在返回-1
lastIndexOf() 在数组中的最后一个索引， 存在返回索引号， 不存在返回-1
数组转换成字符串
toString()
join(‘分隔符’)
4.字符串对象
为了方便操作基本数据类型，JavaScript提供了三个特殊的引用类型：String、Number、Boolean
基本包装类型就是把简单数据类型包装成复杂数据类型，这样基本数据类型就有了属性和方法
// 1. 把简单数据类型包装成复杂数据类型 给临时变量
var temp = new String('hello');
// 2.把临时变量给 str
str = temp;
// 3.销毁临时变量
temp = null;
字符串是不可变的，指的是里面的值是不变的，当我们重新给字符串赋值时，其实地址已经变了，在内存中开辟了新的空间。
根据字符串返回位置
indexOf（‘要查找的字符’，[开始的位置]）返回指定字符在字符串中出现的位置，没有就返回-1，开始位置是索引号
lastIndexOf() 从后往前找，只找第一个匹配的
根据位置返回字符
charAt(index) 返回指定位置的字符，index是字符串的索引号 str.charAt(0)
charCodeAt(index) 获取指定位置处字符的ASCII码（index是索引号） str.charCodeAt(0)
str[index] 获取指定位置处的字符
求字符串中出现字符次数最多的字符和次数
//思路 ：把每一次遍历的字符都放到一个对象的属性中，并且看有无该属性 有则创建 无则属性值+1 属性名就是字符名
var str = 'andsbckcsivbisezcadedsc';
var obj = {}; // 创建一个空对象
//属性赋值
for (var i = 0; i < str.length; i++) {
if (obj[str[i]]) {
//如果已经有这个属性了 值 +1
obj[str[i]]++;
} else {
//没有这个属性 赋值 1
obj[str[i]] = 1;
}
}
//遍历对象 for in
var max = 0;
var ch = '';
for (var k in obj) {
// k 得到的是属性名
// obj[k] 得到的是属性值
if (max < obj[k]) {
max = obj[k];
}
}
for (var k in obj) {
if (obj[k] === max) {
ch += k;
}
}
字符串操作方法
contact(str1,str2…) 连接字符串
substr(start,length）截取字符串，start开始位置（索引号）length取得个数，如果省略代表取start开始后面所有的字符
replace(‘被替换的字符串’,‘要替换的字符串’)
split()切分字符串，可以将字符串切分成数组，切分完毕后返回的是一个新数组
var str = ‘a,b,c,d’;
console.log(str.split(’,’));//[a,b,c,d];
十一：简单类型和复杂类型
简单类型又叫做基本数据类型或者值类型，复杂数据类型又叫做引用类型
- 值类型：简单数据类型/基本数据类型，在存储变量中是存储的是值本身
string,number,boolean,undefined,null - 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型，通过new关键字创建的对象，如Object，Array,Date等