变量
变量的声明
var num;
变量的赋值
var num;
num = 18;
变量的初始化
var myname = "小明";
语法扩展
1、变量更新:变量的值以最后一次赋值为准
2、声明多个变量:可以在初始化的时候声明多个变量,之间用逗号进行隔开
3、变量声明的特殊情况
| 情况 | 说明 | 结果 |
|---|---|---|
| var age,console.log(age) | 只进行声明不进行赋值 | undefined |
| console.log(age) | 不声明,不赋值,直接使用 | 报错 |
| age = 10,console.log(age) | 不声明,只赋值 | 10 |
命名规范
-
由字母(A-Za-z)、 数字(0-9)、 下划线( )美元符号( $ )组成,如: usrAge, num01,_ name
-
严格区分大小写。var app;和var App;是两个变量
-
不能以数字开头。 18age 是错误的
-
不能是关键字、保留字。例如:var、 for、 while
-
变量名必须有意义。MMD BBD
-
遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。myFirstName
注意:尽量不要使用name作为变量名
数据类型
JavaScript属于弱类型的语言(动态语言),不用提前声明变量的类型,程序运行过程中,类型会根据他的值被自动确定。
注意:js中的变量数据类型是可以变化的
简单数据类型
Number、String、Boolean、Undefined、Null
| 简单数据类型 | 说明 | 默认值 |
|---|---|---|
| Number | 数字型,包含整型和浮点型 | 0 |
| Boolean | 布尔值型,true、false等价于1、0 | false |
| String | 字符串类型,如"啦啦啦啦", | "" |
| Undefined | 变量没有被赋予值得时候的数据类型 | undefined |
| Null | 声明变量为null值 | null |
Number
1、八进制:010(0开头)
2、十六进制:0xA(0x开头)
3、最大值:Number.MAX_VALUE
4、最小值:Number.MIN_VALUE
5、无穷大:infinity
6、无穷小:-infinity
7、NaN:Not a Number,代表一个非数值
8、isNaN():用于判断是不是数字,是数字返回false,不是数字返回true、
String
字符串类型可以是引号中的任意文本,语法为双引号或者单引号引起来(推荐使用单引号)
转义符
\n 换行符
\ 斜杠
' 单引号
" 双引号
\t tab
\b 空格
length属性
获取字符串的长度
字符串拼接
多个字符串之间可以使用+进行拼接,其拼接方式是字符串+任意类型 = 拼接之后的新字符串。
Undefined、NaN
NaN undefined和数值类型相加最后的结果是NaN
Null
Null和数字相加得到的仍然是数字
typeof()
可以用来检测变量的类型
var num = 18;
console.log(typeof num); //number
注意:typeof(null)的时候返回值是Object
字面量
源代码中固定值的表示法,通俗来说,就是字面量表示如何表达这个值
数字字面量:8,9,10
字符串字面量:“前端工程师”
布尔字面量:true,false
数据类型转换
1、转换成字符串类型
| 方式 | 说明 | 案例 |
|---|---|---|
| toString() | 转换成字符串 | var num = 1; alert(num.toString()); |
| String()强制类型转换 | 转成字符串 | var num = 1; alert(String(num)); |
| 加号拼接空字符串(隐式转换) | 和字符串拼接的结果都是字符串 | var num = 1; alert(num+""); |
2、转换为数字型
| 方式 | 说明 | 案例 |
|---|---|---|
| parseInt(string)函数 | 将string类型转换成整数数值型 | parseInt('78') |
| parseFloat(string)函数 | 将string类型转换成浮点数数值型 | parseFloat('78.2') |
| Number()强制转换函数 | 将string类型转换成数值型 | Number('12') |
| js隐式转换( -,*,/ ) | 利用算术运算隐式转换成数值型 | '12'-0 |
注意:
parseInt、parseFloat不会进行四舍五入,当数字和字母一起时会只识别数字,前提是要数字开头,如果是字母开头的返回值为NaN
3、转换为布尔类型
| 方式 | 说明 | 案例 |
|---|---|---|
| Boolean()函数 | 其他类型转换成布尔值 | Boolean('true') |
注意:代表空、否定发的值会被转换成false。如''、0、NaN、null、undefined。其余值会被转成true
复杂数据类型
Object
运算符
算术运算符
也称为操作符,用于实现赋值、比较和执行算术运算等功能的符号
| 运算符 | 描述 | 实例 |
|---|---|---|
| + | 加 | 10+20=30 |
| - | 减 | 10-20=-10 |
| * | 乘 | 10*20=200 |
| / | 除 | 10/20=0.5 |
| % | 取余(模运算) | 返回除法的余数9%2=1 |
注意:浮点数运算时会产生精度的问题,所以不要直接判断两个浮点数是否相等
表达式
由数字、运算符、变量等以能求的数值的有意义的排列方式所得得组合,简单理解就是由数字、运算符、变量组成的式子
表达式最终都会有一个结果,称为返回值
递增递减运算符
递增运算符(++)
i++; 先得到i的值后加1
++i; 先加1后得到i的值
递减运算符(--)
i--; 先得到i的值后加1
--i; 先加1后得到i的值
比较运算符
用于两个数据据进行比较是所使用的运算符,比较运算后,会返回一个布尔值作为运算的结果
| 运算符名称 | 说明 | 案例 | 结果 |
|---|---|---|---|
| < | 小于 | 1<2 | true |
| 大于 | 1>2 | false | |
| >= | 大于等于 | 2>=2 | true |
| <= | 小于等于 | 3<=2 | false |
| == | 判等号(会转换类型) | 37==37 | true |
| != | 不等于 | 37!=37 | false |
| ===、!== | 全等 要求数值和数据类型都要一致 | 37 === '37' | false |
逻辑运算符
逻辑运算符是用来进行布尔值运算的运算符,其返回值也时布尔类型
| 逻辑运算符 | 说明 | 案例 | ||||
|---|---|---|---|---|---|---|
| && | "逻辑与",简称"与"、and (全真为真,一假即假) | true&&false | ||||
| "逻辑或",简称"或"、or(一真即真,全假为假) | true | false | ||||
| ! | "逻辑非",简称"非"、not | !true |
逻辑中断(短路运算)
短路运算的原理:当有多个表达式(值)的时候,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值。
逻辑与
语法:表达式1 && 表达式2 && 表达式3
取第一个结果为假值的表达式或者最后一个表达式
逻辑或
语法:表达式1 || 表达式2
取第一个结果为真值的表达式或者最后一个表达式
赋值运算符
用来把数据赋值给变量的运算符
| 赋值运算符 | 说明 | 案例 |
|---|---|---|
| = | 直接赋值 | var userName = '杰克' |
| +=、-= | 加、减一个数之后再赋值 | var age = 1; age+=5 // 6 |
| *=、/=、%= | 乘、除、取模之后再进行赋值 | var age = 2; age*=5 // 10 |
运算符的优先级
| 优先级 | 运算符 | 顺序 | ||
|---|---|---|---|---|
| 1 | 小括号 | () | ||
| 2 | 一元运算符 | ++ -- ! | ||
| 3 | 算术运算符 | *、/ 大于 +、- | ||
| 4 | 关系运算符 | > >= < <= | ||
| 5 | 相等运算符 | == != === !== | ||
| 6 | 逻辑运算符 | && 大于 | ||
| 7 | 赋值运算符 | = | ||
| 8 | 逗号运算符 | , |
流程控制
流程控制就是来控制我们的代码按照什么结构顺序来执行的
顺序结构
最基本的流程控制,程序会按照代码的先后顺序,依次执行
分支结构
if语句
if else双分支语句
if(条件表达式){
//条件表达式为真时执行的语句
......
}else{
//条件表达式为假时执行的语句
......
}
if else if多分支语句
if(条件表达式1){
// 条件表达式1为真时执行的语句
......
}else if(条件表达式2){
// 前面的条件表达式都为假,当前为真时所执行的语句
......
}
.
.
.
else if(条件表达式n){
}else{
// 前面所有条件表达式都是成立时执行的语句
......
}
switch语句
switch(表达式){
case value1:
// 执行语句1
break;
case value2:
// 执行语句2
break;
case value3:
// 执行语句3
break;
...
default:
// 执行最后的语句
}
表达式的值和case后的值相匹配,就执行对应case中的语句,都没有匹配上就执行default中的表达式
注意事项:
1、表达式通常为一个变量
2、表达式返回值和case中的值相匹配的时候必须要是全等的关系(数值和类型都要一样 )
3、如果case中没有break则会继续向下执行
switch和if的区别
1、一般情况下可以相互替换
2、switch..case语句通常处理case为比较确定值的情,而if...else..语句更加灵活,通常运用于范围判断(大于或者等于某个范围)
3、switch语句直接跳到对应的条目中,效率会高一些
4、分支较少时,if...else语句的执行效率比switch要高一些
5、分支较多时,switch语句的执行效率会更高一下,而且结构更清晰
三元表达式(三目运算符)
条件表达式 ? 表达式1 : 表达式2
真返回表达式1
假返回表达式2
循环结构
循环的目的:重复执行某些语句、某些代码
for循环
循环代码称为循环体,是否继续循环取决于终止条件
for(初始化变量;条件表达式;操作表达式){
// 循环体
}
while循环
while(条件表达式){
// 循环代码体
}
执行思路:
1、先执行条件表达,如果为true,则执行循环体,如果结果为false,则退出循环,执行后面的代码
2、执行循环体代码
3、循环体代码执行完毕后程序会继续判断执行条件表达式,如果条件为true,则会继续执行循环体,直到循环条件为fasle的时候,整个循环才会结束
do while循环
无条件执行一次,再判断条件
do{
// 循环体
}while(条件表达式)
continue和break
continue 跳出当前这次循环
break 退出整个循环
label语句
语法
foo: {
console.log(1);
break foo;
console.log('本行不会输出')
}
{
foo:1;
}
// foo是一个label语句就是1,并非一个对象