Array 數組概述

Array 類型是 ECMAScript 最常用的類型。javaScript 中的 Array 類型和其他語言中的數組有著很大的區別。

雖然數組都是有序排列，但 javaScript中的數組每個元素可以保存任何類型。

javaScript 中數組的大小也是可以調整的。

創建數組的兩種方式

new 運算符創建數組

var box1 = new Array(); 　　　　//創建了一個數組，數組屬於object類型
var box2 = new Array(10); 　　　　//創建一個包含 10 個元素的數組,一個數字表示這個數組的長度,如果是兩個數及以上會變成數組中的元素
 

var box3 = new Array(‘李炎恢‘,28,‘教師‘,‘鹽城‘); 　　//創建一個數組並分配好了元素

       console.log(box2) // Array(10),length: 10

以上三種方法，可以省略 new 關鍵字

var box1 = Array(); //省略了 new 關鍵字
var box2 = Array(10); //省略了 new 關鍵字
var box3 = Array(‘李炎恢‘,28,‘教師‘,‘鹽城‘); //省略了 new 關鍵字

console.log(box1)
console.log(box2)
console.log(box3)
 

使用字面量方式創建數組

var box1 = []; 　　　　　　//創建一個空的數組
var box2 = [‘李炎恢‘,28,‘教師‘,‘鹽城‘]; 　　　　//創建包含元素的數組
var box3 = [1,2,]; 　　　　　　　　　　//禁止這麽做，IE 會識別 3 個元素
var box4 = [,,,,,]; 　　　　　　　　//同樣，IE 的會有識別問題

console.log(box1)
console.log(box2)
console.log(box3)
console.log(box4)

創建包含各種數據類型的數組

var box = [
    { 　　　　　　　　　　　　　　     
 
//第一個元素是一個對象
        name : ‘李炎恢‘,
        age : 28,
        run : function () {
            return ‘run 了‘;
        }
    },
    [‘馬雲‘,‘李彥宏‘,new Object()],//第二個元素是數組
    ‘江蘇‘, //第三個元素是字符串
    25+25, //第四個元素是數值
    new Array(1,2,3) //第五個元素是數組
    ];
console.log(box);

JavaScript的數組的操作方法

使用索引下標來讀取和設置數組的值

var box = Array(‘李炎恢‘,28,‘教師‘,‘鹽城‘);

console.log(box[2]); //獲取第三個元素
box[2] = ‘學生‘; //修改第三個元素
box[4] = ‘計算機編程‘; //增加第五個元素
console.log( box[4])

使用 length 屬性獲取數組長度

var box = new Array(‘李炎恢‘,28,‘教師‘,‘鹽城‘);

console.log(box.length) //獲取元素個數
box.length = 10; //強制設置元素個數,PS：數組最多可包含 4294967295 個元素，超出即會發生異常。
console.log(box.length) //獲取元素個數 ,10

box[box.length] = ‘JS 技術‘; //通過 length 給數組增加一個元素,在最後一個角標添加一個元素
console.log(box.length); //11
console.log(box[box.length-1])//獲取最後一個數組，數組長度減1,打印結果：JS 技術

轉換方法

對象或數組都具有toLocaleString()、toString()和valueOf()方法。

var box = [‘李炎恢‘,28,‘計算機編程‘]; //字面量數組
console.log(box); // (3) ["李炎恢", 28, "計算機編程"]
console.log(box.valueOf()); // (3) ["李炎恢", 28, "計算機編程"]
console.log(box.toString()); //李炎恢,28,計算機編程
console.log(box.toLocaleString()); //李炎恢,28,計算機編程

var box = [new Date()];
console.log(box.toString());        //Sat Apr 06 2019 02:29:36 GMT+0800 (中國標準時間)
console.log(box.toLocaleString());//具有本地格式化的功能，不會自動調用 結果是2019/4/6 上午2:29:36

join()方法

默認下，數組字符串都會以逗號隔開。如果使用 join()方法，則可以使用不同的分隔符來構建這個字符串。

var box = [‘李炎恢‘, 28, ‘計算機編程‘];
alert(box.join(‘|‘)); //李炎恢|28|計算機編程    返回的類型是字符串

棧方法

ECMAScript 數組提供了一種讓數組的行為類似於其他數據結構的方法。也就是說，可以讓數組像棧一樣，可以限制插入和刪除項的數據結構。

