javascript: ใช้เงื่อนไขในกรณีสวิตช์

ขออภัยสำหรับคำถามโง่ ๆ ฉันจะใช้เงื่อนไขสำหรับเคสในเอลิเมนต์ภาษาสวิตช์ของจาวาสคริปต์ได้อย่างไร เช่นเดียวกับตัวอย่างด้านล่างกรณีควรจับคู่เมื่อตัวแปรliCountเป็น <= 5 และ> 0; อย่างไรก็ตามรหัสของฉันไม่ทำงาน:

switch (liCount) {
    case 0:
        setLayoutState('start');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case (liCount<=5 && liCount>0):
        setLayoutState('upload1Row');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case (liCount<=10 && liCount>5):
        setLayoutState('upload2Rows');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case (liCount>10):
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;                  
}

ขอบคุณสำหรับคำแนะนำ!

ใช้งานได้:

switch (true) {
    case liCount == 0:
        setLayoutState('start');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case liCount<=5 && liCount>0:
        setLayoutState('upload1Row');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case liCount<=10 && liCount>5:
        setLayoutState('upload2Rows');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case liCount>10:
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;                  
}

คำตอบรุ่นก่อนหน้านี้ถือว่าวงเล็บเป็นตัวการ ในความเป็นจริงวงเล็บไม่เกี่ยวข้องที่นี่สิ่งเดียวที่จำเป็นคือswitch(true){...}และเพื่อให้นิพจน์กรณีของคุณประเมินเป็นบูลีน

มันได้ผลเพราะเราใช้ค่าที่เราให้กับสวิตช์เป็นพื้นฐานในการเปรียบเทียบ ดังนั้นนิพจน์เคสและการประเมินค่าบูลีนจะเป็นตัวกำหนดว่าเคสใดถูกรัน ยังสามารถเปลี่ยนสิ่งนี้และส่งผ่านswitch(false){..}และให้นิพจน์ที่ต้องการประเมินเป็นเท็จแทนที่จะเป็นจริง .. อย่างไรก็ตามมันได้ผลเช่นกันดังนั้นควรคำนึงถึงสิ่งที่ทำอยู่

เช่น: ถ้า liCount เป็น 3 การเปรียบเทียบครั้งแรกคือtrue === (liCount == 0)หมายความว่ากรณีแรกเป็นเท็จ true === (liCount<=5 && liCount>0)สวิทช์แล้วย้ายไปกรณีต่อไป นิพจน์นี้ประเมินค่าเป็นจริงหมายความว่าเคสนี้ถูกรันและสิ้นสุดที่ไฟล์break. ฉันได้เพิ่มวงเล็บที่นี่เพื่อให้ชัดเจนขึ้น แต่เป็นทางเลือกขึ้นอยู่กับความซับซ้อนของนิพจน์ของคุณ

มันค่อนข้างง่ายและเป็นวิธีที่เรียบร้อย (ถ้ามันเข้ากับสิ่งที่คุณพยายามจะทำ) ในการจัดการกับเงื่อนไขที่ยาวนานซึ่งบางทีชุดยาวìf() ... else if() ... else if () ...อาจทำให้เกิดสัญญาณรบกวนหรือความเปราะบางในภาพ

ใช้ด้วยความระมัดระวังเนื่องจากเป็นรูปแบบที่ไม่ได้มาตรฐานแม้ว่าจะเป็นรหัสที่ถูกต้องก็ตาม

คุณมีวิธีที่ซับซ้อนมากเกินไป เขียนด้วย if statement แทนดังนี้:

if(liCount == 0)
    setLayoutState('start');
else if(liCount<=5)
    setLayoutState('upload1Row');
else if(liCount<=10)
    setLayoutState('upload2Rows');

$('#UploadList').data('jsp').reinitialise();

หรือถ้าChaosPandionพยายามเพิ่มประสิทธิภาพให้มากที่สุด:

setLayoutState(liCount == 0 ? 'start' :
               liCount <= 5 ? 'upload1Row' :
               liCount <= 10 ? 'upload2Rows' :
               null);

$('#UploadList').data('jsp').reinitialise();

คุณต้องการใช้คำสั่ง if:

if (liCount === 0) {
    setLayoutState('start');
} else if (liCount <= 5) {
    setLayoutState('upload1Row');
} else if (liCount <= 10) {
    setLayoutState('upload2Rows');
}
$('#UploadList').data('jsp').reinitialise();  

ดูคำตอบของ dmpด้านล่าง ฉันจะลบคำตอบนี้ถ้าทำได้ แต่ได้รับการยอมรับดังนั้นนี่คือสิ่งที่ดีที่สุดต่อไป :)

