ECMAScript关键语句详解：for/while区别、Switch全等、For-in遍历及Label标签用法

ECMAScript关键语句概述

写在前面

本章将探讨ECMAScript中几个重要的控制语句，包括switch、for-in以及label等，旨在帮助开发者更深入地理解其机制与应用。我们将从最基础的部分开始讲解。

while与for循环的对比及作用域特性

while和for

while和for是编程中极为常见的循环结构，广泛存在于JavaScript、C及其他多种编程语言中。在实际开发中，for循环因其灵活性和简洁性更受青睐，这导致部分开发者产生了一种误解：

for循环比while循环功能更强大，能够完成while无法实现的操作。

然而，只要稍加分析两者的语法结构即可发现：

while循环无法完成的功能，for循环同样无法完成。

这是因为for循环本质上只是将while循环相关的代码逻辑进行了封装和集中。在某些场景下，使用while循环反而更加直观简便。两者各有优劣，适用场景不同。

关于循环结构的另一个重要特性，我们先通过一段代码进行观察：


for(i=0;i<5;i++){
  console.log(i);
}
console.log(i);

在循环外部打印变量i，其输出结果为5。

上述现象表明，在循环内部定义的变量在循环外部依然可以被访问。在C等语言中，大括号界定的是块级作用域，但在ECMAScript中并不存在块级作用域的概念，因此循环内部定义的变量会泄露到外部作用域中。

switch语句的全等比较机制

switch语句

在C等编程语言中，switch语句通常仅支持数值类型的判断，而在ECMAScript中，switch语句可以接受任何数据类型作为比较值，例如字符串或对象均可。

需要特别注意的一点是：switch语句在比较时使用的是全等操作符（===）。这意味着'10'与数字10被视为不相等，因为在全等比较过程中不会发生隐式的类型转换。

for-in语句的遍历行为

for-in语句

for-in语句是一种用于精确迭代的语句，主要用于遍历对象的属性，同时也可用于迭代数组的属性。以下通过具体示例分别说明：

for-in遍历对象

•window

首先对一个特殊对象window进行遍历：


for(var i in window){
  console.log(i);
}

这将打印出一长串属性列表，读者可自行运行查看，此处不再逐一罗列。

•自定义对象

遍历自定义对象


var o={prop1:'value1', prop2:'value2', prop3:'value3'};
for (var i in o){
  console.log(i);
}

输出结果为prop1、prop2和prop3。

•数组

遍历数组


var array1=[1,2,3,4];
for(var i in array){
  console.log(i);
}

输出结果为1、2、3和4。

with语句的作用域限制与风险

with语句

with语句可用于将代码的作用域临时绑定到特定对象上。示例如下：


var hostname=location.hostname;
var url=location.href;

这两行代码分别获取hostname和url，由于它们均属于location对象的属性，我们可以利用with语句将作用域限定在location对象中，代码如下：


with(location){
  
  var hostname=hostname;
  var url=href;
}

需要注意的是：在严格模式下使用with语句会引发语法错误。此外，大量使用with语句会导致性能下降，并增加调试难度。因此，在开发应用程序，尤其是大型应用时，不建议使用with语句。

label标签与break/continue的配合使用

label语句

label语句用于在代码中定义标签，以便后续引用。通常情况下，带标签的语句需与for等循环语句配合使用。

其语法结构为：


label: statement

下面通过详细代码示例来展示label标签的具体用法。

1、首先提供一段基础代码：


var num=0;
for(var i=0;i<10;i++){
  for(var j=0;j<10;j++){
    if(i==5&&j==5){
      break;
    }
    num++;
  }
}
console.log(num);

说明：break语句跳出了内部的for循环，导致变量j剩余的5次循环不再执行，因此最终打印结果为95。

2、接下来将break替换为continue：


var num=0;
for(var i=0;i<10;i++){
  for(var j=0;j<10;j++){
    if(i==5&&j==5){
      break;
    }
    num++;
  }
}
console.log(num);

说明：continue语句跳出了当前这一次循环，即跳出了内部for循环的当次迭代，因此最终打印结果为99。

3、接下来添加一个名为outer的label标签，并分别观察打印结果：


var num=0;
outer:
for(var i=0;i<10;i++){
  for(var j=0;j<10;j++){
    if(i==5&&j==5){
      break outer;
    }
    num++;
  }
}
console.log(num);

说明：添加标签后，使用break跳到了标签outer处，即程序跳出了外层循环。当i=5且j=5时程序停止执行，因此最终打印结果为55。

4、我们再将break换成continue进行观察：


var num=0;
outer:
for(var i=0;i<10;i++){
  for(var j=0;j<10;j++){
    if(i==5&&j==5){
      continue outer;
    }
    num++;
  }
}
console.log(num);

说明：此处使用的是continue，因此当程序执行到i=5且j=5时，并未跳出外层循环，而是仅跳出了内层循环，即剩余的5次迭代不予执行，因此最终打印结果为95。

上述几种情况放在一起容易混淆，建议多加理解与练习。

小结

学习技术的目的并非为了学而学，而是为了应用，归根结底是为了工作需求。因此，单纯理解上述语法并非最终目标，关键在于能够熟练运用。做笔记是一个良好的习惯，正如古语所言“好记性不如烂笔头”，若你正在实践，希望你能坚持下去。

以上关于深入理解ECMAScript几个关键语句的内容即为本文分享的全部，希望能对大家有所帮助，也希望大家多多支持本站。

深入理解ECMAScript的关键控制语句：循环、Switch与Label