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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類