js-手写数组常用方法的实现
# js-手写数组常用方法的实现
# 前言
数组的 api 比较多,下面主要列举一些常用的 api 实现,主要是参考 MDN 上 Array 的 Polyfill 来实现的。
MDN 链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
# forEach
forEach 主要用于遍历数组
/**
* @description: forEach简单实现
* @param {Function} callback 回调函数 函数中接受(当前遍历的元素,当前遍历索引,当前遍历的数组)三个参数
* @param {Any} thisArg 传入可以改变callback的this指向
*/
Array.prototype._forEach = function (callback, thisArg) {
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function')
}
let index = -1 // 索引
const { length: len } = this // 数组长度
while (++index !== len) {
if (index in this) {
// 数组下标非连续的情况
callback.call(thisArg, this[index], index, this)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# filter
filter 主要用于过滤数组
/**
* @description: filter简单实现
* @param {Function} callback 回调函数 函数中接受(当前遍历的元素,当前遍历索引,当前遍历的数组)三个参数
* @param {Any} thisArg 传入可以改变callback的this指向
*/
Array.prototype._filter = function (callback, thisArg) {
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function')
}
let index = -1,
newIdx = 0 // 索引、返回新数组索引
const { length: len } = this // 原数组长度
const result = [] // 返回的新数组
while (++index !== len) {
if (index in this) {
// 数组下标非连续的情况
if (callback.call(thisArg, this[index], index, this)) {
result[newIdx++] = this[index]
}
}
}
return result
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# map
map 中 callback 必须要有返回值,结果返回一个由 callback 返回值组成的新数组。
/**
* @description: map简单实现
* @param {Function} callback 回调函数 函数中接受(当前遍历的元素,当前遍历索引,当前遍历的数组)三个参数
* @param {Any} thisArg 传入可以改变callback的this指向
* @return {Array} 返回callback返回值组成的新数组
*/
Array.prototype._map = function (callback, thisArg) {
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function')
}
let index = -1 // 索引
const { length: len } = this // 数组长度
const result = [] // 返回的新数组
while (++index !== len) {
if (index in this) {
// 数组下标非连续的情况
result[index] = callback.call(thisArg, this[index], index, this)
}
}
return result
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# reduce
reduce 相对比较复杂,需要判断是否传入初始值,并且每次循环的结果要传递到下一次循环当中。
/**
* @description: reduce简单实现
* @param {Function} callback 回调函数 函数中接受(当前遍历的元素,当前遍历索引,当前遍历的数组)三个参数
* @param {Any} thisArg 传入可以改变callback的this指向
*/
Array.prototype._reduce = function (...args) {
const callback = args[0] // 回调函数
const { length: len } = this // 数组长度
const { length: argLen } = args // 参数长度
let index = -1 // 数组下标
let result
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function')
}
// 存在第二个参数,作为函数的初始值initialValue
if (argLen >= 2) {
result = args[1]
} else {
// 找到数组第一项的下标
while (index < len && !(index in this)) {
index++
}
// 数组为空并且没有初始值的情况
if (index >= len) {
throw new TypeError('Reduce of empty array with no initial value')
}
result = arr[index++]
}
while (++index !== len) {
if (index in this) {
// 将每次返回的结果传入下一次循环
result = callback(result, this[index], index, this)
}
}
return result
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
# find
find 找到符合条件的项就返回,没有找到返回 undefined。
/**
* @description: find简单实现
* @param {Function} callback 回调函数 函数中接受(当前遍历的元素,当前遍历索引,当前遍历的数组)三个参数
* @param {Any} thisArg 传入可以改变callback的this指向
*/
Array.prototype._find = function (callback, thisArg) {
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function')
}
let index = -1 // 索引
const { length: len } = this // 原数组长度
while (++index !== len) {
if (callback.call(thisArg, this[index], index, this)) {
return this[index] // 如果是findIndex则return index
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# some
some 和 find 除了返回值实现步骤一样
/**
* @description: some简单实现
* @param {Function} callback 回调函数 函数中接受(当前遍历的元素,当前遍历索引,当前遍历的数组)三个参数
* @param {Any} thisArg 传入可以改变callback的this指向
*/
Array.prototype._some = function (callback, thisArg) {
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function')
}
let index = -1 // 索引
const { length: len } = this // 原数组长度
while (++index !== len) {
if (callback.call(thisArg, this[index], index, this)) {
return true
}
}
return false
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# every
every 和 some 也差不多,只有全部符合条件才返回 true,有一项不符合就返回 false。
/**
* @description: every简单实现
* @param {Function} callback 回调函数 函数中接受(当前遍历的元素,当前遍历索引,当前遍历的数组)三个参数
* @param {Any} thisArg 传入可以改变callback的this指向
*/
Array.prototype._every = function (callback, thisArg) {
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function')
}
let index = -1 // 索引
const { length: len } = this // 原数组长度
while (++index !== len) {
if (!callback.call(thisArg, this[index], index, this)) {
return false
}
}
return true
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
编辑 (opens new window)
上次更新: 2022/03/19, 16:48:28