那些優雅靈性的JS程式碼片段

拓跋zhleven發表於2018-04-10

我的個人網站:拓跋的前端客棧~瞭解一哈。這裡是原文地址,如果您發現我文章中存在錯誤,請盡情向我吐槽,大家一起學習一起進步φ(>ω<*)

引子

如果您甘於平凡,寫程式碼對您來說可以就是Ctrl+C和Ctrl+V;如果您充滿創造力,寫程式碼也可以成為一門藝術。我們在平時總會遇到一些堪稱優雅靈性的程式碼片段,在這裡,僅以我之見,列舉出我所見到的那一部分。

下面為了閱讀方便,我會把程式碼的題目和莽夫解法放在一起,優雅靈性的解法放在最下面,希望能對您造成一定的衝擊,看官們可以自己嘗試一下,題目並不難。

當然,通往羅馬的大路有千千萬,可能您的解法更為優秀。如果這樣,希望您能在評論區展示出來,讓更多人看見~

注:以下所有題目均來自codewars

codewars

題目&莽夫解

  1. Create Phone Number

    題目:編寫一個函式,它接受一個由10個整陣列成的陣列(0到9之間的陣列),該函式以形似(123) 456-7890的電話號碼的形式返回這些數字的字串。

    Example:

    createPhoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]) // => returns "(123) 456-7890"1111
    複製程式碼

    莽夫解法:

    const createPhoneNumber = n => "(" + n[0] + n[1] + n[2] + ") " + n[3] + n[4] + n[5] + "-" + n[6] + n[7] + n[8] + n[9]
    複製程式碼
  2. Find the odd int

    題目:給定一個陣列,找到出現奇數次的數字。

    PS:將始終只有一個整數出現奇數次。

    Example:

    findOdd([1,1,2,-2,5,2,4,4,-1,-2,5]); // => returns -1
    複製程式碼

    莽夫解法:

    function findOdd(A) {
        let count = 0;
        do {
            let i = A.splice(count,1,'p')[0];
            if (i !== 'p'){
                let result = [i];
                A.forEach(function (e, index) {
                    if (e === i){
                        i === result[0] ? result.pop(): result.push(i);
                        A.splice(index, 1, 'p');
                    }
                });
                if (result.length > 0){
                    return result[0]
                }
            }
            count ++;
        } while (A.length > count);
    }
    複製程式碼
  3. Who likes it?

    題目:您可能知道Facebook或者其他網站的“喜歡”系統。人們可以“喜歡”部落格文章,圖片或其他專案。我們想要建立一份顯示在這樣專案旁邊的文字。

    實現一個函式,它的輸入是陣列,其中包含喜歡該專案的人的姓名。返回值是如下格式的文字:

    likes [] // must be "no one likes this"
    likes ["Peter"] // must be "Peter likes this"
    likes ["Jacob", "Alex"] // must be "Jacob and Alex like this"
    likes ["Max", "John", "Mark"] // must be "Max, John and Mark like this"
    likes ["Alex", "Jacob", "Mark", "Max"] // must be "Alex, Jacob and 2 others like this"
    複製程式碼

    莽夫解法:

    const likes = names => {
        switch (names.length) {
            case 0: return 'no one likes this'
            case 1: return names[0] + ' likes this'
            case 2: return names[0] + ' and ' + names[1] + ' like this'
            case 3: return names[0] + ', ' + names[1] + ' and ' + names[2] + ' like this'
            default: return names[0] + ', ' + names[1] + ' and ' + (names.length - 2) + ' others like this'
        }
    }
    複製程式碼
  4. Shortest Word

    題目:給定一串單詞,返回最短單詞的長度。

    字串永遠不會為空,您不需要考慮不同的資料型別。

    Example:

    findShort("bitcoin take over the world maybe who knows perhaps") // returns 3,因為最短單詞是the和who,長度為3
    複製程式碼

    莽夫解法:

    // 其實也不是特別莽
    const findShort = s => s.split(' ').map(w => w.length).sort((a,b) => a-b)[0];
    複製程式碼
  5. Sum of Digits / Digital Root

    題目:建立一個計算digital root的函式。

    digital root是數字中各位數字的遞迴總和。給定n,取n各位數字之和。如果該值是兩位數或者更多,則繼續以這種方式遞迴,直到產生一位數字,這個數字就是digital root。這隻適用於自然數。

    Example:

    digital_root(16)
    => 1 + 6
    => 7
    
    digital_root(942)
    => 9 + 4 + 2
    => 15 ...
    => 1 + 5
    => 6
    
    digital_root(132189)
    => 1 + 3 + 2 + 1 + 8 + 9
    => 24 ...
    => 2 + 4
    => 6
    
    digital_root(493193)
    => 4 + 9 + 3 + 1 + 9 + 3
    => 29 ...
    => 2 + 9
    => 11 ...
    => 1 + 1
    => 2
    複製程式碼

    莽夫解法:

    function digital_root(n) {
        let num = n;
        if (num < 10){
            return num
        }else {
            return arguments.callee((num+'').split('').reduce(function (a,b) {
                return parseInt(a) + parseInt(b)
            }))
        }
    }
    複製程式碼

優雅&靈性解

  1. Create Phone Number

    function createPhoneNumber(numbers){
        var format = "(xxx) xxx-xxxx";
        for(var i = 0; i < numbers.length; i++){
            format = format.replace('x', numbers[i]);
        }
        return format;
    }
    複製程式碼

    使用一個format的模版,通過迴圈replace所有format裡的x位,優雅且可讀性強,讓人眼前一亮。

  2. Find the odd int

    const findOdd = (xs) => xs.reduce((a, b) => a ^ b);
    複製程式碼

    我猜起碼70%的人看到這個解法會一愣。回想一下,自己多久沒有用過位運算了?本題使用reduce()和按位異或操作,相當於所有出現偶數次的數按位異或後均為0,然後出現奇數次的數字與0按位異或得到自己本身,從而得解。

  3. Who likes it?

    function likes (names) {
        var templates = [
            'no one likes this',
            '{name} likes this',
            '{name} and {name} like this',
            '{name}, {name} and {name} like this',
            '{name}, {name} and {n} others like this'
        ];
        var idx = Math.min(names.length, 4);
        
        return templates[idx].replace(/{name}|{n}/g, function (val) {
            return val === '{name}' ? names.shift() : names.length;
        });
    }
    複製程式碼

    這個不用解釋了,使用模版字串,可別傻傻的手動拼寫了。

  4. Shortest Word

    function findShort(s){
        return Math.min.apply(null, s.split(' ').map(w => w.length));
    }
    複製程式碼

    面試中經常可能會遇到問apply和call的區別之類的題目,但是實際上在工作中有多少人用它們寫過程式碼呢?

  5. Sum of Digits / Digital Root

    function digital_root(n) {
        return (n - 1) % 9 + 1;
    }
    複製程式碼

    這個解法堪稱神來之筆。有些人可能看不懂,它利用了我們小學時期學的一條定理,“所有位相加之和是9的倍數的數字能被9整除”。這個您可能沒印象了,但是“所有位相加之和是3的倍數的數字能被3整除”這個您一定知道吧,這是同樣的道理。至於為什麼(n-1)整除9以後再加1,是為了防止9的倍數本身求出0的解來。

小結

以上五段程式碼,分別通過replace、位運算、模版字串、apply甚至是“所有位相加之和是9的倍數的數字能被9整除”這種定理都能拿來解題,實在是令人歎為觀止。

有些操作是神來之筆,有些操作是可以學習的。我們要做的就是把能學習到的學習到,下次自己能用上,這就夠了。

參考資料

1. Create Phone Number

2. Find the odd int

3. Who likes it?

4. Shortest Word

5. Sum of Digits / Digital Root

相關文章