【舉栗說明】JavaScript作用域,一次性給你總結!

2021-10-18    前端達人

圖片

本文重點

  • 函數案例

  • 函數作為參數使用

  • arguments

  • 作用域:寫代碼要注意變量的在哪聲明和使用的問題

  • 預解析:什么叫預解析, 什么東西發(fā)生了什么事

01 作用域:使用范圍

全局變量:

  • 聲明的變量是使用var聲明的,那么這個變量就是全局變量,

  • 全局變量可以在頁面的任何位置使用

  • 除了函數以外,其他的任何位置定義的變量都是全局變量

  • 如果頁面不關閉,那么就不會釋放,就會占空間,消耗內存

  • 全局作用域:全局變量的使用范圍

局部變量:

  • 在函數內部定義的變量,是局部變量,外面不能使用

  • 局部作用域:局部變量的使用范圍

注意:

塊級作用域:一對大括號就可以看成是一塊,在這塊區(qū)域中定義的變量,只能在這個區(qū)域中使用,但是在js中在這個塊級作用域中定義的變量,外面也能使用;

說明:js沒有塊級作用域,只有函數除外

隱式全局變量:聲明的變量沒有var,就叫隱式全局變量

全局變量是不能被刪除的,隱式全局變量是可以被刪除的

定義變量使用var是不會被刪除的,沒有var是可以刪除的

