搜尋
首頁web前端前端問答javascript怎麼實現加減乘除運算

實作方法:1、利用「 」、「-」、「*」、「/」、「%」符,可實現加法、減法、乘法、除法和取餘運算;2、利用「 =」、「-=」、「*=」、「/=」符,會先進行加減乘除運算,再將結果賦值給運算子左側的變數;3、利用「 x」或「x 」符將變數的值自增( 1),利用利用「--x」或「x--」符號對變數的值進行自減(-1)。

javascript怎麼實現加減乘除運算

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

在javascript中,可以利用運算子實現加減乘除四則運算。運算子是用來告訴 JavaScript 引擎執行某種操作的符號,例如加號( )表示執行加法運算,減號(-)表示執行減法運算等。

一:算術運算子

算術運算子用來執行常見的數學運算,例如加法、減法、乘法、除法等,下表中列舉了JavaScript 中支援的算術運算子:

#加法運算子x y 表示計算x 加y 的和-減法運算符
#運算子 描述
###x - y 表示計算x 減y 的差############*######乘法運算子######x * y 表示計算x 乘y 的積############/######除法運算子######x / y 表示計算x 除以y 的商####### ######%######取模(餘)運算子######x %######取模數(餘)運算子######x % y 表示計算x 除以y 的餘數############

加法運算子

範例1

注意特殊運算元的求和運算。

var n = 5;  //定义并初始化任意一个数值
console.log(NaN + n);  //NaN与任意操作数相加,结果都是NaN
console.log(Infinity + n);  //Infinity与任意操作数相加,结果都是Infinity
console.log(Infinity + Infinity);  //Infinity与Infinity相加,结果是Infinity
console.log((-Infinity) + (-Infinity));  //负Infinity相加,结果是负Infinity
console.log((-Infinity) + Infinity);  //正负Infinity相加,结果是NaN

範例2

加運算子能夠根據運算元的資料類型,決定是相加操作,還是相連運算。

console.log(1 + 1);  //如果操作数都是数值,则进行相加运算
console.log(1 + "1");  //如果操作数中有一个是字符串,则进行相连运算
console.log(3.0 + 4.3 + "");  //先求和,再连接,返回"7.3"
console.log(3.0 + "" + 4.3);  //先连接,再连接,返回"34.3"
                              //3.0转换为字符串3

在使用加法運算子時,應先檢查運算元的資料型別是否符合需求。

減法運算子

範例1

注意特殊運算元的減法運算。

var n = 5;  //定义并初始化任意一个数值
console.log(NaN - n);  //NaN与任意操作数相减,结果都是NaN
console.log(Infinity - n);  //Infinity与任意操作数相减,结果都是Infinity
console.log(Infinity - Infinity);  //Infinity与Infinity相减,结果是NaN
console.log((-Infinity) - (-Infinity));  //负Infinity相减,结果是NaN
console.log((-Infinity) - Infinity);  //正负Infinity相减,结果是-Infinity

範例2

在減法運算中,如果運算元為字串,先試著把它轉換為數值,再進行運算。如果有一個操作數不是數字,則傳回 NaN。

console.log(2 - "1");  //返回1
console.log(2 - "a");  //返回NaN

使用值減去 0,可以快速把值轉換為數字。例如 HTTP 請求中查詢字串一般都是字串型數字,可以先把這些參數值減去 0 轉換為數值。這與呼叫 parseFloat() 方法的結果相同,但減法更有效率、更快速。減法運算子的隱性轉換如果失敗,則傳回 NaN,這與使用 parseFloat() 方法執行轉換時的回傳值是不同的。

例如,對於字串「100aaa」而言,parseFloat() 方法能夠解析出前面幾個數字,而對於減法運算子來說,則必須是完整的數字,才可以進行轉換。

console.log(parseFloat("100aaa"));  //返回100
console.log("100aaa" - 0);  //返回NaN

