JavaScript 关键特性

王 茂南
王 茂南
王 茂南
3044
文章
75
评论
2022年1月28日07:53:44
评论 3234字阅读10分46秒
摘要本文会介绍 JavaScript 中的一些关键特性，主要包括以下几点，1. 条件控制语句；2. 循环控制语句; 3. 函数的声明。

简介

在上一篇中我们介绍了 JavaScript 基础，包括 JavaScript 中的变量声明，JavaScript 中的数组与字符串。在本文中，我们会继续学习 JavaScript 的关键基础特性，主要包括下面几个知识点：

  • 条件控制语句（if...else 语句，switch case 语句）；
  • 循环语句（for 循环，while 循环）；
  • 函数模块（函数声明，函数表达式）；

 

条件控制语句

if-else 语句

JavaScript 中最基本的条件控制语句为 if...else 语句。他的语法为：

  1. if (条件) {
  2.   // 当条件为 true 时执行的语句
  3. } else {
  4.   // 当条件为 false 时执行的语句
  5. }

我们来看一个简单的例子（需要注意每一行后面的分号）：

  1. if (3 > 2) {
  2.     console.log("我真帅");
  3.   } else {
  4.     console.log("不可能");
  5. }

if...else 语句是可以嵌套的。下面是他的语法：

  1. if(条件 1){
  2.     // 当条件 1 为 true 时执行的代码
  3.     } else if(条件 2){
  4.     // 当条件 2 为 true 时执行的代码
  5.     } else{
  6.     // 当条件 1 和 条件 2 都不为 true 时执行的代码
  7. }

下面来看一个例子，注意这里语句后面是有「分号（；）」的：

  1. var test = 10;
  2. if (test > 10) {
  3.     console.log('test > 10');
  4. } else if (test > 0 && test <=10) {
  5.     console.log('10 > test > 0');
  6. } else {
  7.     console.log('test < 0');
  8. }

 

switch case 语句

从前面的例子中我们可以看出来，当条件很多的时候，一直嵌套 else if 语句，显然是有点不科学的，由此我们引出了 switch case 语句，先来看看它的语法（注意每一个 case 里面是有 break 的，且每一个 break 后面是有分号的）：

  1. switch(k){
  2.     case 1:
  3.         执行代码块 1 ;
  4.         break;
  5.     case 2:
  6.         执行代码块 2 ;
  7.         break;
  8.     default:
  9.         默认执行（k 值没有在 case 中找到匹配时）;
  10. }

下面我们看一个例子，根据今天的日期输出「星期几」，需要注意下面的分号：

  1. var d = new Date().getDay();
  2. switch (d) {
  3.     case 0:
  4.         console.log('今天星期天'); // 注意分号
  5.         break;
  6.     case 1:
  7.         console.log('今天星期一');
  8.         break;
  9.     case 2:
  10.         console.log('今天星期二');
  11.         break;
  12.     case 3:
  13.         console.log('今天星期三');
  14.         break;
  15.     case 4:
  16.         console.log('今天星期四');
  17.         break;
  18.     case 5:
  19.         console.log('今天星期五');
  20.         break;
  21.     default:
  22.         console.log("今天星期六");
  23.         break;
  24. }

 

三元运算符

如果我们想要把条件表达式写在一行，可以使用「三元运算符」。他的语法如下所示：

  1. 条件表达式？结果 1:结果 2

问号前面的位置是判断的条件，判断结果为 boolean 型，为 true 时执行结果 1，为 false 时执行结果 2。

下面看一个例子，我们对 3>2 这个条件进行判断：

  1. 3 > 2 ? console.log("3 比 2 大") : console.log("3 比 2 小");

 

循环语句

for 循环

for 循环是我们编码中经常会使用到的。先来看看它的语法结构：

  1. for (初始化; 条件; 增量) {
  2.   循环代码;
  3. }

例如下面的例子，我们打印 1-100 中所有的奇数：

  1. for (var i=1; i<=100; i++) {
  2.     if (i%2==1) { // 打印奇数
  3.         console.log(i);
  4.     }
  5. }

 

while 循环

在 JavaScript 中不止有 for 循环，还有其他的循环语句。我们先来看看 while 循环的语法结构：

  1. while (条件) {
  2.   // 需要执行的代码;
  3. }

同样的，我们来完成打印 1-100 中所有的奇数：

  1. var i = 1;
  2. while (i <= 100) {
  3.   console.log(i);
  4.   i += 2;
  5. }

 

循环控制-break

我们也可以控制我们的循环语句。break 语句会立即退出整个循环。例如上述的 for 循环例子，我们来加个条件，使其能打印第一个能被 7 整除的整数。

  1. for (var i=1; i<=100; i++) {
  2.     if (i%7==0) {
  3.         console.log(i);
  4.         break;
  5.     }
  6. }

 

循环控制-continue

上面的 break 语句会退出整个循环，如果只想跳过当前的循环，则使用 continue 跳过迭代。continue 不是完全跳出循环，而是跳过当前循环而执行下一个循环。

例如下面的例子中，我们打印 1 到 100 所有能被 7 整除的整数

  1. for (var i=1; i<=100; i++) {
  2.     if (i%7!=0) {
  3.         continue; // 跳过不是 7 的倍数的
  4.     } else {
  5.         console.log(i);
  6.     }
  7. }

 

函数

函数是被设计为执行特定任务的代码块，可重复调用执行。我们将一些重复使用的代码封装起来，使用的时候可以直接调用。

函数声明创建函数

我们可以使用下面的语法来创建函数：

  1. function functionName(parameters) {
  2.   // 执行的代码
  3. }

例如我们创建一个有「加法」功能的函数：

  1. function f(a, b) {
  2.     console.log(a+b);
  3. }
  5. f(2,3); // 调用函数

上面的代码中：

  • 形参，f(a,b) 中的 a 和 b 是「形参」，占位用，函数定义时形参无值；
  • 实参，当我们调用上面的函数时比如 f(2, 3);其中 2 和 3 就是实参，会传递给 a 和 b；

 

函数表达之创建函数

除了上面的函数声明方式之外，我们还可以使用「函数表达式」来创建函数。JavaScript 函数可以通过一个表达式定义。函数表达式可以存储在变量中。下面是他的语法：

  1. var functionName = function (parameters) {
  2.   // 执行的代码
  3. };

我们还是完成一个加法的函数：

  1. var f = function (a,b) {
  2.     return a+b;
  3. }
  5. console.log(f(3,5)); //8

 

函数声明与函数表达式的区别

我们总结一下函数声明和函数表达式的区别。

  • 函数声明：JavaScript 解析器首先会把当前作用域的函数声明提前到整个作用域的最前面；
  • 函数表达式：JavaScript 解析器只有执行到某一句的时候才会对其进行解析；

下面看两个例子。首先第一个例子是可以正确执行的。因为使用「函数声明」，所以函数定义的位置是没有关系的：

  1. f(2, 3);
  3. function f(a, b) {
  4.   console.log(a + b);
  5. }

接着是第二个，使用函数表达式则会报错，出现「f is not a function」的错误：

  1. f(2, 3);
  3. var f = function (a, b) {
  4.   console.log(a + b);
  5. };

  • 微信公众号
  • 关注微信公众号
  • weinxin
  • QQ群
  • 我们的QQ群号
  • weinxin
王 茂南
  • 本文由 发表于 2022年1月28日07:53:44
  • 转载请务必保留本文链接：https://mathpretty.com/14467.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: