JavaScript中數組詳解

JavaScript中數組詳解

數組

數組創建讀寫和長度

創建數組的方法有兩種：一是使用數組字面量，簡單來說就是在[]之中列出數組的所有元素：

​ 二是新建一個對象的實例。

<script>
    //第一種
	var var numberArray = [1,2,3,4,5];//數字數組
    var stringArray = ["java","script","edu","coder"];//字符串數組
    var mixArray = [1,2,"java",true,6.6];//混合數組	
    //第二種
    //情況下可以設置數組的長度（即數組中元素的個數），也可以不設置。
    var myArry=new Array();//創建一個初始爲空的一個數組
    var ss=new Array(6);//創建一個長度爲6的數組
</script>

數組的讀取和寫入

讀取：存放讀入值的變量放在左邊，數組元素放在右邊。

寫入：數組元素在左邊，待寫值在右邊：

<script>
    //讀取
    var readArray = [1,3,"js",true,2.22];
	var read = readArray[0];//讀取第一個元素到變量read中
	//寫入
    var writeArray = [1,3,"js",true,2.22];
    writeArray[0] = 2;//在第一個元素的位置寫入2
    console.log(writeArray[0]);//原來的1已經被覆蓋，輸出2
</script>

數組長度

數組長度指數組中元素的個數，等於最大索引值加1，數組的length屬性即數組的長度。數組的長度也可以寫入，當寫入的值小於數組的實際長度時，數組會被刪除一部分。大於實際長度時，數組會在尾部添加一些空的區域。

<script>
	var arrayLength = [1,"js",true];
	console.log(arrayLength.length);//輸出3
    arrayLength.length = 2;
	console.log(arrayLength);//輸出[1,"js"]
</script>

數組元素的增加：

尾部元素添加元素

最直觀的方法就是直接給當前尾部元素後一個位置賦值

第二種方法就是受用push（）函數，往數組的末尾添加一個或多個元素，參數是要添加的元素，返回數組長度。

<script>
    //第一種
	var numberArray = [12,23,34,45];
    numberArray[numberArray.length] = 56;
    console.log(numberArray);//輸出[12,23,34,45,56]
    //第二種
    var numberArray = [12,23,34,45];
    var newLength=numberArray.push(56);//返回值是數組的長度
    console.log(newLength);//輸出5 
    console.log(numberArray);//輸出[12,23,34,45,56]
</script>

頭部添加元素

unshift()方法在數組的頭部添加元素，並返回數組新的長度，其餘元素自動向索引大的方向移動。

<script>
	var sArray = ["ja","va","script"];
    var newLength = sArray.unshift("he","llo");
    console.log(newLength)//輸出5
    console.log(sArray);//輸出["he","llo","ja","va","script"];
</script>

數組元素的刪除

尾部元素的刪除

第一種剛纔介紹的方法，直接修改數組長度的值

第二種是使用delete運算符，delete運算符後接上要刪除的元素，但是刪除後會有一個空佔位符，所以數據的長度保持不變

第三中方法是使用pop(),一次刪除一個，並返回被刪除的元素。

<script>
    //第二種
	var dArray=[11,22,33,44,55];
    delete.dArray[4];//產出索引最大的元素
	console.log(dArray);//輸出[11,22,33,44]
    console.log(dArray.length);//長度爲5
    //第三種
    var numberArray = [3,4,5,6,7];
    var c=numberArray.pop();
    console.log(deletedNumber);//輸出被刪除的元素7
	console.log(numberArray);//刪除後的數組爲[3,4,5,6]
</script>

頭部元素的刪除

shift()的作用是刪除數組頭部一個元素並返回該元素，然後所有元素往索引值小的方向移動一位。

<script>
	var dArray=[11,22,33,44,55];
    console.log(dArray.shift());輸出11，並在數組刪除11
    console.log(dArray);//輸出[22,33,44,55]
</script>

數組的遍歷和多維數組

forEach()方法 forEach()方法的參數是一個無名字的函數，函數有三個參數，第一個參數是當前的數組元素，第二個參數是當前的索引，第三個參數是數組對象的索引。與for循環的區別是無法用break中斷循環。