對布林值來說,parseFloat() 方法能夠把 true 轉換為 1,把 false 轉換為 0,而減法運算子視其為 NaN。

對物件來說,parseFloat() 方法會嘗試呼叫物件的toString() 方法轉換,而減法運算子先嘗試呼叫物件的valueOf() 方法轉換,失敗之後再呼叫toString()進行轉換。

乘法運算子

注意特殊運算元的乘法運算。

var n = 5;  //定义并初始化任意一个数值
console.log(NaN * n);  //NaN与任意操作数相乘,结果都是NaN
console.log(Infinity * n);  //Infinity与任意非零正数相乘,结果都是Infinity
console.log(Infinity * (- n));  //Infinity与任意非零负数相乘,结果是-Infinity
console.log(Infinity * 0);  //Infinity与0相乘,结果是NaN
console.log(Infinity * Infinity);  //Infinity与Infinity相乘,结果是Infinity

除法運算子

注意特殊運算元的除法運算。

var  n = 5;  //定义并初始化任意一个数值
console.log(NaN / n);  //如果一个操作数是NaN,结果都是NaN
console.log(Infinity / n);  //Infinity被任意数字除,结果是Infinity或-Infinity
                            //符号由第二个操作数的符号决定
console.log(Infinity / Infinity);  //返回NaN
console.log(n / 0);  //0除一个非无穷大的数字,结果是Infinity或-Infinity,符号由第二个操作数的符号决定
console.log(n / -0);  //返回-Infinity,解释同上

求餘運算子

求餘運算也稱模運算例如:

console.log(3 % 2);  //返回余数1

模運算主要針對整數進行運算,也適用於浮點數。例如:

console.log(3.1 % 2.3);  //返回余数0.8000000000000003

範例

注意特殊運算元的求餘運算。

var n = 5;  //定义并初始化任意一个数值
console.log(Infinity % n);  //返回NaN
console.log(Infinity % Infinity);  //返回NaN
console.log(n % Infinity);  //返回5
console.log(0 % n);  //返回0
console.log(0 % Infinity);  //返回0
console.log(n % 0);  //返回NaN
console.log(Infinity % 0);  //返回NaN

二:賦值運算子

#賦值運算子用來為變數賦值,有以下兩種形式:

  • #簡單的賦值運算 = :將等號右側運算元的值直接複製到左邊的運算元,因此左側運算元的值會改變。

  • 附加操作的賦值運算:賦值之前先對右側運算元執行某種操作,然後把運算結果複製給左側運算元。

一些附加運算的賦值運算就可以實現加減乘除四則運算。具體說明如表所示:

加法運算或連接運算並賦值a = ba = a b減法運算並賦值a -= ba= a - b乘法運算並賦值a *= ba = a * b##/=a = a / b
實作加減乘除四則運算的附加運算的賦值運算子
賦值運算子 說明 範例 #等效於
# =
-=
*=
除法運算並賦值 a /= b


%=

取模運算並賦值a %= b

a = a % b

三:自增、自減運算子自增、自減運算符用來對變數的值進行自增( 1)、自減(-1)操作,下表列舉了JavaScript 中支援的自增、自減運算子:
範例程式碼如下:
var x = 10;
x += 20;
console.log(x);  // 输出:30
var x = 12,
    y = 7;
x -= y;
console.log(x);  // 输出:5
x = 5;
x *= 25;
console.log(x);  // 输出:125
x = 50;
x /= 10;
console.log(x);  // 输出:5
x = 100;
x %= 15;
console.log(x);  // 输出:10

############################################### ###運算子######名稱######影響############# x######自增運算子######將x 加1,然後傳回x 的值############x ######自增運算子######傳回x 的值,然後再將x 加1### #########--x######自減運算子######將x 減1,然後傳回x 的值############x --######自減運算子######傳回x 的值,然後將x 減1###############範例程式碼如下:###
var x;

x = 10;
console.log(++x);  // 输出:11
console.log(x);    // 输出:11

x = 10;
console.log(x++);  // 输出:10
console.log(x);    // 输出:11

x = 10;
console.log(--x);  // 输出:9
console.log(x);    // 输出:9

x = 10;
console.log(x--);  // 输出:10
console.log(x);    // 输出:9
###【相關推薦:###javascript影片教學###、###程式設計基礎影片###】###

以上是javascript怎麼實現加減乘除運算的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
了解usestate():綜合反應國家管理指南了解usestate():綜合反應國家管理指南Apr 25, 2025 am 12:21 AM

useState()isaReacthookusedtomanagestateinfunctionalcomponents.1)Itinitializesandupdatesstate,2)shouldbecalledatthetoplevelofcomponents,3)canleadto'stalestate'ifnotusedcorrectly,and4)performancecanbeoptimizedusinguseCallbackandproperstateupdates.

使用React的優點是什麼?使用React的優點是什麼?Apr 25, 2025 am 12:16 AM

ReactispupularduetoItsOmpontement,基於虛擬,虛擬詞,Richecosystem和declarativedation.1)基於組件的harchitectureallowslowsforreusableuipieces。

在React中調試:識別和解決共同問題在React中調試:識別和解決共同問題Apr 25, 2025 am 12:09 AM

todebugreactapplicationsefectefectionfection,usethestertate:1)proppropdrillingwithcontextapiorredux.2)使用babortControllerToptopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRaceeDitions.3)intleleassynChronOusOperations.3)

反應中的usestate()是什麼?反應中的usestate()是什麼?Apr 25, 2025 am 12:08 AM

usestate()inrectallowsStateMagementionInfunctionalComponents.1)ITSIMPLIFIESSTATEMAGEMENT,MACHECODEMORECONCONCISE.2)usetheprevcountfunctionToupdateStateBasedonitspReviousViousViousvalue,deveingingStaleStateissues.3)

usestate()與用戶ducer():為您的狀態需求選擇正確的掛鉤usestate()與用戶ducer():為您的狀態需求選擇正確的掛鉤Apr 24, 2025 pm 05:13 PM

selectUsestate()forsimple,獨立的variables; useusereducer()forcomplexstateLogicorWhenStatedIppedsonPreviousState.1)usestate()isidealForsImpleupDatesLikeToggGlikGlingaBglingAboolAboolAupDatingacount.2

使用usestate()管理狀態:實用教程使用usestate()管理狀態:實用教程Apr 24, 2025 pm 05:05 PM

useState優於類組件和其它狀態管理方案,因為它簡化了狀態管理,使代碼更清晰、更易讀,並與React的聲明性本質一致。 1)useState允許在函數組件中直接聲明狀態變量,2)它通過鉤子機制在重新渲染間記住狀態,3)使用useState可以利用React的優化如備忘錄化,提升性能,4)但需注意只能在組件頂層或自定義鉤子中調用,避免在循環、條件或嵌套函數中使用。

何時使用usestate()以及何時考慮替代狀態管理解決方案何時使用usestate()以及何時考慮替代狀態管理解決方案Apr 24, 2025 pm 04:49 PM

useUsestate()forlocalComponentStateMangementighatighation; 1)usestate()isidealforsimple,localforsimple.2)useglobalstate.2)useglobalstateSolutionsLikErcontExtforsharedState.3)

React的可重複使用的組件:增強代碼可維護性和效率React的可重複使用的組件:增強代碼可維護性和效率Apr 24, 2025 pm 04:45 PM

ReusableComponentsInrectenHanceCodainainability and效率byallowingDevelostEsteSeTheseTheseThesAmeCompOntionActActRossDifferentPartSofanApplicationorprojects.1)heSredunceRedUndenceNandSimplifyUpdates.2)yensureconsistencyInuserexperience.3)

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具