day2-JS基礎&流程式控制制

来源:https://www.cnblogs.com/sml-ylz/archive/2023/11/28/17861100.html
-Advertisement-
Play Games

自增自減運算符 1、基本使用 內置提供 ++、--運算符 是用於將變數本身進行加1或者減1操作 // 1、基本使用 var i = 10; i++;//等價於語句 i+=1 console.log(i);//11 var m = 10; m--; console.log(m) 2、前置與後置的區別 ...


自增自減運算符
1、基本使用
內置提供 ++、--運算符 是用於將變數本身進行加1或者減1操作
// 1、基本使用
var i = 10;
i++;//等價於語句 i+=1
console.log(i);//11
var m = 10;
m--;
console.log(m)

2、前置與後置的區別
// 2、前置與後置的區別
// 可以將++、--運算符號 設置到變數的前面或者後面 ++i i++
// 前置與後置的區別：不管前置還是後置永遠會將值進行加1或者減1操作 區別當遇到賦值或者輸出語句時 ++在就先將變數本身加1 然後在參與其他的運算 ++在後 先將變數參與其他運算之後 最後加1
var j = 10;
// var res = j++;
//
var res = ++j
console.log(res,j)

3、練習題
var k = 0;
// 計算結果需要使用k++的值 加上 ++k的值 加上k的值 加上 k++的值
/*
var a = k++; a=0 k=1
var b = ++k; b=2 k=2
var c = k; c=2 k=2
var d = k++; d=2 k=3
var res2 = a + b + c + d
*/

var res2 = k++ + ++k +k +k++;
console.log(res2);

數據類型轉換
強制轉換
轉換數值類型
1、Number
// 1、Number 語法Number(需要轉換的內容)
console.log(Number("100"));//100
console.log(Number("100元"));//NaN
console.log(Number("人民幣100"));//NaN
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(undefined));//NaN
console.log(Number(null));//0
// Number在轉換字元串時 只有字元串中所有的都是數字才可以轉換為數字否則得到的都是NaN

2、parseInt
// 2、parseInt
console.log(parseInt("100"));//100
console.log(parseInt("100元"));//100
console.log(parseInt("人民幣100"));//NaN
console.log(parseInt(true));//NaN
console.log(parseInt(false));//NaN
console.log(parseInt(undefined));//NaN
console.log(parseInt(null));//NaN
// parseInt主要是針對字元串 非字元串都是NaN 轉換字元串為數字的規則 從第一個字元開始提取數字 如果是數字就保留 只要遇到一個非數字就結束，如果結束的時候沒有提取到任何數字 最終結果就是NaN

3、parseFloat
// 3、parseFloat
console.log('-------------------------------------------')
console.log(parseFloat("100.00"));//100
console.log(parseFloat("100.01元"));//100
console.log(parseFloat("人民幣100.1"));//NaN

轉換字元串類型
// 1、toString 語法待轉數據變數.toString()
var num = 10;
console.log(num.toString());
// 布爾轉換字元串
console.log(true.toString())
console.log(false.toString())
// undefined
// TypeError: Cannot read properties of undefined (reading 'toString') 不能使用undefined讀取toString這個屬性 以後見到了類似的錯誤直接下結論 調用的變數值肯定是錯誤的
// console.log(undefined.toString());
// console.log(null.toString());
// 2、String String(待轉換的數據)
console.log(String(10))
console.log(String(undefined))

轉換布爾類型
// Boolean
console.log(Boolean(0))
// 在js中只有五種可以轉換為布爾值的false 其他的全部都是true
// 分別是空字元串、數字0 undefined、null、NaN
console.log(Boolean(" "));//true 空字元串是只有引號 如果字元串中有空格都算內容
console.log(Boolean(""));
console.log(Boolean(undefined));
console.log(Boolean(null))
console.log(Boolean(NaN));
console.log(Boolean("0"))

