今天花了一點時間手寫了比較常用的一些方法的原始碼,其中,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
}
這一部分的**寫在「大綱」裡面了
最後檢驗一下~(可以自己執行一遍試試看,結果就不貼了)
ps:這裡參考了這篇文章,如果看到這裡還整不明白實現splice的思路,可以點進去看看~let arr =[10
,20,30
,40,50
];let arr1 = arr.
mysplice(-
2);console.
log(arr1)
;console.
log(arr)
陣列中用來迭代遍歷每一項的。可以把每一次處理的結果都拿到,在第一次處理的基礎上,進行二次處理……直到陣列遍歷完成
reduce(callback(result,item,currentindex,arr),value)
和callback的同級別中,如果傳遞了value值,則第一次執行callback,result儲存的引數資訊value的值。同時item迭代的是陣列的第一項;如果不傳value,result是陣列第一項,同時item是陣列第二項(注:value可選)
value沒有傳值的情況:
value有傳值的情況:let arr =[10
,20,30
,40,50
];let add = arr.
reduce
((result,item,i)
=>
)
這個函式經常被人們用來當作「累加器」,因為陣列會迭代每一項,並且每一次處理的結果,都會儲存到result裡面,下次迭代的時候,可以對上一次處理的結果,進行二次處理let arr =[10
,20,30
,40,50
];let add = arr.
reduce
((result,item,i)
=>,0
)
例如這個簡單的累加
徹底了解了reduce這個方法後,開始來捋捋思路了let arr =[10
,20,30
,40,50
];let add = arr.
reduce
((result,item,i)
=>
)console.
log(add)
;//150
方法對原陣列是不產生影響的(所以一開始就要把陣列拷貝乙份)
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...