JavaScript 的基本语法

243 阅读5分钟

1. 语句

语句是为了完成某种任务而进行的操作。

var a = 1 + 2; // 1 + 2是表达式,为了得到返回值 
var b = "xxx"; // 此语句一般用来修改环境,不需要返回值 

注意:空格和回车一般没有实际意义,不影响代码执行

2. 变量

JavaScript 变量是存储数据值的容器。

  • 声明变量和赋值
var a;  // 声明变量a
a = 1; // 给变量a赋值
var a = 1; //连写
  • 声明变量不赋值,该变量的值是 undefined
var a; 
a //undefined
  • 声明了一个变量并且已经赋值,再次声明该变量无效
var a = 1; 
var a; //无效的声明
  • 声明了一个变量并且已经赋值,再次声明该变量并且赋值的话,会覆盖掉前面的值
var a = 1;
var a = 2;
a // 2
  • 变量提升

JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升。

console.log(a);
var a = 1;

上述代码相当于以下代码

var a; 
console.log(a);
a = 1;

所以最后的结果为 undefined,表示 a 已经声明但是未赋值。

以下看一个例子

console.log(v1);
var v1 = 100;
function foo() {
    console.log(v1);
    var v1 = 200;
    console.log(v1);
}
foo();
console.log(v1);

输出的结果是:

//undefined
//undefined
//200
//100

我们将例子中的代码利用变量提升的概念转化以下:

var v1;
console.log(v1);
v1 = 100;
function foo() {
    var v1;
    console.log(v1);
    v1 = 200;
    console.log(v1);
}
foo();
console.log(v1); //因为 v1 = 200 只作用于函数内部,所以此处的 v1 = 100

3. 标识符

标识符指的是用来识别各种值的合法名称。JavaScript 大小写敏感。

标识符规则:

第一个字符,可以是任意 Unicode 字母(包括英文字母和其他语言的字母),以及美元符号($)和下划线(_)。

第二个字符及后面的字符,除了 Unicode 字母、美元符号和下划线,还可以用数字0-9。

4. 注释

单行注释

//单行注释

多行注释

/*
  多
  行
  注
  释
*/

5. 区块

花括号里面包含的代码称为区块。 var 命令在区块里面不构成单独作用域。

6. 条件语句

6.1 if 结构

语法:如果 if 后面的布尔值为真,则执行后面的代码;如果 if 后面的布尔值为假,则跳过后面的代码

if(布尔值)
语句;
//或者
if (布尔值) 语句;
if (a = 1) a++; 

6.2 if...else 结构

语法:如果表达式1成立,执行语句1;

如果表达式1不成立,表达式2成立,执行语句2;

如果表达式1和表达式2都不成立,执行语句3。

if (表达式1) {
语句1
} else if (表达式2) {
语句2
} else {
语句3
}

6.3 switch 结构

多个 if...else 连在一起使用的时候,可以转为使用更方便的 switch 结构。该结构会根据每个 case 从上到下执行,如果前面的 case 都不符合,则会执行最后的 default 部分,但是如果其中某一个 case 符合,break语句 会跳出这个 switch 。

switch (fruit) {
  case "banana":
    // ...
    break;
  case "apple":
    // ...
    break;
  default:
    // ...
}

6.4 三元运算符

语法:如果条件为真,返回表达式1,否则返回表达式2

(条件) ? 表达式1 : 表达式2

6.5 && 短路逻辑 和 || 短路逻辑

&& 短路逻辑: 多个表达式由 && 连成。

如果 A 为假,取值为 A;

如果 A 为真, B 为假,取值为 B;

如果 A, B 为真,C 为假,取值为 C;

如果 A,B,C 为真,取值为 D

A && B && C && D 
/* 取第一个假值或D
并不会取 true / false */

|| 短路逻辑:多个表达式由 && 连成。

如果 A 为真,取值为 A;

如果 A 为假, B 为真,取值为 B;

如果 A, B 为假,C 为真,取值为 C;

如果 A,B,C 为假,取值为 D

A || B || C || D 
/* 取第一个真值或D
并不会取 true / false */

7. 循环语句

7.1 while 循环

While 语句包括一个循环条件和一段代码块,只要条件为真,就不断循环执行代码块。

while (条件)
  语句;
// 或者
while (条件) 语句;

7.2 for 循环

语法: 先执行初始化表达式;

然后判断条件,如果为真,执行循环体,然后执行递增表达式;

如果为假,直接退出循环,执行后面的语句,不会再执行递增表达式

for (初始化表达式;条件;递增表达式){
    循环体
}
for (var a = 0; a < 5; a++){
    console.log(a)
}

//得到的值是
0
1
2
3
4

7.3 do...while 循环

do...while 循环与 while 循环类似,唯一的区别就是先运行一次循环体,然后判断循环条件。

不管条件是否为真,do...while 循环至少运行一次,这是这种结构最大的特点。

do
  语句
while (条件);
// 或者
do {
  语句
} while (条件);

7.4 break 语句和 continue 语句

break 语句用于跳出代码块或循环。

continue 语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环。

7.5 标签 (label)

标签通常与 break 语句和 continue 语句配合使用,跳出特定的循环。

8. 声明

本博客内容参考并引用JavaScript 的基本语法