javaScript 基础篇（一）

最新推荐文章于 2022-04-05 11:00:00 发布

OY..

最新推荐文章于 2022-04-05 11:00:00 发布

阅读量243

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45738810/article/details/107209013

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言：基础知识语法，代码不多。我已经把代码打包放到文章下面了。

数据类型

1.1 JS中一共分成六种数据类型

String 字符串
Number 数值
Boolean 布尔值
Undefined 未定义
Object 对象

1.2 String 字符串

Js 中字符串需要使用引号引起来或单引号都行
在字符串使用\作为转义字符

 	\'  ==> '
	\"  ==> "
	\n  ==> 换行
	\t  ==> 制表
	\\  ==> \

使用typeof 运算符检查字符串时，会返回“string”

1.3 Number 数值

js 中所有的整数和浮点数都是Number类型

特殊的数字

infinity 正无穷 -infinity 负无穷 NaN 非法数字(NOT A Number)
其他进制的数字表示：
- Ob开头表示二进制，但是不是多有的浏览器都支持
- O 开头表示八进制
- Ox 开头表示十六进制

使用typeof检查一个Number类型的数据时，会返回number（包括NaN 和 Infinity）

1.4 Boolean 布尔值

布尔值主要用来逻辑判断，布尔值只有两个

true 逻辑运算
false 逻辑的假

使用typeo 检查一个布尔值时，会返回"boolean"

1.5 Null 空值

空值专门来表示为空的对象，Null 类型的值只有一个 null 使用typeof检查一个Null类型的值时会返回"Object"

1.6 Undefined 未定义

如果声明一个变量但是没有为变量赋值变量的值就是undefined

该类型的值是有一个underfined

使用typeof检查一个Undefined类型的值时，会返回"undefined"

1.7 类型的转换

类型转换就是只将其他的数据类型，转换为String Number 或 Boolean

转换为String
- 方式一(强制类型转换)：
  
  调用被转换数据的**toString()**方法
  
  注意：这个方法付不适用null 和 undefined
  
  由于这个类型中没有方法，所以调用toString()时会报错
- 方式二(强制类型转换)：
  
  调用**String()**函数
  
  原理：对于Number Boolean String 都会调用他们的toString()方法来将其转换为字符串，对于null值，直接转换为字符串“null”.对于underfined直接转换为字符串"undefined"
- 方式三(隐式的类型转换)：
  
  为任意的数据类型 + “”
  
  原理：和String()函数一样
转换为Number
- 方式一(强制类型转换):
  
  调用Number() 函数
转换的情况：

1.字符串 --> 数字

如果字符串是一个合法的数字，则直接转换为对应的数字

如果字符串时一个非法的数字，则直接转为NaN

如果是一个空串或纯空格的字符串，则转换为0

2.布尔值 --> 数字

true转换为1

false转换为0

3.空值 --> 数值

null 转换为0

4.未定义 --> 数字

undefined 转换为 NaN
- 方式二(强制类型的转换):
  
  调用parseInt() 或 parseFloat()
  
  这两个函数专门将一个字符串转换为数字的
  
  parseInt()
  
  可以将一个字符串中的有效的整数提取出来，并转换为Number
  
  如果需要可以在parseInt()中指出一个第二个参数。来指定Number
  
  parseFloat()
  
  可以将一个字符串的有效的小数提取出来，并转换为Number
- 方式三(隐式的类型转换)：
  
  使用一元的+来进行隐式的类型转换
  
  原理：和Number()函数一样
转换为布尔值
- 方式一(强制类型的转换)：
  
  使用BOOlean()函数
  
  转换的情况：
  
  字符串 --> 布尔除了空串其余是true
  
  数值 --> 布尔除了0和NaN其余是全是true
  
  null、undefined --> 布尔都是false
  
  对象 --> 布尔都是true
- 方式二(隐式类型转换):
  
  为任意的数据类型做两次非运算，即可将转换为布尔值
```
var a = "hello";
a = !!a;
console.log(a); // true  
```

数据运算

2.1 运算符

运算符也称为操作符

