掃二維碼與項目經(jīng)理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯(lián)網(wǎng)交流
操作符可以根據(jù)他們期待的操作符個數(shù)來分類,多數(shù)的JavaScript操作符都是二元操作符,二元操作符可以將兩個表達式合成一個更復雜的表達式。JavaScript也支持一元操作符,這些操作符可以將一個表達式轉化為另一個更復雜的表達式。同時,JavaScript中也有一個三元操作符,就是條件操作符(?:),它用于將三個表達式組成一個表達式。下面就先來看看一元操作符。

創(chuàng)新互聯(lián)建站自2013年創(chuàng)立以來,先為岢嵐等服務建站,岢嵐等地企業(yè),進行企業(yè)商務咨詢服務。為岢嵐企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
一元操作符具有以下特點:
遞增操作符顧名思義就是遞增其操作數(shù),遞減操作符就是遞減其操作數(shù)。它們都有兩個版本:
簡單看兩個例子:
// 前置遞增操作符:
let num1 = 1, num2 = 2;
console.log(++num1 + num2) // 4
// 后置遞增操作符:
let num1 = 1, num2 = 2;
console.log(num1++ + num2) // 3
可以看到,兩種類型的結果是不一樣的,原因就在于后置遞增遞減操作是在包含它們的語句被求值之后才執(zhí)行的。
這四個操作符可以作用于任何類型的數(shù)據(jù)。對于這些類型,JavaScript會將他們轉化為數(shù)值,再在這個數(shù)值上進行加一或減一操作。如果不能轉化為一個數(shù)字,那么遞增或遞減的結果就是NaN:
let str = "hello";
console.log(str++) // NaN
遞增和遞減操作符主要用于for循環(huán)中控制計算器遞增或遞減。
加和減操作符既是一元操作符,也是二元操作符。這里我們先來看一元加和減操作符。
一元加操作符會將其操作數(shù)轉化為數(shù)值,并返回轉化后的值。需要注意:
let a = -1;
let b = "hello";
let c = BigInt;
console.log(+a) // -1
console.log(+b) // NaN
console.log(+c) // NaN
一元減操作符和一元加操作符類似,會先將操作數(shù)轉化為數(shù)值,然后會改變結果的符號:
let a = -1;
let b = 2;
console.log(-a) // 1
console.log(-b) // -2
一元加和減操作符主要用于基本的算術運算,也可以用于數(shù)據(jù)類型的轉換,將不同類型的數(shù)據(jù)轉化為數(shù)字類型,像Number()方法一樣。
現(xiàn)代計算機中數(shù)據(jù)都是以二進制的形式存儲的,即0、1兩種狀態(tài),計算機對二進制數(shù)據(jù)進行的運算加減乘除等都是叫位運算,即將符號位共同參與運算的運算。
JavaScript中所有的數(shù)字都是以IEEE 754 64位格式存儲,但是位操作并不直接應用到64位,而是先將值轉化為32位整數(shù),再進行位操作。之后再把運算結果轉化為64位,所以我們只需要考慮32位整數(shù)即可。位操作是在數(shù)值的底層完成的,所以運算速度會相對于其他運算符快很多。
常見的位運算有以下幾種:
|
運算符 |
描述 |
運算規(guī)則 |
|
&` |
與 |
兩個位都為1時,結果才為1 |
|
| |
或 |
兩個位都為0時,結果才為0 |
|
^ |
異或 |
兩個位相同為0,相異為1 |
|
~ |
取反 |
0變1,1變0 |
|
<< |
左移 |
各二進制位全部左移若干位,高位丟棄,低位補0 |
|
>> |
右移 |
各二進制位全部右移若干位,正數(shù)左補0,負數(shù)左補1,右邊丟棄 |
在說這些操作符之前,先來看幾個相關的概念。計算機中的有符號數(shù)有三種表示方法,即原碼、反碼和補碼。三種表示方法均有符號位和數(shù)值位兩部分,符號位都是用0表示“正”,用1表示“負”,而數(shù)值位,三種表示方法各不相同。
(1)原碼
原碼就是一個數(shù)的二進制數(shù)。例如:10的原碼為0000 1010
(2)反碼
例如,-10的反碼如下:
原碼:1000 1010
反碼:1111 0101
(3)補碼
例如,-10的補碼如下:
原碼:1000 1010
反碼:1111 0101
補碼:1111 0110
按位與操作符(&)會對參加運算的兩個數(shù)據(jù)按二進制位進行與運算,即兩位同時為 1 時,結果才為1,否則結果為0。運算規(guī)則如下:
0 & 0 = 0
0 & 1 = 0
1 & 0 = 0
1 & 1 = 1
例如,3 & 5 的運算結果如下:
0000 0011
0000 0101
= 0000 0001
因此 3 & 5 的值為 1。需要注意:負數(shù)按補碼形式參加按位與運算。
用途:
(1)判斷奇偶
只要根據(jù)最未位是0還是1來決定,為0就是偶數(shù),為1就是奇數(shù)。因此可以用??if ((i & 1) === 0)???代替??if (i % 2 === 0)??來判斷a是不是偶數(shù)。
(2)清零
如果想將一個單元清零,即使其全部二進制位為0,只要與一個各位都為零的數(shù)值相與,結果為零。
按位或操作符(|)會對參加運算的兩個對象按二進制位進行或運算,即參加運算的兩個對象只要有一個為1,其值為1。運算規(guī)則如下:
0 | 0 = 0
0 | 1 = 1
1 | 0 = 1
1 | 1 = 1
例如,3 | 5 的運算結果如下:
0000 0011
0000 0101
= 0000 0111
因此,3 | 5的值為7。需要注意:負數(shù)按補碼形式參加按位或運算。
按位非操作符 (~)會對參加運算的一個數(shù)據(jù)按二進制進行取反運算。即將0變成1,1變成0。運算規(guī)則如下:
~ 1 = 0
~ 0 = 1
例如:~6 的運算結果如下:
0000 0110
= 1111 1001
在計算機中,正數(shù)用原碼表示,負數(shù)使用補碼存儲,首先看最高位,最高位1表示負數(shù),0表示正數(shù)。此計算機二進制碼為負數(shù),最高位為符號位。
當按位取反為負數(shù)時,就直接取其補碼,變?yōu)槭M制:
0000 0110
= 1111 1001
反碼:1000 0110
補碼:1000 0111
因此,~6的值為-7。按位非的操作結果實際上是對數(shù)值進行取反并減1,
按位異或運算符(^)會對參加運算的兩個數(shù)據(jù)按二進制位進行“異或”運算,即如果兩個相應位相同則為0,相異則為1。運算規(guī)則如下:
0 ^ 0 = 0
0 ^ 1 = 1
1 ^ 0 = 1
1 ^ 1 = 0
例如, 3 ^ 5的運算結果如下:
0000 0011
0000 0101
= 0000 0110
因此,3^5的值為6。
異或運算具有以下性質:
左移操作符(<<)會將運算對象的各二進制位全部左移若干位,左邊的二進制位丟棄,右邊補0。若左移時舍棄的高位不包含1,則每左移一位,相當于該數(shù)乘以2。
例如:
a = 1010 1110
a = a << 2
這里將a的二進制位左移2位、右補0,即得 a = 1011 1000。
需要注意,左移會保留他所操作數(shù)值的符號。比如,將-2左移5位,會得到-64,而不是64。
有符號右移操作符(>>)會將數(shù)值的32位全部右移若干位(同時會保留正負號)。正數(shù)左補0,負數(shù)左補1,右邊丟棄。操作數(shù)每右移一位,相當于該數(shù)除以2。
例如:a = a >>2 就是將a的二進制位右移2位,左補0 或者 左補1得看被移數(shù)是正還是負。
無符號右移操作符(>>>)會將數(shù)值的32位全部右移。對于正數(shù),有符號右移操作符和無符號右移操作符的結果是一樣的。對于負數(shù)的操作,兩者就會有較大的差異。
無符號右移操作符將負數(shù)的二進制表示當成正數(shù)的二進制表示來處理。所以,對負數(shù)進行無符號右移操作之后就會變的特別大。
這里說的加法操作符就是二元的加操作符了。二元加操作符用于計算數(shù)值操作或者拼接字符串操作。
1 + 1 // 2
"1" + "2" // "12"
"hello" + "world" // "helloworld"
在進行加操作時,如果兩個操作數(shù)都是數(shù)值或者都是字符串,那么執(zhí)行結果就分別是計算出來的數(shù)值和拼接好的字符串。除此之外,執(zhí)行結果都取決于類型轉化的結果:它會優(yōu)先進行字符串拼接,只有操作數(shù)是字符串或者是可以轉化為字符串的對象,另一個操作數(shù)也會被轉化為字符串,并執(zhí)行拼接操作。只有任何操作數(shù)都不是字符串時才會執(zhí)行加法操作。
1 + 2 // 3
"1" + "2" // "12"
"1" + 2 // "12"
1 + {} // "1[object Object]"
true + false // 1 布爾值會先轉為數(shù)字,再進行運算
1 + null // 1 null會轉化為0,再進行計算
1 + undefined // NaN undefined轉化為數(shù)字是NaN
需要注意加操作的順序:
let a = 1;
let b = 2;
let c = "hello" + a + b; // "hello12"
這里,由于每次加法操作都是獨立完成的,第一次是字符串hello和數(shù)字a做加法操作,得到的結果是"hello1",第二次加法操作仍然是一個字符串加一個數(shù)字,所以最終結果是一個字符串。如果想讓a和b兩個數(shù)字相加,就需要加上括號。
除此之外,還需要注意以下特殊情況:
減法操作和加法操作符類似, 但是減法操作符只能用于數(shù)值的計算,不能用于字符串的拼接。當進行減法操作時,如果兩個操作數(shù)都是數(shù)值,就會直接進行減法操作,如果有一個操作數(shù)是非數(shù)值,就會將其轉化為數(shù)值,再進行減法操作。如果轉化結果為NaN,則運算結果也是NaN。
3 - 1 // 2
3 - true // 2
3 - "" // 3
3 - null // 3
NaN - 1 // NaN
需要注意以下特殊情況:
乘法操作符用于計算兩個數(shù)的乘積。如果兩個操作數(shù)都是數(shù)值,則會執(zhí)行常規(guī)的乘法運算。如果不是數(shù)值,會將其轉化為數(shù)值,在進行乘法操作。
需要注意以下特殊情況:
除法操作符用于計算一個操作數(shù)除以第二個操作數(shù)的商。如果兩個操作數(shù)都是數(shù)值,則會執(zhí)行常規(guī)的除法運算。如果不是數(shù)值,會將其轉化為數(shù)值,在進行除法操作。
需要注意以下特殊情況:
取余操作符用于計算一個數(shù)除以第二個數(shù)的余數(shù)。計算規(guī)則和上述運算符類似。
需要注意以下特殊情況:
在ECMAScript 7中新增了指數(shù)操作符(**),它的計算效果是Math.pow()是一樣的:
Math.pow(2, 10); // 1024
2 ** 10; // 1024
指數(shù)運算符和上面的加減乘除運算符都有對應的賦值操作運算符:
let a = 2;
a **= 10;
console.log(a); // 1024
let a = 1;
let b = 2;
let c = 3;
let d = 4;
a += 1; // 2
b -= 2; // 0
c *= 3; // 9
d /= 4; // 1
在開發(fā)時,布爾操作符是很有用的,可以精簡很多代碼,干掉很多多余的id-else語句,下面來看看常見的三種布爾操作符。
邏輯非操作符可以用于JavaScript中的任何值,這個操作符使用返回布爾值。邏輯非操作符首先會將操作數(shù)轉化為布爾值,然后在對其取反。
邏輯非操作規(guī)則如下:
邏輯非操作符也可以用于將任何值轉化為布爾值,同時使用兩個!,相當于調用了Boolean()方法:
!!"blue" // true
!!0; // false
!!NaN // false
!!"" // false
!!12345 // true
邏輯與操作符的兩個操作數(shù)都為真時,最終結果才會返回真。該運算符可以用于任何類型的數(shù)據(jù)。如果有操作數(shù)不是布爾值,則結果并一定會返回布爾值,會遵循以下規(guī)則:
根據(jù)第二條規(guī)則,我們可以對我們項目代碼中的代碼進行優(yōu)化:
if(data) {
setData(data);
}
// 改寫后:
data && setData(data);這里當data為真時,也就是存在時,才會執(zhí)行setData方法,代碼就精簡了很多。
邏輯與操作符是一種短路操作符,只要第一個操作數(shù)為false,就不會繼續(xù)執(zhí)行運算符后面的表達式,直接返回false。上面的data如果是不存在的,就會直接發(fā)生短路,不會繼續(xù)執(zhí)行后面的方法。
邏輯或操作符和邏輯與操作符類似,不過只要兩個操作數(shù)中的一個為真,最終的結果就為真。該運算符可以用于任何類型的數(shù)據(jù)。如果有操作數(shù)不是布爾值,則結果并一定會返回布爾值,會遵循以下規(guī)則:
邏輯或操作符也是具有短路特性,如果第一個操作數(shù)為真,那么第二個操作數(shù)就不需要在進行判斷了,會直接返回true。
可以利用這個特性給變量設置默認值:
let datas = data || {};這里,如果data不存在,就會將datas賦值為第二個操作數(shù)(默認值)。
相等操作符包括四種:
JavaScript中的等于用兩個等號(==)表示,如果兩個操作數(shù)相等,那么就返回true。不等于和等于相反。在進行比較時,兩個操作數(shù)都會進行強制類型轉換,在確實是否相等。其判斷規(guī)則如下:
1 == '1'
↓
1 == 1
?boolean???,是的話就會把??boolean??? 轉為??number?? 再進行判斷'1' == true
↓
'1' == 1
↓
1 == 1
?object??? 且另一方為??string???、??number??? 或者??symbol???,是的話就會把??object?? 轉為原始類型再進行判斷'1' == { name: 'js' }
↓
'1' == '[object Object]'其流程圖如下:
需要注意,如果其中一個操作數(shù)是NaN,相等運算符會返回false,不相等運算符會返回true。
對于不等于運算符(!=),只有在強制類型轉化后不相等才會返回true。
對于全等運算符(===),只有當兩個操作數(shù)的數(shù)據(jù)類型和值都相等時,才會返回true。它并不會進行數(shù)據(jù)類型的轉化。
對于不全等運算符(!==),只有兩個操作數(shù)在不進行類型轉化的情況下是不相等的,才會返回true。
在平時的開發(fā)中,建議使用全等和不全等在做比較,這樣會更加嚴謹,避免出現(xiàn)意料之外的結果。
關系操作符包括四種:
這幾個操作符都會返回一個布爾值,他們操作時會遵循以下規(guī)則:
最后這一部分的一些操作符在平時的開發(fā)中就很實用了,下面來看看它們的用法吧。
擴展操作符(Spread operator)可以用來擴展一個數(shù)組對象和字符串。它用三個點(…)表示,可以將可迭代對象轉為用逗號分隔的參數(shù)序列。
(1)用于展開數(shù)組:
const a = [1, 2, 3],
b = [4, 5, 6];
const c = [...a] // [1, 2, 3]
const d = [...a, ...b] // [1, 2, 3, 4, 5, 6]
const e = [...a, 4, 5] // [1, 2, 3, 4, 5]
(2)將類數(shù)組對象變成數(shù)組:
const list = document.getElementsByTagName('a');
const arr = [..list];(3)用于展開對象:
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }需要注意,如果合并時的多個對象有相同屬性,則后面的對象的會覆蓋前面對象的屬性。
(4)用于展開字符串
const str = "hello";
[...str] // ["h", "e", "l", "l", "o"]
(5)用于函數(shù)傳參
const f = (foo, bar) => {}
const a = [1, 2]
f(...a)
const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sum = sum(...numbers)(6)用于具有 Iterator 接口的對象
具有 Iterator 接口的對象 Map 和 Set 結構,Generator 函數(shù),可以使用展開操作符:
const s = new Set();
s.add(1);
s.add(2);
const arr = [...s]// [1,2]
function * gen() {
yield 1;
yield 2;
yield 3;
}
const arr = [...gen()] // 1,2,3
如果是map,會把每個key 和 value 轉成一個數(shù)組:
const m = new Map();
m.set(1,1)
m.set(2,2)
const arr = [...m] // [[1,1],[2,2]]
注意 ,對象不是一個Iterator對象。
這里的條件運算符實際上就是我們常說的三元表達式。看一個例子:
let res = num1 > num2 ? num1 : num2;
這里,將num1和num2中的最大值賦值給了res。
使用條件表達式可以代替很多if-else,使得代碼很簡潔。在React的項目中,我個人就經(jīng)常使用條件操作符來做組件的條件渲染。當然如果判斷的層數(shù)過多,感覺代碼就有些難讀懂了。(React-Router源碼中就有嵌套了六七層條件操作符的地方,很難理解...)
其實賦值操作符有很多種,包括簡單的賦值操作符(=),以及一些復合賦值操作符:
這些僅僅是他們對應的簡寫形式,并不會產(chǎn)生其他影響。
in操作符可以用來判斷一個屬性是否屬于一個對象,它的返回值是一個布爾值:
const author = {
name: "CUGGZ",
age: 18
}
"height" in author; // false
"age" in author; // true還可以用來判斷一個屬性是否屬于對象原型鏈的一部分:
let arr = ["hello", "jue", "jin"];
"length" in arr; // true
delete 操作符用于刪除對象的某個屬性或者數(shù)組元素。對于引用類型的值,它也是刪除對象屬性的本身,不會刪除屬性指向的對象。
const o = {};
const a = { x: 10 };
o.a = a;
delete o.a; // o.a屬性被刪除
console.log(o.a); // undefined
console.log(a.x); // 10, 因為{ x: 10 } 對象依然被 a 引用,所以不會被回收需要注意:
instanceof運算符用來判斷一個構造函數(shù)的prototype屬性所指向的對象是否存在另外一個要檢測對象的原型鏈上。
console.log(2 instanceof Number); // false
console.log(true instanceof Boolean); // false
console.log('str' instanceof String); // false
console.log([] instanceof Array); // true
console.log(function(){} instanceof Function); // true
console.log({} instanceof Object); // true
可以看到,instanceof只能正確判斷引用數(shù)據(jù)類型,而不能判斷基本數(shù)據(jù)類型。instanceof運算符可以用來測試一個對象在其原型鏈中是否存在一個構造函數(shù)的 prototype 屬性。
可以簡單來實現(xiàn)一下 instanceof 操作符:
function myInstanceof(left, right) {
// 獲取對象的原
網(wǎng)頁題目:這些強大的 JS 操作符,你都知道嗎?
標題路徑:http://uogjgqi.cn/article/cdgeehg.html

我們在微信上24小時期待你的聲音
解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯(lián)網(wǎng)交流