失物不招领的前端学习日记（8）

JS基础

一、JS介绍：

JavaScript是什么：

1.简介：

JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

2.作用：

 1）网页特效：监听用户的行为让网页做出对应的反馈。
 2）表单验证：针对表单数据的合法性进行判断。
 3）数据交互：获取后台的数据，渲染到前端。
 4）服务端编程：node.js。

3.组成：

1）ECMAScript：规定了js基础语法知识。
eg.变量、分支语句、循环语句、对象等等。
2）Web APIs：

DOM 操作文档。
BOM 操作浏览器。

eg.

JS的书写：

1.内部JS：

直接写在html文件里，用script标签包住。

规范：script标签写在</ body>上面。
拓展：alert（‘你好，js’）页面弹出警告对话框。

eg

注意事项：

2.外部JS：

代码写在以“ .js ”结尾的文件里。

语法：通过script标签，引入到html页面中。

eg.

注意事项：

3.内联JS：

代码写在标签内部。

注意：后面vue框架会用这种模式。

4.单行注释：（ // ）

快捷键：Ctrl+/

5.块注释：（ /* */ ）

快捷键：shift+alt+a

6.结束符：（表结束，可写可不写）

符号：“ ；”
约定：为了风格统一，要么都加，要么都不加。

JS的输入输出语法：

1、输出语法：

语法1：

doucument.write( ’ 要出的内容 ’ )
作用：向body内输出内人
注意：若输出内容写的是标签，也会被解析成网页元素。
eg.

语法2：

alert( ’ 要输出的内容 ’ )
作用：页面弹出警告对话框。

语法3：

console.log( ’ 控制台打印 ’ )
作用：控制台输出语法，程序员调试使用。

2、输入语法：

prompt（‘请输入您的姓名:’）

作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。

JS代码顺序：

字面量：

是在计算机中描述的事或物。

二、变量：

变量是计算机中用来存储数据的容器，它可以让计算机变得有记忆。

注意：变量不是数据本身，它仅仅是一个存储数值的容器，可以理解为一个个用来装东西的纸箱子。

1、使用：

1）变量的声明：

1.语法：let 变量名
2.声明变量的构成：声明关键字、变量名（标识）
3.关键字：系统提供的专门用来声明变量的词语。（let即为关键字）

2）变量的赋值：

1.语法：定义一个变量后，能够初始化它（赋值），在变量名后跟上一个“=”，然后是数值。
2.注意：是通过变量名来获得变量里面的数据。

eg.

2、更新变量：

即给变量重新赋值。

let age=18
age=19

3、声明多个变量：

变量赋值后，还可以通过简单的给它一个不同的值来更新它。

语法：多个变量中间用逗号隔开。
let age=18, uname= ’ pink ’

eg.


eg.交互两个变量：

步骤：
1、声明一个临时temp
2、将num1的值赋值给temp
3、将num2的值赋值给num1
4、将temp的值给num2

4、变量的本质：

程序员在内存中申请的一块用来存放数据的小空间。

5、变量的命名规则：（必须遵守，否则会报错）

6、变量命名的规范：（建议，不遵守不会报错）

7、变量-数组：

将一组数据存储在单个命名下。

1、声明语法: let 数组名= [ 数据1，数据2，数据3，…，数据n ]
2、注意事项：

1、取值语法：数组名[ 下标 ]
2、注意事项：通过下标取数据，取出来什么类型的，就根据这种类型特点来访问。

一些术语：

三、常量：

1.常量的基本使用：

1）概念：使用const声明的变量叫做“常量”
2）场景：当某一个变量永远不会改变时
3）命名规范：与变量一致
4）注意：常量不允许重新赋值，声明时必须赋值（初始化）
5）使用：

const PI=3.14
console.log(PI)

四、数据类型：

JS数据类型分为两大类：基本数据类型、引用数据类型。

4.1数字类型（Number）：

JavaScript中的正数、负数、小数统一称为数字类型。

注意：

算术运算优先级顺序:（优先级相同时以从左向右顺序执行）。

NaN:代表一个计算错误，是一个不正确的或者未定义的数学操作所得到的结果。
NaN是粘性的。任何对NaN的操作都会返回NaN。

4.2字符串类型（string）：

1、使用：通过单引号（’ '）、双引号（" "）或反引号（ ` ）包裹的数据都叫字符串，推荐使用单引号。
eg.

注意事项：

