2022.3.23

· JavaScript是一种运行在客户端的脚本语言（不需要编译，运行过程中由js解释器逐行来进行解释并执行），即可做前台，也可做后台。

· JavaScript的作用：

q8KLIs.png

· 浏览器执行JS的过程：

q8KvR0.png

· JS的组成：

q8KXin.png

? · ECMAScript规定了JS的编程语法和基础核心知识

? · DOM——文档对象模型

? · BOM——浏览器对象模型

· JS的三种书写位置：1.行内式的js，直接写到元素的内部；

q8KjGq.png

? 2.内嵌式的js；

q8Kqaj.png

? 3.外部js，script双标签

q8MPZ4.png

· 注释：

q8MpsU.png

· 输入输出语句：

prompt('输入框');
alert('弹出警示框，输出的，展示给用户的');
console.log('console控制台输出，程序员调试用的');

q8M9LF.png

· 变量：一个存储数据的容器；本质是程序在内存中申请的一块用来存放数据的空间。使用：1.声明变量；2.赋值。

var 变量名;//声明变量
变量名=数值;//赋值
var 变量名='字 值';

（1）更新变量：一个变量被重新赋值后，他原来的值就会被覆盖，变量值将以最后一次的值为准

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

（3）特殊情况：

q8MidJ.png

2022.3.24

· 变量命名规则：尽量不要直接用name作变量名

qJycwD.png

· 数据类型：

qJygTe.png

1.简单数据类型：①·数字型进制：八进制前加0，十六进制前加0x。

qJy6eO.png

②.字符串型String：

qJyry6.png

qJysOK.png

qJyRFH.png

qJy5lt.png

qJy7m8.png

③布尔型：true=1；false=0

④一个声明后没有被赋值的变量会有一个默认值undefined（如果进行相连或者相加时，注意结果）

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

· typeof检测变量数据类型

console.log(typeof 变量名);

prompt 取过来的值是字符型的

· 数据类型的转换：

? 1.转换为字符串型：

qJyI6P.png

qJyoOf.png

? 2.转换为数字型：

qJyOYj.png

qJyLkQ.png

qJyXfs.png

? 3.转换为布尔型：

qJyxlq.png

qJyvpn.png

· 算术运算符：+ - * / % ，先乘除后加减，有括号先算括号里面的

· 表达式：由数字、运算符、变量等组成的式子，且有返回值（把右边的值返回给左边）的

· 前置递增运算符：先自加，后返回值

qJ6SXV.png

· 后置递增运算符：先返回原值，后自加1，大多使用后置递增、递减，并且代码独占一行

qJyz60.png

单独使用运行结构相同，与其他代码联用时，执行结果会不同

2022.3.25

· 比较运算符：俩个数据进行比较，返回一个布尔值。单等（=）是赋值，双等（==）是判断，三等（===）是全等

qU5UEj.png

· 逻辑运算符：进行布尔值运算的运算符，返回值也是布尔值qU5tbQ.png

· 逻辑中断（短路）：当多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值。

? -》逻辑与：表达式1 && 表达式2

qU5YDg.png

? -》逻辑或：表达式1 || 表达式2qU58v8.png

后面是0，则返回0

· 赋值运算符：

qU5JKS.png

· 运算符优先级：qU5aUs.png

· if分支语句：qU5d5n.png

· if-else语句：qU50Cq.png

· if-else-if语句：qU5B80.png

· 三元表达式：表达式 ？表达式1 ：表达式2

qU5D2V.png

2022.3.26

· switch分支语句：1.开发里面，表达式通常写成变量；

q0QLI1.png

2.num的值和case里面的值相匹配的时候是全等，必须是值和数据类型一致才可以 num === 1；

3.break如果当前的case里面没有break，则不会退出switch，会继续执行下一个case

·switch和if-else-if区别：

q0QbZ9.png

· for循环：

q0QqaR.png

