Web - JS基礎語法與表達式

概述

這篇文章主要介紹了 JavaScript 的基礎語法,包括代碼書寫位置、ERPL 環境、變量(命名規則、默認值、初始化)、數據類型(基本和復雜,及各類型特點、轉換)、表達式和運算符(算數、特殊算數、關系、邏輯、賦值、自增自減)等內容。

書寫位置

body中的標簽,在內部書寫JavaScript代碼,將代碼單獨保存為.js格式文件,然后在html文件中使用。

<body><script type="text/javascript">alert('這是javascript的第一行代碼');</script><script src="js/mini.js"></script>
</body>
ERPL環境

控制臺也是一個ERPL環境,可以使用它臨時測試表達式的值,運行順序,read讀->eval執行->print打印->loop循環。

變量

變量是計算機語言中能存儲計算結果或能表示抽象概念,變量不是數值本身,它們僅僅是一個用于存儲數值的容器。

要想使用變量,第一步就是聲明它,并給它賦值,變量的值可以被改變,改變變量值不再需要書寫關鍵字了。

變量的合法命名,另外在附加一句,函數、類名、對象的屬性等也都要遵守這個命名規則:

  • 只能由字母、數字、下劃線、$組成,但不能以數字開頭。
  • 不能是關鍵字或保留字
  • 變量名大小寫敏感,a和A兩個不同的變量。

一個變量只定義,但沒有賦初值,默認值是undefind,一個變量只有定義完,并賦初值之后,才算正式初始化完成。

數據類型

JavaScript中存在兩大數據類型:基本數據類型、復雜數據類型。 基本數據類型中有Number、String、Boolean、Undefinednull,復雜數據類型有Object、Array、Function、Map、Set等等。

簡單數據類型

使用typeof運算符可以檢測值或者變量的類型。

基本類型值如下:

類型名值舉例typeof檢測結果
數字類型5number
字符串類型‘慕課網’string
布爾類型trueboolean
undefined類型undefinedundefined
null類型objectnull
Number(數字)類型

所有數字不分大小、不分整浮、不分正負,都是數字類型,在小數中0是可以省略的。

較大數或較小數(絕對值較小)可以寫成科學計數法。

let a = 3e8; //300000000
let b = 3e-4; //0.0003

不同進制的數字,二進制數值以0b開頭,八進制數值以0開頭,十六進制數字以0x開頭。

NaN:NaN是英語"not a number"的意思,即不是一個數,但它是一個數字類型的值。 0除以0的結果是NaN,事實上,在數學運算中,若結果不能得到數字,其結果往往都是NaN。

String(數字)類型

字符創就是人類的自然語言,字符串要用引號包裹,雙引號或者單引號均可。

數字11和字符串11在語義上是不同的,前者表達的一個數量,后者是一個文本。

使用加號"+"可以用來拼接多個字符串,要將一個變量的值插入到字符串中,要斬斷鏈接,新版的Es中增加了反引號表示法,可以更方便進行變量插值。

let year = 2024;
let string = "北京冬奧會在" + year + "年召開";
console.log(string);

有時候需要使用空字符串,直接書寫閉合的引號對即可。

字符串的length屬性表示字符串長度。

let strLength = '我是stark張宇,請大家多多指教';
console.log(strLength.length);

字符創的常用方法,方法就是可以調用的函數,字符串有豐富的方法:

let strLength = '我是stark張宇,請大家多多指教';//得到指定位置字符,字符串的下標從0開始
console.log(strLength.charAt(5));//提取子串 得到從0到9結束的子串,不包括10
//如果省略第二個參數,返回的子串會一直到字符串的結尾
console.log(strLength.substring(0,10));
//將得到從0開始,長度為2的子串
console.log(strLength.substr(0,2));
strLength.slice();//將字符串變為大寫
console.log(strLength.toUpperCase());
//將字符串變為小寫
console.log(strLength.toLowerCase());//檢索字符串 返回某個指定的字符串值在字符串中首次出現的位置
//如果要檢索的字符串沒有出現,則該返回-1
console.log(strLength.indexOf('zcc'));
布爾類型

布爾型值只有2個:true和false,分別表示真和假。

