目錄
算術運算子
一元算術運算子
一元加( )
一元減(-)
遞增( )
遞減(--)
二元算術運算子
加法( )
減法(-)
乘法(*)
除法(/)
求模(%)
关系运算符
恒等运算符
相等运算符
大于运算符
小于运算符
首頁 web前端 js教程 對於javascript中運算子的方法介紹

對於javascript中運算子的方法介紹

Jul 16, 2018 pm 05:53 PM
javascript

js中的運算子包括算數運算子和關係運算符,其中算術運算子又包括了一元運算子和二元運算符則包括大於,等於,小於以及恆等運算子。

算術運算子

javascript中的算術運算主要透過算術運算子來實現,算術運算子包括一元算術運算子和二元算術運算子兩種。

一元算術運算子

一元算術運算子用於一個單獨的運算元,並產生一個新值。在javascript中,一元運算子具有很高的優先級,而且都是右結合(right-associative)

一元算術運算子包括一元加法( )、一元減法(-)、遞增( )和遞減(--)

一元加( )

一元加運算子以一個加號( )表示,放在數值前面,對數值不會產生任何影響

var num = 25;
num = +num; //25
登入後複製

在對非數值應用一元加運算子時,會呼叫Number()轉型函數對這個值進行轉換

var s1 = '01';
var s2 = '1.1';
var s3 = 'z';
var b = false;
var f = 1.1;
var o = {
    valueOf:function(){
        return -1;
    }
};

s1 = +s1;//1
s2 = +s2;//1.1
s3 = +s3;//NaN
b = +b;//0
f = +f;//1.1
o = +o;//-1
登入後複製

在new Date()前面使用一元加符號,可以把日期字串,轉換為日期毫秒數

console.log(new Date());//on Jul 11 2016 20:25:54 GMT+0800 (中国标准时间)
console.log(+new Date());//1468239954076
登入後複製

一元減(-)

一元減運算子主要用於表示負數

var num = 25;
num = -num;//-25
登入後複製

當一元減運算子用於非數值時,會對該值使用Number()轉型函數進行轉換,再將得到的數值轉換成負數

var s1 = '01';
var s2 = '1.1';
var s3 = 'z';
var b = false;
var f = 1.1;
var o = {
    valueOf:function(){
        return -1;
    }
};

s1 = -s1;//-1
s2 = -s2;//-1.1
s3 = -s3;//NaN
b = -b;//0
f = -f;//-1.1
o = -o;//1
登入後複製
一元加和一元減運算子主要用於基本的算術運算,也可以用於轉換資料類型

遞增( )

遞增運算子對其操作數進行增量(加1)操作,操作數是一個左值(lvalue)(變數、陣列元素或物件屬性)。運算子透過Number()轉型函數將操作數轉換為數字,然後給數字加1,並將加1後的數值重新賦值給變數、數字元素或物件屬性

var age = 29;
++age;
//相当于
var age = 29;
age = age +1;
登入後複製
遞增運算子的傳回值依賴它相對於操作數的位置。當運算子在運算元之前,稱為前增量(pre-increment)運算符,它對運算元進行增量計算,並傳回計算後的值。當運算子在運算元之後,稱為後增量(post-increment)運算符,它對運算元進行增量計算,但傳回未做增量計算的(unincremented)值
var i = 1, j = ++i;
//i=2 j=2

var i = 1, j = i++;
//i=2 j=1
登入後複製

遞減(--)

遞減--運算子的操作數也是左值,它透過Number()轉型函數把運算元轉換為數字,然後再減1,並將計算後的值重新賦值給運算元

和遞增運算子一樣,遞減--運算子的回傳值依賴它相對運算元的位置,當遞減運算子在運算元之前,運算元減1並傳回減1之後的值。當遞減運算子在運算元之後,運算元減1並回傳減1之前的值

var age = 29;
--age;
//相当于
var age = 29;
age = age - 1;
登入後複製
前增量運算子與執行語句優先權相同,整個語句會從左向右求值
var num1 = 2;
var num2 = 20;
var num3 = --num1 + num2;//21
var num4 = num1 + num2;//21
登入後複製
後增量運算子在包含它們的語句被求值之後才執行
var num1 = 2;
var num2 = 20;
var num3 = num1-- + num2;//22
var num4 = num1 + num2;//21
登入後複製

二元算術運算子

二元算術運算子包括加法( )、減法(-)、乘法(*)、除法(/)和求餘(%)

加法( )

在多數程式設計語言中,加法通常是簡單的數字運算符,但在ECMAScript中,加法運算有大量的特殊行為,不僅可以進行數值加法運算,也可以進行字串連接

