shadow's wiki

Appearance

迭代语句 ​

迭代语句又是JS中的一个重点，在JS中有以下几类迭代语句，数组的迭代方法其实都是基于这几个基础迭代语句实现的，所以不再列出数组原型上的迭代方法。

语句类型语法格式说明
for循环for ([initialization]; [condition]; [final-expression]) { statement }从头到尾指定循环的执行次数
while循环while (condition) { statement }只要条件为真就重复执行循环
do-while循环do { statement } while (condition)先执行一次循环体，然后检查循环条件，只要为真就一直重复执行
for-in循环for (variable in object) { statement }用于遍历对象的属性，变量 variable 每次被赋值为 object的一个属性名
for-of循环for (variable of iterable) { statement }循环遍历可迭代对象，变量 variable 每次被赋值为 iterable 的一个值

我们平时用的最多的迭代语句大概就是for，如果我们用的是vue，在模板语法里面用到的最多的就是for-in语句。

while用于处理多维数组，可以避免在forEach中嵌套forEach，这种嵌套语句。

do-while语句比较适合轮询，它的特性就是先执行一次，再进入循环体。

for-in我们日常是对对象进行迭代，可以遍历对象的可枚举属性。for-of不支持对象遍历，只支持数组的迭代。

当然在迭代语句中，还可以搭配使用以下语句：

语句类型语法格式说明
returnfor (statement) { if (statement) { return } }用于在函数中返回结果和终止函数执行
breakfor(statement) { if (statement) { break; } }用于打断循环体的执行
continueouter: while (true) { console.log("Outer loop"); inner: for (let i = 0; i < 5; i++) { console.log("Inner loop"); if (i === 3) { continue outer；}}}用于跳过当前循环体的剩余执行语句，直接进入下一次循环
label用于给嵌套循环体添加label，执行跳出循环的操作

在 JavaScript 中，return 语句和 break 语句是不同的语法结构，用途和作用也有所不同，主要区别如下：

  1. 作用范围不同：return 语句用于函数中，表示结束函数的执行并将结果返回给调用者，作用范围只限于当前函数；而 break 语句用于循环中，用于强制跳出当前循环，作用范围限于当前循环体。

  2. 执行结果不同：return 语句返回的是函数执行结果，即函数返回值；而 break 语句不返回任何结果，只是用于跳出循环，后续代码不再执行。

  3. 执行时机不同：return 语句可以在函数的任何地方执行，用于结束函数的执行并返回结果；而 break 语句只能在循环或 switch 语句中执行，用于跳出循环或 switch 语句。

  4. for语句

    javascript
    for (var i=0; i<10; i++) {
  if (i===5) {
    break;
  }
}

  5. while语句

    javascript
    let i = 0
while (i < 10) {
  i++
  console.log('=====i', i)
}

  6. do-while语句

    javascript
    var iii = 0 
do {
    iii++
    console.log('=========iii', iii)
} while(iii < 10)

  7. for-in语句

    javascript
    var obj = { name: 'asd' }

for (let k in obj) { console.log('====>k', k) }

  8. for-of语句

    javascript
    var arr = [{ a: 1 }, { a: 2 }, { a: 3 }]

for (let k of arr) { console.log('=====> k', k) }

下面是对以上集中迭代的Types实现:

  1. for语句

    javascript
    const forStatement = t.forStatement(
    // 变量声明
    t.variableDeclaration("let", [
      t.variableDeclarator(t.identifier("i"), t.numericLiteral(0)),
    ]),
    // 二元表达式
    t.binaryExpression("<", t.identifier("i"), t.numericLiteral(10)),
    // 更新表达式
    t.updateExpression("++", t.identifier("i")),
    t.blockStatement([
      // if语句
      t.ifStatement(
        t.binaryExpression("===", t.identifier("i"), t.numericLiteral(5)),
        t.blockStatement([t.breakStatement()])
      ),
      t.expressionStatement(
        t.callExpression(
          t.memberExpression(t.identifier("console"), t.identifier("log")),
          [t.stringLiteral("===== i"), t.identifier("i")]
        )
      ),
    ])
  );

    可以使用forStatement新建一个for语句，函数入参分别对应了for语法的三个条件表达式和函数主体。binaryExpress二元表达式一个老面孔了，上次我们已经介绍过了，这里不再过多介绍了。

    当然这里也有新出现的ifStatementif语句，对它的介绍我们放在条件语句篇章介绍。

    除此之外，我们使用的都是之前使用的函数，再也没有出现新的函数了。

  2. while语句

javascript
 /**
   * @NOTE
   *
   * @example
   * let i = 0
   *  while (i < 10) {
   *    i++
   *    console.log('=====i', i)
   *  }
   */
  const varIStatement = t.variableDeclaration("var", [
    t.variableDeclarator(t.identifier("i"), t.numericLiteral(0)),
  ]);
  const whileStatement = t.whileStatement(
    t.binaryExpression("<", t.identifier("i"), t.numericLiteral(10)),
    t.blockStatement([
      t.expressionStatement(t.updateExpression("++", t.identifier("i"))),
      t.expressionStatement(
        t.callExpression(
          t.memberExpression(t.identifier("console"), t.identifier("log")),
          [t.stringLiteral("======> i"), t.identifier("i")]
        )
      ),
    ])
  );

用来实现一个非常简单的while循环，里面只有一个新使用的函数whileStatement。

  1. do-while语句
javascript
  /**
   * @NOTE do-while语句
   *
   * @example
   * do {
   *   i++
   *   console.log('=========iii', iii)
   * } while(iii < 10)
   */
  const doWhileStatement = t.doWhileStatement(
    t.binaryExpression("<", t.identifier("i"), t.numericLiteral(10)),
    t.blockStatement([
      t.expressionStatement(
        t.updateExpression('++', t.identifier('i'))
      ),
      t.expressionStatement(
        t.callExpression(t.identifier("console"), [t.identifier("i")])
      ),
    ])
  );

继续使用doWhileStatement函数去创建语句，与whileStatement使用方式一致。

  1. for-in 语句

    javascript
      /**
   * @NOTE for-in语句
   * 
   * @example
   * var obj = { name: 'asd' }
  *
   * for (let k in obj) { console.log('====>k', k) }
   */
  const forInStatement = t.forInStatement(
    t.variableDeclaration('let', [t.variableDeclarator(t.identifier('k'))]),
    t.identifier('obj'),
    t.blockStatement([
      t.expressionStatement(
        t.callExpression(
          t.memberExpression(t.identifier('console'), t.identifier('log')),
          [t.stringLiteral('=======> i'), t.identifier('k')]
        )
      )
    ])
  )

  2. for-of语句

    javascript
      /**
   * @NOTE for-of 语句
   * 
   * @example
   * for (let k of arr) { console.log('=====> k', k) }
   */
  const forOfStatement = t.forOfStatement(
    t.variableDeclaration('let', [t.variableDeclarator(t.identifier('k'))]),
    t.identifier('arr'),
    t.blockStatement([
      t.expressionStatement(
        t.callExpression(
          t.memberExpression(t.identifier('console'), t.identifier('log')),
          [
            t.stringLiteral('======> k'),
            t.identifier('k')
          ]
        )
      )
    ])
  )

    这两个for语句使用方式是一致的，而且也没有出现新的函数，大致就是按照for语法将其一一对应地翻译为AST结构。

源码地址:

  1. 迭代语句: https://github.com/stack-wuh/mini-cli/blob/main/core/create-iterator-babel/babel.js

MIT License.

Copyright ©2023. shadow