通过运算符可以对一个或多个值进行运算或操作

typeof运算符

用来检查一个变量的数据类型

语法：typeof 变量

它会返回一个用于描述类型的字符串作为结果

算数运算符
- ‘+’ 对两个值进行加法运算并返回结果
- ‘-’ 对两个值进行减法运算并返回结果
- ```
'*'  对两个值进行乘法运算并返回结果 		
```
- / 对两个值进行除法运算并返回结果
- % 对两个值进行取余运算并返回结果
除了加法以外，对非Number类型的值进行运算时，都会先转换为Number然后在做运算。而做加法运算时，如果是两个字符串进行相加，则会做拼串操作，将两个字符连接为一个字符串。任何值和字符串做加法，都会先转换为字符串，然后再拼串。
一元运算符

一元运算符只需要一个操作数

一元的 “+” ，就是正号，不会对值产生任何影响，但是可以将一个非数字转换为数字

例子：
```
var a = true; 				
a = +a;
```
- 一元的 -
就是负号，可以对一个数字进行符号位取反

例子：
```
var a = 10; 				
a = -a;
```
- 自增
  
  自增可以使变量在原值的基础上自增1
  
  自增使用 ++
  
  自增可以使用前++（++a）后++(a++)
  
  无论是++a 还是 a++都会立即使原变量自增1
  
  不同的是++a和a++的值是不同的，
  
  ++a的值是变量的新值（自增后的值）
  
  a++的值是变量的原值（自增前的值）
- 自减
  
  自减可以使变量在原值的基础上自减1
  
  自减使用 –
  
  自减可以使用前–（--a）后–(a–)
  
  无论是–a 还是 a–都会立即使原变量自减1
  
  不同的是–a和a–的值是不同的，
  
  --a的值是变量的新值（自减后的值）
  
  a–的值是变量的原值（自减前的值）

2.2 逻辑运算符

！非运算可以对一个布尔值进行取反，true变false false变true

当对非布尔值使用！时，会先将其装换为布尔值然后在取反

当我们利用！来将其他的数据转换为布尔值

&& 可以对符号两侧的值进行与运算

只要两端值都可以true时，才会返回true。

只要有一个false就会返回false。

与是一个短路与，如果第一个值是false，则不再检查第二个值

对于非布尔值，它会转换为布尔值然后在运算，并检查原值

规则：

1.如果第一个值为 false,则返回第一个值

2.如果第一个值为 true, 则返回第二个值

|| 可以对符号两侧的值进行或运算

只有两端都是false,才会返回false。只要有一个true,就会返回true.

只要两端都是false时，才会返回false。只要有一个true,就会返回true.

或是一个短路的或，如果第一个值是true，则=不再检查第二值

对于非布尔值,它会将其转换为布尔值然后做运算，并返回原值

规则：

1.如果第一个值为true,则返回第一个值

2.如果第一个值false,则返回第二个值

2.3 赋值运算符

=	可以将符号右侧的值赋值给左侧变量
+=	a += 5 相当于 a = a+5 var str = “hello”; str += “world”;
-=	a -= 5 相当于 a = a-5
*=	a * = 5 相当于 a = a*5
/=	- a /= 5 相当于 a = a/5
%=	- a %= 5 相当于 a = a%5

2.4 关系运算符

关系运算符用来比较两个值之间的大小关系

> >= < <=

关系运算符的规则和数学中一致，用来比较两个值之间的关系

如果关系成立则返回true，关系不成立则返回false。

如果比价的两个值是非数值，会将其装换为Number然后在比较。

如果比较的两个值都是字符串，此时会比较字符串的Unicode编码，而不会转换为Number.

2.5 相等运算符

== 相等，判断左右两个值是否相等，如果相等返回true,如果不等于返回false

相等会自动对两个值进行类型转换，如果对不同的类型进行比较，会将其转换为相同的类型为相同的类型然后在比较。转换后相等它也会返回true

!= 不等，判断左右两个值是否不等，如果不等则返回true，如果相等则返回false

不等也会做自动的类型转换

