JScript Katana

JavaScripti switch-lause valdamine: süntaks, kasutusjuhtumid ja praktilised näited

JavaScripti alused ja põhitõed
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Sissejuhatus: Mis on switch-lause?

JavaScriptis mängib tingimuslik harutamine olulist rolli programmi voolu juhtimisel. Nende struktuuride seas kasutatakse switch-lause süntaksina, mis tõhusalt käsitleb mitut tingimust.
Switch-lause on kasulik, kui soovid käivitada erinevaid protsesse kindla väärtuse põhjal. Näiteks kasutatakse seda erinevate sõnumite kuvamiseks sõltuvalt nädalapäevast või toimingute muutmiseks kasutaja sisendi põhjal.

Switch-lause kasutusjuhtumid

  • Kui soovid töödelda mitut tingimust tõhusalt: Kui korduvad if-lauseid, aitab switch koodi lihtsustada.
  • Kui soovid iga tingimuse jaoks käivitada erinevaid protsesse: Kasulik käitumise muutmiseks andmete põhjal.
  • Kui soovid parandada koodi loetavust: Selle struktuur on selge ja aitab korraldada tingimuslikku loogikat.

Switch-lause põhijooned

  • Väärtusel põhinev harutamine: Switch-lause kontrollib, kas avaldise hinnatud tulemus vastab kindlale väärtusele.
  • Kontroll break-i kasutamisega: break-lause peatab täitmise, vältides järgmisse juhtumisse üleminekut.
  • Vaikimisi kasutamine: Määrab vaikimisi käitumise, kui ükski juhtum ei vasta.

Kokkuvõte

Switch-lause on kasulik tööriist, mis korraldab tingimuslikku harutamist ja parandab JavaScripti loetavust. Järgnevas jaotises selgitame selle põhisisu ja kuidas seda konkreetsete näidete abil kasutada.

2. Põhisüntaks ja rollid

JavaScriptis on switch-lause mugav juhtimisstruktuur, mida kasutatakse loogika harutamiseks kindlate väärtuste põhjal. See jaotis selgitab põhisüntaksit ja iga elemendi rolli üksikasjalikult.

Põhisüntaks

Allpool on switch-lause põhiline struktuur.

switch (式) {
  case 値1:
    // 値1に一致した場合の処理
    break;
  case 値2:
    // 値2に一致した場合の処理
    break;
  default:
    // どの値にも一致しなかった場合の処理
}

Siin on iga elemendi selgitus.

Süntakselementide üksikasjad

  1. switch (expression)
  • Avaldis sisaldab väärtust või arvutatud avaldist, millega võrreldakse.
  1. case value:
  • Iga case määrab väärtuse, millega avaldist võrreldakse.
  1. break;
  • break-lause väljub switch-ist pärast sobiva juhtumi täitmist.
  1. default:
  • Määrab protsessi, mis käivitatakse, kui ükski juhtum ei vasta.

Praktikaline näide

Siin on näide sõnumi kuvamisest sõltuvalt nädalapäevast.

let day = "月曜日";

switch (day) {
  case "月曜日":
    console.log("週の始まりです。頑張りましょう！");
    break;
  case "金曜日":
    console.log("もうすぐ週末です。");
    break;
  default:
    console.log("通常の日です。");
}

Kokkuvõte

Switch-lause pakub lihtsat ja kergesti loetavat tingimuslikku harutamist. Järgmisena tutvustame “3. Switch-lause praktilised näited”, et uurida keerukamat kasutust.

3. Switch-lause praktilised näited

Siin selgitame JavaScripti switch-lause konkreetsete näidete kaudu — alates põhitõdedest kuni keerukamate — et aidata mõista, kuidas seda reaalses programmeerimises kasutatakse.

Põhiline tingimuslik harutamine

Näide 1: Sõnumi kuvamine sõltuvalt nädalapäevast

let day = "水曜日";

switch (day) {
  case "月曜日":
    console.log("今週も頑張りましょう！");
    break;
  case "水曜日":
    console.log("週の半ばです。あと少し！");
    break;
  case "金曜日":
    console.log("週末まであと1日！");
    break;
  default:
    console.log("リラックスできる日です。");
}

Mitme juhtumi grupeerimine

Näide 2: Töönädalapäevade ja nädalavahetuste eristamine

let day = "土曜日";

switch (day) {
  case "月曜日":
  case "火曜日":
  case "水曜日":
  case "木曜日":
  case "金曜日":
    console.log("今日は平日です。");
    break;
  case "土曜日":
  case "日曜日":
    console.log("今日は週末です。");
    break;
  default:
    console.log("無効な曜日です。");
}

Funktsioonide kombineerimine switch-iga

Näide 3: Kasutaja õigused

function getUserPermission(role) {
  switch (role) {
    case "admin":
      return "すべての権限があります。";
    case "editor":
      return "編集権限があります。";
    case "viewer":
      return "閲覧のみ可能です。";
    default:
      return "権限がありません。";
  }
}

console.log(getUserPermission("editor"));

Kokkuvõte

Nende praktiliste näidete kaudu peaksid nüüd paremini mõistma, kuidas kasutada switch-lause. Järgmisena käsitleme “4. switch vs if – Millist peaksid kasutama?”

4. switch vs if — Millise peaksid valima?

Nii switch kui ka if suudavad JavaScriptis töödelda tingimuslikku harunemist, kuid neid kasutatakse erinevalt. Nende erinevuste mõistmine aitab sul valida iga olukorra jaoks õige.

Põhilised erinevused

Featureswitchif
Type of conditionBest for comparing specific valuesBest for complex expressions or range checks
ReadabilityEasier to organize many conditionsSimple conditions can be short and clear
FlexibilityLimited to fixed-value comparisonsAllows complex logical comparisons
PerformanceSometimes faster than if in certain situationsFast and efficient when conditions are few

Võrdlus näidetega

Näide 1: Switchi kasutamine

let color = "赤";

switch (color) {
  case "赤":
    console.log("ストップ！");
    break;
  case "黄":
    console.log("注意！");
    break;
  case "青":
    console.log("進んでください！");
    break;
  default:
    console.log("無効な色です。");
}

Näide 2: If-i kasutamine

let score = 85;

if (score >= 90) {
  console.log("評価: A");
} else if (score >= 75) {
  console.log("評価: B");
} else if (score >= 50) {
  console.log("評価: C");
} else {
  console.log("評価: F");
}

Kokkuvõte

Valides switch ja if õigesti, saad kirjutada tõhusat koodi. Järgmisena arutame “5. Veadest ennetamise näpunäited”.

5. Veadest ennetamise näpunäited

JavaScripti switch-lause on mugav, kuid valesti kasutades võib see põhjustada vigu või ootamatut käitumist. See jaotis selgitab võtmetähtsusega punkte vigade vältimiseks.

1. Break-i unustamine põhjustab läbijooksu

Näide:

let fruit = "リンゴ";

switch (fruit) {
  case "リンゴ":
    console.log("リンゴが選ばれました。");
  case "バナナ":
    console.log("バナナが選ばれました。");
    break;
  default:
    console.log("その他のフルーツです。");
}

Tulemus:

リンゴが選ばれました。
バナナが選ばれました。

Lahendus:

switch (fruit) {
  case "リンゴ":
    console.log("リンゴが選ばれました。");
    break;
  case "バナナ":
    console.log("バナナが選ばれました。");
    break;
  default:
    console.log("その他のフルーツです。");
}

2. Ära unusta default’i

Näide:

let command = "停止";

switch (command) {
  case "開始":
    console.log("システムを起動します。");
    break;
  case "終了":
    console.log("システムを終了します。");
    break;
}

Lahendus:

default:
  console.log("無効なコマンドです。");

3. Ole ettevaatlik tüüpide mittevastavuste suhtes

Näide:

let value = 1;

switch (value) {
  case "1":
    console.log("文字列の1です。");
    break;
  case 1:
    console.log("数値の1です。");
    break;
  default:
    console.log("一致しません。");
}

Kokkuvõte

Nende näpunäidete järgimisega saad vältida vigu ja kirjutada tõhusat, hooldatavat koodi.

6. Täiustatud tehnikad switchi jaoks

JavaScripti switch-lause saab kasutada mitte ainult põhilise harunemise jaoks, vaid ka paindlikumate, keerukamate rakenduste jaoks.

1. Mitme juhtumi grupeerimine

Näide:

let day = "土曜日";

switch (day) {
  case "月曜日":
  case "火曜日":
  case "水曜日":
  case "木曜日":
  case "金曜日":
    console.log("今日は平日です。");
    break;
  case "土曜日":
  case "日曜日":
    console.log("今日は週末です。");
    break;
  default:
    console.log("無効な曜日です。");
}

2. Sisseehitatud switch-lauseid

Näide:

let menu = "ドリンク";
let subMenu = "コーヒー";

switch (menu) {
  case "フード":
    switch (subMenu) {
      case "ハンバーガー":
        console.log("ハンバーガーが選ばれました。");
        break;
      default:
        console.log("無効なフードメニューです。");
    }
    break;

  case "ドリンク":
    switch (subMenu) {
      case "コーヒー":
        console.log("コーヒーが選ばれました。");
        break;
      default:
        console.log("無効なドリンクメニューです。");
    }
    break;
}

Kokkuvõte

Nende täiustatud tehnikate kasutamine võimaldab keerulist harunemist tõhusamalt hallata.

7. KKK: Levinumad küsimused ja tõrkeotsing

Paljud arendajad puutuvad kokku sarnaste probleemidega, kasutades JavaScripti switch‑lause. Siin on levinud küsimused ja lahendused.

Q1: Mis juhtub, kui unustad break‑i?

Näide:

let value = 2;

switch (value) {
  case 1:
    console.log("1が選択されました。");
  case 2:
    console.log("2が選択されました。");
  case 3:
    console.log("3が選択されました。");
}

Tulemus:

2が選択されました。
3が選択されました。

Lahendus:

break;

Q2: Kas default on kohustuslik?

Näide:

let fruit = "パイナップル";

switch (fruit) {
  case "リンゴ":
    console.log("リンゴが選ばれました。");
    break;
  case "バナナ":
    console.log("バナナが選ばれました。");
    break;
}

Lahendus:

default:
  console.log("不明なフルーツです。");

Q3: Kas switch saab võrrelda vahemikke?

Näide:

let score = 85;

switch (true) {
  case score >= 90:
    console.log("評価: A");
    break;
  case score >= 75:
    console.log("評価: B");
    break;
  default:
    console.log("評価: F");
}

Kokkuvõte

Kasuta seda KKK‑d, et käsitleda vigu ja parandada oma arusaamist switch‑lausest.

8. Koodinäited ja harjutusülesanded

See jaotis pakub näidiskoodi ja harjutusülesandeid, mis kasutavad switch‑lauseid. Proovi neid, et süvendada oma teadmisi.

1. Põhiline näidiskood

Näide 1: Hooaja määramine kuu põhjal

let month = 3;

switch (month) {
  case 12:
  case 1:
  case 2:
    console.log("冬です。");
    break;
  case 3:
  case 4:
  case 5:
    console.log("春です。");
    break;
  case 6:
  case 7:
  case 8:
    console.log("夏です。");
    break;
  case 9:
  case 10:
  case 11:
    console.log("秋です。");
    break;
  default:
    console.log("無効な月です。");
}

Näide 2: Kasutaja õigused

let role = "editor";

switch (role) {
  case "admin":
    console.log("すべての権限があります。");
    break;
  case "editor":
    console.log("編集権限があります。");
    break;
  case "viewer":
    console.log("閲覧権限のみあります。");
    break;
  default:
    console.log("権限がありません。");
}

2. Harjutusülesanded

Ülesanne 1: Nädalapäeva/Nädalavahetuse tuvastaja

Loo programm, mis määrab, kas antud päev on tööpäev või nädalavahetus.

Ülesanne 2: Ostukorvi arvutamine

Loo programm, mis arvutab kogukulu tootekategooria ja koguse põhjal.

Ülesanne 3: Telefoni menüüsüsteem

Loo programm, mis prindib valiku kasutaja numbrilise sisendi põhjal.

Kokkuvõte

Kasuta neid harjutusülesandeid, et tugevdada oma switch‑lause oskusi.

9. Kokkuvõte ja tulevased rakendused

See artikkel pakkus põhjalikku selgitust JavaScripti switch‑lausest, alates alustasemetest kuni täiustatud tehnikateni. Siin on peamised punktid ja järgmised sammud edasiseks arenguks.

1. Peamised õppetunnid

  • Põhisüntaks ja funktsioonid: Kasuta case, break ja default, et kirjutada selget tingimusloogikat.
  • Võrdlus if‑iga: switch sobib fikseeritud väärtuste jaoks, samas kui if käsitleb keerukamaid tingimusi.
  • Vigade ennetamine: Kasuta break, tüübikontrolli ja default, et vältida vigu.
  • Täiustatud tehnikad: Kasuta pesastamist, kaardistamist ja dünaamilist töötlemist paindlikuma disaini jaoks.

2. Tulevaste rakenduste näpunäited

1. Optimeeri keerukat tingimusloogikat

Saad hallata dünaamilisi tingimusi, kombineerides mitmeid avaldisi ja funktsioone.

2. Rakenda dünaamilist töötlemist kaardistamisega

Kasuta objekte või kaarte tõhusa ja skaleeritava andmehalduse jaoks.

const actions = {
  start: () => console.log("システムを起動します。"),
  stop: () => console.log("システムを停止します。"),
  restart: () => console.log("システムを再起動します。"),
};

let command = "restart";
(actions[command] || (() => console.log("無効なコマンドです。")))();

3. Rakenda seda olekuhaldus-süsteemides

Saad kasutada switch‑i rakenduste arendamisel koos olekuhaldusraamistikega nagu Redux või Vuex.

Kokkuvõte

switch-lause on lihtne, kuid võimas tööriist JavaScripti tingimusloogikas. Mõistes nii põhitõdesid kui ka edasijõudnud kasutamist, saate märkimisväärselt parandada oma koodi loetavust ja hooldatavust.
Kasutage seda artiklit aluseks edasiseks oskuste arendamiseks.

広告