流程控制語句
- JS中的程序是從上到下一行一行執(zhí)行的
- 通過流程控制語句可以控制程序執(zhí)行流程,
使程序可以根據(jù)一定的條件來選擇執(zhí)行
- 語句的分類:
1.條件判斷語句:if...(else if)...(else)
2.條件分支語句:switch/case
? ? ? 3.循環(huán)語句:while for do...while
條件判斷語句
條件判斷語句:
- 使用條件判斷語句可以在執(zhí)行某個語句之前進行判斷,
如果條件成立才會執(zhí)行語句,條件不成立則語句不執(zhí)行。
- if語句
- 語法一:
if(條件表達式){
語句...
}
if語句在執(zhí)行時,會先對條件表達式進行求值判斷,
如果條件表達式的值為true,則執(zhí)行if后的語句,
如果條件表達式的值為false,則不會執(zhí)行if后的語句。
if語句只能控制緊隨其后的那個語句,
如果希望if語句可以控制多條語句,
可以將這些語句統(tǒng)一放到代碼塊中
if語句后的代碼塊(即{})不是必須的,但是在開發(fā)中盡量寫上代碼塊,即使if后只有一條語句
- 語法二:
if(條件表達式){
語句...
}else{
語句...
}
if...else...語句
當該語句執(zhí)行時,會先對if后的條件表達式進行求值判斷,
如果該值為true,則執(zhí)行if后的語句
如果該值為false,則執(zhí)行else后的語句
*/
例:
window.onload =function(){
var btn =document.getElementById('btn');
var box =document.getElementById('box');
alert(box.style.display);
btn.onclick =function () {
if (box.style.display =='block' ||box.style.display =='') {
box.style.display ='none';
}else {
box.style.display ='block';
}
}
}
多重條件判斷語句
if語句
語法三:
if(條件表達式){
語句...
}else if(條件表達式){
語句...
}else if(條件表達式){
語句...
}else{
語句...
}
if...else if...else
當該語句執(zhí)行時,會從上到下依次對條件表達式進行求值判斷
如果值為true,則執(zhí)行當前語句。
如果值為false,則繼續(xù)向下判斷。
如果所有的條件都不滿足,則執(zhí)行最后一個else后的語句
該語句中,只會有一個代碼塊被執(zhí)行,一旦代碼塊執(zhí)行了,則直接結(jié)束語句
*/
/*
條件分支語句也叫switch語句
語法:
switch(條件表達式){
case 表達式:
語句...
break;
case 表達式:
語句...
break;
default:
語句...
break;
}
執(zhí)行流程:
switch...case..語句
在執(zhí)行時會依次將case后的表達式的值和switch后的條件表達式的值進行全等比較,
如果比較結(jié)果為true,則從當前case處開始執(zhí)行代碼。
當前case后的所有的代碼都會執(zhí)行,我們可以在case的后邊跟著一個break關(guān)鍵字,
這樣可以確保只會執(zhí)行當前case后的語句,而不會執(zhí)行其他的case
如果比較結(jié)果為false,則繼續(xù)向下比較
如果所有的比較結(jié)果都為false,則只執(zhí)行default后的語句
switch語句和if語句的功能實際上有重復的,使用switch可以實現(xiàn)if的功能,同樣使用if也可以實現(xiàn)switch的功能,所以我們使用時,可以根據(jù)自己的習慣選擇。
*/
例:
var today =3;
/*if(today == 1){
alert('語文');
}else if(today == 2){
alert('數(shù)學');
}else if(today == 3){
alert('英語');
}else if(today == 4){
alert('美術(shù)');
}else if(today == 5){
alert('舞蹈');
}else{
alert('不補習');
}*/
switch語句
switch (today) {
default://可以放在最上面 得加上break
? ? ? alert('不補習');
break;
case 1:
alert('語文');
break;//退出switch 語句
? case 2:
alert('數(shù)學');
break;
case 3:
alert('英語');
break;
case 4:
alert('美術(shù)');
break;
case 5:
alert('舞蹈');
break;
// default:
//? ? alert('不補習');
}
數(shù)組
數(shù)組及操作方法
數(shù)組就是一組數(shù)據(jù)的集合,javascript中,數(shù)組里面的數(shù)據(jù)可以是不同類型的。
定義數(shù)組的方法
//對象的實例創(chuàng)建
var aList = new Array(1,2,3);
//直接量創(chuàng)建
var aList2 = [1,2,3,'asd'];
操作數(shù)組中數(shù)據(jù)的方法
1、獲取數(shù)組的長度:aList.length;
var aList = [1,2,3,4];
alert(aList.length); // 彈出4
2、用下標操作數(shù)組的某個數(shù)據(jù):aList[0];
var aList = [1,2,3,4];
alert(aList[0]); // 彈出1
3、join() 將數(shù)組成員通過一個分隔符合并成字符串
var aList = [1,2,3,4];
alert(aList.join('-')); // 彈出 1-2-3-4
4、push() 和 pop() 從數(shù)組最后增加成員或刪除成員
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //彈出1,2,3,4,5
aList.pop();
alert(aList); // 彈出1,2,3,4
5、unshift()和 shift() 從數(shù)組前面增加成員或刪除成員
var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //彈出5,1,2,3,4
aList.shift();
alert(aList); // 彈出1,2,3,4
6、reverse() 將數(shù)組反轉(zhuǎn)
var aList = [1,2,3,4];
aList.reverse();
alert(aList);? // 彈出4,3,2,1
7、indexOf() 返回數(shù)組中元素第一次出現(xiàn)的索引值
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));
8、splice() 在數(shù)組中增加或刪除成員
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //從第2個元素開始,刪除1個元素,然后在此位置增加'7,8,9'三個元素
alert(aList); //彈出 1,2,7,8,9,4
多維數(shù)組
多維數(shù)組指的是數(shù)組的成員也是數(shù)組的數(shù)組。
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //彈出2;
獲取元素的第二種方法
document.getElementsByTagName(''),獲取的是一個選擇集,不是數(shù)組,但是可以用下標的方式操作選擇集里面的dom元素。
循環(huán)語句
程序中進行有規(guī)律的重復性操作,需要用到循環(huán)語句。
for循環(huán)
for(var i=0;i<len;i++)
{
? ? ......
}
while循環(huán)
var i=0;
while(i<8){
? ? ......
? ? i++;
}
數(shù)組去重
var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
var aList2 = [];
for(var i=0;i<aList.length;i++)
{
? ? if(aList.indexOf(aList[i])==i)
? ? {
? ? ? ? aList2.push(aList[i]);
? ? }
}
alert(aList2);