前言
數(shù)組的api比較多犬庇，下面主要列舉一些常用的api實(shí)現(xiàn)喘鸟，主要是參考MDN上Array的Polyfill來實(shí)現(xiàn)的项乒。
MDN鏈接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
forEach
forEach主要用于遍歷數(shù)組
/**
* @description: forEach簡單實(shí)現(xiàn)
* @param {Function} callback 回調(diào)函數(shù) 函數(shù)中接受（當(dāng)前遍歷的元素肝劲，當(dāng)前遍歷索引，當(dāng)前遍歷的數(shù)組）三個參數(shù)
* @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 // 數(shù)組長度
while (++index !== len) {
if (index in this) { // 數(shù)組下標(biāo)非連續(xù)的情況
callback.call(thisArg, this[index], index, this)
}
}
}
filter
filter主要用于過濾數(shù)組
/**
* @description: filter簡單實(shí)現(xiàn)
* @param {Function} callback 回調(diào)函數(shù) 函數(shù)中接受（當(dāng)前遍歷的元素担敌，當(dāng)前遍歷索引摔敛，當(dāng)前遍歷的數(shù)組）三個參數(shù)
* @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 // 索引、返回新數(shù)組索引
const { length: len } = this // 原數(shù)組長度
const result = [] // 返回的新數(shù)組
while (++index !== len) {
if (index in this) { // 數(shù)組下標(biāo)非連續(xù)的情況
if (callback.call(thisArg, this[index], index, this)) {
result[newIdx++] = this[index]
}
}
}
return result
}
map
map中callback必須要有返回值全封，結(jié)果返回一個由callback返回值組成的新數(shù)組马昙。
/**
* @description: map簡單實(shí)現(xiàn)
* @param {Function} callback 回調(diào)函數(shù) 函數(shù)中接受（當(dāng)前遍歷的元素，當(dāng)前遍歷索引刹悴，當(dāng)前遍歷的數(shù)組）三個參數(shù)
* @param {Any} thisArg 傳入可以改變callback的this指向
* @return {Array} 返回callback返回值組成的新數(shù)組
*/
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 // 數(shù)組長度
const result = [] // 返回的新數(shù)組
while (++index !== len) {
if (index in this) { // 數(shù)組下標(biāo)非連續(xù)的情況
result[index] = callback.call(thisArg, this[index], index, this)
}
}
return result
}
reduce
reduce相對比較復(fù)雜行楞，需要判斷是否傳入初始值，并且每次循環(huán)的結(jié)果要傳遞到下一次循環(huán)當(dāng)中颂跨。
/**
* @description: reduce簡單實(shí)現(xiàn)
* @param {Function} callback 回調(diào)函數(shù) 函數(shù)中接受（當(dāng)前遍歷的元素敢伸，當(dāng)前遍歷索引，當(dāng)前遍歷的數(shù)組）三個參數(shù)
* @param {Any} thisArg 傳入可以改變callback的this指向
*/
Array.prototype._reduce = function (...args) {
const callback = args[0] // 回調(diào)函數(shù)
const { length: len } = this // 數(shù)組長度
const { length: argLen } = args // 參數(shù)長度
let index = -1 // 數(shù)組下標(biāo)
let result
if (typeof callback !== "function") {
throw new TypeError(callback + ' is not a function')
}
// 存在第二個參數(shù)恒削，作為函數(shù)的初始值initialValue
if (argLen >= 2) {
result = args[1]
} else {
// 找到數(shù)組第一項(xiàng)的下標(biāo)
while (index < len && !(index in this)) {
index++
}
// 數(shù)組為空并且沒有初始值的情況
if (index >= len) {
throw new TypeError('Reduce of empty array with no initial value')
}
result = arr[index++]
}
while (++index !== len) {
if (index in this) {
// 將每次返回的結(jié)果傳入下一次循環(huán)
result = callback(result, this[index], index, this)
}
}
return result
}
find
find找到符合條件的項(xiàng)就返回，沒有找到返回undefined尾序。
/**
* @description: find簡單實(shí)現(xiàn)
* @param {Function} callback 回調(diào)函數(shù) 函數(shù)中接受（當(dāng)前遍歷的元素钓丰，當(dāng)前遍歷索引，當(dāng)前遍歷的數(shù)組）三個參數(shù)
* @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 // 原數(shù)組長度
while (++index !== len) {
if (callback.call(thisArg, this[index], index, this)) {
return this[index] // 如果是findIndex則return index
}
}
}
some
some和find除了返回值實(shí)現(xiàn)步驟一樣
/**
* @description: some簡單實(shí)現(xiàn)
* @param {Function} callback 回調(diào)函數(shù) 函數(shù)中接受（當(dāng)前遍歷的元素每币，當(dāng)前遍歷索引携丁，當(dāng)前遍歷的數(shù)組）三個參數(shù)
* @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 // 原數(shù)組長度
while (++index !== len) {
if (callback.call(thisArg, this[index], index, this)) {
return true
}
}
return false
}
every
every和some也差不多，只有全部符合條件才返回true兰怠，有一項(xiàng)不符合就返回false梦鉴。
/**
* @description: every簡單實(shí)現(xiàn)
* @param {Function} callback 回調(diào)函數(shù) 函數(shù)中接受（當(dāng)前遍歷的元素，當(dāng)前遍歷索引揭保，當(dāng)前遍歷的數(shù)組）三個參數(shù)
* @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 // 原數(shù)組長度
while (++index !== len) {
if (!callback.call(thisArg, this[index], index, this)) {
return false
}
}
return true
}
先寫這么多肥橙，后面再補(bǔ)充其他的。
