首頁>網頁設計教程>Javascript教程

一起聊聊JavaScript運算符

作者：Eve Cole 更新時間：2022-08-06 08:59:52
本篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了關於運算符的相關問題，運算符也被稱為操作符，是用於實現賦值、比較和執行算術運算等功能的符號，下面一起來看一下，希望對大家有幫助。

運算符（operator）也被稱為操作符，是用來實現賦值、比較和執行算數運算等函數的符號。

JavaScript中常用的運算子有：

  • 算術運算子
  • 遞增和遞減運算子
  • 比較
    • 運算
  • 子邏輯運算子
  • 賦值運算子

算術運算子

概念：算術運算所使用的符號，用於執行兩個變數或值的算術運算。

運算子描述實例
+加10+20=30
-減20-10=10
*乘10*20=200
/除10/20=0.5
%取餘數(取模)返回除法的餘數9%2=1
console. log(1 + 1); //2
    console.log(1 - 1); //0
    console.log(1 * 1); //1
    console.log(1 / 1); //1
    console.log(4 % 2); //0

浮點數在算數運算裡面會有誤差（避免直接參與運算）：

console.log(0.1 + 0.2); //0.30000000000000004

無法直接判斷兩個浮點數是否相等。

var num = 0.1 + 0.2;
    console.log(num == 0.3); //false
  • 算術運算子優先權：先乘除後加減
  • 可以使用%取餘運算子來判斷一個數能否被整除

表達式與傳回值：

由數字、運算符、變數等組成的式子我們稱為表達式。

表達式最終都會有一個結果回傳給我們，我們稱為回傳值。

遞增和遞減運算子

如果需要重複給數字變數加法或減去1，可以使用遞增（ ++ ）和遞減（ -- ）運算子來完成。

繁瑣寫法：

var num = 1;
    num = num + 1;
    num = num + 1;
    console.log(num); //3

前置遞增運算子：

++寫在變數的前面

++num前置遞增就是自加1，類似num=num+1

var age = 10;
    ++age;
    console.log(age);//11 類似age = age + 1

使用口訣：先自加，後回傳值

console.log(age);
    var a = 10;
    console.log(++a + 10); //(10+1)+10=21

後置遞增運算子

++寫在變數的後面

num++後置遞增，就是自加1，類似num=num+1

var age = 10;
    age++;
    console.log(age);//11 類似age = age + 1

使用口訣：先傳回原值，再自加

var a = 10;
    console.log(a++ + 10); //10+10=20
    console.log(a); //11

差異總結

  • 前置遞增和後置遞增運算子可以簡化程式碼的寫，讓變數的值+1比以前寫法更簡單。
  • 單獨使用時，運行結果相同。
  • 與其他程式碼聯用時，執行結果會不同。
  • 前置：先自加，後運算（先己後人）
  • 後置：先原值運算，後自加（先人後己）
  • 開發時，大多使用後置遞增/遞減，且程式碼獨佔一行。例： num++;

練習：

var e = 10;
    var f = e++ + ++e; //1.e++=10 e=11 2.++e=12 f=10+12
    console.log(f); //22

比較運算

子概念：比較運算子（關係運算子）是兩個資料進行比較時所使用的運算符，比較運算後，會傳回一個布林值（true/false）作為比較運算的結果。

運算子名稱說明案例結果
<小於號1>2 true
>大於號1>2 false
>=大於等於號（大於或等於） 2>=2 true
<=小於等於號（小於或​​等於） 3<=2 false
==判等號（會轉型） 17==17 true
!=不等號17!=17 false
=== !==全等，要求值和資料型態都一致17==='17' false
console.log( 2 <= 5); //true
    console.log('岳澤以' = '個人部落格'); //false
    console.log(17 == '17'); //true 預設轉換資料型，字串型轉換為數字型console.log(17 = '17'); //false 資料型別不同，要求值與資料類型一致
符號作用用法
=賦值把右邊給左邊
==判斷判斷兩邊值是否相等（存在隱式轉換）
===全等判斷兩邊的值和資料型態是否完全相同

邏輯運算子

概念：邏輯運算子是用來進行布林值運算的運算符，其傳回值也是布林值。後面開發中常用於多個條件的判斷。

邏輯運算子說明案例
&& "邏輯與"，簡稱「與」and ture && false
丨丨"邏輯或"，簡稱「或」or ture丨丨false
! "邏輯非"，簡稱「非」not ! true

邏輯與

符號： &&相對於and

兩側都為true結果才是true ，只要有一邊為false ，結果就為false

console.log(3 > 5 && 3 > 2); //false
    console.log(3 < 5 && 3 < 7); //true

邏輯或

符號： ||相當於or

倆側都為false ，結果才是false ，只要有一側為true ，結果就是true

console.log(3 > 5 && 3 > 2); //false
    console.log(3 < 5 && 3 < 7); //true

邏輯非

符號： !相對於not

邏輯非也叫作取反符，用來取一個布林值相反的值。

console.log(!true); //false
    console.log(!false); //true

短路運算（邏輯中斷）

短路運算的原理：當有多個表達式（值）時，左邊的表達式值可以確定結果時，就不再繼續運算右邊的表達式的值。

邏輯與：

  • 語法：表达式1 && 表达式2
  • 如果第一個表達式的值為真，則傳回表達式上2
  • 如果第一個表達式的值為假，則傳回表達式1
console.log(123 && 456); //回傳456，除了0以外的所有數字都為真。
    console.log(123 && 456 && 789); //回傳789，依序後推console.log(0 && 456); //0

邏輯或：

  • 語法：表达式1 || 表达式2
  • 如果表達式1結果為真，則傳回表達式1
  • 如果表達式1結果為假，則傳回表達式2
console.log(123 || 456); //123
    console.log(123 || 456 || 123 + 456); //123
    console.log(0 || 456 || 123 + 456); //456

注意：邏輯中斷會造成短路操作，即不執行後面的程式碼，影響程式設計師的運作結果。

var num = 0;
    console.log(123 || num++); //邏輯中斷造成num++未執行console.log(num); //0

賦值運算子

概念：用來把資料賦值給變數的運算子

賦值運算子說明案例
=直接賦值var name='岳澤以';
+=、-=加、減數後再賦值var age=10; age+=5; //15
*=、/=、%=乘、除、取餘後再賦值var age=10; age*=5; //10
var num = 5;
    num += 10;
    console.log(num); //5+10=15
    num *= 3;
    console.log(num); //15*3=45運算子優先權優先權
運算子順序
1小括號()
2一元運算子++ -- !
3算術運算子先* /後+ -
4關係

運算

符> >= < <=
5相等運算子== != === !==
6邏輯運算子先&&後丨丨
7賦值運算子=
8逗號運算子,
  • 一元運算子裡的邏輯非優先順序很高。
  • 邏輯與比邏輯或優先權高
console.log(4 >= 6 || '我' != '你' && !(12 * 2 == 144) && true); //true
    /* 
    邏輯運算子分四段1.4 >= 6 得false
    2.'我' != '你'得true
    3.!(12 * 2 == 144)得ture
    4.true
    然後判斷邏輯與：2與3得true 3和4得true 
    再判斷邏輯或得：true
     */
相關文章