function f1() {  number=1000;//是隱式全局變量 }f1();console.log(number);   var num1=10;  num2=20;  delete num1;//把num1刪除了  delete num2;//把num2刪除了  console.log(typeof num1);  console.log(num1+10);  console.log(typeof num2);  num=100; console.log(num);  function f1() {  var num=100;  num+=10; }f1();//這個函數結束之后 { var num=10;  console.log(num);//10 }console.log(num);  if(true){  var num=10; }console.log(num); for(var i=0;i<5;i++){  var number=20; }console.log(number);   var i=0;  while (i<5){  var num=100;  i++;  } console.log(num);  function f1() {  var num=10; }f1(); console.log(num);  var num=10; console.log(num);//10  

作用域鏈

 var num=10;  function f1() {  var num=20;  function f2() {  var num=30;  function f3() {  var num=50;  console.log(num);  } f3();  } f2();  } f1(); 

03 函數案例

求2個數中的最大值

 function getMax(num1, num2) {  return num1 > num2 ? num1 : num2;  } console.log(getMax(10,20));  //console.log(getMax);//函數的代碼 function getMax(num1, num2) {  return num1 > num2 ? num1 : num2;  } var num1=10;  var num2=20;  //函數外面的num1和函數的形參num1不是同一個變量 var result=getMax(num1,num2);  console.log(result);  console.log(getMax);//函數的代碼 

求3個數中的最大值

 function getThreeMax(x, y, z) {  return x > y ? (x > z ? x : z) : (y > z ? y : z);  } console.log(getThreeMax(10,2,24)); 

判斷一個數是否是素數(質數),只能被1和自身整除,質數是從2開始

用這個數字和這個數字前面的所有的數字整除一次(沒有1的,沒有自身的)

 function isPrimeNumber(num) {  for (var i = 2; i < num; i++) {  if (num % i == 0) {  //說明有一個數字整除了,就沒有必要向后繼續(xù)整除了, //此時就已經驗證出不是質數 return false;  } } return true;  }//  console.log(isPrimeNumber(7) ? "yyyyyes" : "nnnnnno") var aa = isPrimeNumber(17);  if (aa) {  console.log("yes");  } else {  console.log("no");  }  function isPrimeNumber(num) {  for(var i=2;i<num;i++){  if(num%i==0){  //說明有一個數字整除了,就沒有必要向后繼續(xù)整除了,此時就已經驗證出不是質數 return false;  } } return true;  } console.log(isPrimeNumber(8)?"是質數":"不是質數");   var result=isPrimeNumber(2);  if(result){  console.log("這個數字是質數");  }else{  console.log("這個數字不是質數");  }  function aaa(x,y){  return x-y;  } console.log(aaa(99,88)) 

通過函數實現數組反轉

 function reverseArray(arr) {  for (var i = 0; i < arr.length / 2; i++) {  var temp = arr[i];  arr[i] = arr[arr.length - 1 - i];  arr[arr.length - 1 - i] = temp;  } return arr;  } console.log(reverseArray([1, 2, 3, 4, 5])); 

通過函數實現冒泡排序

 function sortArray(arr) {  //控制比較的輪數 for (var i = 0; i < arr.length - 1; i++) {  //控制每一輪的比較次數 for (var j = 0; j < arr.length - 1 - i; j++) {  if (arr[j] > arr[j + 1]) {  var temp = arr[j];  arr[j] = arr[j + 1];  arr[j + 1] = temp;  }//end if }//end for }//end for return arr; } console.log(sortArray([0, 19, 34, 10, 100, 2])); 

求一個數字的階乘

function getJieCheng(num) {  var result = 1;  for (var i = 1; i <= num; i++) {  result *= i;  } return result; }console.log(getJieCheng(5));//1*2*3*4*5 

求斐波那契數列

 function getFib(num){  var num1=1;  var num2=1;  var num3=0;  for(var i=3;i<=nnum;i++){  sum=num1+num2;  num1=num2;  num2=sum;  } return sum;  } console.log(getFib(12))  

02 函數作為參數使用

函數是有數據類型,數據類型:是function類型的

函數可以作為參數使用,如果一個函數作為參數,那么我們說這個參數(函數)可以叫回調函數 只要是看到一個函數作為參數使用了,那就是回調函數

function sayHi(fn) {   console.log("GOOD");  fn();//fn此時應該是一個函數}function suSay() {  console.log("HELLO"); }sayHi(suSay); function f1(x,y) {  console.log(x+y); }f1(10,20); function f2(x,y) {  console.log(x+y); }f2("HLS","MISS"); function f3(x) {  console.log(x); }f3(true);

04 arguments

計算n個數字的和

定義一個函數,如果不確定用戶是否傳入了參數,或者說不知道用戶傳了幾個參數,沒辦法計算,但是如果在函數中知道了參數的個數,等于也知道了每個參數的值.

//定義function f1() {  //獲取的是函數在調用的時候,傳入了幾個參數 //console.log(arguments.length);  //使用arguments對象可以獲取傳入的每個參數的值 console.log(arguments); } f1(10,20,30,40,100,200);//調用 
 function f1({  //arguments----->數組使用------偽數組--- var sum=0;  for(var i=0;i<arguments.length;i++){  sum+=arguments[i];  } return sum;  } console.log(f1(10,20,30)); 

05 預解析:提前解析代碼

預解析:就是在解析代碼之前,預解析做什么事?

把變量的聲明提前了----提前到當前所在的作用域的最上面

函數的聲明也會被提前—提前到當前所在的作用域的最上面

函數調用的時候, 把會函數的聲明提升到作用域的上面

函數的聲明提升到作用域

 f1();//調用  var num=20;//這個變量的聲明會提升到變量使用之前  function f1() {  console.log(num);  //var num=10;  } function f1() {  console.log("小蘇好猥瑣");  } f1();  function f1() {  console.log("小蘇沒有助教猥瑣");  } f1(); 

把變量的聲明提前

 var num;  console.log(num);  num=10;  function f1() {  console.log("哈哈,助教好猥瑣哦");  }   //f1();//報錯 

注意:預解析中,變量的提升,只會在當前的作用域中提升,提前到當前的作用域的最上面

  function f1({  console.log(num);//undefined  var num = 10;  } f1();   console.log(num);//報錯  

函數中的變量只會提前到函數的作用域中的最前面,不會出去

預解析會分段(多對的script標簽中函數重名,預解析的時候不會沖突)

 function f1({  console.log(num);//undefined  var num=10; } f1(); console.log(num);// function f1() { console.log("哈哈"); }

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

轉自:csdn
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://www.bouu.cn

存檔