April 23, 2019

lodash 的程式碼實現

員工訓練之一


文 / Siddharam 西打藍

lodash


這次來挑選常用的 lodash function,嘗試自己手寫。
lodash 的 GitHub 有他們的實作方式,練習過後可以去比較兩邊程式碼有何差異。

練習


(1) dropRight(array, 從右邊移除多少個數)

_.dropRight([1, 2, 3], 2);
// => [1]


function drop (array, count) {
  return array.slice(0, array.length-count)
}

drop([1,2,3,4,5,6,7,8], 2)
//  [1, 2, 3, 4, 5, 6]



(2) findIndex(array, 找到符合條件的 index)

var users = [
{ 'user': 'barney', 'active': false },
{ 'user': 'fred', 'active': false },
{ 'user': 'pebbles', 'active': true }
];

_.findIndex(users, function(o) { return o.user == 'barney'; });
// => 0

_.findIndex(users, { 'user': 'fred', 'active': false });
// => 1


var users = [ 
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
]

function findIndex(array, types){
    for(let i=0; i < array.length; i++){
        if(array[i].user == types.user && array[i].active == types.active){
            return i
        }
    } 
}

findIndex(users, { 'user': 'barney', 'active': false })
// 0



(3) pull(array, 去除哪些 value)

var array = ['a', 'b', 'c', 'a', 'b', 'c'];
_.pull(array, 'a', 'c');
// => ['b', 'b']


function pull(array, ...remove){
  let newArray = [];
  for(let i=0; i < array.length; i++){
    for(let j=0 ; j < remove.length; j++){
       if(array[i] == remove[j]){
           newArray.push(i)
       }
    }
  }
for(let k=newArray.length; k>0; k--){ array.splice(newArray[k-1],1) } return array }
pull(['a','c','e','g','h','a'],'a','b','c','j','z') // ["e", "g", "h"]


(4) reverse(反轉哪些 array)

var array = [1, 2, 3];
_.reverse(array);
// => [3, 2, 1]


function reverse(array){
  let newArray = [];
  for(let i=array.length; i>0; i--){
    newArray.push(array[i-1])
  }
  return newArray
}
reverse(['1','2','3','4']) // ["4", "3", "2", "1"]

(5) shuffle(array 洗牌)

_.shuffle([1, 2, 3, 4]);
// => [4, 1, 3, 2]


function shuffle(array){ for(let i=0 ; i < array.length; i++){ var rand = Math.floor(Math.random() * array.length) var temp = array[rand] array[rand] = array[i] array[i] = temp } return array }
shuffle([1,2,3,4,5]) // [1, 3, 5, 4, 2] random




閱讀量




技術文章與合作


寫這些技術分享文,筆者是沒有額外收入的,但每年還是要付域名費用,如果你喜歡我的文章,歡迎 自由贊助 唷!也期待收到你的 回饋

有網站設計(UI/UX)、平面設計、網站工程外包需求,皆可以來信詢問,在 關於下方 有參考作品。

想定期收到技術文章,或想一起探討前後端程式的朋友,建議加入 line 群組,或是官方帳號,大家可以互相交流,一起學程式,歡迎加入:

Email: aaa24295234@gmail.com

Line 群組:入群組表單邀請

群組為了防止假帳號,不開放用 QR Code 掃描入群,如有需要,可以填寫表單,註記 line ID 告訴我,謝謝。

Line 官方帳號:@184railx

Line 官方帳號 QR Code: