數組與函數


(1) 數組的定義

所謂數組,就是將多個元素(通常是同一類型)按一定順序排列放到一個集合中,那么這個集合我們就稱之為數組。

數組是一個有序的列表,可以在數組中存放任意的數據,並且數組的長度可以動態的調整。

(2) 通過數組字面量創建數組

// 創建一個空數組
var arr1 = [];
// 創建一個包含3個數值的數組,多個數組項以逗號隔開
var arr2 = [1, 3, 4];
// 創建一個包含2個字符串的數組
var arr3 = ['a', 'c'];

// 可以通過數組的length屬性獲取數組的長度
console.log(arr3.length);
// 可以設置length屬性改變數組中元素的個數
arr3.length = 0;

(3) 獲取數組元素

數組的取值

[0] 是數組中的第一個元素。[1] 是第二個。數組索引從 0 開始。

// 格式:數組名[下標]   下標又稱索引
// 功能:獲取數組對應下標的那個值,如果下標不存在,則返回undefined。
var arr = ['red', 'green', 'blue'];
arr[0]; // red
arr[2]; // blue
arr[3]; // 這個數組的最大下標為2,因此返回undefined

(4) 遍歷數組

遍歷:遍及所有,對數組的每一個元素都訪問一次就叫遍歷。

數組遍歷的基本語法:

for(var i = 0; i < arr.length; i++) {
    // 數組遍歷的固定結構
}

 

(5) 數組中新增元素

數組的賦值

// 格式:數組名[下標/索引] = 值;
// 如果下標有對應的值,會把原來的值覆蓋,如果下標不存在,會給數組新增一個元素。
var arr = ["red", "green", "blue"];
// 把red替換成了yellow
arr[0] = "yellow";
// 給數組新增加了一個pink的值
arr[3] = "pink";

數組的push方法

// 格式:數組名.push()
// 如果下標有對應的值,會把原來的值覆蓋,如果下標不存在,會給數組新增一個元素。
var arr = ["red", "green", "blue"];
arr.push(“pink”);

2. 數組案例

(1)、案例

演示示例:求一組數中的所有數的和和平均值

求一組數中的所有數的和和平均值

  var sum1 = 0;

  for (var i = 0; i < arrNum.length; i++) {

    sum1 += arrNum[i];

  }

  console.log(sum1);//338

  // 平均值

  var abg = sum1 / arrNum.length;

  console.log(abg.toFixed(2));

演示示例:求一組數中的最大值和最小值,以及所在位置

求一組數中的最大值和最小值,以及所在位置

  var numMax = arrNum[0];//假設第一元素是最大值

  var numMin = arrNum[0];//假設第一元素是最小值

  var indexMax = 0;

  var indexMin = 0;

  for (var i = 0; i < arrNum.length; i++) {

    if (arrNum[i] >= numMax) {

      numMax = arrNum[i];

      // console.log(i);

      indexMax = i + 1;

    }

    if (arrNum[i] <= numMin) {

      console.log("啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊")

      numMin = arrNum[i];

      indexMin = i + 1;

    }

  }

  console.log("最大值是:" + numMax + ",是第" + indexMax + "個元素!");

  console.log("最小值是:" + numMin + ",是第" + indexMin + "個元素!");

演示示例:將字符串數組用|或其他符號分割,返回一個字符串

將字符串數組用|或其他符號分割,返回一個字符串

  var str = "";

  var arrStr = ["我", "們", "是", "好", "孩", "子"];

  console.log(arrStr);

  for (var i = 0; i < arrStr.length; i++) {

    console.log(arrStr[i]);

    // str = str + arrStr[i] + "|";

    if (i < arrStr.length - 1) {

      str = str + arrStr[i] + "|";

    } else {

      str = str + arrStr[i];

    }

  }

  console.log(str);

  console.log(typeof str);

演示示例:要求將數組中的第一個元素去掉,剩下的元素存入一個新的數組,生成的數組

要求將數組中的0項去掉,將不為0的值存入一個新的數組,生成新的數組

  var newArr1 = [];

  for (var i = 0; i < arrNum.length; i++) {

    if (i != 0) {

      // console.log(arrNum[i]);

      newArr1.push(arrNum[i]);

    }

  }

  console.log(newArr1);

演示示例:翻轉數組

  // 5、翻轉數組

  var newArr2 = [];

  for (var i = arrNum.length - 1; i >= 0; i--) {

    console.log(arrNum[i]);

    newArr2.push(arrNum[i]);

  }

  console.log(newArr2);

演示示例:獲取二維數組的長度最大的子數組的序號

3. 函數

(1)、為什么要有函數

