JS -- 手動實現陣列原生方法
阿新 • • 發佈:2018-12-09
此文章將會介紹陣列大部分的原生方法的用法,並自己實現一個具有相同功能的方法,不定期更新。順序暫時看起來比較亂,所有方法都寫完後會重新整理一下。
目錄
零丶概述
JS原生陣列方法的引數都大致符合下面這個通式,針對不同的引數,會特別說明。
arr.method( function (value, index, arr) {
// value : 必選,當前元素
// index : 可選,當前元素索引值
// arr : 可選,當前陣列
// thisValue : 可選,替換當前的this指向
}, thisValue)
大致將陣列方法分為兩類,一類是改變原陣列的方法,一類是不改變原陣列的方法。
// 1. 改變原陣列
arr.push();
arr.pop();
arr.unshift();
arr.shift();
arr.reverse();
arr.solice();
arr.sort();
// 2. 不改變原陣列
arr.concat();
arr.toString();
arr.slice();
arr.join();
arr.split();
arr.forEach();
arr.map();
arr.filter();
一丶forEach()
forEach() 方法用於呼叫陣列的每個元素,並將元素傳遞給回撥函式。
forEach() 沒有什麼好說的,就是遍歷陣列的所有元素,需要注意的就是此方法不會改變原陣列。直接上實現程式碼
Array.prototype.myForEach = function (fn, callback) {
if (typeof fn === 'function') {
for(var i = 0, len = this.length; i < len; i ++) {
fn.call(callback, this[i], i, this)
}
}
}
二丶map()
map() 方法返回一個新陣列,陣列中的元素為原始陣列元素呼叫函式處理後的值。
map() 就相當於是在 forEach() 方法上的擴充套件,遍歷所有元素並以相同的規則改變元素後返回一個新陣列。用法如下
var arr = [1, 2, 3, 4]
var newArr = arr.map(function (val, index, arr) {
return val * index
})
console.log(arr) // [1, 2, 3, 4]
console.log(newArr) // [0, 2, 6, 12]
map() 就是加強版的 forEach() ,所以實現方法大致相同,只是多了一個返回新陣列,實現如下
Array.prototype.myMap = function(fn, callback) {
var arr = []
for(var i = 0, len = this.length; i < len; i ++) {
arr.push(fn.call(callback, this[i], i, this))
}
return arr
}
三丶filter()
filter() 方法建立一個新的陣列,新陣列中的元素是通過檢查指定陣列中符合條件的所有元素。
filter 過濾,透過;顧名思義,filter() 就是過濾元素的方法,返回一個由過濾的元素組成的新陣列。用法如下
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var newArr = arr.filter(function(val, index, arr) {
return (val % 2 == 0)
})
console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(newArr) // [2, 4, 6, 8]
filter() 方法實現的重點就在於理解 return 返回值的真假決定了正在遍歷的該元素是否加入新陣列。在實現過程中用到了push()方法,此方法會在後面詳細介紹。
Array.prototype.myFilter = function (fn, callback) {
var arr = []
if (typeof fn === 'function') {
for(var k = 0, length3 = this.length; k < length3; k++){
fn.call(callback, this[k], k, this) && arr.push(this[k])
}
}
return arr
}