隱式轉換
/*
隱式轉換 是藉助於語言中運算符或者語句 自動將不滿足的數據類型轉換為需要的數據類型
例如 使用 - 表示進行減法運算
*/
var str = "1000";
// 因為減法運算需要兩邊都是數字 所以 自動的將str變成數字在進行計算
console.log(str - 10);
// 在自動轉換的過程中原始變數不會修改
console.log(typeof str);
console.log(str);
// 例如後面的流程式控制制 很多需要使用布爾值 如果你給的不是布爾值 就會自動轉換

流程式控制制
代碼的執行順序
代碼執行的順序 預設按照從上向下順序執行
涉及到賦值語句 先執行右邊 在執行左邊 單獨看某一個表達式 從左向右順序執行
無法實現代碼的跳躍式執行

if語句
1、語法
如果表達式為真就執行大括弧中的代碼塊 整個if語句結束 如果第一個表達式為假 會繼續檢查下一個elseif中的表達式是否為真，如果所有的表達式都為假 存在else語句的情況下 就執行else中的代碼塊
在if語句中else if與else並非必須
if(表達式){
代碼塊
}else if(表達式2){
代碼塊
}
...
else{
代碼塊
}

2、使用示例
// var has = true;
// console.log('買10個包子')
// if(has){
// console.log('買一個西瓜')
// }

var has = true;
// 在所有的表達式中 最終一定要得到一個布爾值 如果給的不是布爾值系統都會自動的轉換為布爾值
var num = 0;
if (has) {
console.log('買一個西瓜')
} else {
console.log('買10個包子')
}

var day = prompt('輸入數字0-6表示星期幾');
if (day == 0) {
console.log('摸魚')
} else if (day == 1) {
console.log('摸魚')
} else if (day == 2) {
console.log('發開代碼')
} else if (day == 3) {
console.log('提交測試')
} else if (day == 4) {
console.log('修改bug 發佈上線')
} else if (day == 5) {
console.log('加班修複線上bug')
} else {
console.log('休息睡覺')
}

switch語句
1、語法
//表達式會計算出一個值(不會自動轉換為布爾值)
switch(表達式){
case 值1:
代碼塊
break;
case 值2：
代碼塊
break;
...
default:
代碼
break;
}
//在使用Switch語句的時候 表達式的值與每一個case的值是進行的全等比較

2、基本使用
var day = prompt("輸入星期幾")
switch (day - 0) {
case 0:
console.log('摸魚')
break;
case 1:
console.log('划水')
break;
case 2:
console.log('寫代碼');
break;
case 3:
console.log('提交測試');
break;
case 4:
console.log('發佈上線');
break;
case 5:
console.log('加班修改bug');
break;
case 6:
console.log('休息 不可能');
break;
default:
console.log('今天星期幾');
break;
}

3、穿透
day = 2;
switch (day) {
case 0:
case 1:
case 2:
case 3:
case 4:
console.log('寫代碼');
break;
case 5:
case 6:
console.log('休息')
break;
}

三元
1、語法
表達式1？表達式2：表達式3
三元的語法 可以用於簡化if...else...語句
表達式1為真就執行表達式2否則就執行表達式3

2、使用示例
// 基本使用
var num = 20;
num == 20 ? console.log('num 等於20') : console.log('num不等於20')

if (num == 20) {
console.log('num 等於20')
} else {
console.log('num不等於20')
}
// 使用三元實現賦值功能
// 在設置個人資料的場景中性別 使用者看到的是 男 女 實際交互時使用的是1 2 這樣的數字表示
var inputSex = '男'
// 根據表達式的布爾值 決定是將1這個值還是2這個值賦值給sex變數
var sex = (inputSex == '男') ? 1 : 2
console.log(sex)

迴圈語句
迴圈四要素
迴圈是為了重覆的去實現一件事情或者一件有規律的事情
1、做什麼
2、計數器初始化
3、變更計數器
4、計數器作為條件的判斷 控制迴圈的次數

