陣列(Array)

陣列

• 陣列也是一個物件

  • 用來儲存一些值

  • 不同的是，普通物件是使用字串作為屬性名

  • 陣列是使用數字來作為索引來操作元素

  • 索引

    • 從0開始的一個整數

    • 陣列的儲存效能比普通物件要好，在開發中經常使用陣列來儲存一些資料

  • 陣列中的元素可以是任意資料型別,也可以是物件,甚至是函式,陣列

• 建立陣列物件

  • 方法1：使用建構函式建立陣列物件

    • 語法： 陣列[索引] = 值

    • var arr = new Array();
      arr[0] = 10;
      arr[1] = 33;
      arr[2] = 22;
      console.log(arr[1]);
      console.log(arr);
      console.log(arr.length);  
       
      //獲取陣列長度(連續的陣列)

    • 如果讀取不存在的索引 ，返回Undefined

  • 方法2：使用字面量來建立一個數組

    • 語法： []

    • var arr = [1,2,3,4,5,6];
      console.log(arr);

基本方法

• push()

  • 向陣列的末尾新增一個或者多個元素

  • 要新增的元素作為方法的引數傳遞

  • 這樣這些元素將會自動新增到陣列的末尾

  • 返回陣列的新的長度

• pop()

  • 刪除陣列的最後的一個元素

  • 返回被刪除的元素

• unshift()

  • 向陣列開頭新增一個或者多個元素

  • 返回陣列新的長度

• shift()

  • 刪除陣列第一個元素

  • 返回被刪除的元素

• slice()

  • 可以用來從陣列中提取指定元素

  • 語法: Array.slice(start, stop)

  • 包含start,並不包含stop索引

  • 該方法不會改變原陣列，將擷取後的元素封裝到一個新陣列進行返回

  • 若stop不寫，則表示從某一個索引位置往後的所有元素全部都要

  • 索引可以傳遞一個負值

  • var arr = ["swk", "zbj", "shs", "zzj", "bbj"]
            res = arr.slice(1,2)    //提取arr陣列中第二個元素
            console.log(res)

• splice()

  • 刪除陣列中的指定元素

  • 語法: Array.splice(start, count,[新元素1],[新元素2...])

  • 解釋：從start index位置開始，刪除count個

  • 向陣列新增新元素

  • 會影響原陣列，會將指定元素從原陣列中刪除並返回被刪除的元素

  • var arr = ["swk", "zbj", "shs", "zzj", "bbj"]
    res = arr.splice(1,1)   // 從索引=1這個位置起,包含索引=1這個位置的元素，往後刪除1個元素
    console.log(res)  //["zbj"]
    console.log(arr)  //["swk", "shs", "zzj", "bbj"]

• concat()

  • 連線兩個或者多個數組，並將新的陣列返回

  • 不影響原陣列

• join()

  • 該方法可以將陣列轉換為字串,並作為結果返回

  • 不影響原陣列

  • 在join()可以指定一個字串作為引數，這個字串可以成為陣列中的元素連線符

  • 不指定的話，預設是使用逗號連線

• reverse()

  • 翻轉陣列中元素順序，並返回新的陣列

  • 該方法會修改原陣列

• sort()

  • 用來對陣列的元素排序

  • 該方法會修改原陣列

  • 預設按照Unicode編碼順序進行排序

  • 純數字也是按照Unicode編碼進行排序，數字排序後不會得到正確的順序

  • 可以指定排序的規則

  • 可以在sort()新增一個回撥函式，來指定排序的規則

  • 回撥函式中需要定義兩個形參

  • 瀏覽器將會分別使用陣列中的元素作為實參去呼叫回撥函式

    • 升序排列 return a-b

    • 降序排列 return b-a

遍歷

• for迴圈遍歷

  • var arr = ["swk", "zbj", "shs"]
    for(var i=0;i<arr.length;i++){
      console.log(arr[i]);
    }

• forEach遍歷

  • js中還提供了 forEach()方法來遍歷陣列(一般都是使用for迴圈去遍歷陣列)

    • 這個方法只支援IE8(不包括IE8)以上的瀏覽器

    • forEach()方法需要一個函式作為引數

      • 像這種函式，由我們建立，但卻不是由我們來呼叫，所以稱之為回撥函式

    • 陣列中有幾個元素，函式就會執行幾次，瀏覽器將遍歷到的元素，以實參形式傳遞進來

    • 瀏覽器會在回撥函式中傳遞三個實參

      • 第一個引數，就是當前正在遍歷的元素

      • 第二個引數，就是當前遍歷陣列的索引

      • 第三個引數，就是當前正在遍歷的陣列

    • var arr = ["swk", "zbj", "shs", "zzj", "bbj"];
      ​
      arr.forEach(function(value,index,arr){
        // console.log(value);
        // console.log(index);
        console.log(arr);
      });