最全的JavaScript语句总结

Axjy
536 阅读5分钟

这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战

计算机程序一般是指能够被计算机执行的一些列指令的集合。在编程语言中，这些指令被称为语句，JavsScript程序就是一系列的JavaScript语句集合。JavaScript 语句向浏览器发出的命令，告诉浏览器该做什么。

JavaScript 遵循了一般编程语言的“语句 - 表达式”结构，在 JavaScript 标准中，把语句分成了两种：声明和语句。下面就一起来看看JavaScript的语句家族吧。

image-20210814232550482

普通语句

条件语句

if语句

语法

if(expr)
    statement

image-20210814210414834

image-20210814232653826

作用

在满足条件时执行它的内容语句，这个语句可以是一个语句块，这样就可以实现有条件地执行多个语句；

else 结构

if 语句还有 else 结构，用于不满足条件时执行；常见的用法是，利用语句的嵌套能力，把 if 和 else 连写成多分支条件判断；

image-20210814210518720

image-20210814232721633

switch 语句

switch 语句继承自 Java，Java 中的 switch 语句继承自 C 和 C++，原本 switch 语句是跳转的变形。

  • 如果要用它来实现分支，必须要加上 break。

** 看以下示例**

如果不加break，它把满足条件及后面的都执行了

image-20210814210946380

正确做法

image-20210814211159119

循环语句

while 循环

  • 条件为真
  • 执行语句
  • 返回条件继续判断
  • 直到条件为假，跳出循环

image-20210814232734981

如以下示例

当为0时，条件为假，停止执行；

image-20210814212337243

do while 循环

  • 执行语句（至少执行一次）

  • 条件为真

  • j继续执行语句

  • 返回条件继续判断

  • 直到条件为假，跳出循环

    image-20210814232746753

如以下示例

条件是a要小于10，如果不满足，但还是执行了一次；

image-20210814213305333

for循环

更简洁的循环结构。

语法格式

for (expr1;expr2;expr3)
    statement

其他

  • for 语句中 3 个表达式都可以为空，或者包括以逗号分隔的多个子表达式

  • expr2 为空，会默认其值为真，意味着将无限循环下去。

  • 除了 expr2 表达式结束循环外，也可以在循环语句中使用 break 语句结束循环。

    image-20210814232800833

for in

for/in 语句是 for 语句的一种特殊形式

语法格式

for ( [var/let] variable in <object | array)
    statement
  • variable 变量—》可用var/let来直接声明变量名
  • in 后面为【对象】或【数组】
  • 在遍历对象或数组过程中，把取到的每一个值赋值给 variable。
  • 【数组】variable是数组下标
  • 【对象】variable是对象的属性名

注

  • 如果对象属性被设置为只读、存档或不可枚举等限制特性，那么使用 for/in 语句将无法枚举。

如以下示例

给对象obj添加了一个，enumerable 为 false，即不可枚举的属性c，当用 for in 循环枚举打印时，并没有被打印出来。

image-20210814220032921

  • 遍历的结果不一定根据定义时的顺序输出，有浏览器的最新版本现在都按chrome执行，先把当中的非负整数键提出来，排序好输出，然后将剩下的定义时的顺序输出，【所以如果对顺序有要求，则不要把键值定义为纯数字】。

image-20210814215455939

for of

for of是ES6新增的循环方法

  • 不能直接用于遍历对象

image-20210814221306050

  • 它背后的机制是iterator 机制

可以给任何一个对象添加 iterator，使它可以用于 for of 语句

如以下 （此示例无实际意义）

  • 可以实现自定义规则的对【对象内部】数据的【遍历】
let people={
    name:'Axjy',
    mood:['happy','bad','nice','energetic'],
    [Symbol.iterator](){
        const _this=this;
        let index=0;
        return {
            next(){
                if(index<_this.mood.length){
                    return {
                        value:_this.mood[index++],
                        done:false
                    }
                }else{
                    return {
                        value:undefined,
                        done:true
                    }
                }
            }
        }
    }
};

image-20210814222955094

Symbol.iterator MDN

实际操作中，我们一般不需要这样定义 iterator，我们可以使用 generator function

如以下（此示例无实际意义）

image-20210814225824312

yield MDN

for await of 循环

JavaScript 还为异步生成器函数配备了异步的 for of

如以下示例

定义一个异步生成器函数，异步生成器函数每隔一秒生成一个数字，这是一个无限的生成器。这个无限循环的代码可以用于显示时钟等有意义的操作。


function sleep(duration) {
    return new Promise(function(resolve, reject) {
        setTimeout(resolve,duration);
    })
}
async function* foo(){
    i = 0;
    while(true) {
        await sleep(1000);
        yield i++;
    }
        
}
for await(let e of foo())
    console.log(e);

异常和错误

try/throw语句

try /throw 语句用于处理异常；

try {
    throw new Error("error");
} catch(e) {
    console.log(e);
} finally {
    console.log("finally");
}

一般来说，throw 用于抛出异常，但是单纯从语言的角度，我们可以抛出任何值，也不一定是异常逻辑，但是为了保证语义清晰，不建议用 throw 表达任何非异常逻辑。

  • try 语句用于捕获异常，用 throw 抛出的异常，可以在 try 语句的结构中被处理掉，try 部分用于标识捕获异常的代码段；
  • catch 部分用于捕获异常后做一些处理
  • finally 部分用于执行后做一些必须执行的清理工作。

调试语句

debugger语句

debugger 语句的作用是：通知调试器在此断点

控制型语句

break 语句

break 语句用于跳出循环语句或者 switch 语句

  • 有带标签的用法，可以控制自己被外层的哪个语句结构消费

    image-20210814231003293

continue 语句

continue 语句用于结束本次循环并继续

  • 有带标签的用法，可以控制自己被外层的哪个语句结构消费

image-20210814231016234

其他

语句块

语句块就是一对大括号；

语句块的好处和意义

  • 让我们可以把多行语句视为同一行语句，让if、for 等语句定义起来可以比较简单。

image-20210814203419184

注

语句块会产生作用域；如以下当尝试在【语句块】外访问【语句块】内let定义的声明时，就报错了。

image-20210814204615985

空语句

空语句就是一个独立的分号，实际上没什么大用。

  • 空语句的存在仅仅是从语言设计完备性的角度考虑，允许插入多个分号而不抛出错误。

    image-20210814204841658

return 语句

return 语句用于函数中，它终止函数的执行，并且指定函数的返回值

  • 它后面可以跟一个表达式

声明型语句

var语句

古典的 JavaScript 中声明变量的方式。现在，在绝大多数情况下，let 和 const 是更好的选择。

  • 声明同时必定初始化；

  • 尽可能在离使用的位置近处声明；

  • 不要在意重复声明。

let语句 和 const语句

let 和 const 是都是变量的声明，let 和 const 的作用范围是 if、for 等结构型语句。

class 声明

  • class 最基本的用法只需要 class 关键字、名称和一对大括号
  • 它的声明特征跟 const 和 let 类似，都是作用于块级作用域
  • 预处理阶段则会屏蔽外部变量。
class a {

}

class 内部，可以使用 constructor 关键字来定义构造函数。还能定义 getter/setter 和方法。


class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

Classes MDN

函数声明

普通函数声明

function foo(){

}

async函数声明

async function foo(){
    await sleep(3000); 
}

generator函数声明

function* foo(){
    yield 1;
    yield 2;
    yield 3;
}

async generator函数声明

async function* foo(){
    await sleep(3000);
    yield 1;
}

结语

注：以上示例只是用于理解概念

如以上有错误的地方，请在评论区中指出！

小可爱看完点个赞再走吧！😗

avatar
文章
阅读
粉丝