JavaScript 语句与结构

159 阅读4分钟

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么 JavaScript 注释可用于提高代码的可读性

JavaScript 语句

JavaScript 语句是发给浏览器的命令, 这些命令的作用是告诉浏览器要做的事情。
下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "你好 Dolly" :

<!DOCTYPE html>
<html>
  <body>
    <h1>我的网页</h1>
    <p id="demo">我的第一个段落</p>

    <script>
      document.getElementById("demo").innerHTML = "你好 Dolly";
    </script>
  </body>
</html>

尝试一下 »

分号 ;

分号用于分隔 JavaScript 语句, 通常我们在每条可执行的语句结尾添加分号
使用分号的另一用处是在一行中编写多条语句

<!DOCTYPE html>
<html>
  <body>

    <h1>我的网页</h1>
    <p id="demo1"></p>
    <p id="demo2"></p>

    <script>
      x = 1; y = 2; z = x + y
      document.getElementById("demo1").innerHTML = z
      
      a = 10
      b = 20
      c = a + b
      document.getElementById("demo2").innerHTML = c
    </script>

  </body>
</html>

image.png在 JavaScript 中,用分号来结束语句是可选的行尾的结尾分号可省略。尝试一下 »


JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列, 浏览器按照编写顺序依次执行每条语句
本例向网页输出一个标题和两个段落:

<!DOCTYPE html>
<html>
  <body>

    <h1>我的 Web 页面</h1>
    <p id="demo">一个段落。</p>
    <div id="myDIV">一个 DIV。</div>
    <script>
      document.getElementById("demo").innerHTML = "你好 Dolly";
      document.getElementById("myDIV").innerHTML = "你最近怎么样?";
    </script>

  </body>
</html>

尝试一下 »

JavaScript 代码块

JavaScript 可以分批地组合起来, 代码块以左花括号开始,以右花括号结束, 代码块的作用是一并地执行语句序列
本例向网页输出一个标题和两个段落:

<!DOCTYPE html>
<html>
  <body>

    <h1>我的 Web 页面</h1>
    <p id="myPar">我是一个段落。</p>
    <div id="myDiv">我是一个div。</div>
    <p>
      <button type="button" onclick="myFunction()">点击这里</button>
    </p>
    <p>当您点击上面的按钮时,两个元素会改变</p>
    
    <script>
      function myFunction() {
        document.getElementById("myPar").innerHTML = "你好世界!";
        document.getElementById("myDiv").innerHTML = "你最近怎么样?";
      }
    </script>

  </body>
</html>

尝试一下 »

JavaScript 语句标识符

JavaScript 语句通常以一个 语句标识符 为开始,并执行该语句。语句标识符是保留关键字不能作为变量名使用。
下表列出了 JavaScript 语句标识符 (关键字) :

语句描述
break用于跳出循环
catch语句块,在 try 语句块执行出错时执行 catch 语句块
continue跳过循环中的一个迭代
do ... while执行一个语句块,在条件语句为 true 时继续执行该语句块
for在条件语句为 true 时,可以将代码块执行指定的次数
for ... in用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)
for (var key in object) { }
for ... of 用于遍历迭代器的属性和值
数组 Object.entries({name:"Ken"})
for (var [k,v] of object) { }
function定义一个函数
if ... else用于基于不同的条件来执行不同的动作
return退出函数
switch用于基于不同的条件来执行不同的动作
throw抛出(生成)错误 
try实现错误处理,与 catch 一同使用
var声明一个变量
while当条件语句为 true 时,执行语句块

空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。下面的两行代码是等效的:

var person="Hege";
var person = "Hege";

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:

document.write("你好 \
世界!");

不过,您不能像这样折行:

document.write \ 
("你好世界!");

JavaScript 注释

我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。
单行注释以//开头,多行注释以/*开始,以 */ 结尾 
本例用单行注释来解释代码:

// 输出标题:
document.getElementById("myH1").innerHTML = "欢迎来到我的主页"

//行尾注释
var x=5;    // 声明 x 并把 5 赋值给它
var y=x+2;  // 声明 y 并把 x+2 赋值给它

/* 多行注释1 */

/* 
多行注释2
document.getElementById("myP").innerHTML = "这是我的第一个段落。"
*/


//Automatically generates detailed JSDoc comments in TypeScript and JavaScript files
/**
 * @description
 * @author 一缕清风
 * @param {*} params1 参数1,数字类型
 * @param {*} params2 参数2,字符串类型
 * @returns 数字类型
 */
function methods(params1, params2) {
  return 123
}

methods()



JavaScript 关键字


JavaScript 关键字用于标识要执行的操作, 和其他任何编程语言一样
JavaScript 保留了一些关键字为自己所用
JavaScript 同样保留了一些关键字,这些关键字在当前的语言版本中并没有完全使用,但在以后 JavaScript 扩展中会用到
以下是 JavaScript 中最重要的保留字(按字母顺序):

abstractelseinstanceofsuper
booleanenumintswitch
breakexportinterfacesynchronized
byteextendsletthis
casefalselongthrow
catchfinalnativethrows
charfinallynewtransient
classfloatnulltrue
constforpackagetry
continuefunctionprivatetypeof
debuggergotoprotectedvar
defaultifpublicvoid
deleteimplementsreturnvolatile
doimportshortwhile
doubleinstaticwith