JavaScript 的基本语法

qL
413 阅读5分钟

一、语句和表达式

语句

语句（statement）是为了完成某种任务而进行的操作，如var a = 1 + 3;就是是一个语句。

语句以分号结尾，一个分号就表示一个语句结束。

分号前面可以没有任何内容，JS 引擎将其视为空语句。

大部分空格没有实际意义，加回车大部分时候也没有影响，但注意return后面不能加回车。

表达式

表达式（expression）指一个为了得到返回值的计算式，如1 + 3。表达式不需要分号结尾。

语句和表达式的区别在于：

  • 语句一般情况下不需要返回值，主要是为了进行某种操作（声明、赋值等）。
  • 表达式则是为了得到返回值，一般都有值。
  • 凡是 JS 语言中预期为值的地方，都可以使用表达式。

二、变量

概念

变量就是对"值"起名，然后引用这个名字，就等同于引用这个值。

变量的声明和赋值，是分开的两个步骤。如果只是声明变量而没有赋值，则该变量的值是 undefined（表示"无定义"）。

JS 是一种动态类型的语言，变量的类型没有限制，变量可以随时更改类型。

var a = 1;
a = 'hello';

变量提升

JS 引擎的工作方式是：

  1. 解析代码
  2. 获取所有被声明的变量
  3. 再一行一行的运行

变量提升（hoisting）：所有的变量的声明语句，都会被提升到代码的头部。

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

上面的代码不会报错，因为真实的运行的是下面的代码：

var a;
console.log(a);
a = 1;
// 最后的结果是显示 undefined，表示 a 已声明，但还未赋值。

三、标识符

标识符（identifier）指用来识别各种值的合法名称。最常见的标识符就是变量名和函数名。

JS 的标识符对大小写敏感，A和a是不同的标识符。

标识符命名规则：

  • 第一个字符，可以是任意 Unicode 字母，以及美元符号$和下划线_和中文。
  • 第二个及后面的字符，还可以用数字0-9。

四、条件语句

只有满足预设的条件，才会执行相应的语句。

if 结构

if (表达式) {
    语句一   // 满足条件时，执行的语句
} else {
    语句二   // 不满足条件时，执行的语句
}

判断表达式的求值结果，true则执行if代码块，否则执行else代码块。

对同一个变量进行多次判断时，多个if...else...语句可以连写在一起。

if (m === 0) {
    // ...
} else if (m === 1) {
    // ...
} else if (m === 2) {
    // ... 
} else {
    // ...
}

else代码块总是与离自己最近的if语句配对。

switch 结构

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

每个case代码块内部的break语句不能少， 否则会接下去执行下一个case代码块，而不是跳出switch结构。

switch后面的表达式，与case后面的表达式比较运行结果时，采用的是严格相等运算符(===)，比较时不会发生类型转换。

三元运算符 ?:（问号冒号表达式）

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

var even;
if (n % 2 === 0) {
  even = true;
} else {
  even = false;
}

短路逻辑

&&

  • 只要有一个为假，即为假，全部为真才是真。
  • A && B && C && D 取第一个假值或最后一个值 D，并不会取 true/false。
if (window.f1) {
    console.log("f1存在")
}

等价于 window.f1 && console.log("f1存在")

||

A || B || C || D

  • 只要有一个为真，即为真，全部为假才是假。
  • 取第一个真值或最后一个值 D，并不会取 true/false。
if (a) {
    a = a  // a为真，则什么都不做
} else {
    a = 100  // 保底值
}

等价于 a = a || 100

五、循环语句

用于重复执行某个操作。

while 循环

while (条件) {
    语句;
}
  • 判断表达式的真假，当表达式为真时，执行语句
  • 执行完再次判断表达式的真假
  • 当表达式为假，则跳出循环，执行后面的语句
var a = 0.1  // 初始化
while (a !== 1) {  // 判断
    console.log(a)  // 循环体
    a = a + 0.1  // 递增
}

for 循环

for (初始化表达式; 条件; 递增表达式) {
    循环体
}
  • 初始化表达式（initialize）：确定循环变量的初始值，只在循环开始时执行一次。
  • 条件表达式（test）：每轮循环开始时，都要判断一次。如果值为真，则执行循环体，然后执行递增表达式。如果值为假，则直接退出循环，执行后面的语句。
  • 递增表达式（increment）：递增循环变量。
  • for语句的三个部分，可以省略任何一个，也可以全部省略（会导致无限循环）。
for (var i=0; i<5; i++) {
    setTimeout(() => {console.log(i)});
}

上面的代码最终会输出5个5：

  • i=0时，执行循环体：过一会儿输出i
  • i=1时，执行循环体：过一会儿输出i
  • i=2时，执行循环体：过一会儿输出i
  • i=3时，执行循环体：过一会儿输出i
  • i=4时，执行循环体：过一会儿输出i
  • i=5时，不满足条件i<5，退出循环
  • 此时已经累积了5条：过一会儿输出i，此时i=5，所以最后输出5个5

do...while 循环

先运行一次循环体，然后判断循环条件。

do {
    语句
} while (条件);

不管条件是否为真，do...while循环至少运行一次。while语句后面的分号不要省略。

var x = 3;
var i = 0;

do {
    console.log(i);
    i++;
} while (i < x);

break 和 continue 语句

具有跳转作用，可以让代码不按既有顺序执行。

  • break用于跳出代码块或循环。
  • continue用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。
var i = 0;

while (i < 100) {
    i++;
    if (i % 2 === 0) continue;
    console.log('i 当前为：' + i);
}

上面代码只有在i为奇数时，才会输出i的值。如果i为偶数，则直接进入下一轮循环。

如果存在多重循环，不带参数的break和continue语句都只针对最内层循环。

标签（label）

语句前面的标签，相当于定位符，用于跳转到程序的任意位置。标签可以是任意标识符，但不能是保留字。

label:
    语句

标签通常与break和continue语句配合使用，跳出特定的循环。也可以用于跳出代码块。

avatar
文章
阅读
粉丝