q0Q7qJ.png

· 断点调试（sources）：

q0QXPx.png

· while循环：

q0QvRK.png

· do-while循环：

q0QxxO.png

q0lSMD.png

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

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

· 标识符命名规范：变量、函数命名必须有意义；变量名一般为名词；函数名一般为动词

· 操作符规范：左右各留一个空格

· 单行注释规范：前要有空格

· 数组：一组数据的集合，其中每个数据称为元素，在数组中可以存放任意类型的元素。

· 创建数组方式：数组中可以存放任意类型的数据

q0lpse.png

2022.3.27

· 数组的索引：索引号从0开始

qBPo3n.png

· 遍历数组：把数组的元素从头到尾访问一次，arr[r]中i计数器当索引号来用

· 数组长度：数组名.length

? 数组的长度是元素的个数，不要跟索引号混淆；arr.length是动态检测元素的个数

· 数组中新增元素：1.修改length长度

2.修改索引号，追加数组元素，但是不能直接给数组名赋值，否则会覆盖掉以前的数据

· 筛选数组：方法1.新数组索引号应该从0开始，依次递增

方法2.定义一个newArr=[]；刚开始newArr.length为0，然后将筛选的arr[i]存入newArr[newArr.length]

·函数的使用：声明函数和调用函数

function fn(参数1,参数2..){
	函数体；
	return 返回值;
}

qBP4hj.png

qBPI9s.png

qBP7j0.png

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

· 函数的参数：形参和实参

qBPqBT.png

qBPTcq.png

· 形参实参个数匹配问题：

qBPLHU.png

qBPbuV.png

2022.3.28

· 函数的返回值：1.有终止函数的功能；2.并且只返回一个值，返回的结果是最后一个值；3.求任意两个数的，加减乘除结果，返回的是一个数组；4.函数如果有return，则返回的是return后面的值，如果函数没有return，则返回undefined。qsLzGt.png

函数都有返回值

qsLjIA.png

· arguments的使用：是当前函数的一个内置对象，对象里存储了传递的所有的实参，当不知道用户传递过来多少个实参时用。

· 伪数组：并不是真正意义上的数组，

? 1.具有数组的length属性；2.按照索引的方式进行存储；3.它没有真正数组的一些方法 pop() push()等等

· 利用函数翻转任意数组 ：reverse()

· 函数调用另一个函数：qsLXad.png

· 函数的俩种声明方式：

qsLxPI.png

· JavaScript作用域：代码名字在某个范围内起作用和效果，目的是为了提高程序的可靠性更重要的是减少命名冲突。

? 分全局作用域和局部作用域

qsOSRP.png

· 变量的作用域：1.全局变量：在全局作用域下的变量，在全局下都可使用。如果在函数内部，没有声明直接赋值的变量也属于全局变量

2.局部变量：在局部作用域下的变量，即在函数内部的变量。函数的形参也可以看作是局部变量。更省资源

· 现阶段js没有块级作用域；js在es6的时候新增的块级作用域。

qsOCM8.png

· 作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值。qsOpxf.png

· js引擎运行js：分倆步-》预解析+代码执行

（1）预解析:js引擎会把js里面所有的var，还有function提升到当前作用域的最前面

（2）代码执行：按照代码书写顺序，从上到下执行

· 预解析-》变量预解析（变量提升）+函数预解析（函数提升）

（1）变量提升：就是把所有的变量声明提升到当前的作用域 的最前面，不提升赋值操作

? （2）函数提升：就是把所有的函数声明提升到当前作用域的最前面，不调用函数

· JavaScript对象：具体的事物，由属性和方法组成。

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

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

· 创建对象：

一、利用对象字面量创建对象{}：

var obj={
	uname:'xxx',
	age:18,
    sayHi:function(){
        console.log('hi~');
    }
};

【(1)里面的属性或者方法我们采取键值对的形式，键 属性名： 值 属性值