【1】如果其中一個操作數是對象,則對象會轉換為原始值:日期物件透過toString()方法執行轉換,其他物件透過valueOf()方法執行轉換。由於多數物件valueOf()方法無法傳回一個原始值,於是會透過toString()方法來執行轉換

[注意]除了單數值陣列會轉換成數字外,其他原生物件都會透過toString()方法轉換為字串形式

【2】在進行了物件到原始值的轉換後,如果其中一個運算元是字串的話,另一個運算元也會轉換成字串,進行字串連接,否則,兩個操作數都會轉換成數字或NaN,進行加法操作

//单数值数组和valueOf()返回值为数值的自定义对象会转换为数值
console.log(1 + []);//1
var o = {
    valueOf: function(){
        return -1;
    }
}
console.log(1 + o);//0
登入後複製
//其他原生对象则转换为字符串
console.log(1 + {});//'1[object Object]'
console.log(1 + [1,2]);//'11,2'
console.log(1 + new Date());//'1Thu Jun 16 2016 10:27:13 GMT+0800 (中国标准时间)'
console.log(1 + /0/);//'1/0/'
登入後複製

如果進行算術加法運算,undefined轉換為NaN,null轉換為0,false轉換為0,true轉換為1

console.log('' + undefined);//'undefined'
console.log('' + null);//'null'
console.log('' + false);//'false'
console.log('' + true);//'true'
登入後複製

因此,利用加號運算子的特性,可以利用'' 任意型別值轉換為字串

減法(-)

相對於加法,減法就簡單的多,只牽涉到數字的減法運算。使用Number()轉型函數將非數值類型轉換為數值或NaN

console.log(1 - {});//NaN
console.log(1 - [1,2]);//NaN
console.log(1 - /0/);//NaN
console.log(1 - []);//1
登入後複製
加法有一個特殊之處,在於時間Date物件進行加法運算時使用toString()轉換為字串,而在其他數學運算,包括減法、乘法、除法、求餘等運算中,都是使用Number()轉換函數將時間Date物件使用valueOf()轉換為數字
console.log(new Date() + 1);//'Thu Jun 16 2016 11:11:49 GMT+0800 (中国标准时间)1'
console.log(new Date() - 1);//1466046941641
登入後複製

undefined轉換為NaN,null轉換為0 ,false轉換為0,true轉換為1

console.log(1 - undefined);//NaN
console.log(1 - null);//1
console.log(1 - false);//1
console.log(1 - true);//0
登入後複製

乘法(*)

#乘法運算子由一個星號(*)表示,用於計算兩個數值的乘積,會透過Number()轉型函數將非數值型別轉換為數值或NaN

+ Infinity * 0;//NaN
- Infinity * 0;//NaN
Infinity * 非0数值;//Infinity或-Infinity
Infinity * Infinity;//Infinity
登入後複製

除法(/)

除法運算子由一個斜線(/)表示,執行第一個運算元除以第二個運算元的運算,也會透過Number()轉型函數將非數值型別轉換為數值或NaN

Infinity / Infinity;//NaN
0 / 0;//NaN
非0数值 / 0;//Infinity或-Infinity
Infinity / 0;//Infinity
Infinity / 非0数值;//Infinity
登入後複製

求模(%)

求模(余数)操作符是由一个百分号(%)表示,是第一个操作数除以第二个操作数的余数

//r是余数,n是被除数,d是除数,
//q是整数,在n/d为负时为负,在n/d为正时为正,它应该在不超过n和d的商的前提下尽可能大
r = n - (d * q)
登入後複製

求模结果与第一个操作数的符号保持一致

console.log(5 % 2);//1
console.log(5 % -2);//1
console.log(-5 % 2);//-1
console.log(-5 % -2);//-1
登入後複製

关系运算符

关系运算符用于测试两个值之间的关系,根据关系是否存在而返回true或false,关系表达式总是返回一个布尔值,通常在if、while或for语句中使用关系表达式,用以控制程序的执行流程

javascript提供了===、!==、==、!=、<、<=、>、>=8个关系运算符,分为4类介绍关系运算符

恒等运算符

恒等运算符'===',也叫严格相等运算符,首先计算其操作数的值,然后比较这两个值,比较过程没有任何类型转换,比较过程如下:

【1】如果两个值的类型不相同,则返回false

console.log(1 === '1');//false
console.log(1 === [1]);//false
登入後複製

【2】如果两个值都是Undefined、Null、Boolean、Number、String相同原始类型的值,值相同,就返回true,否则,返回false

console.log(undefined === undefined);//true
console.log(null === null);//true
console.log(true === true);//true
console.log(false === false);//true
console.log(1 === 1);//true
console.log(2.5 === 2.5);//true
登入後複製

[注意]不论什么进制的数字,在进行关系比较时,最终都转换为十进制进行运算

console.log(10 === 0xa);//true
登入後複製

在数字Number类型中,有一个值比较特殊,是NaN(not a number),它与任何值都不相等;此外,数字Number类型中存在着+0和-0,虽然其符号不同,但值相等

console.log(NaN === NaN);//false
console.log(+0 === -0);//true
登入後複製

两个相同字符串值表现为:相同的长度和相同的字符对应相同的位置

console.log('abc' === 'abc');//true
console.log('abc' === 'acb');//false
登入後複製

【3】如果两个值引用同一个对象,则返回true,否则,返回false

[注意]更详细的解释是,javascript对象的比较是引用的比较,而不是值的比较。对象和其本身是相等的,但和其他任何对象都不相等。如果两个不同的对象具有相同数量的属性,相同的属性名和值,它们依然是不相等的

console.log([] === []);//false
console.log({} === {});//false    
console.log(function(){} === function(){});//false
var a = {};
b = a;
console.log(a === b);//true
登入後複製

恒不等运算符(!==)又叫严格不等于运算符,操作数的比较过程与恒等运算符相同,结果取反。如果'==='的比较结果是true,则'!=='的比较结果是false;如果'==='的比较结果是false,则'!=='的比较结果是true

console.log(1 !== '1');//true
console.log(1 !== 1);//false
console.log(true !== false);//true
console.log({} !== {});//true
登入後複製

相等运算符

相等运算符'=='和恒等运算符相似,但相等运算符的比较并不严格,如果两个操作数不是同一类型,相等运算符会尝试进行一些类型转换,然后再进行比较

当两个操作数类型相同时,比较规则和恒等运算符规则相同

console.log(undefined == undefined);//true
console.log(10 == 0xa);//true
console.log(NaN == NaN);//false
console.log([] == []);//false
登入後複製

当两个操作数类型不同时,相等运算符'=='会遵守如下规则:

【1】如果一个值是对象类型,另一值是原始类型,则对象类型会先使用valueOf()转换成原始值,如果结果还不是原始值,则再使用toString()方法转换,再进行比较

[注意]日期类只允许使用toString()方法转换为字符串。类似地,时间Date对象进行加法运算时使用toString()转换为字符串,而在其他数学运算,包括减法、乘法、除法、求余等运算中,都是使用Number()转换函数将时间Date对象使用valueOf()转换为数字

【2】在对象转换为原始值之后,如果两个操作数都是字符串,则进行字符串的比较

console.log(new Date() == 'Sat Jun 25 2016 11:07:20 GMT+0800 (中国标准时间)');//true
登入後複製

【3】在对象转换为原始值之后,如果至少有一个操作数不是字符串,则两个操作数都将通过Number()转型函数转换成数字进行数值比较

console.log(true == 1);//true
console.log(true == 0);//false
console.log(false == '1');//false
console.log(false == '0');//true
console.log(true == 'true');//false,相当于1 == NaN

console.log([1] == 1);//true,相当于1 == 1
console.log([1] == '1');//true,相当于'1' == '1'
console.log([] == 0);//true,相当于0 == 0
console.log([] == '0');//false,相当于'' == '0'

console.log([] == true);//false,相当于0 == 1
console.log([1] == true);//true,相当于1 == 1
登入後複製
var a = {
    valueOf:function(){
        return 1;
    },
    toString:function(){
        return '2';
    }
} 
console.log( a == '1');//true,相当于1 == 1

var a = {
    valueOf:function(){
        return {};
    },
    toString:function(){
        return '1';
    }
} 
console.log( a == 1);//true,相当于1 == 1
登入後複製

[注意]如果一个值是null,另一个值是undefined,则返回true。虽然Number(null)是0,但null和0并不相等

console.log(null == undefined);//true
console.log(null == 0);//false
登入後複製

[注意]空字符串或空格字符串会转成0

console.log(null == []);//false
console.log(null == '');//false
console.log([] == ' ');//false,相当于'' == ' '
console.log([] == '');//true,相当于'' == ''
console.log(0 == '');//true
登入後複製

不相等运算符(!=)的操作数比较过程与相等运算符相同,结果取反。如果'=='的比较结果是true,则'!='的比较结果是false;如果'=='的比较结果是false,则'!='的比较结果是true

