[JS] JavaScript 運算子（Operator） | PJCHENder 未整理筆記

條件三元判斷式（ternary operator） Skiptomaincontent這個網站放置的是未發佈或未完整整理的筆記內容，若想檢視正式的筆記內容請到PJCHENder那些沒告訴你的小細節。

PJCHENderOfficialDocsBlogGitHubFacebookLinkedinSearchJavaScript[JS]operatorOnthispage運算式與運算子@MDN[TOC]條件判斷（conditionalstatement）​物件（object）：都是true（空物件也是true）陣列（array）：陣列是一種物件，因此都會是true（空陣列[]也是true）Undefined：是falseNull：是false布林（Booleans）：會根據Boolean值回數值（Numbers）：除了0,orNaN會是false外，其他都是true字串（String）：除了空字串''會是false之外，其他都是true（字串中有空格也是true）codestyle​//單行的if可以不用加上{...}if(lemons)console.log('hello');16.1Usebraceswithallmulti-lineblocks@airbnb不要在else中使用return：16.3no-else-return@airbnb//badfunctionfoo(){if(x){returnx;}else{returny;}}//goodfunctionfoo(){if(x){returnx;}returny;}//badfunctioncats(){if(x){returnx;}elseif(y){returny;}}//goodfunctioncats(){if(x){returnx;}if(y){returny;}}當if當中的條件式太長的時候，可以換行並把比較運算子放在最前面（17.1@airbnb）：//goodif(foo===123&&bar==='abc'){thing1();}//goodif((foo===123||bar==='abc')&&doesItLookGoodWhenItBecomesThatLong()&&isThisReallyHappening()){thing1();}//goodif(foo===123&&bar==='abc'){thing1();}比較運算子（comparisonoperator）​使用===或!==其餘參數（restparameter）​其餘運算字會幫助我們把輸入函式中的參數值變成陣列的形式（多個值=>陣列）：letavg=function(...arr){console.log(arr);//[1,3,5,7,9]};console.log(avg(1,3,5,7,9));展開語法（spreadsyntax）​展開運算子則是可以把陣列中的元素取出（陣列=>多個值）：複製陣列（Copyanarray）​vararr=[1,2,3];vararr2=[...arr];//likearr.slice()arr2.push(4);//arr2becomes[1,2,3,4]//arrremainsunaffected連結陣列（concatenatearrays）​vararr1=[0,1,2];vararr2=[3,4,5];arr1=[...arr1,...arr2];//[0,1,2,3,4,5]將陣列代入函式中​letnumber=[1,2,3,4,5];console.log(Math.max(...number));//5console.log(...number);//1,2,3,4,5複製物件（CopyObjects）​varobj1={foo:'bar',x:42};varobj2={foo:'baz',y:13};//使用Object.assign()會觸發setters，而spreadsyntax不會varclonedObj={...obj1};//Object{foo:"bar",x:42}varmergedObj={...obj1,...obj2};//Object{foo:"baz",x:42,y:13}邏輯運算子​keywords:shortcircuitbooleanoperator​doubleand&&​//原則：如果前者為真，則回傳後者；如果前者為假，則回傳前者，後面的都不考慮console.log(3===3&&'apple'==='apple');//true（因為'apple'==='apple'）console.log(3===3&&'apple');//'apple'，如果自己為真，則回傳後者console.log(3===3&&'apple'&&'chicken');//'chicken'console.log(3===3&&false&&'chicken');//'false'，如果自己為假，就會回傳它自己使用情境​//使用情境：判斷前面的項目是不是都正確，如果是的話，在執行後者callback&&callback();//如果callback存在，則執行()/***如果token.authenticate存在則secret=token.number*否則secret=token.authenticate**/letsecret=token.authenticate&&token.number;doubleor||​//原則：如果前者為真，則回傳前者，後面都不考慮；如果前者為假，則回傳後者console.log(3===3||false||'chicken');//true（因為3===3）console.log(3===4||false||'chicken');//'chicken'//使用時機：設定預設值時letwidth=window.innerHeight||300;//如果window.innerHeight不存在，則width為300switchcase​當需要在switch的case中定義變數時，case和default後面要加上大括號{}：//badswitch(foo){case1:letx=1;break;case2:consty=2;break;case3:functionf(){//...}break;default:classC{}}//goodswitch(foo){case1:{letx=1;break;}case2:{consty=2;break;}case3:{functionf(){//...}break;}case4:bar();break;default:{classC{}}}15.5Usebracestocreateblocksincaseanddefaultclausesthatcontainlexicaldeclarations(e.g.let,const,function,andclass).@airbnb位元NOT運算子（波浪號）​任何>=0的值都會是非0的結果/***使用情境：用在判斷式*如果是indexOf回傳的值是-1表示找不到，那麼加上~之後會變0，放在if裡面變成false**///等同於if(String.indexOf('e')>=0){...}if(~String.indexOf('e')){console.log('Findit');}//用在正數無條件捨去，類似Math.floor()但是當裡面的數值為負數時則結果不同console.log(~~1.45345);//1條件三元判斷式（ternaryoperator）​Conditional(ternary)operator@MDN//(條件)?條件成立:條件不成立conststatus=age>=18?'adult':'minor';串連使用三元判斷式（conditional/ternarychains）​由於ternaryoperator從程式的最右邊開始看（right-associative），因此若串連起來的話，等同於if...elseif...elseif...else...的用法：//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operatorfunctionexample(…){returncondition1?value1:condition2?value2:condition3?value3:value4;}//Equivalentto:functionexample(…){if(condition1){returnvalue1;}elseif(condition2){returnvalue2;}elseif(condition3){returnvalue3;}else{returnvalue4;}}例如：constfoo=(num:number):string=>{returnnum<10?'<10':num<20?'<20':num<30?'<30':'>=30';};//等同於constfoo=(num:number):string=>{if(num<10){return'<10';}elseif(num<20){return'<20';}elseif(num<30){return'<30';}else{return'>=30';}};console.log(foo(5));//'<10'空值聯合運算子（nullishcoalescingoperator）​NullishCoalescingOperator@MDN可以視為||的強化版。

當使用nullishcoalescingoperator(??)時，只有當左側的值是null或undefined時，才會採用右側的值，否則會使用左側的值：//當左側的值是undefined或null時，則回傳右側的值undefined??'foo';//foonull??'foo';//foo//除了undefined或null之外，則都會回傳左側的值false??'foo';//false0??'foo';//0optionalchainingoperator​可以視為物件取用屬性時.的強化版，使用?.當左側的屬性不存在，即使繼續取用內部屬性也不會噴錯，而是得到undefined：constadventurer={name:'Alice',cat:{name:'Dinah',},};constdogName=adventurer.dog?.name;dogName;//undefined，若dog屬性不存在adventurer.someNonExistentMethod?.();//undefined，若someNonExistentMethod方法不存在可以搭配nullishcoalescingoperator使用：constdogName=adventurer.dog?.name??'Daniel';console.log(dogName);//'Daniel'delete​/***delete*假如delete運算子使用成功，它會將物件或是property設定為undefined。

delete運算子會在運算成功時回傳true，失敗時回傳false。

*一般定義的物件是無法用delete刪除（你可以用delete運算子來刪除隱式宣告的變數，但不適用於宣告過的變數。

）*因此比較適合用來刪除物件屬性**/deleteobjectName;//宣告過就無法透過delete刪除deleteobjectName.property;//可以刪除deleteobjectName[index];/***objectinstanceofconstructor*看看object是否為constructor所建構的實例**/functionFoo(){}constbar=newFoo();console.log(barinstanceofFoo);bitwiseoperator​bitwiseOperator@MDNBitwiseOperators3:TheXOROperation@YoutubeBitwiseOperators4:TheLogicalShiftOperation@Youtube/**XOROperator*/2^2;//02^1;//3，2的二進制是10，1的二進制是01，XOR後變成11，轉回10進制是3/**ShiftOperator*/2<<1;//4，向左移動一位，2x2=2*(2**1)3<<1;//6，向左移動一位，3x2=3*(2**1)3<<2;//12，向左移動兩位，3x2x2=3*(2**2)4<<4;//64，向左移動四位，4x2x2x2x2=3*(2**4)/**rightoperator*/64>>1;//32，向右移動一位，64/2=64/(2**1)64>>4;//4，向右移動一位，64/8=64/(2**4)30>>1;//1530>>2;//7，向右移動一位，30/4=30/(2**2)=7.5->小數後捨棄XOROperations（^）：特性是相同的值相加後會等於0，可以搭配bitwisemask作爲key使用。

LogicalShiftOperation（>>,<>）則相反，所有的位數會向右移動1位，最左邊那位會補0，達到原數字除以2（/2）的效果。

如果遇到奇數的話會無條件捨去。

其他​typeof​/***typeof運算元；typeof(運算元）**/instanceof​/***objectinstanceofconstructor*看看object是否為constructor所建構的實例**/functionFoo(){}constbar=newFoo();console.log(barinstanceofFoo);參考​運算式與運算子@MDNPrevious[JS]OONext[JS]performancebenchmark條件判斷（conditionalstatement）比較運算子（comparisonoperator）其餘參數（restparameter）展開語法（spreadsyntax）邏輯運算子switchcase位元NOT運算子（波浪號）條件三元判斷式（ternaryoperator）空值聯合運算子（nullishcoalescingoperator）optionalchainingoperatordeletebitwiseoperator其他參考