JavaScript的基本语法

393 阅读7分钟

变量

变量的声明

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、0false
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<2true
大于1>2false
>=大于等于2>=2true
<=小于等于3<=2false
==判等号(会转换类型)37==37true
!=不等于37!=37false
===、!==全等 要求数值和数据类型都要一致37 === '37'false

逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符,其返回值也时布尔类型

逻辑运算符说明案例
&&"逻辑与",简称"与"、and (全真为真,一假即假)true&&false
"逻辑或",简称"或"、or(一真即真,全假为假)truefalse
!"逻辑非",简称"非"、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,并非一个对象