️ 珊姐帶你學JavaScript：數組和函數（萬文建藏）️

不吃西紅柿丶 2021-08-15 20:59:32 阅读数:313

本文一共[544]字，预计阅读时长:1分钟~

javascript

作者：阿珊

簡曆模板、職場PPT模板、技術交流盡管關注私聊我。

期許：歡迎點贊收藏留言 如有錯誤敬請指正！

（優質好文持續更新中……）

本篇重點

關鍵字的使用: break,continue

數組

冒泡排序

函數

01 break關鍵字的使用

break關鍵字:如果在循環中使用,遇到了break,則立刻跳出當前所在的循環

 for(var i=0;i<10;i++){  while (true){  console.log("哈哈");  break;//  }    }     console.log("哈哈,我出來了");      for (var i = 0; i < 10; i++) {        //第四步說明break不能跳出for循環，因為for循環在while循環的外面 while (true) {//第一步，此步 為死循環  console.log("yu");  break;//第二步，  } }  console.log("shan");//第三

找到100到200之間第一個可以被7整除的數字

for (var i = 100; i <= 200; i++) {  if (i % 7 == 0) {  console.log(i);  break;  } }for(var i=100;i<=200;i++){  if(i%7==0){  console.log(i);  break;  } }

02 continue關鍵字的使用

continue:在循環中如果遇到continue關鍵字,直接開始下一次循環

var i=0; while (i<10){  console.log("哈哈"); //continue;  i++;  var i=0;  while(i<10){  console.log("hh")  continue;  i++;  } //案例:求100-200之間所有的奇數的和（用continue） var sum = 0;  for (var i = 100; i <= 200; i++) {  if (i % 2 != 0) {  sum += i;  continue;  i++;  } } console.log(sum)// 其他方法sum = 0;for (var i = 100; i <= 200; i++) { if (i % 2 == 0) continue; else {
 sum += i; }}console.log(sum) var sum = 0; var i = 100; while (i <= 200) {  //判斷是不是偶數  if (i % 2 == 0) {  //如果是偶數----->跳過這個數字 i++;//102  continue;  }  sum += i;  i++; }console.log(sum); // 案例:求整數100～200的累加值，但要求跳過所有個比特為3的數 var sum = 0;  for (var i = 100; i <= 200; i++) {  if (i % 10 == 3) {  continue;  } sum += i;  }  console.log(sum)  var sum = 0;  for (var i = 100; i <= 200; i++) {  if (i % 10 == 3)  continue;  } sum += i  } console.log(sum); var sum=0; var i=100; while(i<=200){  if(i%10==3){  //個比特數是3,不要 i++;  continue;  } sum+=i;  i++; }console.log(sum); var sum=0; var i=1; while(i<=10){  if(i%10==3){  //個比特數是3,不要 i++;  continue;  } sum+=i;  i++; }console.log(sum); console.log(3%10 ==3);

03 數組

數組:一組有序的數據

數組的作用:可以一次性存儲多個數據

數組元素:數組中存儲的每個數據,都可以叫數組的元素

數組長度:就是數組的元素的個數,比如有3個元素,就說,這個數組的長度是3

數組索引(下標):用來存儲或者訪問數組中的數據的,索引從0開始,到長度减1結束

數組的索引和數組的長度的關系:長度减1就是最大的索引值

數組的定義方式:

1.構造函數定義數組: var 數組名=new Array();

2.字面量方式定義數組: var 數組名=[];

1.通過構造函數的方式定義一個數組

語法:var 數組名=new Array(); var array=new Array();//定義了一個數組 var arr1 = new Array(); var arr2 = new Array(5);  alert(array);

數組的名字如果直接輸出，那麼直接就可以把數組中的數據顯示出來，

如果沒有數據，就看不到數據，就是一個數組----字面量的方式

 var arr3 = new Array(10,20,1000,40,50);  console.log(arr3)

2. 通過字面量的方式創建數組

var 數組名=[];//空數組 var array=[];

無論是構造函數的方式還是字面量的方式,定義的數組,如果有長度,那麼默認是undefined

如何設置數組中某個比特置的值

數組名[下標]=值; arr[3]=100;

如何獲取數組中某個比特置的值

var result=數組名[下標];console.log(result);

通過構造函數的方式定義一個數組

var array=new Array(5);//沒有數據,空數組 console.log(array); alert(array); var arr3=new Array(10,20,1000,40,50,60); console.log(arr3); var arr = new Array(10, 20, 30, 40, 50); // console.log(arr[4])//獲取//設置，也就是修改某個值arr[3] = 1000; console.log(arr);

數組中存儲的數據類型一定是一樣的嗎? 類型可以不一樣

 var arr=[10,"哈哈",true,null,undefined,new Object()];console.log(arr); var arr = []; arr[0] = 10; arr[1] = 20; console.log(arr.length); console.log(arr[2]);

數組的長度是不是可以改變呢?

 var arr = [];  //通過索引來設置數組中的元素的值 arr[0] = 10;  arr[1] = 20;  console.log(arr.length);  //獲取元素的值,通過索引的方式 console.log(arr[2]); // for循環遍曆數組 var arr=[10,20,30,40];  console.log(arr[0]);  console.log(arr[1]);  console.log(arr[2]);  console.log(arr[3]);  console.log(arr[4]);  var arr = [10, 20, 30, 40, 50];  //顯示數組中的每個數據 console.log(arr[0]);  console.log(arr[1]);  console.log(arr[2]);  console.log(arr[3]);  console.log(arr[4]);  console.log(arr[5]);//沒有數據  //通過for循環遍曆數組 var arr = [10, 20, 30, 40, 50];  for (var i = 0; i < arr.length; i++) {  console.log(arr[i])  } var arr=[10,20,30,40,50,60,70,80,90,100];  //小於的是數組的長度--個數 for(var i=0;i<arr.length;i++){  console.log(arr[i]);  }//案例1:求數組中所有元素的和 var arr1=[10,20,30,40,50]  var sum=0;  for(var i=0;i<arr1.length;i++){  sum+=arr1[i];  }  console.log(sum)  var arr1 = [10, 20, 30, 40, 50]; var sum = 0;  for (var i = 0; i < arr1.length; i++) {  sum += arr1[i];  } console.log(sum); // 案例2:求數組中所有元素的平均值 var arr2=[1,2,3,4,5];  var sum2=0;  for(var i=0;i<arr2.length;i++){  sum2+=arr2[i];  } console.log(sum2/arr2.length)  var arr2 = [1, 2, 3, 4, 5];  var sum2 = 0;  for (var i = 0; i < arr2.length; i++) {  sum2 += arr2[i];  } console.log(sum2 / arr2.length); 案例3:求數組中所有元素中的最大值 var arr3 = [1, 2, 3, 4, 10, 2, 3, 6, 9, 11, 78, 55];  var max = arr3[0];  for (var i = 0; i < arr3.length; i++) {  if (max < arr3[i]) {  max = arr3[i];  } } console.log("最大值：" + max)  var arr3 = [1, 3, 2, 5, 10, 100, 50];  //假設max變量中存儲的是最大值 var max = arr3[0];  for (var i = 0; i < arr3.length; i++) {  //判斷這個變量的值和數組中每個元素的值是不是最大值 if (max < arr3[i]) {  max = arr3[i];  } } console.log("最大值:" + max);  //一個不好的地方----會出現bug的  var arr3=[-1,-2,-3];  //假設max變量中存儲的是最大值  var max=0;  for(var i=0;i<arr3.length;i++){  //判斷這個變量的值和數組中每個元素的值是不是最大值 if(max<arr3[i]){  max=arr3[i];  } } console.log("最大值:"+max);  var arr3=[1,3,2,5,10,100,50];  //假設max變量中存儲的是最大值 var max=Number.MIN_VALUE;//假設變量是最大的,但是實際上存儲的是最小的值 for(var i=0;i<arr3.length;i++){  //判斷這個變量的值和數組中每個元素的值是不是最大值 if(max<arr3[i]){  max=arr3[i];  }  } console.log("最大值:"+max); // 案例4:求數組中所有元素的最小值 var arr4 = [1, 2, -3, 4, 10, 2, 3, 6, 9, 11, 78, 55];  var min = arr4[0];  for (var i = 0; i < arr4.length; i++) {  if (min > arr4[i]) {  min = arr4[i];  } } console.log("最小值：" + min)   var arr4 = [100, 10, 20, 30, 40, 50]; var min = arr4[0];//假設min裏存儲的就是最小值 for (var i = 0; i < arr4.length; i++) {  if (min > arr4[i]) {  min = arr4[i];  } } console.log("最小值:" + min);案例5:倒序遍曆數組 var arr5 = [10, 20, 30, 40, 50];  //正序  for (var i = 0; i < arr5.length; i++) console.log(arr5[i]);  //那麼倒序呢 for(var i=arr5.length-1;i>=0;i--){  console.log(arr5[i])  } var arr5 = [10, 20, 30, 40, 50, 100]; //正序  // for (var i = 0; i < arr5.length; i++) {  // console.log(arr5[i]);  // } //倒序  for (var i = arr5.length - 1; i >= 0; i--) {
 console.log(arr5[i]);  }案例6:把數組中每個元素用|拼接到一起產生一個字符串並輸出var names = ["卡卡西", "佐助", "鳴 人", "大蛇丸", "雛田", "小蘇", "鳳姐", "黑崎一護"]; var str = ""; for (var i = 0; i < names.length - 1; i++) {  str += "|" + names[i];  } console.log(str + names[names.length - 1]);  var names = ["卡卡西", "佐助", "鳴人 ", "大蛇丸", "雛田", "小蘇", "鳳姐", "黑崎一護"]; var str = "";//空的字符串  for (var i = 0; i < names.length - 1; i ++) {
 str += "|" + names[i];  } console.log(str + names[names.length - 1]); 案例7:去掉數組中重複的0，把其他的數據放在一個新的數組中var arr = [10, 0, 20, 0, 30, 0, 50]; var newArr = [];//新數組，用來存放第一個數組中所有非0的數字 for (var i = 0; i <= arr.lengt h; i++) {  if (arr[i] != 0) {  newArr[newArr.length] = arr[i];  } } console.log(newArr); var arr = [10, 0, 20, 0, 30, 0, 50];  var newArr = [];//新數組,用來存放第一個數組中所有非0的數字 for (var i = 0; i <=arr.length; i++) {  if (arr[i] != 0) {  newArr[newArr.length] = arr[i];  } } //把新數組的長度作為下標使用,數組的長度是可以改變的 console.log(newArr); 案例8:反轉數組—把數組中的數據的比特置調換 var array = [1, 2, 3, 4, 5]  for (var i = 0; i = array.length / 2; i++) {  var temp = array[i];       array[i] = array[array.length - 1 - i];  array[array.length - 1 - i] = temp;  } console.log(array)  var array = [10, 20, 30, 40, 50];  //循環的目的是控制交換的次數  for (var i = 0; i < array.length / 2; i++) {  //先把第一個元素的值放在第三方變 量中 var temp = array[i];  array[i] = array[array.length - 1 - i];  array[array.length - 1 - i] = temp;  } console.log(array);  for(var i=array.length-1;i>=0;i--){
 console.log(array[i]); } console.log(array);//50 40 30 20 10 案例9:提示用戶輸入班級人數,求總成績,平均值,最高分,最低分—擴展//提示用戶輸入人數,並轉成數字類型 var perCount = parseInt(prompt("請輸入班級人數"));  //定義數組存儲班級的每個人的成績 var perScores = [];  //循環的方式錄入每個人的成績 for (var i = 0; i < perCount; i++) {
 //把每個人的成績存儲到數組中  perScores[perScores.length] = parseInt(prompt("請輸入第 " + (i + 1) + "個人的成績:")); } console.log(perScores);  //求總成績 var sum = 0;  var avg = 0;//平均值  var max = perScores[0];//最大值  var min = perScores[0];//最小值  for (var i = 0; i < perScores.length; i++) {  sum += perScores[i];//求和  //求最大值 if (max < perScores[i]) {  max = perScores[i];  } //求最小值 if (min > perScores[i]) {  min = perScores[i];  } } //平均值 avg = sum / perScores.length;  console.log("和為:" + sum);  console.log("平均值:" + avg);  console.log("最大值:" + max);  console.log("最小值:" + min);

