JavaScript基础-运算符、语句和函数

发表于 分类于

本章主要介绍 JavaScript 中的各种基础运算符、分支和循环语句，以及函数的基础定义和调用。

运算符

如果有其他编程语言基础，那么这个部分对你来说不会太过陌生。
JavaScript 中的运算符主要分为以下几个大类：

  • 算术运算符：+, -, *, /, %
  • 赋值运算符：=, +=, -=，*=，/=，%=
  • +=表示将右边的值加到左边，再赋值给左边
  • -=表示将右边的值减到左边，再赋值给左边
  • 依次类推…
  • 一元运算符：
    • ++：自增
    • --：自减
      关于一元运算符需要多提一嘴，++和--可以放在变量前，也可以放在变量后，放在变量前表示先运算再赋值，放在变量后表示先赋值再运算。以自增运算符为例：
1
2
3
var a = 1;
var b = ++a; // a先自增，再赋值给b，所以a和b都是2
var c = a++; // a先赋值给c，再自增，所以c是2，a是3
  • 比较运算符：==, ===, !==, >, <, >=, <=
    • ⭐==表示值相等，===表示值和类型都相等，例如1 == '1'为true，而1 === '1'为false
    • 比较是否相等时尽量都用===，以免出现预期之外的行为。
  • 逻辑运算符：&&, ||, !

各运算符的优先级：小括号 -> 一元运算符 -> 算术运算符 -> 关系运算符 -> 相等运算符 -> 逻辑运算符 -> 赋值运算符 -> 逗号运算符

语句

JavaScript 中的语句主要有以下几种：

分支语句
和很多编程语言类似，JavaScript 中的分支语句主要有if、switch两种。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// if...else if...else语句
if (条件判断1) {
  // 条件1为真时执行的代码
} else if (条件判断2) {
  // 条件2为真时执行的代码
} else {
  // 条件1和条件2都为假时执行的代码
}
/*------------------------------------*/

// switch...case语句
switch (表达式) {
  case 值1:
    // 值1匹配时执行的代码
    break; // break的作用是跳出这个switch，用来表示情况1执行完毕，如果不写break，那么会继续执行下一个case
  case 值2:
    // 值2匹配时执行的代码
    break;
  default:
  // 值1和值2都不匹配时执行的代码
}

循环语句
跟大多数编程语言类似，JavaScript 中的循环语句主要有for、while、do...while三种。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// for循环
for (初始化表达式; 条件判断; 更新表达式) {
  // 循环体
}
/*------------------------------------*/

// while循环
while (条件判断) {
  // 循环体
}
/*------------------------------------*/

// do...while循环
do {
  // 循环体
} while (条件判断);

while和do...while循环的主要差别在于是否在第一次进入循环体前检查条件是否满足，do...while循环会先执行一次循环体，然后再检查条件是否满足，而while循环则是在第一次进入循环体前检查条件是否满足。

其他语句

  • break：跳出循环或 switch 语句
  • continue：跳过本次循环，进入下一次循环

当然，光看笔者写的这个框架或许不能帮助你非常好地理解这些语句，所以建议读者老爷们可以按照笔者所展示的框架，自己动手写一些代码来加深印象和理解。

函数

函数是 JavaScript 中非常重要的一个概念，它可以将任何使用广泛的逻辑封装起来，在需要的时候可以直接拿过来用。
在基础阶段，我们会首先学习函数最简单的用法，更多的高阶技巧会在后续进阶系列章节中介绍。

函数的定义
函数的定义方式主要有两种：函数声明和函数表达式。
其中函数声明的方式是通过function关键字来定义的，例如：

1
2
3
function 函数名() {
  // 函数体
}

而函数表达式则是通过function关键字来定义一个匿名函数（即没有函数名的函数），然后将这个匿名函数赋值给一个变量，例如：

1
2
3
const 变量名 = function () {
  // 函数体
};

此时，变量名就相当于函数名，可以直接通过变量名来使用这个函数。

后续我们的演示会尽量使用函数表达式的方式来定义函数，首先是因为有过其他编程语言基础的读者老爷应该对函数声明的方式更加熟悉，所以通过以函数表达式为例来加深大家对于新形式的影响，另外就是函数表达式的定义形式更为灵活。

上面我们只是演示了函数的基本定义方式，当然在实际开发过程中，你可能会希望可以传递给函数一些数据，经过函数的加工之后，它会给你处理之后的结果，那么就需要涉及到参数和返回值的概念了。这里以一个简单的加法函数为例：

1
2
3
4
const addFunction = function (a, b) {
  // a、b是函数的参数
  return a + b; // return后面跟着的表达式就是函数的返回值，返回值可以是任何类型的数据，包括一个函数
};

函数的调用
函数定义好了之后，我们就可以调用它了，调用函数的方式很简单，只需要在函数名后面加上一对小括号即可。
我们以刚刚定义的加法函数为例：

1
2
// 调用addFunction函数，并传入参数1和2
const result = addFunction(1, 2); // 用一个变量result来接收函数的返回值

值得注意的是，不是每个函数都有返回值的，如果函数没有return语句，那么函数的返回值就是undefined。

立即执行函数
在 JavaScript 中，有一种特殊的匿名函数叫做立即执行函数，它不需要调用，在定义函数的同时就会立即执行。
它的定义方式有如下两种：

1
2
3
4
5
6
7
8
9
// 第一种方式
(function (参数列表) {
  // 函数体
})()(
  // 第二种方式
  (function (参数列表) {
    // 函数体
  })()
);

这两种方式都是可以的，第一种方式的小括号可以省略，第二种方式的小括号不可以省略。
立即执行函数在现阶段的学习中不常见也不常用，大家只需要知道这两个形式即可。

结语

本章的内容比较简单，主要是对 JavaScript 中的运算符、语句和函数的基础知识进行介绍，希望读者老爷们能够通过本章的学习，对 JavaScript 的基础语法有一个初步的认识。下一期我们将具体介绍 JavaScript 的引用数据类型，敬请期待~~🌹🌹。