for語句
1、語法
for(計數器初始化;迴圈條件;計數器變更){
//迴圈體代碼
}

2、for示例
for (var i = 1; i <= 5; i++) {
console.log('跑第一圈400m')
}

3、執行過程

1、執行步驟1進行初始化計數器功能
2、執行步驟2 判斷條件是否滿足
如果條件為假 整個迴圈結束
如果條件為真 執行步驟四，執行完畢之後在執行步驟三 再次執行步驟條件判斷 根據條件判斷的結果進行重覆

4、斷點追蹤for迴圈的執行過程


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 自學day7 數組
    typora-copy-images-to: media 數組 一、概念 對象中可以通過鍵值對存儲多個數據，且數據的類型是沒有限制的，所以通常會存儲一個商品的信息或一個人的信息： var obj = { goodsname:"手機", price:"5000", introduce:"手機很時尚，很 ...
  • React 中事件處理
    不要問自己需要什麼樣的人生，而要問自己想要成為什麼樣的人。 我們從前面的學習知道一個 React 組件不僅僅只包含 DOM 結構的，還應該樣式和 Javascript 邏輯的。這裡我們認識邏輯構造之事件處理。 1. React 事件處理 這裡列舉了在 React 中事件的幾種綁定處理方式： impo ...
  • 記錄--仿貝殼地圖畫圈找房功能實現（高德地圖）
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 仿貝殼地圖畫圈找房功能實現（高德地圖） 前言 在最近租房時，看到貝殼找房上線了一個地圖畫圈找房的功能，感覺很是新奇。接觸地圖開發也有很長一段時間了，以前大部分都是基於web pc端開發，所以一般遇到這種圈選，繪製多邊形圓形都是直接基於官方 ...
  • Vite4+Typescript+Vue3+Pinia 從零搭建(4) - 代碼規範
    項目代碼同步至碼雲 weiz-vue3-template 要求代碼規範，主要是為了提高多人協同和代碼維護效率，結合到此項目，具體工作就是為項目配置 eslint 和 prettier。 editorconfig 安裝 EditorConfig for VS Code 插件，根目錄下新建 .edito ...
  • day3-函數
    迴圈練習 1、列印100以內7的倍數 // 需要驗證的是1-100之間的數字 迴圈計數器正好可以表示 // i初始值設置為1 正好可以表示出需要驗證的數字 for (var i = 1; i <= 100; i++) { if (i % 7 == 0) { console.log(i) } } 2、 ...
  • nodemon學習（一）簡介、安裝、配置、使用
    簡介 nodemon用來監視node.js應用程式中的任何更改並自動重啟服務,非常適合用在開發環境中。以前，我們開發一個node後端服務時，每次更改文件，均需重啟一下，服務才能生效。這使我們的開發效率降低了很多。nodemon的出現，可以隨時監聽文件的變更，自動重啟服務，我們開發時只需關註代碼即可， ...
  • 瀏覽器跨 Tab 視窗通信原理及應用實踐
    最近，相信大家一定被這麼個動效給刷屏了： 以至於，基於這個效果的二次創作層出不窮，眼花繚亂。 基於跨視窗通信的彈彈球： 基於跨視窗通信的 Flippy Bird： 我也嘗試製作了一個跨 Tab 視窗的 CSS 動畫聯動，效果如下： 代碼不多，核心代碼 200 行，感興趣的可以戳這裡：Github - ...
  • 【源碼系列#02】Vue3響應式原理（Effect）
    專欄分享：vue2源碼專欄，vue3源碼專欄，vue router源碼專欄，玩具項目專欄，硬核💪推薦🙌 歡迎各位ITer關註點贊收藏🌸🌸🌸 Vue3中響應數據核心是 reactive ， reactive 的實現是由 proxy 加 effect 組合，上一章節我們利用 proxy 實現了 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類