2、字符串拼接：
1）场景：+运算符 可以实现字符串的拼接。
2）口诀：数字相加，字符相连。
eg.

eg.

3、模板字符串：
1）使用场景：拼接字符串和变量，简化字符串的拼接。
2）语法：用反引号，内容拼接变量时，用**${ }**包住变量。
eg.

4.3布尔类型（boolean）：

表示肯定或否定时在计算机中对应的是布尔类型的数据。
它有两个固定值：true(真) & false(假)
eg.

let isCool = true
console.log( isCool )

4.4未定义类型（undefined）：

是比较特殊的类型，只有一个值undefined。
场景：只声明变量，不赋值的情况下，变量的默认值为undefined。
eg.

4.5空类型（null）：

JS中的null仅仅是一个代表“无”、“空” 或 “值未知” 的特殊值。
eg.

null开发中的使用场景：

4.6检测数据类型：

1、控制台输出语句。
2、通过typeof关键字检测数据类型：

两种语法：
1）作为运算符：typeof x （常用的写法）
2）函数形式：typeof(x)

eg.

五、类型转换：

1、隐式转换：

一些运算符被执行时，系统内部自动将数据类型进行转换，称为“隐式转换”。
1）规则：
2）缺点：
转换类型不明确，靠经验才能总结。
3）小技巧：

eg.

2、显式转换：

1）概念：自己写代码告诉系统转换成什么类型。
2）转换为数字类型：

eg.
eg.

运算符：

一、赋值运算符：

1、概念：对变量进行赋值的运算符。

（=、+=、-=、*=、/=）

2、用法：

num=num+1
==num+=1

二、一元运算符：

JS根据所需表达的个数，分为一元运算符、二元运算符、三元运算符。

一元运算符：正负号

二元运算符：let num=10+20

1、自增：

1）符号：++
2）作用：让变量的值+1
3）前置自增：++num（先加再用）
4)后置自增：num++（先用再加）
注意：前置和后置单独使用时没有区别。

2、自减：

1）符号：–
2）作用：让变量的值-1

三、比较运算符：

1、比较运算符：

eg.

注意：
1）NaN不等于任何人，包括它自己。
2）判断是否相等，用“===”。
3）字符串比较用ASCII码值。
4）尽量不比较小数，因为有精度问题。

四、逻辑运算符：

1、逻辑运算符：

eg.

五、运算符优先级：

语句：

一、表达式和语句：

1.表达式：可以被求值的代码，JS引擎会将其计算出一个结果。
2.语句：是一段可以被执行的代码。

区别：

二、分支语句：

1、程序三大流程控制语句：

2、分支语句：

有选择性的执行想要的代码，包含：if分支语句、三元运算符、switch语句。

（1）if语句：

a.种类：单分支、双分支、多分支。
b.单分支语法：

注意事项：

eg.
eg.


c.双分支语句：

eg.


d.多分支语句：
场景：适用于多个结果的时候。
语法：

（2）三元运算符：

a.场景：比if双分支更简单的写法。
b.语法：
eg.

（3）switch语句：

注释：

注意：
eg.

3、循环语句：

重复执行一些操作。

（1）while循环：

a.语法：
释义：

b.while循环三要素：

eg.

c.循环退出：（break和continue·的区别）

循环结束：

区别：

eg.

（2）for循环：

a.for循环语法：

b.for循环数组：（遍历数组）
eg.

c.退出循环：

无限循环：

（3）for循环嵌套：

a.语法：
eg.

eg.

三、数组：

一种可以按顺序保存数据的数据类型。

3.1数组基本使用：

1、声明语法：

注意：

2、取值语法：

数组名[ 下标 ]

注意：

3、遍历数组：

1）语法：

2）用循环把数组中的每个元素都访问到，一般会用for循环遍历。
eg.

eg.

4、操作数组：

对数组增、删、改、查。
1）改：
eg.

2）新增：
a.
数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

语法：

eg.

b.
数组.unshift(新增内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。

语法：

eg.

3）删除：
a.
数组.pop() 方法从数组中删除最后一个元素，并返回该元素的值。

语法：
arr.pop( )

eg.

b.
数组.shift() 方法从数组中删除第一个元素，并返回该元素的值。

语法：
arr.shift( )

eg.

c.
数组.splice() 方法删除指定的元素。

语法：

解释：

eg.

5.冒泡排序：

eg.

6.数组排序：

1）数组.sort() 方法可以排序。
2）语法：