?? 歡迎大家來到景天科技苑??
???? 養(yǎng)成好習慣，先贊后看哦~????
所屬的專欄：前端泛海
景天的主頁：景天科技苑
1.流程控制與分支結構
在javascript中的一個程序執(zhí)行的過程中，各條代碼的執(zhí)行順序對程序的結果是有直接影響的。
很多時候我們要通過控制代碼的執(zhí)行順序來實現我們要完成功能。
簡單理解︰流程控制就是來控制我們的代碼按照什么結構順序來執(zhí)行
流程控制主要有三種結構，分別是順序結構、分支結構和循環(huán)結構，這三種結構代表三種代碼執(zhí)行的順序。
1.if分支結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流程控制 -> 分支結構 </title>
</head>
<body>
<script>
var mashengni = "美女";
//1.單項分支
// if(mashengni == "美女"){
// alert("給他買好吃的~");
// }
//2.雙項分支
// if(mashengni == "野獸"){
// alert("給他一榔頭~");
// }else{
// alert("跳起來給他一榔頭~");
// }
//3.多項分支
// 不推薦判斷條件連續(xù)比較,有可能失效;
多條件用&& 連接才行，不能用 10000 <salary<15000
var salary = 1000;
if(10000 < salary && salary < 12000){
console.log("正常薪資范圍~");
}else if(12000 <= salary && salary < 15000){
console.log("超過一般水平~");
}else if(15000 <= salary && salary <18000){
console.log("大神級畢業(yè)生~");
}else if(salary >= 18000){
console.log("王牌畢業(yè)生~");
}else{
console.log("回爐重生~")
}
//4.巢狀分支，分支嵌套
var youqian = true;
var youfang = true;
if(youqian){
if(youfang){
console.log("老子要嫁給你~!");
}
}
</script>
</body>
</html>
2.switch case 分支結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分支結構 : switch case </title>
</head>
<body>
<script>
js日期
日期的獲取方法 Date/date
獲取當前小時
var date = new Date();
console.log(date);
// 獲取星期 getDay
var week = date.getDay();
console.log(week)
week = "1"
// 注意點: switch case中的判斷(全等于): (1) 值的比較(2)類型的比較 全部符合才能滿足條件;
switch語法 ：
switch (week){
case 1:
console.log('星期一');
break; //一定要加break 打斷后續(xù)的case, 能防止case穿透 不然尋找到正確的條件之后，后面的case不做判斷，直接執(zhí)行
case 2:
console.log('星期二');
break;
case 3:
console.log('星期三');
break;
case 4:
console.log('星期四');
break;
case 5:
console.log('星期五');
break;
case 6:
console.log('星期六');
break;
default: //所有條件都不滿足，走default分支
console.log("星期日!");
break;
}
week為字符串’1’，case里面是數值1，所以匹配不到，打印出默認值 星期日
將week改為1，則匹配成功
</script>
</body>
</html>
// 給你月份判斷該月份是第幾季度，利用case穿透，使代碼更簡潔
// var month = 2
// switch (month){
// case 1:
// case 2:
// case 3:
// console.log("第一季度");
// break
// case 4:
// case 5:
// case 6:
// console.log("第二季度");
// break
// //...
// }
3.循環(huán)結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分支結構 : 循環(huán)結構 </title>
</head>
<body>
<script>
// ### 1.for循環(huán)
/*
語法特征:
1號 2號 3號
for(初始值;判斷條件;自增自減的值){
code1
code2..
}
先執(zhí)行1,2滿足后執(zhí)行代碼體
然后執(zhí)行3,2滿足后在執(zhí)行代碼體
以此類推...
直到不滿足條件終止循環(huán);
*/
// 打印 1~100
for(var i = 1;i<=100;i++){
console.log(i);
}
// 打印1~100 遇到50,自動跳過;
for(var i = 1;i<=100;i++){
if(i == 50){
continue;
}
console.log(i);
}
50被跳過
// ### 2.while 循環(huán)
//遇到5,終止循環(huán)
i = 0
while(i<10){
if( i == 5){
break;
}
console.log(i);
i++;
}
console.log("<===============第一組===================>")
// ### 3.for( var i in Iterable ) 獲取的是數組中的索引號;
var arr = ["孟浩然","趙子龍","康乃馨","張飛","汪精衛(wèi)"];
可以根據索引拿數組中的值
for(var i in arr ){
console.log(i);
console.log(arr[i]);
}
console.log("<===============第二組===================>")
// 獲取的是js對象中的鍵
var dic = {"a":"王同培","b":"馬村你","c":"張宇"};
for(var i in dic){
console.log(i)
console.log(dic[i]) ;
}
console.log("<===============第三組===================>")
// ### 4.for( var i of Iterable ) 獲取的是數組中的值; [等價于python中 for i in Iterable:]
for(var i of arr){
console.log(i);
}
console.log("<===============第四組===================>")
// 注意點: for(var i of dic) 不能遍歷js對象[字典] error
/*
var dic = {"a":"王同培","b":"馬村你","c":"張宇"};
for(var i of dic){
console.log(i)
}
*/
// 字符串的遍歷:
for(var i of "abcdefg"){
console.log(i)
}
</script>
</body>
</html>
2.函數
函數是由事件驅動的或者當它被調用時執(zhí)行的可重復使用的代碼塊。JavaScript函數語法,函數就是包裹在花括號中的代碼塊，前面使用了關鍵詞 function： 當調用該函數時，會執(zhí)行函數內的代碼?？梢栽谀呈录l(fā)生時直接調用函數（比如當用戶點擊按鈕時），并且可由 JavaScript 在任何位置進行調用。
將腳本編寫為函數，就可以避免頁面載入時執(zhí)行該腳本。 函數包含著一些代碼，這些代碼只能被事件激活，或者在函數被調用時才會執(zhí)行 [1]。
你可以在頁面中的任何位置調用腳本（如果函數嵌入一個外部的 .js 文件，那么甚至可以從其他的頁面中調用）。函數在頁面起始位置定義，即 <head> 部分。
1.函數定義方式一 ：普通函數
(存在預加載機制,提前把函數加載到內存中,然后代碼整體再執(zhí)行)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函數</title>
</head>
<body>
<script>
func1()
// ###1 函數
// 方式一 普通函數 (存在預加載機制,提前把函數加載到內存中,然后代碼整體再執(zhí)行)
func1()
function func1(){
console.log(111);
}
存在預加載機制，可以先調用，再定義
函數命名的特殊字符：
$和_
function _(){
console.log("我是一個$函數");
}
_(); // $, _普通字符 -> 1是為了簡單, 2是為了繞你
// // fn();// 讓變量fn所指向的那個東西. 運行起來
//
// gn = fn; // 實際上是內存地址的復制
// fn();
// gn(); // 123 對
// // 函數的運行不是依賴于函數名. 而是依賴于內存地址
2.函數定義方式二：匿名函數
(匿名函數沒有預加載價值,必須先定義再調用) 匿名函數想要運行 讓該內存地址 加括號就可以了
// func2() error
var func2 = function(){
console.log('我是func2~');
}
func2();
匿名函數先調用報錯
先定義，后調用正常執(zhí)行
var x = (function(a){ // 形參->變量
console.log("我愛你"+a);
return "墮落小羊"
})(123456); // 自運行函數
console.log(x);
window是頂級作用域,內部的東西想要調用的話. 可以省略window
// // 關于對象的補充
// var wf = {
// name: "子怡",
// age: 199,
// songs: ["吹天理", "夏天不里", "秋天獎勵", "冬天美麗"],
// chi: function(){
// // this就是當前對象
// console.log(this.name + "喜歡吃飯"); // this關鍵字
// this.he("北冰洋");
// },
// he: function(yinliao){
// console.log(this["name"] + "在喝"+ yinliao);
// } // 7
// }
//
// wf.chi(); // 777 999
// // 在前端js中不存在多個返回值
// function fn(){
// // 前端 多個逗號隔開. 最終返回的是最后一項.
// //
// var i = 0
// i++;
// ++i;
// i++;
// return i;
// return n=a(),
// n++,
// t=b(n),
// t;
// }
//
// var r = fn();
// console.log(r);
如果要返回多個值，需要用數組包裹
也可以封裝到json中返回
3.變量提升
// 記住結論即可
// var -> 創(chuàng)建變量
// let -> 創(chuàng)建變量
// const -> 創(chuàng)建常量
// function fn(){
// // 提前聲明name, 這種現象叫變量提升
// // 站在開發(fā)人員的角度分析. 是不合理的.
// console.log(name);
// var name = '大馬猴'; // 正常人理解. 應該是報錯的.
// // 新版本的js -> es6 對變量的提升進行的修復.
// // let聲明的變量. 沒有變量提升
// }
// fn()
// 常量的聲明,不希望后續(xù)的程序去修改該變量的值
// const BIRTH_DAY = 2000;
//
// BIRTH_DAY = 1998; // 把規(guī)范的東西標準化
// console.log(BIRTH_DAY);
變量提升，打印出name undefined
const 修飾的常量不允許修改，強制修改報錯
4.函數定義方式三：不推薦 (了解) 把代碼寫在Function()里面
// var func3 = new Function("alert('我是func3~');alert('woshi3333');");
// console.log(func3,typeof(func3));
// func3();
帶參數，前面寫參數，后面寫代碼體
// var func4 = new Function("x","y","alert(x+y)");
// func4(5,6);
5.函數定義方式四：閉包函數
function func5(){
var a = 100;
function func6(){
console.log(a,"<===>");
return "我是閉包函數";
}
return func6;
}
func = func5();
res = func();
console.log(res);
內函數使用了外函數的變量，外函數將內部函數返回出來
func6是閉包函數
在一個html中引入多個js文件時，大概率會出現變量名沖突的變量
怎樣才能讓自己代碼的變量名與別人的不沖突呢
將變量名設為局部變量
外部要想用到局部變量，則需要將變量返回出來
此時就用到了閉包
// rsa 加密 -> key
// 這里直接用var聲明的東西. 自動進window
(function(){
// 局部變量
// 外界無法對key進行修改
var key = "22222222";
var b64 = function(){
console.log("我是rsa, 我也需要b64");
}
// 提供給外界的一個接口.
// 外界使用該變量來訪問閉包中的功能
window.rsa = function(){
console.log("我也要開始加密了. 我是rsa")
b64();
console.log(key);
return "rsa加密結果";
}
})()
6.函數定義方式五：箭頭函數
function mysum(x,y){
return x+y;
}
res = mysum(5,6)
console.log(res,"<=======11122233=======>");
var mysum = (x,y) => {return x+y;}
var res = mysum(5,6);
console.log(res,"========3334444=========");
=>箭頭函數，把一個函數傳遞到另一個函數，作為參數
箭頭格式不能變，一定得是向右指向
// if (a > 5) console.log(3333333); // 如果只有一句話.可以省略大括號
// else {
// console.log(6666666);
// }
// let fn = function(){
// console.log("你好啊");
// }
//
// fn();
//
// // 箭頭函數
// let gn = ()=>{
// console.log("我不叫賽利亞");
// }
//
// gn();
// setTimeout(()=>{
// console.log("123")
// }, 1000);
// // 如果只有1個參數. 可以省略()
// let an = n => {
// console.log(n);
// }
//
// an(18);
// // 慢慢捋
// function fn(n, m){
// m(n); //
// }
//
// a = 10;
// fn(a, n => {
// console.log(n);
// });
7.函數參數 (普通位置參數,默認參數)
// js中的形參實參不匹配不會報錯
function func7(a,b,c=3){
console.log(a,b,c);
}
func7(10,11);
func7(10,11,12);
func7(10,11,12,13);
參數寫多了也不報錯
只能按位置參數處理，不能用關鍵字傳參
console.log("<==============================>")
8.arguments 自動收集所有的實參，是個數組
// 計算任意個數值的累加和;
function func8() {
// console.log(a,b)
// console.log(arguments)
var total = 0;
for(var i of arguments){
total += i;
console.log(i);
}
return total;
}
res = func8(1,100,2,3,4,5,56,6);
console.log(res);
收集所有實參，不管有沒定義形參，都收集
遍歷出參數，計算出參數計算結果
控制臺打印
</script>
</body>
</html>
3.函數調用
在JavaScript中，常見的有四種不同的方式進行函數調用：
1.作為一個函數進行調用，這是最簡單的形式。
2.作為一個方法進行調用，在對象上進行調用，支持面向對象編程。
3.作為構造器進行調用，創(chuàng)建一個新對象。
4.通過apply() 或call() 方法進行調用。文章來源：http://www.zghlxwxcb.cn/news/detail-838787.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函數的調用</title>
</head>
<body>
<script>
function func(){
console.log("函數正在執(zhí)行 ... ");
}
// 1.正常調用
func();
// 2.函數的立即執(zhí)行，不用手動調用
(function func2(){
console.log("函數正在執(zhí)行2 ... ")
})();
// 3.匿名函數的立即執(zhí)行
(function(){
console.log("匿名函數正在執(zhí)行3 ... ")
})();
// 4.其他立即執(zhí)行的方法;
!function(){
console.log("我在執(zhí)行4 ... ");
}();
~function(){
console.log("我在執(zhí)行5 ... ");
}();
</script>
</body>
</html>
文章來源地址http://www.zghlxwxcb.cn/news/detail-838787.html
到了這里，關于深入探討javascript的流程控制與分支結構，以及js的函數的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