04 冒泡排序

案例8:反轉數組—把數組中的數據的比特置調換

var array = [1, 2, 3, 4, 5] for (var i = 0; i = array.length / 2; i++) {
 var temp = array[i]; array[i] = array[array.length - 1 - i]; array[array.length - 1 - i] = temp; } console.log(array) var perCount=parseInt(prompt("請輸入班級人數")); var perScores=[]; for(var i=0;i<perCount;i++){
 perScores[perScores.length]=parseInt(prompt("請輸入第"+(i+1)+"個人的成績：")); } console.log(perScores); var sum=0; var avg=0; var max=perScores[0]; var min=perScores[0]; for(var i=0;i<perScores.length;i++){
 sum+=perScores[i]; if(max<perScores[i]){
 max=perScores[i]; } if(min>perScores){
 min=perScores[i]; } } avg=sum/perScores.length; console.log("和為："+sum); console.log("平均值為："+avg); console.log("最大值為："+max); console.log("最小值為："+min); var arr=[10,20,30]; var sum=0; for(var i=0;i<arr.length;i++){
 sum+=arr[i]; }

冒泡排序:把所有的數據按照一定的順序進行排列(從小到大,從大到下)

 var arr = [10, 0, 100, 20, 60, 30] 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; } } } console.log(arr); //從小到大：大於號 //從大到小：小於號 var arr = [10, 0, 100, 20, 60, 30]; //循環控制比較的輪數 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; } } } console.log(arr);

