Web フロントエンド、JS ベースの式、ブランチ、ループ ステートメント

序文

継続的な学習の概要出力で、今日私が共有するのは、Web フロントエンド、JS ベースの式、ブランチ、およびループ ステートメントです。

式とステートメント

式:
コードのコレクションであり、JavaScript インタプリタが結果を計算します。

ステートメント:
js 文全体またはコマンド、js ステートメントはセミコロンで終わります (省略可能) 例:ループステートメントの if ステートメント

違い:
式は値を計算しますが、ステートメントはそれ自体で何かを起こす (何かを行う) ために使用されます。

式3 + 4
ステートメントalert()

実際、場合によっては、ポップアップ ダイアログ ボックスは結果を計算して実行しているため、ステートメントとして理解することもできます。

分岐ステートメント

プログラムの 3 つの主要なフロー制御ステートメント

以前に書いたコードでは、いくつかの文を書いた後、上から下へ数文を実行していましたが、これをシーケンシャル構造と呼びます。

場合によっては、条件に従ってコードの実行を選択する必要があります。これをブランチ構造と呼びます。

コードのセクションが繰り返し実行され、これをループ構造と呼びます。

ブランチ ステートメント
ブランチ ステートメントを使用すると、必要なコードを選択的に実行できます。

if分岐文

if ステートメントには、単一分岐、二重分岐、複数分岐の 3 つの用途があります。

単一のブランチ:

<script>
//if(条件){
      
      
//满足条件要执行的代码
//}
//it里面的小括号都会给我们转换为 布尔型
// false 0 '' undefined null NaN
if(0){
      
      
console.log('真的')
}
</script>

括弧内の条件が true の場合、中括弧を入力してコードを実行します。
括弧内の結果がブール型でない場合は、ブール型への暗黙的な変換が行われます。

デュアルブランチ:

<script>
//if(条件){
      
      
//满足条件要执行的代码
//}else{
      
      
//不满足条件执行的代码
//}
// 例如：计算闰年.  能被4整除但不能被100整除，或者被400整除的年份是闰年，否则都是平年
// 1 用户输入年份
let year = +prompt('请输入年份：')
// 2 执行分支语句
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
      
      
    alert(`${ 
        year}年是闰年`)
} else {
      
      
    alert(`${ 
        year}年是平年`)
}
</script>

複数のブランチ:

<script>
//if (条件1){
      
      
//代码1
//}else if (条件2){
      
      
//代码2
//}else if (条件3){
      
      
//代码3
//}else{
      
      
//代码n
//}
// 例如：根据输入不同时间，输出不同的问候语  12点以前， 输出上午好  18点以前， 输出下午好 20点以前， 输出晚上好
// 1. 用户输入时间 等我们学api 自动获取时间
   let time = prompt('请输入小时：')
   // 2. 多分支判断
   if (time < 12) {
      
      
       document.write(`上午好`)
   } else if (time < 18) {
      
      
       document.write(`下午好`)
   } else if (time < 20) {
      
      
       document.write(`晚上好`)
   } else {
      
      
       document.write(`夜深了？`)
   }
   //上面的代码后期直接读取时间，做区间判断
</script>

まず条件 1 を判定し、条件 1 が満たされていればコード 1 を実行、そうでない場合は実行せず、次に
条件 2 を判定し、条件 2 が満たされていればコード 2 を実行、そうでない場合は実行しない それでも
満たされない場合は引き続き判定し、上記の場合など
どの条件も満たされない場合は、else のコード n を実行します

三項演算子

実際、二重分岐 (三項式とも呼ばれる) よりも記述が簡単です。

記号:
? 以下で使用されます:

<script>
//条件  ? 满足条件执行的代码 :  不满足条件执行的代码 
// console.log(true ? 1 : 2)
// console.log(false ? 1 : 2)

// if (3 > 5) {
      
      
//     alert('第一个')

// } else {
      
      
//      alert('第二个')
// }

// 简写  简单的算法，复杂的就不适合了
 3 > 5 ? alert('第一个') : alert('第二个')

</script>

通常、値を取得するために使用されます

例えば：

<script>
// 3 > 5 ? alert('第一个') : alert('第二个')
 let num1 = 40
 let num2 = 30
 // num1 > num2 ? console.log(num1) : console.log(num2)

 // num1 > num2 ? num1 : num2
 let re = num1 > num2 ? num1 : num2

 console.log(re)
 // 结果：40
</script>

switch ステートメント

<script>
 switch (2) {
      
      
      case 1:
          alert(1)
          break
      case 2:
          alert(2)
          break
      case 3:
          alert(3)
          break
      default:
          alert('没有数据')

  }

</script>

括弧内のデータと一致するケースの値を見つけ、その中の対応するコードを実行します。
一致 === がない場合は、デフォルトでコードを実行します。
例: データが値 2 と一致する場合、コード 2 を実行します。

予防

1. switch case 文は一般的に等価性判定に使用され、区間判定には適していません。
2. switch case は通常、break キーワードと組み合わせて使用​​する必要があります。break を使用しないと、大文字と小文字の区別が発生します。

ループ文

1. ブレークポイントのデバッグ

ブラウザがデバッグ インターフェイスを開きます

1. F12 を押して開発者ツールを開きます
2. クリックしてソース列へ
3. コードファイルを選択

ブレークポイント: 特定のコードに追加されたマークはブレークポイントと呼ばれ、このマークされたコードまでプログラムが実行されると、プログラムは一時停止します。

2. while ループ

if 文とよく似ており、括弧内の条件が true の場合にのみ実行コードに入り、
括弧内のコードは実行後に飛び出さず、引き続き括弧内に戻り、条件が満たされているかどうかを判断します。満たされていれば再度中括弧内のコードを実行し、再び括弧内に戻って括弧内の条件が満たされなくなるまで条件を判定、つまり飛び出す

while ループに関する注意事項:

<script>
 while (循环条件) {
      
      
   要重复执行的代码(循环条件)
  }

</script>

ループの本質は、特定の変数から開始し、継続的に変更を生成し、ゆっくりと終了条件に近づくプロセスです。したがって、サイクルには次の 3 つの要素が必要です。

1. 変数の開始値
2. 終了条件 (終了条件がない場合、ループは引き続き実行され、無限ループが発生します)
3. 変数変化量（自動インクリメントまたは自動デクリメントを使用）

<script>
let i = 1
 while (i <= 3) {
      
      
   document.write('我会循环三次<br>')
   i++
  }

</script>

ループの終わり:

continue: このサイクルを終了し、次のサイクルに進みます
。 Break: 現在のサイクルから抜け出します。

仕上げる

最後に一文をシェアします。

良い人は、他人を幸せにするのが得意だと思っているかもしれませんが、実際には、彼らの本当の得意分野は、自分自身を惨めで惨めで無力だと感じさせることです。
快感障害：拒絶を理解していない善良な老人

今回の共有は以上です。！！

コメント欄にメッセージを残して議論することを歓迎します。！