js數組定義和方法 (包含ES5新增數組方法)

數組Array

1. 數組定義

一系列數據的集合成為數組。數組的元素可以為任何類型的數據（包括數組，函數等），每個元素之間用逗號隔開，數組格式：[1,2,3]。

2. 數組創建方式

(1) 字面量方法　

var arr = [1,2,3];

(2) 使用構造函數創建

　var arr = new Array(); //創建一個空數組[] 　var arr = new Array(3); //創建一個長度為3的數組（數組項都為undefined） 　var arr = new Array('小鳴',18,'男' ); //創建數組並寫入數組元素 ['小鳴',18,'男']

3. 數組操作

(1) 數組元素的查詢、寫入、修改

　　通過索引（下標）進行查詢、寫入和修改操作，索引值從0開始；

　　①查詢：

　　

　　②寫入

  

　　③修改
　　

(2) 數組長度 length

　　length：表示數組的長度，返回數值。

　　

        length屬性不是只讀的，可以通過設置該屬性，可以從數組的末尾移除項或添加項。

　　

(3) 數組遍歷 (for循環)

 

格式：for(變量初始化;判斷條件;變量更新){執行語句}

var arr = ['嘻嘻','哈哈','呵呵'];

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

    console.log(arr[i]); // 分別輸出'嘻嘻','哈哈','呵呵'

}

(4) 多維數組(數組包含數組)

var arr = [1,2,'哈哈',[3,4,'嘻嘻'],[5,6,'喲喲']];

arr[3][2]; //=>'嘻嘻'

　

4. 數組方法（增，刪，倒序，替換）

• push： 往數組尾部添加一個或多個元素，返回數組新的長度

 　　　　

• pop：刪除數組最后一個元素，返回刪除的元素
• unshift：往數組開頭添加一個或多個元素，返回數組新的長度
• shift：刪除數組第一個元素，返回刪除的元素
• sort：將數組中的元素排序，並返回排序后的數組，默認以字符串的排列方式（轉換成ASCII碼進行對比）

• reverse：將數組中的元素顛倒順序，返回逆序后的數組
• slice(start[,end])：返回數組的片段或子數組，從start開始到end(不包括end所對應的元素)，支持負數（負數為從后往前數）, 且不會影響原數組。

　　　（如果省略end參數，則截取到數組的最后一項）

　　　

• splice(start,deleteNum,…items)：在數組中插入、刪除、替換的通用方法，返回刪除的元素。
• start：起始索引位置
• deleteNum：要刪除的數量
• items：插入的元素（可以是多個）

      　　1.刪除 splice(start,deleteNum)，返回刪除的元素

　　　　　　

 　　 　2.插入 splice(start,deleteNum，...items)，返回刪除的元素

　　　　　　

　　　  3.替換 splice(start,deleteNum，...items)，返回刪除的元素

　　　    

• join(separator) 返回字符串值，其中包含了連接到一起的數組的所有元素
• separator：分隔符，默認為逗號
• 
• concat() 返回一個新數組，這個新數組是由調用這個方法的數組和參數組成，參數可以是多個  

 　　　　

　　如果傳遞給 concat()方法的是一或多個數組，則該方法會將這些數組中的每一項都添加到結果數組中。

　　如果傳遞的值不是數組，這些值就會被簡單地添加到結果數組的末尾。

　　

　　例題：多維數組轉化成扁平化數組。[1,[2,[[3,4],5],6]]  ==> [1,2,3,4,5,6]

　　

　　

5. 值類型與引用類型的區別

　　[內存中的狀態]

　　簡單的了解：

 

　　(1) 基本數據類型：存在棧內存里，復制的是值，原數據改變不會影響copy值，反之亦然。

 

　　(2) 引用數據類型：存在堆內存里，復制的是引用（類似快捷方式）。原數據改變，會改變 copy值，反之亦然。

 

6. 數組復制與傳輸

• 復制數組 ( 數組是引用數據類型 )

　　　　 ① 創建空數組，遍歷數組逐個寫入；

　　　　 ② arr.slice(0)復制原數組，當元素改變不會影響原數組。

• 把數組作為函數的參數傳遞：基本數據類型傳遞值，引用數據類型傳遞引用（快捷方式）。

 　　　　

7. 數組排序

• 冒泡排序法：當前元素與下一元素相比，把最大的逐個往后排列，實現從小到大排列。（如果 當前元素比下一元素大，利用第3個變量暫時儲存大值）

 　　　　

• 選擇排序法：當前元素分別跟后面的元素對比，把最小的逐個往前排列，實現從小到大排列。

 　　　　

• 快速排序法：

　　　　大致分三步：

　　　　1）找基准（一般是以中間項為基准）

　　　　2）遍歷數組，小於基准的放在left，大於基准的放在right

　　　　3）遞歸

• Sort排序：默認字符串排序（ascii碼），轉換成數字排序：往sort中傳入一個函數作為 參數。從小到大或從大到小排序。（sort排序后，舊數組也會變成相應的順序。）

 　　　　     -------->     

　　　　eg: 一個對象數組，根據數組中的對象的某個屬性值進行排序。sort方法的函數參數中返回另一個函數

var dataArr = [{name:'xxx',age:12},{name:'yyy',age:32},{name:'zzz',age:25},{name:'aaa',age:6}];
function compareObj(proName){
    return function(a,b){
        console.log(a,b)
        var x = a[proName];
        var y = b[proName];
        return x-y;
    }
 }
 dataArr.sort(compareObj('age'))；//根據數組中的對象的age屬性排序。
 console.log(dataArr);// 打印值見下圖

8. ES5新增數組方法（IE9+支持）

(1) 靜態方法：

Array.isArray();

判斷是否為數組，返回布爾值。（ typeof()無法區分數組和對象，此方法可以 ）

(2) 索引方法：

判斷數組中是否存在某個值；

①　indexOf():返回要查找數值在數組中的索引值，找不到返回-1

②　lastIndexOf():從后面往前找，但索引值不變。

③　indexOf / lastIndexOf(keyword[,startIndex])    【支持它們的瀏覽器包括 IE9+、Firefox 2+、Safari 3+、Opera 9.5+和 Chrome。】　　

       Keyword:要查找的項，

　　StartIndex:查找起點索引，為可選參數，默認為1，

 　　

(3) 數組迭代方法（IE9+、Firefox 2+、Safari 3+、Opera 9.5+和 Chrome）　

　　ECMAScript 5 為數組定義了 5 個迭代方法。每個方法都接收兩個參數：要在每一項上運行的函數和（可選的）運行該函數的作用域對象——影響 this 的值。
　　傳入這些方法中的函數會接收三個參數：數組項的值、該項在數組中的位置、數組對象本身。

①　forEach(fn)：用於替代for循環，比for循環簡便，但不能隨意退出，不能使用break。此方法沒有返回值。

 　　

②　map(fn):返回的是一個數量相等的新數組，返回的內容是什么取決於在fn中返回的值。

       適用於數組中的對象，不會改變原數組。

③　filter(fn): 得到執行fn后返回時true對應的數組元素組成的數組，

       利用這個方法對數組元素進行篩選。

 　　

④　some(fn):如果該函數對任何一項返回ture,則返回ture。

       -->用於判斷數組是否存在某個屬性值/對象等（indexOf有局限性）

       

⑤　every(fn):執行函數時，所以都返回ture,則返回ture。

       

(4) 數組歸並方法（IE9+、Firefox 3+、Safari 4+、Opera 10.5 和 Chrome）

　　reduce()和 reduceRight()，這兩個方法都會迭代數組的所有項，然后構建一個最終返回的值。
　　其中，reduce()方法從數組的第一項開始，逐個遍歷到最后。而 reduceRight()則相反。
　　這兩個方法都接收兩個參數：一個在每一項上調用的函數和（可選的）作為歸並基礎的初始值。

　　給 reduce()和 reduceRight()的函數接收 4 個參數：前一個值、當前值、項的索引和數組對象。這個函數返回的任何值都會作為第一個參數自動傳給下一項。
　　第一次迭代發生在數組的第二項上，因此第一個參數是數組的第一項，第二個參數就是數組的第二項；

　　① reduce() 只有一個參數：函數

　　

　　　cur的值是從數組的索引1元素開始的。prev第一個值是數組的索引0的元素，而后是上一次的prev+cur的和。

 

　　② reduce()  兩個參數：函數，歸並初始值；

　　　

 　　　當設置了初始值，cur的值是從數組的索引0元素開始的。prev第一個值則是初始值，而后是上一次的prev+cur的和。

　　③ reduceRight()和reduce()的作用一樣，但是遍歷方向相反，不舉例了。

　　④ 應用例題，（參考 https://www.jianshu.com/p/2d396b10afe0）

　　　var str = 'name, age, hair\nMerble, 35, red\nBob, 64, blonde';

　　　處理str，得到 [ ["name", "age", "hair"], ["Merble", "35", "red"],["Bob", "64", "blonde"]];

　　　—》

var str = 'name,  age,  hair\nMerble,  35,  red\nBob,  64,  blonde';
var ss = str.split('\n')
//console.log(ss);//["name,  age,  hair", "Merble,  35,  red", "Bob,  64,  blonde"]
var a = ss.reduce(function (prev, cur) {
     prev.push(cur.split(",").map(function (item) {
            return item.trim();//去空格
      }))
      return prev
}, []); //初始值為空數組，值賦給第一個prev。
console.log(a)；