Javascript检查数组中的每个元素

Question

I have this code:

var newStatus = (status, subStatus) => {
  if(status === 'CREATED' && 
         (subStatus === 'subStatus1' || 'subStatus2' || 'subStatus3')){
    return 'CONFIRMED';
  } else if(status === 'CANCELLED' && 
         (subStatus === 'subStatus4' || 'subStatus5' || 'subStatus6')){
    return 'REMOVED';
  } else if(status === 'REVIEW' && 
        (subStatus === 'subStatus7' || 'subStatus8' || 'subStatus9')){
    return 'CHECKED';
  }
}

<div>newStatus('CREATED', 'subStatus2')</div>

In this case, the div must render with the value 'CONFIRMED'. I believe this logic has a bug and I need 'subStatus ' to be an array and check somehow against each element, but how can I achieve this?

Can someone help me with a solution on how to implement this logic correctly?

Answer 1

You can create a map of the sub-statuses and then, for the unique sub-status, check that it also has the expected status and, if so, return the new status:

 subStatuses = { "subStatus1": { "expectedStatus": "CREATED", "newStatus": "CONFIRMED" }, "subStatus2": { "expectedStatus": "CREATED", "newStatus": "CONFIRMED" }, "subStatus3": { "expectedStatus": "CREATED", "newStatus": "CONFIRMED" }, "subStatus4": { "expectedStatus": "CANCELLED", "newStatus": "REMOVED" }, "subStatus5": { "expectedStatus": "CANCELLED", "newStatus": "REMOVED" }, "subStatus6": { "expectedStatus": "CANCELLED", "newStatus": "REMOVED" }, "subStatus7": { "expectedStatus": "REVIEW", "newStatus": "CHECKED" }, "subStatus8": { "expectedStatus": "REVIEW", "newStatus": "CHECKED" }, "subStatus9": { "expectedStatus": "REVIEW", "newStatus": "CHECKED" }, } function newStatus( status, subStatus ) { if ( subStatus in subStatuses && status === subStatuses[subStatus].expectedStatus ) { return subStatuses[subStatus].newStatus; } return undefined; } element = document.getElementById( "to_check" ); element.innerText = newStatus( element.getAttribute( "status" ), element.getAttribute( "substatus" ) );

 <div id="to_check" status="CREATED" substatus="subStatus2" />

Answer 2

You could use an object to map each subarray to the correct status, this way you don't need to add multiple if statements for all the possible outcomes. You can just update the object.

 const statusMap = { created: { sub: ['subStatus1', 'subStatus2', 'subStatus3'], value: 'CONFIRMED', }, cancelled: { sub: ['subStatus4', 'subStatus5', 'subStatus6'], value: 'REMOVED', }, review: { sub: ['subStatus7', 'subStatus8', 'subStatus9'], value: 'CHECKED', }, }; const newStatus = (status, subStatus, statusMap) => { // Turn the status to lowercase const lower = status.toLowerCase(); // Return if it doesn't exist if(!statusMap[lower]) return; // Get sub array and return value const {sub, value} = statusMap[lower]; // If the item exist in the sub array return the value if(sub.includes(subStatus)) return value; } const status1 = newStatus('CREATED', 'subStatus2', statusMap); const status2 = newStatus('CANCELLED', 'subStatus6', statusMap); const status3 = newStatus('REVIEW', 'subStatus7', statusMap); console.log(status1); console.log(status2); console.log(status3);

Answer 3

There are big issues with your code. This comparison:

subStatus === 'subStatus1' || 'subStatus2' || 'subStatus3'

will return true if subStatus has the value of 'subStatus1' . If not, it will return true because 'subStatus2' will be interpreted as true.
If you want to check if subStatus has one of the values of subStatus1 or subStatus2 or subStatus1 , then you should include those values in an array like this:

const SUB_STATUSES = ['subStatus1', 'subStatus2', 'subStatus3'];

then, you will have to use JavaScript's array method includes() like this:

SUB_STATUSES.includes(subStatus)

that will return true if the value of subStatus is included in SUB_STATUSES . You can check the documentation here Array.prototype.includes()

Your code should look something like this after the modifications:

const SUB_STATUSES1 = ['subStatus1', 'subStatus2', 'subStatus3'];
const SUB_STATUSES2 = ['subStatus4', 'subStatus5', 'subStatus6'];
const SUB_STATUSES3 = ['subStatus7', 'subStatus8', 'subStatus9'];
const newStatus = (status, subStatus) => {
    if (
        status === 'CREATED' && SUB_STATUSES1.includes(subStatus)
    ) {
        return 'CONFIRMED';
    }
    if (
        status === 'CANCELLED' && SUB_STATUSES2.includes(subStatus)
    ) {
        return 'REMOVED';
    }
    if (
        status === 'REVIEW' && SUB_STATUSES3.includes(subStatus)
    ) {
        return 'CHECKED';
    }
};

Apart from that, there might be another issues because there might be cases that slips through these conditions.