完成同一个功能，用不同的编码的思考

今天和群里的小伙伴聊天，他上传了一段代码，是这样子的：

function currentTime() {
    var d = new Date(),
        str = '';
    str += d.getFullYear() + '-';
    str += (d.getMonth() + 1) > 10 ? (d.getMonth() + 1) : '0' + (d.getMonth() + 1) + '-';
    str += (d.getDate() > 10 ? d.getDate() : '0' + d.getDate()) + ' ';
    str += (d.getHours() > 10 ? d.getHours() : '0' + d.getHours()) + ':';
    str += (d.getMinutes() > 10 ? d.getMinutes() : '0' + d.getMinutes()) + ':';
    str += d.getSeconds() > 10 ? d.getSeconds() : '0' + d.getSeconds();
    return str;
};

当然看到这样子的代码，我发现有一个问题，他用了很多的三元表达式来处理小于0的值。
于是我给他写了一段，让他作为参数。

function currentTime() {
    var d = new Date();
    var arr = ['FullYear', 'Month', 'Date', 'Hours', 'Minutes', 'Seconds'].map(function(v, index) {
        var value = d['get' + v]();
        value = index === 1 ? value + 1 : value;
        return value < 10 ? '0' + value : value;
    });
    var arr1 = arr.slice(0, 3).join('-');
    var arr2 = arr.slice(-3).join(':');
    return arr1 + ' ' + arr2;
}

上面这段代码，主要是加了循环的思路。让这种方法在循环中执行，但是这段代码我总感觉分隔符加的不是太自然，然后改成下面这样子：

function currentTime() {
    var d = new Date();
    return ['FullYear', 'Month', 'Date', 'Hours', 'Minutes', 'Seconds'].map(function(v, i) {
        var v = d['get' + v]();
        v = i === 1 ? v + 1 : v; //月份处理
        return (v < 10 ? '0' + v : v) + ('-- ::' [i] || '');
    }).join('');
}

这样子感觉好多了。

当然上面用了map,可能在老的浏览器上不支持，我回过头来想，怎么去优化他的代码。我又改成这样子：

function currentTime() {
    var d = new Date();

    return [d.getFullYear(),
        '-',
        add0(d.getMonth() + 1),
        '-',
        add0(d.getDate()),
        ' ',
        add0(d.getHours()),
        ':',
        add0(d.getMinutes()),
        ':',
        add0(d.getSeconds())
    ].join('');

    function add0(n) {
        return n < 10 ? '0' + n : n;
    }
};

ok~ 这样子代码应该是兼容IE8了，也是比较好懂的。用不同的方式去实现同一个功能，也是很有乐趣的事，小伙伴们有其他的实现方法也请留言，大家可以交流。

转载于:https://www.cnblogs.com/kyo4311/p/5168530.html