搜尋
首頁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,则'

console.log(1 <h2 id="小于运算符">小于运算符</h2><p>小于运算符(</p><p>小于运算符与大于运算符的类型转换规则类似,就不再赘述</p><p>同样地,大于等于运算符(>=)并不依赖于大于或等于运算符的比较规则,而是遵循小于运算符的比较规则,结果取反。如果'='的结果是false;如果'='的结果是true</p><p class="post-topheader custom- pt0">相关推荐:</p><p class="post-topheader custom- pt0"><a href="http://www.php.cn/js-tutorial-14041.html" target="_self">js与运算符和或运算符的妙用_javascript技巧</a></p><p class="post-topheader custom- pt0"><a href="http://www.php.cn/js-tutorial-25489.html" target="_self">JS的递增/递减运算符和带操作的赋值运算符的等价式_javascript技巧</a></p>

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

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

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脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

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

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

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