1. 程式人生 > >JS -- 手動實現陣列原生方法

JS -- 手動實現陣列原生方法

此文章將會介紹陣列大部分的原生方法的用法,並自己實現一個具有相同功能的方法,不定期更新。順序暫時看起來比較亂,所有方法都寫完後會重新整理一下。

目錄

零丶概述

零丶概述

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
}