javascript基礎系列：數組常用方法解析

今天是比較特殊的日子，我們編程人員共同的節日，1024，祝每個編程人員節日快樂！

數組是javascript必不可少的一項，今天讓我們來總結一下數組操作的一些常用方法。
<a name="qRFkW"></a>

數組及數組中常用方法

數組是對象類型的，屬於特殊的對象

let ary = [12, 23, 34, 45]
console.log(typeof Ary) // =>"object"
console.dir(ary)  // 1. 數字作爲索引（key屬性名） 2. length代表長度

<a name="5jmTj"></a>

數組中常用的方法

• 方法的作用和含義
• 方法的實參（類型和含義）
• 方法的返回值
• 原來的數組是否發生改變
  <a name="0UDGi"></a>

1. 實現數組增刪改的方法

這一部分方法都會修改原有的數組

push

push：向數組末尾添加內容
@params
多個任意類型
@return
新增後數組的長度

let ary = [10, 20]
let res = ary.push(12, 30)
console.log(res) //4
console.log(ary) // [10, 20, 12, 30
// 基於原生js操作鍵值對的方法，也可以向末尾追加一項新的內容
ary[ary.length] = 40
console.log(ary)

unshift

unshift：向數組開始位置添加內容
@params
多個任意類型
@return
新增後數組的長度

let ary = [10, 20]
let res = ary.unshift(12, 30)
console.log(res) //4
console.log(ary) // [10, 20, 12, 30]
// 基於原生ES6展開運算符，把原有的ary克隆一份，在新的數組中創建第一項，其餘的內容使用原始ary中的信息即可，也算
//實現了向開始追加的效果
ary = [100, ...ary]
console.log(ary)

shift

shift：刪除數組中的第一項
@params
@return
刪除的那一項

let ary = [10, 20, 12, 30]
let res = ary.shift()
console.log(res, ary) // 10 [20, 12, 30]

基於原生js中的delete,把數組當成普通的對象，確實可以刪除掉某一項內容，但是不會影響數組本身的結構特點（length長度不會跟着修改），真實項目中杜絕這樣的刪除使用<br />
<br />pop

pop：刪除數組中的最後一項
@params

@return
刪除的那一項

let ary = [10, 20, 30, 40]
let res = ary.pop();
console.log(res, ary) // 40, [10, 20, 30]

基於原生js讓數組長度去掉一位，默認刪除最後一項

let ary = [10, 20, 30, 40]
ary.length--;
console.log(ary)

<br />splice

splice：實現數組的增加、刪除、修改
@params
n, m都是數字， 從索引n開始刪除m個元素（m不寫，是刪除到末尾）
n,m,x , 從索引n開始刪除m個元素,用x佔用刪除的部分
n, 0, x從索引n開始，一個都不刪，把x放到索引n的前面
@return
把刪除的部分用新數組存儲起來返回

let ary = [10, 20, 30, 40]
let res = ary.splice(2,2)
console.log(res, ary)
// 基於這種方法可以清空一個數組，把原始數組中的內容以新數組存儲起來
//ary.splice(0)


// 刪除最後一項和第一項
ary.splice(ary.length-1)
ary.splice(0,1)
console.log(ary)

// 向數組末尾追加
ary.splice(ary.length,0, 'aaa')

//向數組開始追加
ary.splice(0,0,'aaa')

<a name="7WJSh"></a>

2. 數組的查詢和拼接

此組方法，原來數組不會改變

slice

slice: 實現數組的查詢
@params
n, m都是數字，從索引n開始，找到索引爲m的地方（不包括m）
@return
把找到的內容以一個新數組的形式返回

let ary = [10, 20, 30, 40, 50]
let res = ary.slice(1, 3)
console.log(res, ary) // [20, 30] [10, 20, 30, 40, 50]

// 數組克隆,參數0可以不寫，淺克隆
let res2 = ary.slice(0)

concat

slice: 實現數組的拼接
@params
多個熱任意類型值
@return
拼接後新的數組（原來的數組不變）

let ary1 = [10, 20, 30]
let ary2 =  [40, 50, 60]
let res = ary1.concat('嵐楓', ary2);
console.log(res)

<a name="mXdOF"></a>

3. 把數組轉化爲字符串

原有數組不變

toString

toString: 把數組轉換爲字符串
@params
@return
轉換後的字符串,每一項用逗號分隔（原來的數組不變）

let ary = [10, 20, 30]
let res = ary.toString();
console.log(res) // "10, 20, 30"
console.log([].toString()) // ""

join

join: 把數組轉換爲字符串
@params
指定的分隔符（字符串格式）
@return
轉換後的字符串,每一項用指定分隔符分隔（原來的數組不變）

let ary = [10, 20, 30]
let res = ary.join(' ');
console.log(res) // "10 20 30"

<a name="EhV2n"></a>

4. 檢測數組中是否包含某一項

indexOf/lastIndexOf

indexOf/lastIndexOf: 檢測當前項在數組中第一次或者最後一次索引值，（在ie6-8中不兼容）
@params
要檢索的這一項內容
@return
這一項出現的位置索引值（數字），如果數組中沒有這一項，返回的結果是-1