<script>
	var numArr=[10,11,12,13,14];
    numArr.foreach(function(mem,i,arr){
                   mem*=10;
        			arr[i]=mem;
                   });
    console.log(numArr);//輸出[100,110,120,130,140]
</script>

多維數組的實現

二維數組的創建 創建已知的二維數組

var multiArr = [[1,2,3,4],[5,6,7],[8,9]];

二維數組的讀寫 二維數組的讀寫用數組名[][]的方式，第一個中括號內爲行數，從0計數，第二個中括號內爲列數，也從0計數。 以上面的數組multiArr爲例：

<script>
	//創建一個4行6列的二維數組
    var muArr = new Array(4);
    for(var i = 0;i <4;i++) {
        muArr[i] = new Array(6);
    }
    
    var multiArr = [[1,2,3,4],[5,6,7],[8,9]];
    console.log(multiArr[1][1]);//讀元素，輸出6
    multiArr[0][0] = 0;//寫元素
</script>

查找元素的位置

根據值查找元素的位置，有兩個方法：indexOf()和lastIndexOf()，前者從索引小處往大搜索，後者相反。都返回第一次遇到該元素時的索引。

兩者都有兩個參數，第一個參數爲要查找的元素，第二個參數可選，爲搜索的起點索引。

第二個參數可以是負數，-1表示倒數第一個元素，-2表示倒數第二個元素，依次類推。如：

<script>
	var search = ["a","b","a","b","c","d","a","a","b","a"];
    console.log(search.indexOf("a"));//輸出0
    console.log(search.lastIndexOf("a"));//輸出9
    console.log(search.indexOf("a",2));//輸出2，從索引爲2處開始搜索
    var search = ["a","b","a","b"];
    console.log(search.indexOf("a"，-3));//輸出2
    console.log(search.lastIndexOf("a"，-3));//輸出0
</script>

數組的合併

concat()實現數組合並，其形式是數組a.concat(數組b)，合併之後返回新數組，新數組爲數組a後面連接數組b，但是數組a和b不變。

<script>
	var a = [1,2,3];
    var b = [4,5,6];
    var c = a.concat(b);//合併後返回新數組
    console.log(c);//輸出[1,2,3,4,5,6]
</script>

數組倒置

reverse()實現數組倒置，無參數，返回倒置後的數組，同時調用該方法的數組也會被倒置。稱爲就地逆置。

<script>
	var a = [1,2,3,4];
    var b = a.reverse();
    console.log(a);//輸出[4,3,2,1]
    console.log(b);//輸出[4,3,2,1]
</script>

元素合併

join()將數組的所有元素連接起來組成字符串，參數爲元素之間的分隔符，默認逗號。

<script>
	var sArray = ["June","July","August"];
    console.log(sArray.join());//輸出June,July,August
    console.log(sArray.join("+"));//輸出June+July+August
</script>

元素排序

sort()實現數據元素排序，不帶該參數表示元素按照ASCII表從小到大排序

<script>
	var stringArray = ["a","ab","b","aa"];
    stringArray.sort();
    console.log(stringArray);//輸出["a","aa","ab","b"]
    //需要注意的是數字的排序，例子如下：
    var arr = [1,2,10,5,12];
    arr.sort();
    console.log(arr);//輸出[1,10,12,2,5];
   //參數的格式如下：arr是要排序的數組；a，b是兩個參數，返回a-b，升序排列，返回b-a，降序排列。
    arr.sort(function(a,b){
                return a-b;  //升序排列
    })
    arr.sort(function(a,b){
            return b-a;  //降序排列
	})
</script>

提取子數組

slice()返回切割出的子數組，不修改原來的數組。

它有兩個整數參數a和b，a表示切割的起點，該點屬於子數組；b可選，表示切割的終點，該點不屬於子數組。

a和b都可以爲負數，如-1表示倒數第一個位置，依次類推。

<script>
	var arr = ["a","b","c","d","e"];
    console.log(arr.slice(0,3));//["a","b","c"]
    console.log(arr.slice(0,-2));//["a","b","c"]
    console.log(arr.slice(4));//["e"]
    console.log(arr.slice(-4));//["b","c","d","e"]
</script>