undefind

一個沒有被賦值的變量的默認值的變量默認值是undefind,而undefind的類型也是undefind,undefind又是值,又是一種類型,這種類型只有它自己一個值。

null

null表示空,它是空對象,當我們需要將對象銷毀、數組銷毀或者刪除事件監聽時,通常將他們設置為null。

使用typeof檢測null值,結果是object,這點尤其要注意,類型和typeof檢測結果并不總是一一對應,比如數組用typeof檢測結果也是object。

復雜數據類型

除基本類型外,Js的世界中還有復雜數據類型,復雜數據類型都是引用類型,引用類型的特性將在數組一課中介紹。

數據類型的轉換

使用Number()函數

  • 純數字字符串能變成數字,不是純數字的字符串將轉為NaN。
  • 布爾值true變為1,false變為0
  • undefind變成NaN,null變成0

使用parseInt()轉換整數parseInt()函數的功能是將字符串轉為整數

  • 自動截掉第一個非數字字符之后的所有字符串
  • 所有文字都將被截掉
  • 如果字符串不是以數字開頭,則轉為NaN
  • parseInt()函數不四舍五入

parseFloat()函數parseFloat()函數的功能是將字符串轉為浮點數

String()函數除了數字式科學計數法和非10進制數字會轉為10進制的值,其余都是長的相同的字符串。

toString()函數幾乎所有的值都有toString()方法,功能是將值轉為字符串

Boolean()函數

  • 0和NaN轉為false,其他都數字都轉為true。
  • 空字符串變為false,其他都轉為true
  • undefined和null轉為false
隱式類型轉化

如果參與數學運算的某操作數不是數字型,那么JavaScript會自動將此操作數轉換為數字型,隱式轉換的本質是內部調用Number函數。

表達式和預算符

算數運算符

算數運算符一共有5種:加(+)、減(-)、乘(*)、除(/)、取余(%),默認情況,懲處法的優先級要高于加法和減法;必要時可以使用圓括號來改變運算的順序。

加號的兩種作用:如果加號兩邊的變量都是Number類型,則為加法,否則為連字符。

取余運算也叫作求模運算,用百分號%表示,a % b 表示a除以b的余數,它不關心整數部分,只關心余數。

特殊算數運算
IEEE754

JavaScript或者PHP中,有些小數的數學運算不是很精確,JavaScript使用了IEEE754二進制浮點數算數標準,這會使一些個別的小數運算產生丟失精度的問題。

解決辦法:在進行小數運算時,要調用數字的

const a = 0.1;
const b = 0.2;
Number(( a + b ).toFixed(2));
冪和開根號

JavaScript中沒有提供冪計算、開根號的運算符,需要使用Math對象的相關方法進行計算。

//Math.pow(a,b) a的b次方
Math.pow(2,3) //2的3次方
Math.pow(3,2) //3的2次方 //Math.sqrt(a) 根號下a的計算,負數直接得NaN
Math.sqrt(81) //9
Math.sqrt(-81) //NaN
向上取整 和 向下取整
Math.ceil(3.56) //向上取整 4
Math.floor(3.56) //向下取整 3
關系運算符

大于>、小于<兩個符號和數學相同,大于等于運算符是>=,小于運算時<=

相等和全等:如果想比較兩個值是否相等,此時應該使用==運算符,兩個等號運算符不比較值的類型,它會進行隱式轉化后比較值是否相等。===運算符不僅比較值是否相同,也比較類型是否相同。

NaN作為一個特殊的數字類型值,它在用==比較的時候也有特殊的結果。

如何判斷某變量值為NaN?isNaN函數可以用來判斷變量值是否為NaN

不相等和不全等!=表示不相等,!==表示不全等。

邏輯運算符

邏輯運算符有3個: 非!、與&&、或||

  • 非也可以稱為置反運算,是一個單目運算符,只需要一個操作數,置反運算的結果一定是布爾值。
  • 與運算表示并且,稱為與運算,口訣都真才真。
  • 或運算表示或者,有真就真。
賦值運算符

JavaScript中等號表示賦值,==判斷是否相等(不判斷類型),===判斷是否全等,賦值運算符會將等號右邊的數值,賦予等號左邊的變量。

快捷賦值:表示在原數值基礎上進一步進行運算

let a1 = 3;
a1 += 5; // 等價于 a = a + 5;

自增/自減運算符:++--是自增、自減運算符,表示在自身基礎上加1或減1。

a++++a的區別:a++先用再加,++a先加在用。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/71643.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/71643.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/71643.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

一臺服務器將docker image打包去另一天服務器安裝這個鏡像

一臺服務器將docker image打到去另一天服務器安裝這個鏡像 1. 打包2.另一臺服務器執行 1. 打包 docker save -o nebula-graph-studio.tar harbor1.vm.example.lan/dockerio/vesoft/nebula-graph-studioxxx.tar 是打包好的文件 后面的是 docker image 2.另一臺服務器執行 docke…

一周學會Flask3 Python Web開發-response響應格式

鋒哥原創的Flask3 Python Web開發 Flask3視頻教程&#xff1a; 2025版 Flask3 Python web開發 視頻教程(無廢話版) 玩命更新中~_嗶哩嗶哩_bilibili 在HTTP響應中&#xff0c;數據可以通過多種格式傳輸。大多數情況下&#xff0c;我們會使用HTML格式&#xff0c;這也是Flask中…

TCP和Http協議

TCP 三次握手&#xff1a; 第一次握手 &#xff1a; 初始狀態&#xff1a;開始時&#xff0c;客戶端處于 CLOSED&#xff08;關閉&#xff09;狀態&#xff0c;服務端處于 LISTEN&#xff08;監聽&#xff09;狀態&#xff0c;等待客戶端的連接請求。客戶端發送請求&#xff…

圖論 之 最小生成樹

文章目錄 題目1584.連接所有點的最小費用 最小生成樹MST&#xff0c;有兩種算法進行求解&#xff0c;分別是Kruskal算法和Prim算法Kruskal算法從邊出發&#xff0c;適合用于稀疏圖Prim算法從頂點出發&#xff0c;適合用于稠密圖&#xff1a;基本思想是從一個起始頂點開始&#…

前端面試之Box盒子布局:核心知識與實戰解析

目錄 引言&#xff1a;布局能力決定前端高度 一、盒模型基礎&#xff1a;看得見的像素戰爭 1. 標準盒模型 vs IE盒模型 2. 核心組成公式 3. 視覺格式化模型 二、傳統布局三劍客 1. 浮動布局&#xff08;Float Layout&#xff09; 2. 定位布局&#xff08;Position Layou…

OnlyOffice:前端編輯器與后端API實現高效辦公

OnlyOffice&#xff1a;前端編輯器與后端API實現高效辦公 一、OnlyOffice概述二、前端編輯器&#xff1a;高效、靈活且易用1. 完善的編輯功能2. 實時協作支持3. 自動保存與版本管理4. 高度自定義的界面 三、后端API&#xff1a;管理文檔、用戶與權限1. 輕松集成與定制2. 實時協…

Python多線程編程理解面試題解析

一、多線程介紹 Python 的多線程是一種實現并發編程的方式&#xff0c;允許程序同時執行多個任務。然而&#xff0c;由于 Python 的全局解釋器鎖&#xff08;GIL&#xff09;的存在&#xff0c;多線程在某些場景下可能無法充分利用多核 CPU 的性能。以下是對 Python 多線程的理…

如何通過 Python 實現一個消息隊列,為在線客服系統與海外運營的APP對接

對方有兩個核心需求: 訪客上線的時候,要通知對方的業務系統,業務系統根據訪客的身份信息,推送個性化的歡迎詞。訪客完成下單的時候,要能推送一個下單成功的通知,并且包含訂單信息和鏈接。根據這兩個需求,那就需要實現由客服系統到業務系統的消息隊列推送,以及通過 Open…

中文Build a Large Language Model (From Scratch) 免費獲取全文

中文pdf下載地址&#xff1a;https://pan.baidu.com/s/1aq2aBcWt9vYagT2-HuxdWA?pwdlshj 提取碼&#xff1a;lshj 原文、代碼、視頻項目地址&#xff1a;https://github.com/rasbt/LLMs-from-scratch 翻譯工具&#xff1a;沉浸式翻譯&#xff08;https://app.immersivetrans…

項目設置內網 IP 訪問實現方案

在我們平常的開發工作中&#xff0c;項目開發、測試完成后進行部署上線。比如電商網站、新聞網站、社交網站等&#xff0c;通常對訪問不會進行限制。但是像企業內部網站、內部管理系統等&#xff0c;這種系統一般都需要限制訪問&#xff0c;比如內網才能訪問等。那么一個網站應…

elf_loader:一個使用Rust編寫的ELF加載器

本文介紹一個使用Rust實現的ELF加載器。 下面是elf_loader的倉庫鏈接&#xff1a; github&#xff1a; https://github.com/weizhiao/elf_loaderhttps://github.com/weizhiao/elf_loader crates.io&#xff1a; https://crates.io/crates/elf_loaderhttps://crates.io/cra…

數據庫驅動免費下載(Oracle、Mysql、達夢、Postgresql)

數據庫驅動找起來好麻煩&#xff0c;我整理到了一起&#xff0c;需要的朋友免費下載&#xff1a;驅動下載 目前收錄了Oracle、Mysql、達夢、Postgresql的數據庫驅動的多個版本&#xff0c;后續可能會分享更多。

對接扣子雙向流式 TTS Demo

Web端對接Demo <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><title>TTS 測試</title> </head><body><h1>TTS 測試頁面</h1><textarea id"textInput" rows&…

科普:“git“與“github“

Git與GitHub的關系可以理解為&#xff1a;Git是一種軟件工具&#xff0c;而GitHub則是一個在線平臺&#xff0c;它們是“一家子”。二者的關聯最直接體現在你通過Git在GitHub倉庫中clone軟件包到你的機器中來。 具體來說&#xff1a; 一、Git 定義&#xff1a;Git是一個開源的…

jsherp importItemExcel接口存在SQL注入

一、漏洞簡介 很多人說管伊佳ERP&#xff08;原名&#xff1a;華夏ERP&#xff0c;英文名&#xff1a;jshERP&#xff09;是目前人氣領先的國產ERP系統雖然目前只有進銷存財務生產的功能&#xff0c;但后面將會推出ERP的全部功能&#xff0c;有興趣請幫點一下 二、漏洞影響 …

【目標檢測】【BiFPN】EfficientDet:Scalable and Efficient Object Detection

EfficientDet&#xff1a;可擴展且高效的目標檢測 0.論文摘要 模型效率在計算機視覺中變得越來越重要。在本文中&#xff0c;我們系統地研究了用于目標檢測的神經網絡架構設計選擇&#xff0c;并提出了幾項關鍵優化以提高效率。首先&#xff0c;我們提出了一種加權雙向特征金…

拖動線條改變區域大小

瀏覽網頁時&#xff0c;經常看到這樣一個功能&#xff0c;可以通過拖拽線條&#xff0c;改變左右區域大小 在管理后臺中更為常見&#xff0c;菜單的寬度如果固定死&#xff0c;而后續新增的菜單名稱又不固定&#xff0c;所以很可能導致換行&#xff0c;樣式不太美觀&#xff0c…

輸入框元素覆蓋沖突

后端響應中的 "trainingKbGroupName": "基礎死型" 通過searchForm2.initFormData(rowData[0]);操作會把基礎死型四個字填充到<div class"col-sm-5 form-group"> <label class"col-sm-3 control-label">知識點分組名稱<…

【LLM】Llama 3 論文精讀

導言 Llama 3.5系列模型的發布&#xff1a; Llama 3.5系列模型是開源的&#xff0c;最大模型參數為405B&#xff08;[[稠密Transformer架構]]&#xff0c;而不是MOE 架構&#xff09;&#xff0c;上下文窗口長度為128K。模型支持多語言和工具使用&#xff0c;并且在某些評估中已…

selenium環境搭建

1. 安裝selenium pip install selenium -i https://pypi.tuna.tsinghua.edu.cn/simple/如遇以下報錯 Getting requirements to build wheel ... errorerror: subprocess-exited-with-error Getting requirements to build wheel did not run successfully.│ exit code: 1╰─…