20 個程序員需要知道的 JavaScript 數(shù)組方法的實現(xiàn)
作者：佚名
我想你們一定對JavaScript中的數(shù)組非常熟悉，我們每天都會用到它的各種方法，比如push、pop、forEach、map……等等。
我想你們一定對JavaScript中的數(shù)組非常熟悉，我們每天都會用到它的各種方法，比如push、pop、forEach、map……等等。
但是僅僅使用它就足夠了嗎？太棒了，你一定不想在這里停下來。想和你一起挑戰(zhàn)，實現(xiàn)20+個數(shù)組方法的功能。
1. forEach
forEach是我們工作中使用頻率非常高的一個數(shù)組方法，實現(xiàn)起來也比較簡單。這是我們需要完成的第一個功能。
代碼
Array.prototype.forEach2 = function (callback, thisCtx) {
if (typeof callback !== 'function') {
throw `${callback} is not a function`
}
const length = this.length
let i = 0
while (i < length) {
// Deleted, the newly added element index i is not in the array, so it will not be accessed
if (this.hasOwnProperty(i)) {
callback.call(thisCtx, this[ i ], i, this)
}
i++
}
}測試一下
let demoArr = [ 1, 2, 3, 4, , 5 ]
demoArr.forEach2((it, i) => {
if (i === 1) {
// 5 will not be printed out
demoArr.push(5)
} else if (i === 2) {
// 4 will not be printed out, but "4-4" will be printed out
demoArr.splice(3, 1, '4-4')
}
console.log(it)
})
/*
1
2
3
4-4
5
*/哇，恭喜！我們已經(jīng)實現(xiàn)了 forEach 的特性。
2.map
您通常使用map做什么？大多數(shù)時候是將一個數(shù)組轉(zhuǎn)換成另一個數(shù)組。
代碼
Array.prototype.map2 = function (callback, thisCtx) {
if (typeof callback !== 'function') {
throw `${callback} is not a function`
}
const length = this.length
let i = 0
// The return value of the map method is a new array
let newArray = []
while (i < length) {
// Deleted and uninitialized values will not be accessed
if (this.hasOwnProperty(i)) {
newArray.push(callback.call(thisCtx, this[ i ], i, this))
}
i++
}
// Return new array
return newArray
}測試一下
let arr = [ 0, 1, 2, 3, 4,, 5 ]
let arr2 = arr.map2(function (it, i, array) {
console.log(it, i, array, this)
return it * it
}, { name: 'fatfish' })
console.log(arr2) // [0, 1, 4, 9, 16, 25]朋友們，你們覺得不難嗎？那是因為你太優(yōu)秀了。
3. every
every() 方法測試數(shù)組中的所有元素是否通過提供的函數(shù)實現(xiàn)的測試。它返回一個布爾值。
every方法有3個你以前可能沒有注意到的點，它們是什么？
- 在空數(shù)組上調(diào)用 every 方法將返回 true。
- 回調(diào)方法只會被已經(jīng)賦值的索引調(diào)用。
- 如果值被刪除，回調(diào)將不會被調(diào)用
let emptyArr = []
// Calling every method on an empty array returns true
console.log(emptyArr.every((it) => it > 0)) // true
// The `callback` method will only be called by an index that has already been assigned a value.
let arr = [ 0, 1, 2, 3, 4,, 5, -1 ]
// The `callback` method will not be called when an array value is deleted or an index that has never been assigned a value.
delete arr[7]
console.log(arr.every((it) => it >= 0)) // true代碼
Array.prototype.every2 = function (callback, thisCtx) {
if (typeof callback !== 'function') {
throw `${callback} is not a function`
}
const length = this.length
let i = 0
// If the length of the array is 0, the while loop will not be entered
while (i < length) {
// False will be returned as long as a value does not conform to the judgment of callback
if (this.hasOwnProperty(i) && !callback.call(thisCtx, this[ i ], i, this)) {
return false
}
i++
}
return true
}測試一下
let emptyArr = []
// Calling every method on an empty array returns true
console.log(emptyArr.every2((it) => it > 0)) // true
// The `callback` method will only be called by an index that has already been assigned a value.
let arr = [ 0, 1, 2, 3, 4,, 5, -1 ]
// The `callback` method will not be called when an array value is deleted or an index that has never been assigned a value.
delete arr[7]
console.log(arr.every2((it) => it >= 0)) // true4.some
some() 方法測試數(shù)組中的至少一個元素是否通過了由提供的函數(shù)實現(xiàn)的測試。
代碼
Array.prototype.some2 = function (callback, thisCtx) {
if (typeof callback !== 'function') {
throw `${callback} is not a function`
}
const length = this.length
let i = 0
while (i < length) {
// Returns true if any element meets the callback condition
if (this.hasOwnProperty(i) && callback.call(thisCtx, this[ i ], i, this)) {
return true
}
i++
}
return false
}測試一下
let emptyArr = []
// An empty array will return false
console.log(emptyArr.some2((it) => it > 0)) // false
let arr = [ 0, 1, 2, 3, 4,, 5, -1 ]
delete arr[7]
console.log(arr.some2((it) => it < 0)) // false
console.log(arr.some2((it) => it > 0)) // true5. filter
filter() 方法創(chuàng)建一個新數(shù)組，其中包含通過提供的函數(shù)實現(xiàn)的測試的所有元素。
Array.prototype.filter2 = function (callback, thisCtx) {
if (typeof callback !== 'function') {
throw `${callback} is not a function`
}
const length = this.length
// The return value will be a new array
let newArray = []
let i = 0
while (i < length) {
if (this.hasOwnProperty(i) && callback.call(thisCtx, this[ i ], i, this)) {
newArray.push(this[ i ])
}
i++
}
return newArray
}測試一下
// The position with index 5 will not be traversed because it has no initialization value
let arr = [ 0, 1, 2, -3, 4,, 5 ]
// we try to remove the last element
delete arr[6]
// filter out values greater than 0
let filterArr = arr.filter2((it) => it > 0)
console.log(filterArr) // [ 1, 2, 4 ]6. reduce
這個函數(shù)有點復(fù)雜。讓我們用一個例子來看看它是如何使用的。
const sum = [1, 2, 3, 4].reduce((prev, cur) => {
return prev + cur;
})
console.log(sum) // 10
// initialization
prev = initialValue = 1, cur = 2
// step 1
prev = (1 + 2) = 3, cur = 3
// step 2
prev = (3 + 3) = 6, cur = 4
// step 3
prev = (6 + 4) = 10, cur = undefined (quit)代碼
Array.prototype.reduce2 = function (callback, initValue) {
if (typeof callback !== 'function') {
throw `${callback} is not a function`
}
let pre = initValue
let i = 0
const length = this.length
// When the initial value is not passed, use the first value of the array as the initial value
if (typeof pre === 'undefined') {
pre = this[0]
i = 1
}
while (i < length) {
if (this.hasOwnProperty(i)) {
pre = callback(pre, this[ i ], i, this)
}
i++
}
return pre
}測試一下
const sum = [1, 2, 3, 4].reduce2((prev, cur) => {
return prev + cur;
})
console.log(sum) // 107. reduceRight
reduceRight() 方法對累加器和數(shù)組的每個值（從右到左）應(yīng)用函數(shù)以將其減少為單個值。
除了reduceRight是從右向左遍歷之外，它與reduce非常相似。
const sum = [1, 2, 3, 4].reduce((prev, cur) => {
console.log(prev, cur)
return prev + cur;
})
// 1 2
// 3 3
// 6 4
console.log(sum) // 10
const sum2 = [1, 2, 3, 4].reduceRight((prev, cur) => {
console.log(cur)
return prev + cur;
})
// 4 3
// 7 2
// 9 1
console.log(sum2) // 10代碼
Array.prototype.reduceRight2 = function (callback, initValue) {
if (typeof callback !== 'function') {
throw `${callback} is not a function`
}
let pre = initValue
const length = this.length
// Start with the last element
let i = length - 1
// If no initial value is passed, the last element is taken as the initial value
if (typeof pre === 'undefined') {
pre = this[i]
i--
}
while (i >= 0) {
if (this.hasOwnProperty(i)) {
pre = callback(pre, this[ i ], i, this)
}
i--
}
return pre
}測試一下
const sum = [1, 2, 3, 4].reduceRight2((prev, cur) => {
console.log(cur)
return prev + cur;
})
// 4 3
// 7 2
// 9 1
console.log(sum) // 108. find
find() 方法返回提供的數(shù)組中滿足提供的測試函數(shù)的第一個元素。如果沒有值滿足測試函數(shù)，則返回 undefined。
代碼
Array.prototype.find2 = function (callback, thisCtx) {
if (typeof callback !== 'function') {
throw `${callback} is not a function`
}
const length = this.length
let i = 0
while (i < length) {
const value = this[ i ]
// As long as there is an element that matches the logic of the callback function, the element value is returned
if (callback.call(thisCtx, value, i, this)) {
return value
}
i++
}
// otherwise return undefined
return undefined
}測試一下
let arr = [ 0, 1, 2, 3, 4,, 5 ]
let ele = arr.find2(function (it, i, array) {
console.log(it, i, array, this)
return it > 3
}, { name: 'fatfish' })
console.log(ele) // 49. findIndex
findIndex() 方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的索引。否則返回-1，表示沒有元素通過測試。
let arr = [ 0, 1, 2, 3, 4,, 5 ]
let index = arr.findIndex((it, i, array) => {
return it > 2
})
console.log(index) // 3代碼
Array.prototype.findIndex2 = function (callback, thisCtx) {
if (typeof callback !== 'function') {
throw `${callback} is not a function`
}
const length = this.length
let i = 0
while (i < length) {
// Return index i that conforms to callback logic
if (callback.call(thisCtx, this[ i ], i, this)) {
return i
}
i++
}
return -1
}測試一下
let arr = [ 0, 1, 2, 3, 4,, 5 ]
let index = arr.findIndex2(function (it, i, array) {
console.log(it, i, array, this)
return it > 2
}, { name: 'fatfish' })
console.log(index) // 310. indexOf
indexOf() 方法返回可以在數(shù)組中找到給定元素的第一個索引，如果不存在則返回 -1。
arr.indexOf(searchElement[, fromIndex])注意：
如果開始搜索的索引值大于等于數(shù)組長度，則表示不在數(shù)組中進(jìn)行搜索，返回-1。
如果fromIndex為負(fù)數(shù)，則按照-1表示從最后一個元素開始查找，-2表示從倒數(shù)第二個元素開始查找，以此類推。
如果 fromIndex 為負(fù)數(shù)，則仍然從前到后查找數(shù)組。
const array = [2, 5, 9]
console.log(array.indexOf(2)) // 0
console.log(array.indexOf(7)) // -1
console.log(array.indexOf(9, 2)) // 2
console.log(array.indexOf(2, -1)) // -1
console.log(array.indexOf(2, -3)) // 0
console.log(array.indexOf(2, -4)) // 0代碼
Array.prototype.indexOf2 = function (targetEle, fromIndex) {
const length = this.length
fromIndex = +fromIndex || 0
// If the array is empty or the search starts from a place greater than or equal to the length of the array, it will directly return -1
if (length === 0 || fromIndex >= length) {
return -1
}
/*
1. Search elements from fromIndex
2. Use it directly when fromindex is greater than 0
3. If it is less than 0, first subtract the absolute value of fromIndex from the length. If it is still less than 0, take 0 directly
*/
let i = Math.max(fromIndex >= 0 ? fromIndex : length - Math.abs(fromIndex), 0)
while (i < length) {
// element in the array and equal to targetEle
if (this.hasOwnProperty(i) && targetEle === this[ i ]) {
return i
}
i++
}
return -1
}測試一下
const array = [2, 5, 9]
console.log(array.indexOf2(2)) // 0
console.log(array.indexOf2(7)) // -1
console.log(array.indexOf2(9, 2)) // 2
console.log(array.indexOf2(2, -1)) // -1
console.log(array.indexOf2(2, -3)) // 0
console.log(array.indexOf2(2, -4)) // 011. lastIndexOf
lastIndexOf() 方法返回可以在數(shù)組中找到給定元素的最后一個索引，如果不存在則返回 -1。從 fromIndex 開始向后搜索數(shù)組。
除了 lastIndexOf 從右到左遍歷之外，它與 indexOf 非常相似。
let array = [2, 5, 9, 2]
console.log(array.lastIndexOf(2)) // 3
console.log(array.lastIndexOf(7)) // -1
console.log(array.lastIndexOf(2, 3)) // 3
console.log(array.lastIndexOf(2, 2)) // 0
console.log(array.lastIndexOf(2, -2)) // 0
console.log(array.lastIndexOf(2, -1)) // 3代碼
Array.prototype.lastIndexOf2 = function (targetEle, fromIndex) {
const length = this.length
fromIndex = typeof fromIndex === 'undefined' ? length - 1 : fromIndex
// // Empty array, when fromIndex is negative and the absolute value is greater than the length of the array, the method returns -1, that is, the array will not be searched.
if (length === 0 || fromIndex < 0 && Math.abs(fromIndex) >= length) {
return -1
}
let i
if (fromIndex >= 0) {
// If `fromIndex` is greater than or equal to the length of the array, the entire array is searched.
i = Math.min(fromIndex, length - 1)
} else {
i = length - Math.abs(fromIndex)
}
while (i >= 0) {
// Returns the index when it is equal to targetEle
if (i in this && targetEle === this[ i ]) {
return i
}
i--
}
// Returns -1 when the current value is not found
return -1
}測試一下
let array = [2, 5, 9, 2]
console.log(array.lastIndexOf2(2)) // 3
console.log(array.lastIndexOf2(7)) // -1
console.log(array.lastIndexOf2(2, 3)) // 3
console.log(array.lastIndexOf2(2, 2)) // 0
console.log(array.lastIndexOf2(2, -2)) // 0
console.log(array.lastIndexOf2(2, -1)) // 312. includes
includes() 方法確定數(shù)組是否在其條目中包含某個值，并根據(jù)需要返回 true 或 false。
arr.includes(valueToFind[, fromIndex])注意:
includes 方法將從 fromIndex 索引開始搜索 valueToFind。
如果 fromIndex 為負(fù)數(shù)，則開始搜索 array.length + fromIndex 的索引。
如果數(shù)組中存在 NaN，則 [..., NaN] Includes (NaN) 為真。
console.log([1, 2, 3].includes(2)) // true
console.log([1, 2, 3].includes(4)) // false
console.log([1, 2, 3].includes(3, 3)) // false
console.log([1, 2, 3].includes(3, -1)) // true
console.log([1, 2, NaN].includes(NaN)) // true代碼
Array.prototype.includes2 = function (targetEle, fromIndex) {
const length = this.length
fromIndex = +fromIndex || 0
if (length === 0 || fromIndex >= length) {
return false
}
// Search for elements from the position of fromIndex
let i = Math.max(fromIndex >= 0 ? fromIndex : length - Math.abs(fromIndex), 0)
while (i < length) {
const value = this[ i ]
// Please note NaN
if (targetEle === value || typeof targetEle === 'number' && typeof value === 'number' && isNaN(targetEle) && isNaN(value)) {
return true
}
i++
}
return false
}測試一下
console.log([1, 2, 3].includes2(2)) // true
console.log([1, 2, 3].includes2(4)) // false
console.log([1, 2, 3].includes2(3, 3)) // false
console.log([1, 2, 3].includes2(3, -1)) // true
console.log([1, 2, NaN].includes2(NaN)) // true13. push
push() 方法將一個或多個元素添加到數(shù)組的末尾并返回數(shù)組的新長度。
const animals = ['pigs', 'goats', 'sheep']
animals.push('cows')
console.log(animals, animals.length)
// ["pigs", "goats", "sheep", "cows"], 4
animals.push('chickens', 'cats', 'dogs')
console.log(animals, animals.length)
// ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"], 7代碼
Array.prototype.push2 = function (...pushEles) {
const pushEleLength = pushEles.length
const length = this.length
let i = 0
while (i < pushEleLength) {
this[ length + i ] = pushEles[ i ]
i++
}
return this.length
}測試一下
const animals = ['pigs', 'goats', 'sheep']
animals.push2('cows')
console.log(animals, animals.length)
// ["pigs", "goats", "sheep", "cows"], 4
animals.push2('chickens', 'cats', 'dogs')
console.log(animals, animals.length)
// ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"], 714. pop
pop() 方法從數(shù)組中刪除最后一個元素并返回該元素。此方法更改數(shù)組的長度。
let arr = [ 1, 2 ]
let arr2 = []
console.log(arr.pop(), arr) // 2 [1]
console.log(arr2.pop(), arr2) // undefined []代碼
Array.prototype.pop2 = function () {
const length = this.length
// If it is an empty array, return undefined
if (length === 0) {
return undefined
}
const delEle = this[ length - 1 ]
this.length = length - 1
return delEle
}測試一下
let arr = [ 1, 2 ]
let arr2 = []
console.log(arr.pop2(), arr) // 2 [1]
console.log(arr2.pop2(), arr2) // undefined []15. unshift
unshift() 方法將一個或多個元素添加到數(shù)組的開頭并返回數(shù)組的新長度。
如果傳入多個參數(shù)調(diào)用一次unshift，與傳入一個參數(shù)多次調(diào)用unshift（比如循環(huán)調(diào)用）得到的結(jié)果是不同的。
let arr = [4,5,6]
// Insert multiple elements at once
arr.unshift(1,2,3)
console.log(arr) // [1, 2, 3, 4, 5, 6]
let arr2 = [4,5,6]
// Insert multiple times
arr2.unshift(1)
arr2.unshift(2)
arr2.unshift(3)
console.log(arr2); // [3, 2, 1, 4, 5, 6]代碼
Array.prototype.unshift2 = function (...unshiftEles) {
// With "...", Insert the element to be added in front of the array
let newArray = [ ...unshiftEles, ...this ]
let length = newArray.length
let i = 0
if (unshiftEles.length === 0) {
return length
}
// Recopy to array
while (i < length) {
this[ i ] = newArray[ i ]
i++
}
return this.length
}測試一下
let arr = [4,5,6]
// Insert multiple elements at once
arr.unshift2(1,2,3)
console.log(arr) // [1, 2, 3, 4, 5, 6]
let arr2 = [4,5,6]
// Insert multiple times
arr2.unshift2(1)
arr2.unshift2(2)
arr2.unshift2(3)
console.log(arr2); // [3, 2, 1, 4, 5, 6]16. shift
shift() 方法從數(shù)組中刪除第一個元素并返回刪除的元素。此方法更改數(shù)組的長度。
let arr = [ 1, 2 ]
console.log(arr.shift(), arr) // 1 [2]
console.log(arr.shift(), arr) // 2 []代碼
Array.prototype.shift2 = function () {
const length = this.length
const delValue = this[ 0 ]
let i = 1
while (i < length) {
// Starting from the first element, the following elements move forward one bit
this[ i - 1 ] = this[ i ]
i++
}
// Set the length of the array
this.length = length - 1
// Return deleted value
return delValue
}測試一下
let arr = [ 1, 2 ]
console.log(arr.shift2(), arr) // 1 [2]
console.log(arr.shift2(), arr) // 2 []17. reverse
reverse() 方法原地反轉(zhuǎn)數(shù)組。第一個數(shù)組元素成為最后一個，最后一個數(shù)組元素成為第一個。
const arr = [1, 2, 3]
console.log(arr) // [1, 2, 3]
arr.reverse()
console.log(arr) // [3, 2, 1]代碼
Array.prototype.reverse2 = function () {
let i = 0
let j = this.length - 1
while (i < j) {
[ this[ i ], this[ j ] ] = [ this[ j ], this[ i ] ]
i++
j--
}
return this
}測試一下
const arr = [1, 2, 3]
console.log(arr) // [1, 2, 3]
arr.reverse2()
console.log(arr) // [3, 2, 1]18. fill
fill() 方法將數(shù)組中的所有元素更改為靜態(tài)值，從起始索引（默認(rèn) 0）到結(jié)束索引（默認(rèn) array.length）。 它返回修改后的數(shù)組。
const array1 = [1, 2, 3, 4];
console.log(array1.fill(0, 2, 4)) // [1, 2, 0, 0]
console.log(array1.fill(5, 1)) // [1, 5, 5, 5]
console.log(array1.fill(6)) // [6, 6, 6, 6]代碼
Array.prototype.fill2 = function (value, start, end) {
const length = this.length
start = start >> 0
// The default value of end is length
end = typeof end === 'undefined' ? length : end >> 0
// The minimum value of start is 0 and the maximum value is length
start = start >= 0 ? Math.min(start, length) : Math.max(start + length, 0)
// The minimum value of end is 0 and the maximum value is length
end = end >= 0 ? Math.min(end, length) : Math.max(end + length, 0)
// The element that fills the specified range is value
while (start < end) {
this[ start ] = value
start++
}
return this
}測試一下
const array1 = [1, 2, 3, 4];
console.log(array1.fill2(0, 2, 4)) // [1, 2, 0, 0]
console.log(array1.fill2(5, 1)) // [1, 5, 5, 5]
console.log(array1.fill2(6)) // [6, 6, 6, 6]19. concat
concat() 方法用于合并兩個或多個數(shù)組。 此方法不會更改現(xiàn)有數(shù)組，而是返回一個新數(shù)組。
let num1 = [[1]]
let num2 = [2, [3]]
let num3=[5,[6]]
let nums = num1.concat(num2) // [[1], 2, [3]]
let nums2 = num1.concat(4, num3) // [[1], 4, 5,[6]]代碼
Array.prototype.concat2 = function (...concatEles) {
const length = concatEles.length
// The array itself needs to be expanded one layer
let newArray = [ ...this ]
let i = 0
while (i < length) {
const value = concatEles[ i ]
Array.isArray(value) ? newArray.push(...value) : newArray.push(value)
i++
}
return newArray
}測試一下
let num1 = [[1]]
let num2 = [2, [3]]
let num3=[5,[6]]
let nums = num1.concat2(num2) // [[1], 2, [3]]
let nums2 = num1.concat2(4, num3) // [[1], 4, 5,[6]]20. join
join() 方法通過連接數(shù)組（或類似數(shù)組的對象）中的所有元素來創(chuàng)建并返回一個新字符串，以逗號或指定的分隔符字符串分隔。 如果數(shù)組只有一項，則將在不使用分隔符的情況下返回該項。
const elements = ['Fire', 'Air', 'Water']
const elements2 = ['Fire']
console.log(elements.join()) // Fire,Air,Water
console.log(elements.join('')) // FireAirWater
console.log(elements.join('-')) // Fire-Air-Water
console.log(elements2.join('-')) // Fire代碼
Array.prototype.join2 = function (format = ',') {
const length = this.length
// Save the last element because it does not participate in the connection of format
let lastEle = this[ length - 1 ]
let string = ''
if (length === 0) {
return string
}
for (i = 0; i < length - 1; i++) {
string += this[ i ] + format
}
return string + lastEle
}測試一下
const elements = ['Fire', 'Air', 'Water']
const elements2 = ['Fire']
console.log(elements.join2()) // Fire,Air,Water
console.log(elements.join2('')) // FireAirWater
console.log(elements.join2('-')) // Fire-Air-Water
console.log(elements2.join2('-')) // Fire最后
感謝您的閱讀，同時，也期待您的關(guān)注，閱讀更多優(yōu)質(zhì)文章。
責(zé)任編輯：華軒
來源：
web前端開發(fā)