คุณทำไม่ได้ JS Interpreters ต้องการให้คุณเปรียบเทียบกับคำสั่ง switch (เช่นไม่มีคำสั่ง "case when") หากคุณต้องการทำสิ่งนี้จริงๆคุณสามารถสร้างif(){ .. } else if(){ .. }บล็อกได้

switch (true) {
  case condition0:
    ...
    break;
  case condition1:
    ...
    break;
}

จะทำงานใน JavaScript ตราบเท่าที่เงื่อนไขของคุณส่งคืนbooleanค่าที่เหมาะสมแต่ก็ไม่มีข้อดีมากกว่าelse ifคำสั่ง

นั่นเป็นกรณีที่คุณควรใช้ifอนุประโยค

ถ้านั่นคือสิ่งที่คุณต้องการจะใช้ifงบจะดีกว่า ตัวอย่างเช่น:

if(liCount == 0){
    setLayoutState('start');
}
if(liCount<=5 && liCount>0){
    setLayoutState('upload1Row');
}
if(liCount<=10 && liCount>5){
    setLayoutState('upload2Rows');
}             
var api = $('#UploadList').data('jsp');
    api.reinitialise();

รหัสของคุณใช้งานไม่ได้เนื่องจากไม่ได้ทำในสิ่งที่คุณคาดหวังให้ทำ การสลับบล็อกรับค่าและเปรียบเทียบแต่ละกรณีกับค่าที่กำหนดโดยมองหาความเท่าเทียมกัน ค่าเปรียบเทียบของคุณเป็นจำนวนเต็ม แต่นิพจน์เคสส่วนใหญ่ของคุณจะแก้ไขเป็นค่าบูลีน

liCount = 2ดังนั้นสำหรับตัวอย่างเช่นสมมติว่า 2 != 0กรณีแรกของคุณจะไม่ตรงเพราะ กรณีที่สองของคุณ(liCount<=5 && liCount>0)ประเมินเป็นtrueแต่2 != trueดังนั้นกรณีนี้จะไม่ตรงกัน

ด้วยเหตุนี้อย่างที่คนอื่น ๆ กล่าวไว้คุณควรใช้ชุดif...then...else ifบล็อกเพื่อทำสิ่งนี้

หากค่าที่เป็นไปได้เป็นจำนวนเต็มคุณสามารถรวมกรณีได้ มิฉะนั้นให้ใช้ ifs

var api, tem;

switch(liCount){
    case 0:
    tem= 'start';
    break;
    case 1: case 2: case 3: case 4: case 5:
    tem= 'upload1Row';
    break;
    case 6: case 7: case 8: case 9: case 10:
    tem= 'upload2Rows';
    break;
    default:
    break;
}
if(tem) setLayoutState((tem);
api= $('#UploadList').data('jsp');
api.reinitialise();

สังเกตว่าเราไม่ผ่านคะแนนไปที่สวิตช์ แต่เป็นจริง ค่าที่เราให้กับสวิตช์ถูกใช้เป็นพื้นฐานในการเปรียบเทียบ

ตัวอย่างด้านล่างแสดงให้เห็นว่าเราสามารถเพิ่มเงื่อนไขในกรณีได้อย่างไร: โดยไม่มีคำสั่ง if

function getGrade(score) {
    let grade;
    // Write your code here
    switch(true) {
        case score >= 0 && score <= 5:
        grade = 'F';
        break;
        case score > 5 && score <= 10:
        grade = 'E';
        break;
        case score > 10 && score <= 15:
        grade = 'D';
        break;
        case score > 15 && score <= 20:
        grade = 'C';
        break;
        case score > 20 && score <= 25:
        grade = 'B';
        break;
        case score > 25 && score <= 30:
        grade = 'A';
        break;
    }

    return grade;
}

แม้ว่าในตัวอย่างคำถามของ OP switchจะไม่เหมาะสม แต่ก็มีตัวอย่างที่สวิตช์ยังคงเหมาะสม / เป็นประโยชน์ แต่จำเป็นต้องมีนิพจน์การประเมินอื่น ๆ ด้วย สิ่งนี้สามารถทำได้โดยใช้ประโยคเริ่มต้นสำหรับนิพจน์:

switch (foo) {
  case 'bar':
    // do something
    break;
  case 'foo':
    // do something
    break;
  ... // other plain comparison cases
  default:
    if (foo.length > 16) {
      // something specific
    } else if (foo.length < 2) {
      // maybe error
    } else {
      // default action for everything else
    }
}

คุณสามารถใช้วิธี fall-through ในกรณีเปลี่ยน

const x = 'Welcome';

switch (x) {
  case 'Come':
    console.log(1)
    break;

  case 'Welcome':
  case 'Wel':
  case 'come':
    console.log(2)
    break;

  case 'Wel':
    console.log(3)
    break;

  default:
    break;
}

    
> Result => 2