❤️ 珊姐带你学JavaScript：数组和函数 （万文建藏）❤️

Posted 2021-09-06 不吃西红柿丶

🍅 作者：阿珊

🍅 简历模板、职场PPT模板、技术交流尽管关注私聊我。

🍅 期许：欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！

热门专栏推荐：

🥇 大数据集锦专栏：大数据-硬核学习资料 & 面试真题集锦 
🥈 数据仓库专栏：数仓发展史、建设方法论、实战经验、面试真题 
🥉 Python专栏：Python相关黑科技：爬虫、算法、小工具 

（优质好文持续更新中……）✍

本篇重点

• 关键字的使用: 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函数的代码