代码之家 › 专栏 › 技术社区 › Micawber

与if/else相比,开关的异常行为

switch-statement javascript

Micawber · 技术社区 · 6 月前

在学习JavaScript的过程中,我遇到了一些我不理解的东西;假设我有以下HTML:

<select name="options" id="options" onchange='on_change(this)'>
  <option value="None">Pick an option</option>
  <option value="a">Choice A</option>
  <option value="b">Choice B</option>
  <option value="c">Choice C</option>
  <option value="d">Choice D</option>
  <option value="e">Choice E</option>
</select> 

<p id="demo"></p>

<p id="demo"></p> <script></script>

function on_change(el){
    if (document.getElementById('options').value == 'a') { 
        document.getElementById('demo').innerHTML = options_summaries.get('a');
    } else if (document.getElementById('options').value == 'b') {
        document.getElementById('demo').innerHTML = options_summaries.get('b');
    } else if (document.getElementById('options').value == 'c') {
        document.getElementById('demo').innerHTML = options_summaries.get('c');
    } else if (document.getElementById('options').value == 'd') {
        document.getElementById('demo').innerHTML = options_summaries.get('d');
    } else if (document.getElementById('options').value == 'e') {
        document.getElementById('demo').innerHTML = options_summaries.get('e');
    } 
}

switch 语句(我更喜欢它,因为它更易读):

function on_change(el){
    switch (document.getElementById('options').value) {
        case 'a':
            document.getElementById('demo').innerHTML = options_summaries.get('a');
        case 'b' :
            document.getElementById('demo').innerHTML = options_summaries.get('b');
        case 'c':
            document.getElementById('demo').innerHTML = options_summaries.get('c');
        case 'd':
            document.getElementById('demo').innerHTML = options_summaries.get('d');
        case 'e':
            document.getElementById('demo').innerHTML = options_summaries.get('e');            
    }
}

随着 开关 语句,文本始终是最后一个选项中的最后一个 case (此处为“e”),显然这是一个功能(参见 here break

2 回复 | 直到 6 月前

Peter Pointer 6 月前

每 case switch break; ,否则会 “失败” 到下一个case语句,直到有一个break,或者在你的情况下到最后一个case。

参见文件: MDN - JavaScript - Switch

function on_change(el){
    switch (document.getElementById('options').value) {
        case 'a':
            document.getElementById('demo').innerHTML = options_summaries.get('a');
            break;
        case 'b' :
            document.getElementById('demo').innerHTML = options_summaries.get('b');
            break;
        case 'c':
            document.getElementById('demo').innerHTML = options_summaries.get('c');
            break;
        case 'd':
            document.getElementById('demo').innerHTML = options_summaries.get('d');
            break;
        case 'e':
            document.getElementById('demo').innerHTML = options_summaries.get('e');
            break;
    }
}

断裂; 是可选的。

function on_change(el){
    let choice = document.getElementById('options').value;
    switch (choice) {
        case 'a':
        case 'b':
        case 'c':
        case 'd':
        case 'e':
            document.getElementById('demo').innerHTML = options_summaries.get(choice);
            break;
    }
}

default: console.log('Unknown case executed.')

function on_change(el){
    let choice = document.getElementById('options').value;
    switch (choice) {
        default:
            document.getElementById('demo').innerHTML = options_summaries.get(choice);
            break;
        case 'z':
            console.log('Z reached. Abandon ship!');
            break;
    }
}

KooiInc 6 月前

这个问题已经得到了很好的回答,但要记录在案:你真的(真的)不需要 switch 在这里。

document.addEventListener(`change`, handle);

function handle(evt) {
  const selectr = evt.target.closest(`#options`);
  if (selectr) {
    const selected = selectr.querySelector(`option:checked`);
    document.querySelector(`#demo`).textContent = 
      selected.value !== `None` ? selected.textContent : ``;
  }
}

<select id="options">
  <option value="None">Pick an option</option>
  <option value="a">Choice A</option>
  <option value="b">Choice B</option>
  <option value="c">Choice C</option>
  <option value="d">Choice D</option>
  <option value="e">Choice E</option>
</select> 

<p id="demo"></p>