05 函數介紹及定義

函數:把重複的代碼封裝,在需要的時候直接調用即可

函數的作用:代碼的重用

function 函數名字(){
  函數體-----重複的代碼}

函數的調用：函數名();

函數名字:要遵循駝峰命名法

注意：

函數需要先定義,然後才能使用
函數一旦重名,後面的會把前面的函數覆蓋
一個函數最好就是一個功能

例子：

 通過函數求兩個數字的和function consoleSum() {//函數定義 var num1 = 100; var num2 = 200; var sum = num1 + num2; console.log(sum); } //調用 consoleSum(); 求兩個數字的最大值 function consoleMax() {
 var x = 10222; var y = 220; console.log(x > y ? x : y); } consoleMax();求三個數字的和 function consoleSum() {
 var num1 = 10; var num2 = 20; var num3 = 30; var sum = num1 + num2 + num3; console.log(sum) } consoleSum();  // --------------------------   function consoleMax1() {
 var x = 1220; var y = 2220; var z = 1900; var max = x>y?(x>z?x:z):(y>z?y:z);//嵌套的三元錶達式 console.log(max); } consoleMax1(); 求三個數字的最大值 function consoleMax2() {
 var x = 10; var y = 20; var z = 30; var max = x > y ? (x > z ? x : z) : (y > z ? y : z);//嵌套的三元錶達式 console.log(max); } // consoleMax2()求1-100之間所有數字的和 function Sum() {
 var sum = 0; for (var i = 1; i <= 100; i++) {
 sum += i; } console.log(sum) } Sum(); function everySum() {
 var sum = 0; for (var i = 1; i <= 100; i++) {
 sum += i; } console.log(sum); } everySum();求1-100之間所有偶數的和 function everyEvenSum1() {
 var sum = 0; for (var i = 1; i <= 100; i++) {
 if (i % 2 == 0) {
 sum += i; } } console.log(sum) } // everyEvenSum1(); function everyEvenSum() {
 var sum = 0; for (var i = 1; i <= 100; i++) {
 if (i % 2 == 0) {
 sum += i; } } console.log(sum); } everyEvenSum();求一個數組的和 function consoleArraySum1(){
 var sum=0; var arr=[10,20,30,40,50]; for(var i=0;i<arr.length;i++){
 sum+=arr[i]; } console.log(sum); } consoleArraySum1(); function consoleArraySum() {
 var sum = 0; var arr = [10, 20, 30, 40, 50]; for (var i = 0; i < arr.length; i++) {
 sum += arr[i]; } console.log(sum); }  consoleArraySum();

