1. 程式人生 > >Javascript基礎(六):陣列及常用操作

Javascript基礎(六):陣列及常用操作

1、陣列的定義

一個變數裡面只能一個值,如果有1000人,想把我們每個人的人名儲存,要用變數需要 1000個變數。這個時候可以考慮陣列 。 陣列就是一個大變數, 它裡面可以儲存很多的值。

陣列物件的作用是:使用單獨的變數名來儲存一系列的值。

2、建立陣列

  var arr=[]; //建立一個空陣列
  var arr = [1,3,5,7,9]; 
  var arr = new Array(1,3,5); 
  new Array([size]); // 建立一個數組,並指定陣列長度,陣列的實際長度可以超過設定的size的長度。

3、使用陣列

數組裡面有很多元素,我們可以通過陣列名[索引號];

獲取數組裡面相應的元素。陣列的索引號是從0開始的。

var Arr = ["小1","小2","小3","小4"]; //定義一個數組,裡面有4個元素
console.log(Arr[3]) //輸出索引號為3的元素。

控制檯輸出“小4”。由此很容易得出:索引號=序列-1。

  • 獲取陣列的長度
陣列名.length

4、遍歷陣列

我們可以用for 迴圈遍歷陣列
getElementsByTagName() 類似的功能可以得到一個偽陣列。

<script>
    var Arr = ["小1","小2","小3","小4","小5"];
    for(var i = 0
; i<Arr.length;i++) // 遍歷陣列 { console.log(Arr[i]); //輸出每個元素 } ---------- for(var i= 0, len = Arr.length; i<len;i++) // 遍歷陣列,這個效率更高,因為只需獲取一次陣列的長度。 { console.log(Arr[i]); }
</script>

5、運算元組的常用方法

在實際應用中,我們常常有給陣列新增或者刪除資料等其他需要,瞭解了下面的方法就可以對陣列進行增刪等操作了。

(1)新增陣列

  • push()

push() 方法可向陣列的末尾新增一個或多個元素,並返回新的長度。

實驗:

<script type="text/javascript">
    var arr = [2,4,6,8,10]; //定義一個數組
    arr.push(12);//給陣列新增一個元素 12
    console.log(arr);//在控制檯輸出陣列
</script>

控制檯輸出效果圖:

這裡寫圖片描述

push()把12新增到arr的最後,並返回一個新的長度6。

注意: console.log(arr.push(12)); // 返回的是陣列的長度

  • unshift()

該方法可向陣列的開頭新增一個或更多元素,並返回新的長度。

實驗:

<script type="text/javascript">
    var arr = [2,4,6,8,10]
    arr.unshift(12);
    console.log(arr);
</script>

這裡寫圖片描述

push()把12新增到arr的最前面,並返回一個新的長度6。

(2)刪除陣列

  • pop()

    刪除最後一個元素,並返回被刪除的元素。

<script type="text/javascript">
    var arr = [2,4,6,8,10]
    console.log(arr.pop()); //  返回被刪除的元素
    console.log(arr); //返回的是陣列
</script>

控制檯輸出如圖:

這裡寫圖片描述

  • shift()

shift() 方法用於把陣列的第一個元素從其中刪除,並返回被刪除元素。

<script type="text/javascript">
    var arr = [2,4,6,8,10]
    console.log(arr.shift()); //  返回被刪除的元素
    console.log(arr); //返回的是陣列
</script>

控制檯輸出如圖:

這裡寫圖片描述

(3)連線陣列 concat();

該方法用於連線兩個或多個數組,它不會改變現有的陣列,而僅僅會返回被連線陣列的一個副本 。

<script type="text/javascript">
    var arr1 = [2,4,6,8,10]; //定義一個數組arr1
    var arr2 = ["小1","小2","小3","小4"];//定義一個數組arr2
    var arr3 = arr1.concat(arr2);//定義陣列arr3,把arr1和arr2拼接賦予arr3。arr1.concat(arr2) 意思是把arr2拼接到arr1的後面。
    console.log(arr1);
    console.log(arr2);
    console.log(arr3);
</script>

控制檯輸出:

這裡寫圖片描述

(4)把陣列轉換成字串 join(separator)

該方法的作用是將陣列各個元素是通過指定的分隔符進行連線成為一個字串。separator引數指定使用的分割符,如果省略,預設用逗號分割。

<script type="text/javascript">
    var arr1 = [2,4,6,8,10];
    console.log(arr1.join(";"));
</script>

控制檯效果圖:

這裡寫圖片描述

(5)把字串轉換為陣列 split(separator,howmany)

引數 separator 可選,separator引數指定使用的分割符,如果省略,預設用逗號分割。
引數howmany 可選,指定返回的陣列的最大長度。

<script type="text/javascript">
    var txt = "小1-小2-小3";
    console.log(txt.split("-"));
</script>

控制檯效果:

這裡寫圖片描述

陣列的基本知識點大概就總結這些了,以後遇到相關知識會繼續補充,謝謝大家!