JavaScript中的那些語句

JavaScript · 發表 2019-04-04 17:51:37

摘要：前言 JavaScript 區分表示式和語句。表示式是輸出值的，並且可以寫在任何需要一個值的地方.籠統來說，一個語句表示執行了一個動作基本上，我們每天都在和JavaScript 中的各種語句進行著溝通，那些我們經常見面的老朋友，或者是未曾見...

前言

JavaScript 區分表示式和語句。表示式是輸出值的，並且可以寫在任何需要一個值的地方.籠統來說，一個語句表示執行了一個動作

基本上，我們每天都在和JavaScript 中的各種語句進行著溝通 ，那些我們經常見面的老朋友 ，或者是未曾見面的新朋友 ，它們共同維護著JavaScript 的流程，讓我們的程式穩步執行。那麼，你是否對它們足夠了解呢

如果文章中有出現紕漏、錯誤之處，還請看到的小夥伴多多指教，先行謝過

以下↓

條件語句

if語句

語法：

if (condition) statement1 else statement2

// condition 值為真或假的表示式
// statement1 當 condition 為真時執行的語句
// statement2 當 condition 為假時執行的語句

if 語句大概是我們接觸特別多的條件語句了，根據不同的判斷條件執行不同的邏輯

多層if...else 語句可使用else if 從句

if (condition1)
statement1
else if (condition2)
statement2
...
else
statementN

switch語句

switch 語句評估一個表示式，將表示式的值與case 子句匹配，並執行與該情況相關聯的語句

語法：

switch (expression) {
case value1:
// 程式碼塊
break;
case value2:
// 程式碼塊
...

default 
// 程式碼塊
}

switch 在比較值時，使用的是全等操作符=== ，因此不會發生型別轉換

如果多個case 與提供的值匹配，則選擇匹配的第一個case

如果沒有case 子句相匹配，程式則會尋找那個可選的default 子句，如果找到了，將控制權交給它，執行相關語句;若沒有就執行完switch 語句

若break 被省略，程式會繼續執行switch 語句中的下一條語句

迭代語句

do-while語句

do-while 是一種後測試迴圈語句，即只有在迴圈體中的程式碼執行之後，才會測試出口條件。換句話說，在對錶達式求值之前，迴圈體內的程式碼至少會被執行一次

語法：

do {
statement
} while(expression)

while語句

while 語句屬於前測試迴圈語句，即在迴圈體內的程式碼被執行之前，就會測試出口條件

語法：

while(expression) statement

當測試條件一直為真的情況下，就會形成一個死迴圈。所以在執行階段，我們很有必要為迴圈設定結束條件

for語句

for 語句也是前測試迴圈語句,它具有執行迴圈之前初始化變數和定義迴圈後要執行的程式碼的能力

示例：

var count = 10;
for(var i = 1; i < count; i++){
// 程式碼塊
}

for 迴圈的執行順序是變數賦值==>判斷條件==> (符合就執行程式碼塊，再執行++ 操作) == (不符合就直接跳出迴圈)

使用while 迴圈做不到的，使用for 迴圈同樣也做不到，for 迴圈只是把與迴圈有關的程式碼集中在了一個地方

for-in語句

for-in 語句是一種精準的迭代語句，用來列舉物件的屬性

語法：

for (variable in object) {...}

for...in 迴圈只遍歷可列舉屬性

for..in 迴圈輸出的屬性名的順序是不可預測的。具體來講，所有屬性都會被返回一次，但返回的先後次序可能會因瀏覽器而異

for...in 會遍歷存在於原型物件的可列舉屬性

for..in 不適合遍歷陣列陣列的屬性就是它的索引

for-of語句

for...of 是ES6 新增的迭代方式，規定了一個數據結構只要部署了Symbol.iterator 屬性，就被視為具有iterator 介面，就可以用for...of 迴圈遍歷它的成員,它的出現就是在一定程度上補充了for...in 的不足

語法：

for (variable of object) {...}

具體可以點選這裡

for...in 與 for...of 的區別

其他

break和continue語句

break 和continue 語句用於在迴圈中精確地控制程式碼的執行

break 語句會立即退出迴圈，強制執行迴圈後面的語句；continue 語句雖然也是立即退出迴圈，但是退出迴圈後會從迴圈的底部繼續執行

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

num // 4

for(var i = 1; i < 10; i++) {
if(i % 5 === 0) {
continue;
}
num++
}

num // 8

label語句

使用label 語句可以在程式碼中新增標籤，以便將來使用

語法：

label: statement

label 語句一般都會配合break 和continue 使用，多用於多重迴圈

var count = 0;
loop1: 
for(var i = 0; i < 10; i++) {
loop2:
for(var j = 0; j < 10; j++) {
if (i == 5 && j == 5) {
continue loop1;
}
count++
}
}

count // 95

// 不使用 label 語句的情況下會從裡面的迴圈重新開始，使用 label 標識會從標識的迴圈重新開始

with語句

with 語句的作用是將程式碼的作用域設定到一個特定的物件中，主要目的是為了簡化多次編寫同一個物件的操作

var qs = location.search.substring(1);
var hostName = location.hostname;
var url = location.href;

// 改寫如下

with(location) {
var qs = search.substring(1);
var hostName = hostname;
var url = href;
}

// 使用 with 語句關聯了 location 物件

嚴格模式下不允許使用with 語句

大量使用with 語句會造成程式效能下降

debugger語句

debugger 語句，用來產生一個斷點，程式碼的執行會停在斷點的位置，這時使用偵錯程式來輸出變數的值

空語句

語法：

一般情況下，空語句會配合for 迴圈來使用

for(;;;){
// 產生一個死迴圈
}

後記

當然，在JavaScript 中還有其他的一些語句，比如宣告語句、複合語句等。瞭解它們的用法，我們就能在合適的場景去更好地使用它們，讓我們的程式碼更加健壯

如果你也是一個前端愛好者，如果你也想了解、分享更多前端的技能和有趣的東西，點選這裡你將看到更多分享，歡迎star 關注

期待同行

以上