（2)多个属性或者方法中间用逗号隔开的

（3）方法冒号后面跟的是一个匿名函数】

（2）使用对象：

【（1）调用对象的属性：对象名.属性名即console.log(obj.uname);

? (2)调用属性还有一种方法：对象名[‘属性名’]即console.log(obj[‘age’]);

? (3)调用对象的方法：对象名.方法名（）即obj.sayHi();不要忘了小括号】

· 变量属性函数方法的区别：

qsOPsS.png

二、利用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();

· 构造函数：把对象里面一些相同的属性和方法抽象出来封装到函数里面

qsOiqg.png

三、利用构造函数创建对象：

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

(1)构造函数名字首字母要大写

（2）我们构造函数不需要return，就可以返回结果

（3）调用构造函数必须使用new

（4）只要new Star（）调用函数就创建一个对象ldh{}

qsOkZQ.png

2022.3.29

· 构造函数和对象的区别：利用构造函数创建对象的过程，我们也成为对象的实例化qg3he1.png

· new关键字执行过程：

（1）new构造函数可以在内存中创建一个空的对象；

（2）this就会指向刚才创建的空对象；

（3）执行构造函数里面的代码，给这个新对象添加属性和方法；

（4）返回这个新对象（所有构造函数里不需要return）

· 遍历对象：for （变量 in 对象） {}

变量会习惯写k或者keyqg3oFK.png

· 内置对象：js自带的一些对象，供开发者使用，并提供了一些常用的或者是最基本而必要的功能(属性和方法)

· 查文档：MDN/W3C

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

· Math对象：

-》常用的：qg37WD.png

-》Math.random():返回一个随机的小数0=<x<1；方法里不跟参数qg35o6.pngqg3TJO.png

· Date日期对象：是一个构造函数，必须使用new来调用创建日期对象qg3bSe.png

·-》日期格式化：qg3Lyd.png

-》date总的毫秒数（时间戳）：qg3OOA.png

-》倒计时： qg3jeI.png

· 创建数组的两种方式：qg3xTP.png

· 检测是否为数组的俩种方式：

qg3vwt.png

· 添加数组元素：分前后添加qg89fS.png

· 删除数组元素：qg8PSg.png

· 数组排序：翻转数组、冒泡排序qg8pY8.png

·获取 数组元素索引：分前后查找

qg8Fyj.png

2022.3.30

· 数组去重：q2cQbt.png

· 数组转换为字符串：toString();join(分隔符)q2cmgH.pngq2cZCD.png

· 基本包装类型：q2cAUK.png

· 字符串的不可变性：字符串里面的值，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间，开辟太多会影响效率问题

· 根据字符返回位置：q2cnvd.pngq2cKKA.png

· 查找字符串中某个字符出现的次数：q2cMDI.png

· 根据位置返回字符：q2cJPS.png

· 拼接以及截取字符串：q2c1VP.png

· 替换字符串以及转换为数组：q2ct2Q.png

-》查询：q2cE4O.png

toUpperCase();//转换大写
toLowerCase();//转换小写

· 数据类型内存分配：

（1）简单数据类型（基本数据类型、值类型）：在存储时变量中的是值本身，数据直接存放在栈空间中，如string、number、Boolean、undefined、null；

（2）复杂数据类型（引用类型）：在存储时变量中存储的仅仅是地址（引用），真正的对象实例存放在堆空间里，通过new关键字创建的对象（系统对象，自定义对象），如object、array、date等；

（3）堆和栈：q2cNvj.png

（4）简单、复杂数据类型内存分配过程：q2cY8g.pngq2c858.png

（5）简单数据类型传参：函数的形参可以看作是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制一份给形参，那么在方法内部对形参做任何修改，都不会影响到外部变量。q2caKs.png

（6）复杂数据类型传参：函数的形参也可以看作是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存 的堆地址复制给形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

q2cdrn.png