如果要在多個地方求1-100之間所有數的和,應該怎么做?

(2)、什么是函數

把一段相對獨立的具有特定功能的代碼塊封裝起來,形成一個獨立實體,就是函數。

起個名字(函數名),在后續開發中可以反復調用。

函數的作用就是封裝一段代碼,將來可以重復使用。

(3)、函數的命名

規則

1.由字母、數字、下划線、$符號組成,不能以數字開頭
           2.不能是關鍵字和保留字,例如:for,while,this, name
           3.區分大小寫
       規范
           1.函數名必須有意義
           2.遵守駝峰命名法
           3.建議不要用$作為函數名

(4)、函數的定義

函數聲明

function 函數名(){
  // 函數體
}

函數表達式

var fn = function() {
  // 函數體
}

函數定義好后,函數體並不會執行,只要當函數被調用的時候才會執行。函數一般都用來干一件事情,需用使用動詞+名詞,表示做一件事情tellStory sayHello等。

(5)、函數的調用

調用函數的語法

函數名();

特點:函數體只有在調用的時候才會執行,調用需要()進行調用。可以調用多次(重復使用)

代碼示例

// 聲明函數
function sayHi() {
  console.log("吃了沒?");
}
// 調用函數
sayHi();

// 求1-100之間所有數的和
function getSum() {
  var sum = 0;
  for (var  i = 0; i < 100; i++) {
    sum += i;
  }
  console.log(sum);
}
// 調用
getSum();

(6)、函數的參數

為什么要有參數

function getSum() {
  var sum = 0;
  for (var i = 1; i <= 100; i++) {
    sum += i;
  }
  console.log();
}
// 雖然上面代碼可以重復調用,但是只能計算1-100之間的值
// 如果想要計算n-m之間所有數的和,應該怎么辦呢?

語法:

// 函數內部是一個封閉的環境,可以通過參數的方式,把外部的值傳遞給函數內部
// 帶參數的函數聲明
function 函數名(形參1, 形參2, 形參...){
  // 函數體
}
// 帶參數的函數調用
函數名(實參1, 實參2, 實參3);

形參和實參

1. 形式參數:在聲明一個函數的時候,為了函數的功能更加靈活,有些值是固定不了的,對於這些固定不了的值。我們可以給函數設置參數。這個參數沒有具體的值,僅僅起到一個占位置的作用,我們通常稱之為形式參數,也叫形參。

2. 實際參數:如果函數在聲明時,設置了形參,那么在函數調用的時候就需要傳入對應的參數,我們把傳入的參數叫做實際參數,也叫實參。

var x = 5, y = 6;
fn(x,y);
function fn(a, b) {
  console.log(a + b);
}
//x,y實參,有具體的值。函數執行的時候會把x,y復制一份給函數內部的a和b,函數內部的值是復制的新值,無法修改外部的x,y

3. 函數案例

(1)、函數案例

演示示例:求1-n之間所有數的和

演示示例:求n-m之間所有數的和

function getSum(n,m){

      var sum = 0;

      for (var i = n;i <= m;i++){

          sum += i;

      }

      console.log(sum);

    }

    getSum(1,100);//1-100

    getSum(50,100);//50-100

    getSum(2,100);//2 -100

演示示例:圓的面積     

function getArea(r){

      // 數學對象:Math

      console.log(Math);

      var area = Math.PI * r * r;

      console.log(area.toFixed(2));

    }

    getArea(10);

演示示例:求2個數中的最大值

 function getMaxNum(m,n){

      if (m > n){

        console.log("最大值:"+ m);

      }else if (m < n) {

        console.log("最大值:"+ n);

      }else {

        console.log( m +"與"+ n + "相等");

      }

    }

    getMaxNum(150,150);

    getMaxNum(0,12);

演示示例:求3個數中的最大值

課堂練習:判斷一個數是否是素數

5.函數的返回值

(1)、什么是返回值

當函數執行完的時候,並不是所有時候都要把結果打印。我們期望函數給我一些反饋(比如計算的結果返回進行后續的運算),這個時候可以讓函數返回一些東西,也就是返回值。函數通過return返回一個返回值。

返回值語法:

//聲明一個帶返回值的函數
function 函數名(形參1, 形參2, 形參...){
  //函數體
  return 返回值;
}
​//可以通過變量來接收這個返回值
var 變量 = 函數名(實參1, 實參2, 實參3);

函數的調用結果就是返回值,因此我們可以直接對函數調用結果進行操作。

(2)、返回值總結

1、如果函數沒有顯示的使用 return語句 ,那么函數有默認的返回值:undefined

2、如果函數使用 return語句,那么跟再return后面的值,就成了函數的返回值

3、如果函數使用 return語句,但是return后面沒有任何值,那么函數的返回值也是:undefined

4、函數使用return語句后,這個函數會在執行完 return 語句之后停止並立即退出,也就是說return后面的所有其他代碼都不會再執行。

推薦的做法是要么讓函數始終都返回一個值,要么永遠都不要返回值。

演示示例:求階乘

 function getJie(n){

      var jie = 1;

      if(n==0){

        return 1;

      }

      for(var i=1;i<=n;i++){

        jie *= i;

      }

      return jie;

    }

    var jiecheng =getJie(7);

    console.log(jiecheng);

演示示例:求一組數中的最大值

演示示例:求一組數中的最小值

6、函數其他

(1)、函數的覆蓋問題

如果兩個函數都是函數的聲明,且函數名相同,那么后邊的函數會覆蓋前邊的

function fn1() {

    console.log("函數聲明");

  }

  function fn1() {

    console.log("我是第二個fn1");

  }

fn1();//我是第二個fn1

如果兩個函數都是函數表達式,且函數名相同,函數的調用會調用最近的一個

  var fn2 = function () {

    console.log("第一個函數表達式fn2");

  } 

  fn2();//第一個函數表達式fn2

var fn2 = function () {

    console.log("我是第二個fn2表達式");

  }

(2)、函數的內置對象

JavaScript中,arguments對象是比較特別的一個對象,實際上是當前函數的一個內置屬性。也就是說所有函數都內置了一個arguments對象,arguments對象中存儲了傳遞的所有的實參。arguments是一個偽數組,因此也可以進行遍歷。

arguments數組中前幾個元素是函數的參數

callee屬性:函數的本身

callee.name:函數的名字

length屬性:實參的個數

callee.length:形參的個數

(3)、匿名函數

匿名函數:沒有名字的函數

匿名函數如何使用?

匿名函數不能通過直接調用來執行,因此可以通過匿名函數的自調用的方式來執行

(function () {
       alert(123);
  })();

(4)、函數是一種數據類型

函數是引用數據類型

<script>

//1.可以typeof一下

function run(){

}

console.log(typeof run)//function

(5)、函數作為參數

因為函數也是一種類型,可以把函數作為參數傳入

function fnNum1(x) {

    console.log(x);

    x();

  }

 fnNum1(function () { console.log("函數作為參數傳入") });

因為函數是一種類型,可以把函數作為參數反出

 function fnNum2(x) {

    return x

  }

  // var num1 = fnNum2(120);

  var num1 = fnNum2(function () { console.log("函數作為參數反出") });

  console.log(num1);

  num1();

(6)、回調函數

回調,回調,就是回頭調用的意思。主函數的事先干完,回頭再調用傳進來的那個函數。

//定義主函數,回調函數作為參數

function A(callback) {

    callback(); 

    console.log('我是主函數');     

}

function A(callback) {callback();}

//定義主函數,回調函數作為參數

function A(callback) {

    callback(); 

    console.log('我是主函數');     

}

 

//定義回調函數

function B(){

    setTimeout("console.log('我是回調函數')", 3000);//模仿耗時操作 

}

//調用主函數,將函數B傳進去

A(B);

//輸出結果

我是主函數

我是回調函數

 

 字面上的理解,回調函數就是一個參數,將這個函數作為參數傳到另一個函數里面,當那個函數執行完之后,再執行傳進去的這個函數。這個過程就叫做回調。

  其實也很好理解對吧,回調,回調,就是回頭調用的意思。主函數的事先干完,回頭再調用傳進來的那個函數。但是以前看過很多博客,他們總是將回調函數解釋的雲里霧里,很高深的樣子。

  舉一個別人舉過的例子:約會結束后你送你女朋友回家,離別時,你肯定會說:“到家了給我發條信息,我很擔心你。” 對不,然后你女朋友回家以后還真給你發了條信息。小伙子,你有戲了。其實這就是一個回調的過程。你留了個參數函數(要求女朋友給你發條信息)給你女朋友,然后你女朋友回家,回家的動作是主函數。她必須先回到家以后,主函數執行完了,再執行傳進去的函數,然后你就收到一條信息了。

  上面的代碼中,我們先定義了主函數和回調函數,然后再去調用主函數,將回調函數傳進去。

  定義主函數的時候,我們讓代碼先去執行callback()回調函數,但輸出結果卻是后輸出回調函數的內容。這就說明了主函數不用等待回調函數執行完,可以接着執行自己的代碼。所以一般回調函數都用在耗時操作上面。比如ajax請求,比如處理文件等。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM