Question

嘿所以我有以下代码，但我很好奇是否有简写或更好/更简洁的方式来编写这样一段看似麻烦的代码。

var time = new Date().getHours();
var greet;

if ( time >= 0 && time < 4 ) {

    greet = 'Wow you\'re up late! Good morning.';
}

else if ( time >= 4 && time < 12 ) {

    greet = 'Good morning.';
}

else if ( time >= 12 && time < 17 ) {

    greet = 'Good afternoon.';
}

else if ( time >= 17 && time <= 23 ) {

    greet = 'Good evening.';
}

document.querySelector('.js-greet').innerHTML = greet;

非常感谢任何见解。

Answer 1

您可以 - 作为替代方案 - 定义一个每小时值的数组。每个值都是要显示的消息的ID。这个数组甚至可以是一个字符串，因为字符串也允许通过数组符号访问每个字符：

{{1}}

Answer 2

另一种选择

let time = new Date().getHours();

let hours = [4, 12, 17, 24];
let greetings = ['Wow you\'re up late! Good morning.', 'Good morning.', 'Good afternoon.', 'Good evening.'];

console.log(greetings[hours.findIndex(hour => hour > time)]);

Answer 3

首先，你不需要下限，因为getHours将永远不会返回< 0而在else if上，如果早期绑定匹配，你将无法到达那里;并且你根本不需要任何条件，所以作为第一次摆动：

var time = new Date().getHours();
var greet;

if ( time < 4 ) {
    greet = 'Wow you\'re up late! Good morning.';
}
else if ( time < 12 ) {
    greet = 'Good morning.';
}
else if ( time < 17 ) {
    greet = 'Good afternoon.';
}
else {
    greet = 'Good evening.';
}

document.querySelector('.js-greet').innerHTML = greet;

（还删除了我认为不必要的垂直空格。）

除此之外，你开始进入消息地图，那些将是特定小时的列表，而不是范围，所以可能这已经足够了。

Answer 4

好吧，您可以大大简化if语句，因为已经检查过（在早期if语句中）小于您想要的范围的值。此外，getHours()仅返回0到23之间的整数，因此没有理由检查这些边界之外的数字。

var time = new Date().getHours();
var greet;

if ( time < 4 ) {
    greet = "Wow you're up late! Good morning.";
} else if ( time < 12 ) {      //You can't get here if time < 4; no need to check again.
    greet = 'Good morning.';
} else if ( time < 17 ) {      //You can't get here if time < 12; no need to check again.
    greet = 'Good afternoon.';
} else {                       //You can't get here if time < 17; no need to check again.
    greet = 'Good evening.';
}

document.querySelector('.js-greet').innerHTML = greet;

<div class="js-greet"></div>

此外，您可以通过将else指定为'Good evening.'作为初始值来消除最终greet。

var time = new Date().getHours();

var greet = 'Good evening.'; //Remains the value for greet for time >=17
if ( time < 4 ) {
    greet = "Wow you're up late! Good morning.";
} else if ( time < 12 ) {
    greet = 'Good morning.';
} else if ( time < 17 ) {
    greet = 'Good afternoon.';
}

document.querySelector('.js-greet').innerHTML = greet;

<div class="js-greet"></div>

Answer 5

擅长询问如何改进！我看到这样的代码太常见了，有很多方法可以简化它。

您的原始代码

if ( time >= 0 && time < 4 ) {

    greet = 'Wow you\'re up late! Good morning.';
}

else if ( time >= 4 && time < 12 ) {

    greet = 'Good morning.';
}

else if ( time >= 12 && time < 17 ) {

    greet = 'Good afternoon.';
}

else if ( time >= 17 && time <= 23 ) {

    greet = 'Good evening.';
}

改进＃1

这里我们采取一些初步步骤，删除冗余代码/简化事情

if(time < 0) {
    //dont do anything
}
// now we can take "time >= 0 && " out, making it easier to read
else if (time < 4) {

    greet = 'Wow you\'re up late! Good morning.';
}
//here, we don't actually need to check if time >= 4, because if it wasn't
//it would have been dealt with by a previous condition
else if (time < 12) {

    greet = 'Good morning.';
}
//and the same for the rest of them
else if (time < 17 ) {

    greet = 'Good afternoon.';
}

//lets keep things consistant by using "time < 24" rather than "time <= 23"
else if (time < 24) {

    greet = 'Good evening.';
}

改进＃2

重构可以进一步简化代码，因此我们将此代码放入函数

//in this function we can take advantage of the order of operations 
//to simplify further
function getGreeting(time){

    //returning early when things go wrong is always a good idea
    if(time < 0) {
        return null;
    }

    //We dont need 'else' because we are returning when a condition is met,
    //and the app doesn't have a chance to try the other conditionals
    //the less 'else's you have the better the code IMO :)
    if (time < 4) {

        //return our string instead of setting it!
        return 'Wow you\'re up late! Good morning.';
    }

    if (time < 12) {
        return 'Good morning.';
    }

    if (time < 17 ) {
        return 'Good afternoon.';
    }

    if (time < 24) {
        return 'Good evening.';
    }

}

//then call the function 
greet = getGreeting(time);

改进＃3

我们可以用数据结构做得更好！

function getGreeting(time){

    //we still check for stuff that shouldn't happen
    if(time < 0) {
        return null;
    }

    //Here we declare a 'greetings' array. In the array there are objects!
    //each object has a field for time start and end as well as a greeting
    //the thing that makes this approach so neat is that adding more data in
    //the future
    //is dead easy, and the data can now come from a database or whatever
    //you want.
    var greetings = [
        {
            timeStart: 0,
            timeEnd: 4,
            greeting: 'Wow you\'re up late! Good morning.'
        },
        {
            timeStart: 4,
            timeEnd: 12,
            greeting: 'Good morning.'
        },
        {
            timeStart: 12,
            timeEnd: 17,
            greeting: 'Good afternoon.'
        },
        {
            timeStart: 17,
            timeEnd: 24,
            greeting: 'Good evening.'
        }
    ];

    //We can add as many new items to the greetings array without ever
    // touching this again!
    for(var i = 0; i < greetings.length; i++)
    {
        if(time >= greetings[i].timeStart && time < greetings[i].timeEnd)
        {
            return greetings[i].greeting;
        }
    }

}

//then call the function 
greet = getGreeting(time);

是否有更简洁的方法在js中编写一组基于时间的条件？

5 个答案: