JavaScript 數組方法解析與實現

Array的操做方法

1. unshift()

arrayObject.unshift(newelement1,newelement2,....,newelementX)

• 向數組開頭添加一個或多個元素，並返回新的長度
• 改變原數組

let arr = [1,2,3]
  let len = arr.unshift(1)
  console.log(len) // 4
  console.log(arr)  // [1, 1, 2, 3]
複製代碼

2. shift()

arrayObject.shift()

• 刪除數組第一個元素，並返回刪除的元素自己
• 若是數組爲空，則不修改素組，返回undefined
• 改變原數組

let arr = [1,2,3]
  console.log(arr.shift()) // 1
  console.log(arr) // [2, 3]
複製代碼

3. push()

arrayObject.push(newelement1,newelement2,....,newelementX)

• 向數組末尾添加一個或多個元素，並返回新長度
• 改變原數組

let arr = [1,2,3]
  console.log(arr.push(1,2)) // 5
  console.log(arr) // [1, 2, 3, 1, 2]
複製代碼

4. pop()

arrayObject.pop()

• 刪除數組最後一個元素，並返回刪除元素自己
• 若是數組爲空，則不修改數組，並返回undefined
• 改變原素組

let arr = [1,2,3]
  console.log(arr.pop()) // 3
  console.log(arr) // [1, 2]
  console.log([].pop()) // undefined
複製代碼

5. concat()

arrayObject.concat(arrayX,arrayX,......,arrayX)

• 合併兩個或多個數組，返回合併後的數組
• 不改變原數組

let arr1 = [1,2,3], arr2 = [4,5,6], arr3 = [7]
  console.log(arr1.concat(arr2, arr3)) // [1, 2, 3, 4, 5, 6, 7]
  console.log(arr1) // [1, 2, 3]
複製代碼

6. splice()

arrayObject.splice(index,howmany,item1,.....,itemX)

• 刪除數組指定位置長度的元素，或添加一個、多個元素，返回刪除元素
• 添加元素可選
• 改變原數組

let arr1 = [1,2,3]
  console.log(arr1.splice(1,2)) // [2, 3]
  console.log(arr1) // [1]
  console.log(arr1.splice(1,0,2,3)) // []
  console.log(arr1) // [1, 2, 3]
複製代碼

7. slice()

arrayObject.slice(start,end)

• 截取數組指定開始和結束下邊的元素，並返回結果元素數組
• end可選
• 不改變原數組

let arr1 = [1,2,3]
  console.log(arr1.slice(1, 2)) // [2]
  console.log(arr1.slice(1)) // [2, 3]
  console.log(arr1) // [1, 2, 3]
複製代碼

8. sort()

arrayObject.sort(sortby)

• 對數組進行排序，返回排序後的數組
• 改變原數組

let arr1 = [2,1,3]
  console.log(arr1.sort()) // [1, 2, 3]
  console.log(arr1) // [1, 2, 3]
複製代碼

！注意

因爲sort()方法是分別調用元素的toString()方法，本質上是比較字符串，於是會出現如下狀況

let arr1 = [3,10,2]
 console.log(arr1.sort()) // [10, 2, 3]
 console.log(arr1) // [10, 2, 3]
複製代碼

這是由於'10'和'2'會先比較'1',於是10在最前，改進方法以下，編寫一個比較函數

• 交換返回值的意思是讓更小的值排位更靠前

let arr1 = [3,10,2]
 console.log(arr1.sort(compare)) // [2, 3, 10]
 console.log(arr1) // [2, 3, 10]
 function compare(value1, value2) { 
   if (value1 < value2) { 
       return -1; 
   } else if (value1 > value2) { 
       return 1; 
   } else { 
       return 0; 
   } 
} 
複製代碼

9. reverse()

arrayObject.reverse()

• 反轉數組，返回反轉後的數組
• 改變原數組

let arr1 = [1, 2, 3]
  console.log(arr1.reverse()) // [3, 2, 1]
  console.log(arr1) // [3, 2, 1]
複製代碼

10. join()

arrayObject.join(separator)

• 以指定字符分割數組，返回分割後的字符串
• 若參數不填，則默認以','爲分割符
• 不改變原數組

let arr1 = [1,2,3]
  console.log(arr1.join()) // 1,2,3
  console.log(arr1.join('!')) // 1!2!3
  console.log(arr1) // [1, 2, 3]
複製代碼

Array的遍歷方法

1. forEach()

array.forEach(function(currentValue, index, arr), thisValue)

• 遍歷數組每個元素，並在回調函數中處理
• 不改變原數組

let arr = [1,2,3], newArr = []
  arr.forEach(item => newArr.push(++item))
  console.log(arr) // [1, 2, 3]
  console.log(newArr) // [2, 3, 4]
複製代碼

2. map()

array.map(function(currentValue,index,arr), thisValue)

• 遍歷數組每一項，並返回操做後的數組
• 不改變原數組
• thisValue 綁定回調函數的this上下文

let arr = [1,2,3], newArr = []
  newArr = arr.map(function (item, index, array) {
    console.log(this) // {a: 1}
    return ++item
  }, {a: 1})
  console.log(arr) // [1, 2, 3]
  console.log(newArr) // [2, 3, 4]
複製代碼

3. filter()

array.filter(function(currentValue,index,arr), thisValue)

• 遍歷數組每一項，並在回調中處理，返回符合條件的新數組
• 不改變原數組

let arr = [1,2,3], newArr = []
  newArr = arr.filter(item => item >=2)
  console.log(arr) // [1, 2, 3]
  console.log(newArr) // [2, 3]
複製代碼

4. every()

array.every(function(currentValue,index,arr), thisValue)

• 遍歷數組每一項，經過回調判斷是否符合條件
• 如有一項不符合，則返回false，不繼續執行；若所有符合則返回true
• 不改變原數組

let arr = [1,2,3], newArr = []
  let isTrue = arr.every(item => item > 0)
  console.log(arr) // [1, 2, 3]
  console.log(isTrue) // true
複製代碼

如何判斷是否爲Array

isArray()

let arr = [1, 2, 3]
  Array.isArray(arr) // true
複製代碼

instanceof

• 判斷被檢測對象是非爲構造函數的實例
• 原理：左側被檢測對象的原型鏈上是否包含右側構造函數的prototype屬性

let arr = [1, 2, 3]
  arr instanceof Array // true
複製代碼

constructor

• constructor 屬性返回對象的構造函數, 數組對象的構造函數爲Array

let arr = [1, 2, 3]
  arr.constructor === Array // true
  arr.constructor // ƒ Array() { [native code] }
複製代碼

不一樣對象的constructor

function f () {}
   console.log([].constructor)    // ƒ Array() { [native code] }
   console.log({}.constructor)    // ƒ Object() { [native code] }
   console.log(f.constructor)     // ƒ Function() { [native code] }
   console.log((123).constructor) // ƒ Number() { [native code] }
   console.log('123'.constructor) // ƒ String() { [native code] }
   console.log(true.constructor)  // ƒ Boolean() { [native code] }
複製代碼

手動實現Array的方法

Array.map()

自己用法：

Array.map(function(item, index, arr){}, thisValue)

• 返回處理後的新數組
• map自己接受兩個參數，一個函數，一個對象上下文
• 函數內三個參數分別爲：元素自己，元素下標、原數組
• 對象上下文的做用是綁定函數的this指向

實現原理：

Array.prototype.map = function (fn, context) {
    let newArray = []
    for(let i=0;i<this.length;i++){
        // 經過call()來綁定回調函數的上下文
        newArray.push(fn.call(context, this[i], i, this)) 
    }
    return newArray
}
複製代碼

• fn爲回調函數，context爲傳入的對象上下文
• 咱們給fn使用call()來綁定fn的上下文，call當即執行，並將執行結果push到新數組中

Array.filter()

自己用法：

Array.filter(function(item, index ,array){}, thisValue)

• 返回符合條件的新數組
• map自己接受兩個參數，一個函數，一個對象上下文
• 函數內三個參數分別爲：元素自己，元素下標、原數組
• 對象上下文的做用是綁定函數的this指向

實現原理：

Array.prototype.filter = function (fn, context) {
    let newArray = []
    for (let i=0;i<this.length;i++) {
        if(fn.call(context, this[i], i, this)) {
            newArray.push(this[i])
        }
    }
    return newArray
}
複製代碼

• 由於fn.call(···)返回是布爾類型，因此要先進行判斷，若爲真則添加到新數組中