console.log(1 != '1');//false,相当于1 != 1
console.log(true != '1');//false,相当于1 != 1
console.log('true' != 1);//true,相当于NaN != 1
console.log([1] != '1');//false,相当于'1' != '1'
console.log([1] != true);//false,相当于1 != 1
登入後複製

大于运算符

大于运算符(>)用于比较两个操作数,如果第一个操作数大于第二个操作数,则大于运算符的计算结果为true,否则为false

大于运算符的操作数可能是任意类型,然而,只有数字和字符串才能真正执行比较操作,因此那些不是数字和字符串的操作数都将进行类型转换,类型转换规则如下:

【1】如果操作数是对象,则这个对象将先使用valueOf()转换成原始值,如果结果还不是原始值,则再使用toString()方法转换

[注意]实际上,在原生对象中,使用valueOf()方法转换为原始值的,只有转换为数字Number类型的时间Date对象,其他对象都通过toString()方法转换为字符串

【2】在对象转换为原始值之后,如果两个操作数都是字符串,则按照字母表的顺序对两个字符串进行比较,这里提到的字母表顺序是指组成这个字符串的16位unicode字符的索引顺序

console.log('b' > 'a');//true
console.log('B' > 'a');//false

console.log({} > '[a]');//true,相当于'[object Object]' > '[a]'
console.log({} > '[p]');//false,相当于'[object Object]' > '[p]'

console.log(['a'] > ['b']);//false,相当于'a' > 'b'
console.log([2] > [11]);//true,相当于'2' > '11'
登入後複製

【3】在对象转换为原始值之后,如果至少有一个操作数不是字符串,则两个操作数都转换成数字进行比较

[注意]在等于操作符中,时间Date()对象只允许通过toString()方法转换为字符串,而不允许通过valueOf()方法转换为数字;而在大于操作符中,时间Date()对象允许优先使用valueOf()方法转换为数字

console.log(new Date() > 100);//true,相当于1466826928667 > 100
console.log(true > [0]);//true,相当于 1 > 0

console.log(2 > 1);//true
console.log(11 > '2');//true,相当于11 > 2

console.log(NaN > 1);//false
console.log(1 > NaN);//false
console.log({} > true);//false,相当于 NaN > 1
登入後複製

对于数字和字符串来说,加号运算符和比较运算符的行为有所不同,加号运算符更偏爱字符串,如果它的一个操作数是字符串,就进行字符串连接。而比较运算符则更偏爱数字,只有在两个操作数都是字符串时,才进行字符串的比较

console.log(1 + 2);//3
console.log('1' + '2');//'12'
console.log('1' + 2);//'12',相当于 '1' + '2'

console.log(2 > 1);//true
console.log('2' > '1');//true
console.log('2' > 1);//true,相当于 2 > 1
登入後複製

小于等于运算符(<=)并不依赖于小于或等于运算符的比较规则,而是遵循大于运算符的比较规则,结果取反。如果'>'的比较结果是true,则'<='的比较结果是false;如果'>'的比较结果是false,则'<='的比较结果是true

console.log(1 <= &#39;0&#39;);//false,相当于1 <= 0
console.log(true <= &#39;0&#39;);//false,相当于1 <= 0
console.log(&#39;true&#39; <= 0);//false,相当于NaN <= 0
console.log([1] <= &#39;0&#39;);//false,相当于&#39;1&#39; <= &#39;0&#39;
console.log([0] <= true);//true,相当于0 <= 1
console.log(1 <= 1);//true
登入後複製

小于运算符

小于运算符(<)用于比较两个操作数,如果第一个操作数小于第二个操作数,则小于运算符的计算结果为true,否则为false

小于运算符与大于运算符的类型转换规则类似,就不再赘述

同样地,大于等于运算符(>=)并不依赖于大于或等于运算符的比较规则,而是遵循小于运算符的比较规则,结果取反。如果'<'的比较结果是true,则'>='的结果是false;如果'<'的比较结果是false,则'>='的结果是true

相关推荐:

js与运算符和或运算符的妙用_javascript技巧

JS的递增/递减运算符和带操作的赋值运算符的等价式_javascript技巧

以上是對於javascript中運算子的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱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

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

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1318
25
PHP教程
1269
29
C# 教程
1248
24
如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

javascript如何使用insertBefore javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

JavaScript與WebSocket:打造高效率的即時影像處理系統 JavaScript與WebSocket:打造高效率的即時影像處理系統 Dec 17, 2023 am 08:41 AM

JavaScript是一種廣泛應用於Web開發的程式語言,而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能,我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統,並提供具體的程式碼範例。首先,我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備,可以擷取即時的影像數

See all articles