手動實現reduce方法和splice方法

今天花了一點時間手寫了比較常用的一些方法的原始碼，其中，reduce和splice這兩個方法比別的略微複雜點，就分享一下啦~

splice(stratindex,delcount,ele1,ele2...)該方法表示從startindex下標開始，刪除delcount個陣列元素，然後在startindex處新增乙個或多個元素（該方法會對陣列產生影響）

例如

let arr =[10
,20,30
,40,50
];let arr1 = arr.
splice(2
,1);
//如果delcount不寫，預設刪除後面所有
console.
log(arr1)
;// 返回包含被刪除元素的陣列 [30]
console.
log(arr)
;//對原陣列產生影響 [10, 20, 40, 50]

let arr =[10
,20,30
,40,50
];let arr1 = arr.
splice(2
,1,11
,22);
console.
log(arr1)
;//  [30]
console.
log(arr)
;//返回了插入新元素的陣列 [10, 20, 11, 22, 40, 50]

我的邏輯分四步：

處理startindex，delcount邊緣化的情況（例如初始下標小於0或者大於陣列長度，刪除數量小於0或刪除數量比能刪的數量多的情況）

獲取刪除元素，並新增到新陣列中（這個比較簡單，遍歷完事~）

移動原陣列（主要考慮三種情況：刪除數量大於/小於/等於新增數量；這個關係到原陣列是向前還是向後移動了）

新增新元素到原陣列中（由於上一步「移動原陣列」，已經給新元素騰好位了，所以這一步也只是簡單的遍歷啦

下面來捋捋順哈！先給個大綱

array.prototype.
mysplice
=function
(startindex, delcount,
...addelements)
array.length = len -delcount + addcount;
return delarr;
}

然後就是分別給出上面四點的具體實現**~

（例如初始下標小於0或者大於陣列長度，刪除數量小於0或刪除數量比能刪的數量多的情況）

const
computedstartindex
=function
(startindex, len)
//startindex>len 不刪除了
return startindex > len ? len : startindex;
}const
computeddelcount
=function
(startindex, delcount, len)
//delcount太大
else
if(delcount > len - startindex)
//delcountindex為負數
else
if(delcount <0)
return delcount;
}

（這個比較簡單，遍歷完事~）

const
slicedelelements
=function
(delarr, array, startindex)
return delarr;
}

（主要考慮三種情況：刪除數量大於/小於/等於新增數量；這個關係到原陣列是向前還是向後移動了

const
removearr
=function
(array, startindex, delcount, addcount)
}// 刪除數量大於增加數量，陣列向前移動
else
if(delcount > addcount)
// 刪除冗餘元素
for(
let i = array.length -
1; i >= array.length - delcount + addcount; i--)}
// 刪除數量等於增加數量 ，陣列不變
else
}

（由於上一步「移動原陣列」，已經給新元素騰好位了，所以這一步也只是簡單的遍歷啦

這一部分的**寫在「大綱」裡面了

最後檢驗一下~（可以自己執行一遍試試看，結果就不貼了）

let arr =[10
,20,30
,40,50
];let arr1 = arr.
mysplice(-
2);console.
log(arr1)
;console.
log(arr)

ps：這裡參考了這篇文章，如果看到這裡還整不明白實現splice的思路，可以點進去看看~

陣列中用來迭代遍歷每一項的。可以把每一次處理的結果都拿到，在第一次處理的基礎上，進行二次處理……直到陣列遍歷完成

reduce(callback(result,item,currentindex,arr),value)

和callback的同級別中，如果傳遞了value值，則第一次執行callback，result儲存的引數資訊value的值。同時item迭代的是陣列的第一項；如果不傳value，result是陣列第一項，同時item是陣列第二項（注：value可選）

value沒有傳值的情況：

let arr =[10
,20,30
,40,50
];let add = arr.
reduce
((result,item,i)
=>
)

value有傳值的情況：

let arr =[10
,20,30
,40,50
];let add = arr.
reduce
((result,item,i)
=>,0
)

這個函式經常被人們用來當作「累加器」，因為陣列會迭代每一項，並且每一次處理的結果，都會儲存到result裡面，下次迭代的時候，可以對上一次處理的結果，進行二次處理

例如這個簡單的累加

let arr =[10
,20,30
,40,50
];let add = arr.
reduce
((result,item,i)
=>
)console.
log(add)
;//150

徹底了解了reduce這個方法後，開始來捋捋思路了

方法對原陣列是不產生影響的（所以一開始就要把陣列拷貝乙份）

value有無傳值的影響（有傳值,item是第一項，index=0 ；沒有傳值，則item是陣列的第2項，index=1

如果原陣列只有一項，且沒有傳值的情況（一般沒有傳值的話，item是陣列第二項，既然沒有第二項了，那麼就直接返回result

下面直接貼**了

function
myreduce
(arr,callback,init)
let item = arr[i]
,            index = i;
result =
callback
(result,item,index);}
return result;
}

測試！

console.
log(
"*****=沒有傳值*****="
)let result1 =
myreduce
(arr,
function
(result,item,index)
)console.
log(result1)
//*****
console.
log(
"*****=有傳值*****="
)//*****==
let result2 =
myreduce
(arr,
function
(result,item,index),0
)console.
log(result2)

希望我把思路給你捋明白了！能看到這裡的你，一定很棒！

如何手動實現reduce 方法函式

與map 的實現 filter 的實現中的迭代方法不一樣，reduce 是歸併方法。reduce 接收兩個引數第二個可選引數是作為歸併基礎的初始值 reduce 方法返回乙個最終的值。表示 arr.reduce function prev,cur,index,arr initialvalue 與之...

reduce方法和reduceRight方法

什麼是reduce方法？先來看一下用用法 var arr 1,2,3,4 var sum a,b a b arr.reduce sum,0 10由上面可以看出，reduce對陣列arr的每乙個成員執行了sum函式。sum的引數a是累積變數，引數b是當前的陣列成員。每次執行時，b會回到a,最後輸出a...

reduce 方法實現 webpack 多檔案入口

這篇日誌，在開始接觸 webpack 時候就該寫了，現在發布也許對一些剛入此坑的童鞋能些許幫助。即使有點 low，重要的仍是分享 reduce 函式的設計意圖就是方便進行疊加運算 var arr 0,1,2,3 reduce 實現累加 var total arr.reduce function pr...

手動實現reduce方法和splice方法

如何手動實現reduce 方法函式

reduce方法和reduceRight方法

reduce 方法實現 webpack 多檔案入口

相關推薦