=== 全等，判断左右两个值是否全等，它和相等类似，只不过它不会进行自动的类型转换

如果两个值的类型不同，则直接返回false

!== 不全等，和不等类似，但是它不会进行自动的类型转换，如果两个值的类型不同，他会直接返回true

特殊的值：

null 和 undefined 由于undefined 衍生出null ，所以null == undefined 会返回true

NaN 不与任何值相等，包括它自身 NaN == NaN // false

判断一个值是否是NaN，使用isNaN() 函数

2.6 三元运算符

语法：条件表达式?语句1:语句2;

执行流程：

先对条件表达式求值判断，

如果判断结果为true，则执行语句1，并返回执行结果

如果判断结果为false，则执行语句2，并返回执行结果

优先级：

和数学中一样，JS中的运算符也是具有优先级的，

比如先乘除后加减先与后或

具体的优先级可以参考优先级的表格，在表格中越靠上的优先级越高，

优先级越高的越优先计算，优先级相同的，从左往右计算。

优先级不需要记忆，如果越到拿不准的，使用()来改变优先级。

基本语法

程序都是自上向下的顺序执行的，通过流程控制语句可以改变程序执行的顺序，或者反复的执行某一段的程序。

分类：

1.条件判断语句

2.条件分支语句

3.循环语句

3.1 条件判断语句

条件判断语句也称为if语句

语法一：
```
if(条件表达式){
	语句...
}
```
执行流程：

if语句执行时，会先对条件表达式进行求值判断，
```
  		  如果值为true，则执行if后的语句 				
```
如果值为false，则不执行
语法二：
```
if(条件表达式){
	语句...
}else{
	语句...
}
```
执行流程：

if…else语句执行时，会对条件表达式进行求值判断，

如果值为true，则执行if后的语句

如果值为false，则执行else后的语句
语法三：
```
if(条件表达式){
	语句...
}else if(条件表达式){
	语句...
}else if(条件表达式){
	语句...
}else if(条件表达式){
	语句...
}else{
	语句...
}
```
执行流程

if…else if…else 语句执行时，会自上至下依次对条件表达式进行求值判断，

如果判断结果为true，则执行当前if后的语句，执行完成后语句结束。

如果判断结果为false，则继续向下判断，直到找到为true的为止。

如果所有的条件表达式都是false，则执行else后的语句

3.2 条件分支语句

switch语句

语法:

switch(条件表达式){
	case 表达式:
		语句...
		break;
	case 表达式:
		语句...
		break;
	case 表达式:
		语句...
		break;
	default:
		语句...
		break;
}

执行流程：

**switch…case…**语句在执行时，会依次将case后的表达式的值和switch后的表达式的值进行全等比较，

如果比较结果为false，则继续向下比较。如果比较结果为true，则从当前case处开始向下执行代码。

如果所有的case判断结果都为false，则从default处开始执行代码。

3.3 循环语句

通过循环语句可以反复执行某些语句多次

while循环

语法:
```
while(条件表达式){
	语句...
}
```
执行流程：

while语句在执行时，会先对条件表达式进行求值判断，

如果判断结果为false，则终止循环

如果判断结果为true，则执行循环体

循环体执行完毕，继续对条件表达式进行求值判断，依此类推

do…while循环

语法:

do{
	语句...
}while(条件表达式)

执行流程

do...while在执行时，会先执行do后的循环体，然后在对条件表达式进行判断，
	如果判断判断结果为false，则终止循环。
	如果判断结果为true，则继续执行循环体，依此类推

两者区别

while：先判断后执行

do…while: 先执行后判断，可以确保循环体至少执行一次。
for循环

语法：
```
for(①初始化表达式 ; ②条件表达式 ; ④更新表达式){
	③语句...
}
```
执行流程：

首先执行①初始化表达式，初始化一个变量，

然后对②条件表达式进行求值判断，如果为false则终止循环

如果判断结果为true，则执行③循环体

循环体执行完毕，执行④更新表达式，对变量进行更新。

更新表达式执行完毕重复②
- 死循环
```
while(true){
		
}
		
for(;;){
		
}
```