let ary = [10, 20, 30, 10, 20, 30]
console.log(ary.indexOf(20)) // 1
console.log(ary.lastIndexOf(20)) // 4
// 驗證ary數組是否包含‘嵐楓’
if(ary.indexOf('嵐楓') === -1) {
    //不包含
}
// 直接使用ES6新提供的includes方法判斷
if(ary.includes('嵐楓')) {
    //  包含：如果存在返回的是true
}

<a name="g2PtA"></a>

5. 數組的排序或者排列

reverse

reverse：把數組倒過來排列
@return
排列後的新數組，原來的數組改變

let ary = [12, 15, 9, 28]
ary.reverse();
console.log(ary)

sort

sort：實現數組的排序
@params
可以沒有，也可以是個函數
@return
排列後的新數組，原來的數組改變

如果不傳參數，是無法處理10以上的數字排序（它默認都是按照第一個字符來排）

// 想要實現多位數正常排序，需要給sort傳遞一個函數，函數中返回a-b升序，返回b-a實現降序
let ary = [10, 12, 15,22, 28, 9]
ary.sort((a, b) => {
  // a和b是相鄰的兩項
     return a-b
})
console.log(ary)

<a name="PtbIn"></a>

6. 遍歷數組中的每一項方法

forEach

forEach: 遍歷數組中的每一項內容
@params
回調函數
@return
原來的數組不變

let ary = [12, 15, 9, 28, 10, 22]

//基於原生js中的循環可以實現
for(let i=0; i< ary.length; i++) {
    // i: 當前循環這一項的索引
  //ary[i]: 根據索引獲取循環的這一項
}

ary.forEach((item, index)=> {
  // 數組中有多少項，函數就會被默認執行多少次
  // 每一次執行函數： item是數組中當前要操作的這一項，index是當前的索引值
})

map<br />filter<br />find<br />reduce<br />some<br />every
<a name="62fOo"></a>

數組中的去重

<a name="eD7de"></a>

1. 方案一

1. 循環原有數組中的每一項，每拿到一項都往新數組中添加
2. 添加之前驗證新數組中是否存在這一項，不存在再增加

let ary = [1, 2,3, 1, 2, 1, 2, 1, 2, 3, 2, 1, 2, 3]
let newAry = [];
for(let i = 0; i< ary.length; i++) {
  
  // 循環獲取原有數組中的每一項
    let item = ary[i]
  
  // 驗證新數組中是否存在這一項
  if(newAry.includes(item)) {
    // 存在這一項，不再增加到新數組中，繼續下一輪循環即可
    continue;
  }
  newAry.push(item)
}
console.log(newAry)

<a name="NcVm7"></a>

2. 方案二

1. 先分別拿出數組中的每一項
2. 用這一項和它後面的每一項依次進行比較，如果遇到和當前項相同的，則在原來數組中把這一項從數組中刪除，用splice方法

var ary = [1, 2,3, 1, 2, 1, 2, 1, 2, 3, 2, 1, 2, 3];
for(var i = 0 ; i < ary.length; i++) {
  
  // item: 每一次循環拿出來的當前項
    var item = ary[i];
  // 讓當前項和後面的每一項進行比較（循環）
  for(var j= i+1; j< ary.length; j++) {
    var compare = ary[j];
    
    // 如果compare和item相等，說明這一項是重複的，我們把它刪掉
    if(compare === item) {
        // j索引這一項要從數組中刪除
      ary.splice(j, 1);
      
      // 數組塌陷了： j後面的每一項索引都提前了一位，下一次要比較的應該還是j這個索引內容
      j--;
    }
  }
}

<a name="3nPDC"></a>

3. 數組中去重比較好的方法

let ary = [1,  2, 3, 1, 2, 1, 2, 3, 2, 1, 2, 3]

  // 1. 創建一個空對象
let obj = {}

// 2. 循環數組中的每一項，把每一項對象中進行存儲 =》 item: item
for(let i=0; i< ary.length; i++) {
    let item = ary[i]
  
  //3. 每一次存儲之前進行判斷：驗證obj中是否存在這一項
  if(obj[item] !== undefined) {
   // 已經存在這一項
    ary[i] = ary[ary.length-1]
    ary.length--;
    i--;
    continue;
  }
  obj[item] = item
  
}
console.log(ary)

基於splice實現刪除性能不好：當前項被刪除後，後面的每一項的索引都要向前提一位，如果後面內容過多，一定影響性能<br />實現數組去重的方法

unique: 實現數組去重的方法
@params
ary[Array]要去重的數組
@return
[Array] 去重後的數組

function unique(ary){
    let obj = {}
  for(let i=0; i< ary.length; i++) {
  let item = ary[i]
  if(obj[item] !== undefined) {
    ary[i] = ary[ary.length-1]
    ary.length--;
    i--;
    continue;
  }
  obj[item] = item
  }
  return ary
}
console.log(unique([1,1,2,2,4,4]))

<a name="oCmvn"></a>

4. 基於ES6的Set去重方法

let ary = [12, 23, 12, 15, 25,23, 25, 14, 16]
ary = [... new Set(ary)];
console.log(ary)