詳解js運算符

Dean 發布于2019-08-21 12:35 / 796人閱讀

摘要：對象返回第二個操作數對象對象邏輯或與邏輯與操作相似，如果有一個操作數不是布爾值，邏輯或也不一定返回布爾值此時，它遵循下列規則如果第一個操作數是對象，則返回第一個操作數。無論這個值是什么數據類型，這個運算符都會返回一個布爾值。

加法運算符

如果算術運算的值不是數值，那么js后臺會先使用Number()轉型函數將其轉換為數值：

var num = 1 + NaN;//NaN,只要有一個NaNny就為NaN
var num = 10 + "10";//1010,"+"為字符串連接符，有字符串就不是加法
var box = "你的歲數是："+10+10;//你的歲數是：1010，被轉換成字符串
var box = "你的歲數是"+(10+10);//你的歲數是：20，沒有被轉換成字符串
var box = 10+10+"是你的歲數";//20是你的歲數，沒有被轉換成字符串

邏輯操作符 邏輯與(&&)

第一個操作數	第二個操作數	結果
true	true	true
true	false	false
false	true	false
false	false	false

如果兩邊的操作數有一個操作數不是布爾值的情況下，與運算符就不一定返回布爾值，此時，遵循以下規則：

 1. 第一個操作數是對象，則返回第二個操作數
 2. 第二個操作數是對象，則第一個操作數返回true，才返回第二個操作數，否則返回false；
 3. 有一個操作數是null，則返回null；
 4. 有一個操作數是undefined，則返回undefined。
 
var box = 對象 && (5>4);//true,返回第二個操作數
var box = (5>4)&&對象;//[object Object]
var box = (3>4)&&對象;//false
var box = (5>4)&&null;//null

邏輯或(||)

var result = true || false;

與邏輯與操作相似，如果有一個操作數不是布爾值，邏輯或也不一定返回布爾值；此時，它遵循下列規則：

□ 如果第一個操作數是對象，則返回第一個操作數。

□ 如果第一個操作數求值為false，則返回第二個操作數。

□ 如果兩個操作數都是對象，則返回第一個操作數。

□ 如果兩個操作數都是null，返回null

□ 如果兩都為`undefined`，返`undefined`。

□ 如果兩都為`NaN`，返`NaN`

var box = 對象||(5>3);//[object Object]
var box = (5>3)||對象;//true
var box = 對象1 || 對象2;//[object Object]
var box = null || null;//null
var box = NaN || NaN;//NaN
var box = undefined || undefined;//undefined

邏輯非

邏輯非運算符可以用于任何值。無論這個值是什么數據類型，這個運算符都會返回一個布爾值。它會先將這個值轉換成布爾值，然后取反，規則如下：

 1. 操作數是一個對象，返回false
 2. 操作數是一個空字符串，返回true
 3. 操作數是一個非空字符串，返回false
 4. 操作數是數值0，返回true
 5. 操作數是任意非0數值（包括Infinity），false
 6. 操作數是null，返回true
 7. 操作數是NaN，返回true
 8. 操作數是undefined，返回true
 
var box = !{};//false
var box = !"trigkit";//false
var box = !0;//true
var box = !null;//true
var box = !NaN;//true
var box = !8;//false

對于雙感嘆號!!的寫法其實是Boolean()的簡寫法。比如下面是來自underscore.js的一段源碼：

// Is a given value a DOM element?
    _.isElement = function(obj) {
        return !!(obj && obj.nodeType === 1);
    };

返回的值就是布爾值

關系運算符

1.兩個操作數都是數值，則進行數值比較
2.兩個操作數都是字符串，則比較兩個字符串對應的字符編碼值
3.兩個操作數有一個是數值，則將另一個轉換為數值，再進行數值比較
4.兩個操作數有一個是對象，則先調用valueOf()方法或toString()方法，再用結果比較

var num = "3">22;//false
var num = "3">"22";//true,進行第一個數字的比較3>2,所以是true
var num = "a">"b";//false,a=97,b=98,ASCII表
var num = "a">"B";//true,B=66

相等操作符

相等操作符會對操作值進行隱式轉換后進行比較：

1.如果一個操作值為布爾值，則在比較之前先將其轉換為數值，false轉成0，true為1；
2.如果一個操作值為字符串，另一個操作值為數值，則通過Number()函數將字符串轉換為數值
3.如果一個操作值是對象，另一個不是，則調用對象的valueOf()方法，得到的結果按照前面的規則進行比較
4.null與undefined是相等的
5.如果一個操作值為NaN，則相等比較返回false
6.如果兩個操作值都是對象，則比較它們是不是指向同一個對象。如果兩個操作數都指向同一個對象，則相等操作符返回true，否則，返回false
7.在全等和不全等的判斷上，只有值和類型都相等，才返回true，否則返回false；

看下面的實例：

var num =2==2;//true
var num = "2"==2;//true,"2"會轉成數值2
var num = false ==0;//true,false轉成數值就是0
var num = "a"=="A";//false,轉換后的編碼不一樣
var num = 2==NaN;//false,只要有NaN，都是false
var num = {}=={};//false,比較的是他們的地址，每個新創建對象的引用地址都不同

var age = {};
var height = age;
var box = age == height;//true,引用地址一樣，所以相等

思維導圖

分享一張網上找的思維導圖：

云服務器 GPU云服務器三元運算符詳解位運算詳解 js事件詳解 js原生動畫詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87667.html

js中的｜與 && 運算符詳解

摘要：這個時候我就有點犯迷糊了，為什么邏輯運算符能這么用呢由于是出身，所以對這樣用感覺很奇怪。這篇文章主要介紹了js中的 || 與 && 運算符詳解,需要的朋友可以參考下一 js中邏輯運算符在開發中可以算是比較常見的運算符了，主要有三種：邏輯與&&、邏輯或||和邏輯非！。當&&和|| 連接語句時，兩邊的語句會轉化為布爾類型（Boolean），然后再進行運算，具體的運算規則如下：兩邊條...

baoxl 2019-08-23 13:02 評論0 收藏0
js中的｜與 && 運算符詳解

摘要：這個時候我就有點犯迷糊了，為什么邏輯運算符能這么用呢由于是出身，所以對這樣用感覺很奇怪。這篇文章主要介紹了js中的 || 與 && 運算符詳解,需要的朋友可以參考下一 js中邏輯運算符在開發中可以算是比較常見的運算符了，主要有三種：邏輯與&&、邏輯或||和邏輯非！。當&&和|| 連接語句時，兩邊的語句會轉化為布爾類型（Boolean），然后再進行運算，具體的運算規則如下：兩邊條...

jsyzchen 2019-06-28 16:46 評論0 收藏0
溫故js系列（17）-詳解加法運算符

摘要：數字和解釋因為沒有任何一個操作數是字符串，將轉換為一個數字做數字加法運算因為沒有操作數是對象或字符串，將轉換為。結論以避免潛在的問題，不使用加法運算符處理對象，除非你清楚地使用或方法。前端學習：教程&模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試資源匯總 JavaScript一路走來，備受爭議，與其說它備受爭議，不如說它不夠完美。不夠完美？那完美了還得了，它的...

gxyz 2019-08-22 12:46 評論0 收藏0
【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0