本文目錄一覽:
javascript中有哪些流程控制語句
下面複製於網絡,詳細講解javascript中的各種控制結構。
一、條件選擇結構
條件選擇語句用於基於不同的條件來執行不同的動作,通常在寫代碼時,總是需要為不同的決定來執行不同的
動作,可以在代碼中使用條件語句來完成該任務。
在JavaScript中,我們可使用以下條件語句:
if 語句:只有當指定條件為true時,使用該語句來執行代碼
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”
html xmlns=””
head
meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /
titleJS流程控制語句/title
/head
body
p如果時間早於 20:00,會獲得問候 “Good day”。/p
button onclick=”myFunction()”點擊這裡/button
p id=”demo”/p
script type=”text/javascript”
var time=new Date().getHours();
document.write(“當前北京時間:”+time);
function myFunction()
{
var x=””;
if (time20)
{
x=”Good day”;
}
document.getElementById(“demo”).innerHTML=x;
}
/script
/body
/html
運行的結果為:
if…else語句:當條件為true時執行代碼,當條件為 false 時執行其他代碼
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”
html xmlns=””
head
meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /
titleJS流程控制語句/title
/head
body
p如果時間早於 20:00,會獲得問候 “Good day”。如果時間晚於 20:00,會獲得問候 “Good evening”。/p
button onclick=”myFunction()”點擊這裡/button
p id=”demo”/p
script type=”text/javascript”
var time=new Date().getHours();
document.write(“當前北京時間:”+time);
function myFunction()
{
var x=””;
if (time20)
{
x=”Good day”;
}
else
{
x=”Good evening”;
}
document.getElementById(“demo”).innerHTML=x;
}
/script
/body
/html
運行的結果為:
if…else if….else 語句:使用該語句來選擇多個代碼塊之一來執行
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”
html xmlns=””
head
meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /
titleJS流程控制語句/title
/head
body
p如果時間早於 10:00,會獲得問候 “Good morning”。/p
p如果時間早於 20:00,會獲得問候 “Good day”。/p
p如果時間晚於 20:00,會獲得問候 “Good evening”。/p
button onclick=”myFunction()”點擊這裡/button
p id=”demo”/p
script type=”text/javascript”
var time=new Date().getHours();
document.write(“當前北京時間:”+time);
function myFunction()
{
var x=””;
if (time10)
{
x=”Good morning”;
}
else if (time20)
{
x=”Good day”;
}
else
{
x=”Good evening”;
}
document.getElementById(“demo”).innerHTML=x;
}
/script
/body
/html
運行的結果為:
switch語句: 使用該語句來選擇多個代碼塊之一來執行。switch 語句用於基於不同的條件來執行不同的動作
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”
html xmlns=””
head
meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /
titleJS流程控制語句2/title
/head
body
p點擊下面的按鈕來顯示今天是周幾:/p
button onclick=”myFunction()”點擊這裡/button
p id=”demo”/p
script type=”text/javascript”
var d=new Date().getDay();
document.write(“今天的星期代表數字:”+d);
function myFunction()
{ var x;
switch (d)
{
case 0:
x=”Today it’s Sunday”;
break;
case 1:
x=”Today it’s Monday”;
break;
case 2:
x=”Today it’s Tuesday”;
break;
case 3:
x=”Today it’s Wednesday”;
break;
case 4:
x=”Today it’s Thursday”;
break;
case 5:
x=”Today it’s Friday”;
break;
case 6:
x=”Today it’s Saturday”;
break;
}
document.getElementById(“demo”).innerHTML=x;
}
/script
/body
/html
運行的結果:
default關鍵字的使用
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”
html xmlns=””
head
meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /
titleJS流程控制語句2/title
/head
body
p點擊下面的按鈕來顯示今天是周幾:/p
button onclick=”myFunction()”點擊這裡/button
p id=”demo”/p
script type=”text/javascript”
var d=new Date().getDay();
document.write(“今天的星期代表數字:”+d);
function myFunction()
{ var x;
switch (d)
{
case 6:
x=”Today it’s Saturday”;
break;
case 0:
x=”Today it’s Sunday”;
break;
default:
x=”Looking forward to the Weekend”;
}
document.getElementById(“demo”).innerHTML=x;
}
/script
/body
/html
運行的結果為:
二、循環結構
循環可以將代碼塊執行指定的次數。
JavaScript支持不同類型的循環:
(1)for語句:循環代碼塊一定的次數
for(var box=1;box=10;box++)
{
document.write(“box=”+box+”br/”);
}
運行的結果為:
(2)for…in語句: 循環遍歷對象的屬性
var box={
name:”張三”,
age:24,
sex:”男”
};
for(x in box)
{
document.write(box[x]+”br/”);
}
運行的結果為:
(3)while語句:當指定的條件為 true 時循環指定的代碼塊。先判斷,再執行語句,這種比較實用。
var box=1;
while(box=5)
{
document.write(“box=”+box+”br/”);
box++;
}
運行的結果為:
(4)do…while – 同樣當指定的條件為 true 時循環指定的代碼塊。先執行一次,再判斷
var box=1;
do{
document.write(“box=”+box+”br/”);
box++;
}while(box=10)
運行的結果為:
三、其他語句
(1)break語句:用於跳出循環。
for(var box=1;box=10;box++)
{
if(box==5)
{
break;//強制退出整個循環
}
document.write(“box=”+box+”br/”);
}
運行的結果為:
執行到第四次循環時不再繼續執行,跳出了真箇循環,,輸出的少了box=5以後的循環。
(2)continue語句:用於跳過循環中的一個迭代。
for(var box=1;box=10;box++)
{
if(box==5)
{
continue;//退出當前循環,還會繼續執行後面的循環
}
document.write(“box=”+box+”br/”);
}
運行的結果為:
執行到第四次循環時,跳出第五次循環,繼續向下面執行,輸出的少了box=5。
(3)with語句:將代碼的作用域設置到一個特定的對象中
先來看一般我們是怎麼樣輸出對象的屬性的值的:
var box={
name:”張三”,
age:24,
sex:”男”
};
var n=box.name;
var a=box.age;
var s=box.sex;
document.write(n+”br/”);
document.write(a+”br/”);
document.write(s);
運行的結果為:
改用with語句來寫:
var box={
name:”張三”,
age:24,
sex:”男”
};
with(box){
var n=name;
var a=age;
var s=sex;
};
document.write(n+”br/”);
document.write(a+”br/”);
document.write(s);
nodejs的流程控制的方式有幾種
1 集合遍歷
var async = require(‘async’);
var wait = function(mils) {
//刻意等待mils的時間,mils的單位是毫秒。
var now = new Date;
while(new Date – now = mils);
}
var arr = [{name:’Jack’, delay: 200},
{name:’Mike’, delay: 100},
{name:’Freewind’, delay: 300}];
2 流程控制
// 串行執行函數,每個函數是獨立的;
async.series([
function(cb) {
console.log(“aaa…”);
cb(null, “aaa”);
return “aaa”;
},
function(cb) {
console.log(“bbb…”);
cb(null, “bbb”); // cb就是指最後的完成通知回調;如果第一個參數是非0,那麼就表示有錯誤,會中斷下一個方法的執行;
return “bbb”;
},
js的簡介
1.函數優先:指的是變量函數聲明優先級提高
2.輕量級:語法簡單,不依賴ide調試方便
3.解釋型:讀一行解釋一行,不用編譯
1.ECMAscript( ES ):原生的js,是js的基礎規範,定義js基礎語法
es版本 變量 數據類型 運算符 流程控制 函數 數組 對象 Symbol set map
2.Document Object Model( DOM ):文檔對象模型,通過創建樹,實現開發者對文檔結構和內容的控制
dom的屬性和方法 操作頁面的內容衍聖公hi屬性自定義屬性方法 事件 時間函數 js動畫 Dom節點 元素尺寸位置,本地存儲
3.Bower Object Model( BOM ):瀏覽器對象模型,對瀏覽器窗口進行訪問和操作
window對象 console對象localtion history Navigator
***異步變成需知
ajax promise genertator函數 asyn函數 fetch
js代碼的JS代碼在優化中:
一、 讓代碼簡潔:一些簡略的表達方式也會產生很好的優化
eg:x=x+1;在不影響功能的情況下可以簡寫為x++;
二、 變量名方法名盡量在不影響語意的情況下簡單。(可以選擇首字母命名)
eg:定義數組的長度可以取名為:ArrLen而不需要取為ArrayLength。
三、 關於JS的循環,循環是一種常用的流程控制。
JS提供了三種循環:for(;;)、while()、for(in)。在這三種循環中for(in)的效率最差,因為它需要查詢Hash鍵,因此應盡量少用for(in)循環,for(;;)、while()循環的性能基本持平。當然,推薦使用for循環,如果循環變量遞增或遞減,不要單獨對循環變量賦值,而應該使用嵌套的++或–運算符。
四、 如果需要遍曆數組,應該先緩存數組長度,將數組長度放入局部變量中,避免多次查詢數組長度。
因為我們常常要根據字符串、數組的長度進行循環,而通常這個長度是不變的,比如每次查詢a.length,就要額外進行一個操作,而預先把var len=a.length,則就少了一次查詢。
五、 盡量選用局部變量而不是全局變量。
局部變量的訪問速度要比全局變量的訪問速度更快,因為全局變量其實是window對象的成員,而局部變量是放在函數的棧里的。
六、 盡量少使用eval。
每次使用eval需要消耗大量時間,這時候使用JS所支持的閉包可以實現函數模板。
七、 減少對象查找
因為JavaScript的解釋性,所以a.b.c.d.e,需要進行至少4次查詢操作,先檢查a再檢查a中的b,再檢查b中的c,如此往下。所以如果這樣的表達式重複出現,只要可能,應該盡量少出現這樣的表達式,可以利用局部變量,把它放入一個臨時的地方進行查詢。
八、 字符串連接。
如果是追加字符串,最好使用s+=anotherStr操作,而不是要使用s=s+anotherStr。
如果要連接多個字符串,應該少使用+=,如s+=a;s+=b;s+=c;應該寫成s+=a + b + c;
而如果是收集字符串,比如多次對同一個字符串進行+=操作的話,最好使用一個緩存。怎麼用呢?使用JavaScript數組來收集,最後使用join方法連接起來,如下
var buf = new Array();for(var i = 0; i 100; i++){ buf.push(i.toString());}var all = buf.join(“”);
九、 類型轉換
1. 把數字轉換成字符串,應用”” + 1,雖然看起來比較丑一點,但事實上這個效率是最高的,性能上來說:(“” +) String() .toString() new String()
盡量使用編譯時就能使用的內部操作要比運行時使用的用戶操作要快。
String()屬於內部函數,所以速度很快,而.toString()要查詢原型中的函數,所以速度遜色一些,new String()用於返回一個精確的副本。
2. 浮點數轉換成整型,這個更容易出錯,很多人喜歡使用parseInt(),其實parseInt()是用於將字符串轉換成數字,而不是浮點數和整型之間的轉換,我們應該使用Math.floor()或者Math.round()。Math是內部對象,所以Math.floor()其實並沒有多少查詢方法和調用的時間,速度是最快的。
3. 對於自定義的對象,如果定義了toString()方法來進行類型轉換的話,推薦顯式調用toString(),因為內部的操作在嘗試所有可能性之後,會嘗試對象的toString()方法嘗試能否轉化為String,所以直接調用這個方法效率會更高
十、 盡量作用JSON格式來創建對象,而不是var obj=new Object()方法。
因為前者是直接複製,而後者需要調用構造器,因而前者的性能更好。
十一、 當需要使用數組時,也盡量使用JSON格式的語法,
使用JSON格式的語法即直接使用如下語法定義數組:[parrm,param,param…],而不是採用new Array(parrm,param,param…)這種語法。因為使用JSON格式的語法是引擎直接解釋的。而後者則需要調用Array的構造器。
十二、 對字符串進行循環操作,例如替換、查找,就使用正則表達式。
因為JS的循環速度比較慢,而正則表達式的操作是用C寫成的API,性能比較好。
十三、 插入HTML
很多人喜歡在JavaScript中使用document.write來給頁面生成內容。事實上這樣的效率較低,如果需要直接插入HTML,可以找一個容器元素,比如指定一個div或者span,並設置他們的innerHTML來將自己的HTML代碼插入到頁面中。
十四、 對象查詢
使用[“”]查詢要比.items()更快
十五、 定時器
如果針對的是不斷運行的代碼,不應該使用setTimeout,而應該是用setInterval。setTimeout每次要重新設置一個定時器。
十六、 盡量減少DOM調用
在Web開發中,JavaScript的一個很重要的作用就是對DOM進行操作。可是對DOM的操作是非常昂貴的,因為這會導致瀏覽器執行迴流 (reflow)操作。我們應該儘可能的減少DOM操作。
js有什麼流程語句控制必填項不填寫也可以提交
不存在,所謂的流程控制都是在各種事件的回調中組合形成的。例如表單中的某個字不能為空,可以設置光標移出時執行檢查代碼,具體看需求
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/231725.html