PHP & Laravel & Javascript & Lodash:使用心得

PHP & Laravel & Javascript & Lodash:使用心得

PHP & Laravel & Javascript & Lodash:陣列, Collection使用心得, 最近公司常使用到Lodash,一個熱門的Javascript Library,裡面的很多方法可以用來處理 Array或是物件。在看Javascript程式碼時出現_.開頭的就是Lodash的語法。加上最近在看JavaScript: The Good Parts這本蝴蝶書,雖然是很舊的書(2008/12出版),但裡面講了很多核心的概念,這邊做個筆記以便日後查找。

  1. Javascript 沒有陣列

    陣列是記憶體的一種線性分配,是非常快速的資料結構,可惜的是Javascript的陣列不屬於這個類型,Javascript的陣列其實是一個偽陣列,是一個物件,所以在使用陣列的方法時是用物件的方式處理。

    let a = ['a', 'b'];
    a.push('c');
    //a = ['a', 'b', 'c'];

  2. Javascript的陣列使用方法很像Laravel的Collection

    因為Javascript的陣列其實是物件,所以使用上的情況會很像Laravel 的Collection。

    //Laravel
    $collection = collect([1, 2, 3, 4, 5]);
    $multiplied = $collection->map(function ($item, $key) {
        return $item * 2;
    });
    
    $multiplied->all();
    //2,4,6,8,10
    //Javascript
    let array = [1,2,3,4,5]
    let result = array.map(function(item){
      return item * 2;
    })
    console.log(result);
    //[2,4,6,8,10]
  3. Javascript的Library Lodash使用方法很像PHP&Laravel陣列

    Lodash和PHP array 一樣都是把陣列丟入一個方法內,並輸入要參照的參數來處理。例如Lodash的_.map功能是把陣列內的某些參數取出。一樣的功能在Laravel的array方法是用array_pluck

    //Lodash -map
    var users = [
      { 'user': 'barney' },
      { 'user': 'fred' }
    ];
     
    // The _.property iteratee shorthand.
    _.map(users, 'user');
    // => ['barney', 'fred']
    $array = [
        ['developer' => ['id' => 1, 'name' => 'Taylor']],
        ['developer' => ['id' => 2, 'name' => 'Abigail']],
    ];
    
    $names = array_pluck($array, 'developer.name');
    
    // ['Taylor', 'Abigail']
  4. 最後是Javascript 常用的陣列方法

    let array = [1,2,3,4,5,6];
    
    let string = array.join("")//陣列轉字串
    console.log(string)//123456
    
    let num = array.pop()//移除最後一個
    console.log(num) //5
    console.log(array) //[1,2,3,4]
    
    array.push(5)//從後面加入
    console.log(array) //[1,2,3,4,5]
    
    let num = array.shift()//移除第一個
    console.log(num) //1
    console.log(array) //[2,3,4,5]
    
    array.unshift(1//從前面加入
    console.log(array) //[1,2,3,4,5]
    
    array.slice(start, end)//複製一個新陣列出來,start起始位置, end結束位置, end不填是到最後
    array2 = array.slice()
    array3 = array.slice(2)
    array4 = array.slice(2, 4)
    console.log(array2) //[1,2,3,4,5]
    console.log(array3) //[3,4,5]
    console.log(array4) //[3,4]
    
    array.splice(start, deleteCount, addItem)//從原先陣列刪除
    array5 = array.splice(1, 2)//remove 2 item from index 1
    console.log(array) //[1,4,5]
    console.log(array2) //[2,3]

    其他常用陣列可參考Javascript30-Array01Javascript30-Array02 :filter,map, sort, reduce, some, every, find, splice, slice。

    最後還是推薦一下Javascript30的心得給大家!每次看都有不同的體會XD