06 函數的參數

函數參數:

在函數定義的時候,函數名字後面的小括號裏的變量就是參數,目的是函數在調用的時候,用戶傳進來的值操作，此時函數定義的時候後面的小括號裏的變量叫參數;寫了兩個變量,就有兩個參數,

在函數調用的時候,按照提示的方式,給變量賦值—>就叫傳值,把這個值就傳到了變量(參數)中

形參:函數在定義的時候小括號裏的變量叫形參

實參:函數在調用的時候小括號裏傳入的值叫實參,實參可以是變量也可以是值

 function consoleSum1() {
 var x = 10; var y = 20; var sum = x + y; console.log(sum); } consoleSum1();functionconsoleSum1(x, y, z) {
 var sum = x* y * z; console.log(sum);}consoleSum1(10, 20, 30)//函數定義function consoleSum(x, y) {
 var sum = x + y;//計算和----功能 console.log(sum);//輸出和---第二個功能}//函數調用varnum1=parseInt(prompt("輸入第一個數字"));varnum2=parseInt(prompt("輸入第二個數字"));consoleSum(num1, num2); function f1(x) {
 console.log(x); } function f2(x,y) {
 console.log(x,y); } function f3(x,y,z) {
 console.log(x,y,z); } function f4(x,y,z,k) {
 console.log(x,y,z,k); }f1(1)f2(2,3)f3(7,8,8)f4(5,4,0,2)

07 函數的返回值

set:設置

get:獲取

函數的返回值:在函數內部有return關鍵字,並且在關鍵字後面有內容,這個內容被返回了

當函數調用之後,需要這個返回值,那麼就定義變量接收,即可

如果一個函數中有return ,那麼這個函數就有返回值

如果一個函數中沒有return,那麼這個函數就沒有返回值

如果一個函數中沒有明確的返回值,那麼調用的時候接收了,結果就是undefined

(沒有明確返回值:函數中沒有return,函數中有return,但是return後面沒有任何內容)

函數沒有返回值,但是在調用的時候接收了,那麼結果就是undefined

變量聲明了,沒有賦值,結果也是undefined

如果一個函數有參數,有參數的函數

如果一個函數沒有參數,沒有參數的函數

形參的個數和實參的個數可以不一致

return 下面的代碼是不會執行的

 function f11(x,y){
 var sum=x+y; return sum; console.log("hh"); return 100; } var aa=f11(11,22) console.log(aa) function getSum(x, y) {
 return x + y; } var aa=getSum(10, 20); console.log(aa+10); function f1(x, y) {
 var sum = x + y; return sum; console.log("助教才是最帥的"); return 100; } var result = f1(10, 20); console.log(result); function getSum(x, y) {
 var sum = x + y; return sum;//把和返回 }函數調用 var result=getSum(10, 20); console.log(result+10);函數定義: 有參數有返回值的函數function getSum(x, y) {
 return x + y;//把和返回}有參數,無返回值的函數 function f2(x) {
 console.log(x); }無參數,有返回值的函數 function f3() {
 return 100; }無參數無返回值的函數function f4() {
 console.log("薩瓦迪卡");}函數案例//求兩個數字的和:獲取任意的兩個數字的和 function getSum(x, y) {
 return x + y; } console.log(getSum(10, 20)); //求1-100之間所有的數字的和 function geteverySum() {
 var sum=0; for(var i=1;i<=100;i++){
 sum+=i; } return sum; } console.log(geteverySum()); // //- 求1-n之間所有數的和 function geteverySum(n) {
 var sum = 0; for (var i = 1; i <= n; i++) {
 sum += i; } return sum; } console.log(geteverySum(10)); // - 求n-m之間所有數的和 function geteverySum2(n, m) {
 var sum = 0; for (var i = n; i <= m; i++) {
 sum += i; } return sum; } console.log(geteverySum2(1, 100)); // //求圓的面積 function getS(r) {
 return Math.PI * r * r; } console.log(getS(5)); - 求2個數中的最大值 - 求3個數中的最大值 - 判斷一個數是否是素數(質數) function f1() {
 console.log("考尼奇瓦"); return 100; } //f1函數調用,把函數的返回值輸出了 console.log(f1());  function f1() {
 console.log("考尼奇瓦"); return 100; }    console.log(f1);//輸出的f1函數名字-----是f1函數的代碼

版权声明：本文为[不吃西紅柿丶]所创，转载请带上原文链接，感谢。 https://gsmany.com/2021/08/20210815205926830G.html

《 100天的默契

大眾ID5 GTX-02概念車 / 漩渦下的秘密》