棧是一種數據結構(後進先出)，也就是說最新添加的元素最早被移除。而棧中元素的插入(或叫推入)和移除(或叫彈出)，只發生在一個位置——棧的頂部。

ECMAScript 為數組專門提供了 push()和 pop()方法：

push()方法可以接收任意數量的參數，把它們逐個添加到數組的末尾，並返回修改後數組的長度。
pop()方法則從數組末尾移除最後一個元素，減少數組的 length 值，然後返回移除的元素。

var box = [‘李炎恢‘, 28, ‘計算機編程‘]; //字面量聲明
console.log(box.push(‘鹽城‘)); //數組末尾添加一個元素，並且返回長度
console.log(box); // (4) ["李炎恢", 28, "計算機編程", "鹽城"]
console.log(box.pop()); //移除數組末尾元素，並返回移除的元素:鹽城
console.log(box); // ["李炎恢", 28, "計算機編程"]

隊列方法

棧方法是後進先出，而隊列方法就是先進先出。隊列在數組的末端添加元素，從數組的前端移除元素。

通過 push()向數組末端添加一個元素，然後通過 shift()方法從數組前端移除一個元素。

var box = [‘李炎恢‘, 28, ‘計算機編程‘]; //字面量聲明
console.log(box.push(‘鹽城‘)); //數組末尾添加一個元素，並且返回長度
console.log(box); //(4) ["李炎恢", 28, "計算機編程", "鹽城"]
console.log(box.shift()); //移除數組開頭元素，並返回移除的元素:李炎恢
console.log(box); //(3) [28, "計算機編程", "鹽城"]

javaScript 還為數組提供了一個 unshift()方法，它和 shift()方法的功能完全相反。unshift()方法為數組的前端添加一個元素。這四個方法可以自由組合，組成堆棧或者隊列的數據結構

var box = [‘李炎恢‘, 28, ‘計算機編程‘]; //字面量聲明
console.log(box.unshift(‘鹽城‘,‘江蘇‘)); //數組開頭添加兩個元素
console.log(box); //["鹽城", "江蘇", "李炎恢", 28, "計算機編程"]
console.log(box.pop()); //移除數組末尾元素，並返回移除的元素:計算機編程
console.log(box); //["鹽城", "江蘇", "李炎恢", 28]

排序方法

數組中已經存在兩個可以直接用來排序的方法：reverse()：逆向排序和 sort()：從小到大排序

var box = [1,2,3,4,5];
console.log(box.reverse()); //逆向排序方法，返回排序後的數組:[5, 4, 3, 2, 1]
console.log(box); //源數組也被逆向排序了，說明是引用:[5, 4, 3, 2, 1]

var box = [4,1,7,3,9,2];
console.log(box.sort()); //從小到大排序，返回排序後的數組: [1, 2, 3, 4, 7, 9]
console.log(box); //源數組也被從小到大排序了: [1, 2, 3, 4, 7, 9]

sort 方法的默認排序的問題

sort 方法的默認排序在數字排序上有些問題，因為數字排序和數字字符串排序的算法是一樣的。

我們必須修改這一特征，修改的方式，就是給 sort(參數)方法傳遞一個函數參數。

function compare(value1, value2) { //數字排序的函數參數
   if (value1 < value2) { //小於，返回負數
       return -1;
   } else if (value1 > value2) { //大於，返回正數
       return 1;
   } else { //其他，返回 0
       return 0;
   }
}
var box = [65,0,1,55,10]; //驗證數字字符串，和數字的區別
console.log(box.sort(compare)); // [0, 1, 10, 55, 65]

var box2 = ["0","1","55","10","65"]; //驗證數字字符串，和數字的區別
console.log(box2.sort(compare)); //["0", "1", "10", "55", "65"]
console.log(box2.sort()); //["0", "1", "10", "55", "65"]

concat()方法:基於當前數組創建一個新數組

var box = [‘李炎恢‘, 28, ‘鹽城‘]; //當前數組
var box2 = box.concat(‘計算機編程‘); //創建新數組，並在數組最後面添加新元素
console.log(box2); //輸出新數組:["李炎恢", 28, "鹽城", "計算機編程"]
console.log(box); //原來的數組沒有任何變化:["李炎恢", 28, "鹽城"]

slice()方法:基於當前數組獲取指定區域元素並創建一個新數組

var box1 = [‘李炎恢‘, 28, ‘鹽城‘,"北京","深圳"]; //當前數組
var box2 = box1.slice(1);//一個參數表示從這個參數開始往後取: [28, "鹽城", "北京", "深圳"]
var box3 = box1.slice(1,3);//第2個-第4個 之間的元素  兩個參數表示從第一個參數開始取，取到第二個參數的位置:[28, "鹽城"]
var box4 = box1.slice(2,5);//如果參數超過了數組的長度，則獲取前面能夠獲取到的，後面的就忽略了，比如這裏獲取到：‘鹽城‘,"北京","深圳"
console.log(box2);//28，鹽城，北京，深圳
console.log(box3); // [28, "鹽城"]
console.log(box4); // ["鹽城", "北京", "深圳"]
console.log(box1); //原來的數組: ["李炎恢", 28, "鹽城", "北京", "深圳"]

splice()主要用途是向數組的中插入元素

splice 中的刪除功能

var box = [‘李炎恢‘, 28, ‘鹽城‘]; //當前數組
var box2 = box.splice(0,2); //截取前兩個元素，表示從0開始截取兩個元素
console.log(box2); //返回截取的元素: ["李炎恢", 28]
console.log(box); //原來的數組被截取的元素已經被刪除:["鹽城"]

splice 中的插入功能（操作的是原數組）

var box = [‘李炎恢‘, 28, ‘鹽城‘]; //當前數組
var box2 = box.splice(1,0,‘計算機編程‘,‘江蘇‘); //沒有截取，但插入了兩條  1表示從1號角標插入，0表示不截取，如果改為1,28這個元素就沒有了
console.log(box2); // 什麽都沒有，因為第二個參數是0，沒有截取到:[]
console.log(box); //在第 2 個位置插入兩條:["李炎恢", "計算機編程", "江蘇", 28, "鹽城"]

splice 中的替換功能

var box = [‘李炎恢‘, 28, ‘鹽城‘]; //當前數組
var box2 = box.splice(1,2,100); //截取了 2 條，替換成 100 第二個參數傳入幾就截取幾個
console.log(box2); //輸出截取的 28
console.log(box); //輸出數組: ["李炎恢", 100]

JavaScript通過原型給數組添加更多的方法

數組獲取最大值的方法

var arr1 = ["nba","haha","cba","aaa","sbc"];
var arr2 = [32,34,43,56];
Array.prototype.getMax = function(){
   var temp = 0;
   for(var x=1; x<this.length; x++){
       if(this[x]>this[temp]){
           temp = x;
       }
   }
   return this[temp];
}
console.log(arr1.getMax());//以上的this都表示arr這個數組，那個對象調用這個方法this就表示誰
console.log(arr2.getMax());

數組的字符串表現形式

定義toString方法。 相當於java中的復寫

Array.prototype.toString = function(){
    return "["+this.join("/ ")+"]";
}
var arr=[32,23,32,34322,3232,2453];
console.log(arr.toString()); //[32/ 23/ 32/ 34322/ 3232/ 2453]

冒泡排序

偽數組

具有length屬性；按索引方式存儲數據；不具有數組的push()、pop()等方法

偽數組無法直接調用數組方法或期望length屬性有什麽特殊的行為，不具有數組的push()、pop()等方法，但仍可以對真正數組遍歷方法來遍歷它們，不能使用foEach來遍歷偽數組，可以使用for in。

這種對象有很多，比較特別的是function內的arguments對象，還有像調用getElementsByTagName, document.childNodes之類的，它們都返回的NodeList對象都屬於偽數組，也稱為類數組，還有自定義的對象，也屬於偽數組。

我們可以通過Array.prototype.slice.call(fakeArray)將偽數組轉變為真正的Array對象或者ES6中的from方法。

var fakeArray01 = {0:‘a‘,1:‘b‘,length:2};//這是一個標準的偽數組對象 
var arr01 = Array.prototype.slice.call(fakeArray01); 
alert(arr01[0]);//a 
var arr02 = [].slice.call(fakeArray01); 
alert(arr02[0]);//a 

關於數組更多的方法查看：ES5-ES6-ES7_數組的擴展

JavaScript數組操作詳情