iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 30
1
Modern Web

有角拾系列 第 30

# JS雜拾-03-運算式與運算子

  • 分享至 

  • xImage
  •  

JS雜拾-03-運算式與運算子

tags: ithome

內文摘要

  • Expressions 運算式
  • Operators 運算子

參考資料1:MDN — the Mozilla Developer Network
參考資料2:從ES6開始的JavaScript學習生活
參考資料3:Fooish 程式技術


Expressions 運算式


Operators 運算子

算術運算子 (Arithmetic Operator)

指派運算子 (Assignment Operator)

位元運算子 (Bitwise Operator)

比較運算子 (Comparsion Operator)

邏輯運算子 (Logical Operator)

  1. 三種邏輯運算符:

    • Logical AND &&: 符號左右都是true才會得到true;其中任一方false,則得到false
    • Logical OR ||:符號左右任一方為true,得到true;兩方都false,才會得到false
    • Logical NOT!:原本是true,經!轉換會變成false
    • !!(xxx) 可以當Boolean(xxx)
    !!'false' == !!'true'   // true  經過!!轉換,兩個值都是Boolean,且字串總是ture
    !!'false' === !!'true'   // true 即便使用嚴格比較===也是true,理由同上
    
  2. 哪些資料類型經ToBoolean會轉換成falsy?

    • Undefined
    • Null
    • 0, -0, NaN
    • "" or ''
    Boolean("false"); // true
    Boolean("0");     // true
    Boolean(-0);      // false
    Boolean("''''");  // true
    Boolean('');      // false    
    
    • 去掉falsy值的小方法:
    const arr = [1, 2, 3, null, 'a', 0]
    arr.filter(Boolean)     // [1, 2, 3, 'a'] null跟0都是falsy,因此被清掉了
    arr                     // arr = [1, 2, 3, null, 'a', 0]陣列只是複製,沒有被改變 (immutable)
    
  3. 短路求值(Short-circuit)

    • (&&)、(||)也稱為短路求值(Short-circuit)運算符
    • (||)運算時,如果第1個運算子為"falsy"時,回傳第2個運算子。否則,回傳第1個運算子。
    • (&&)運算時,如果第1個運算子為"falsy"時,回傳第1個運算子。否則,直接回傳第2個運算子。剛好跟(||)相反
      console.log('foo' || 'bar') // 'foo'
      console.log(false || 'bar') // 'bar'
      console.log(false && 'bar') // false
      console.log( 0 || '' || 5 || 'bar') //5
      console.log(false || null || '' || 0 || NaN || 'Hello'       || undefined) //'Hello'
      
    • 常用的"指定預設值",範例:
      let a = value || 5    // 5是預設值
      

字串運算子 (String Operator)

特殊運算子 (Special Operator)

void運算子: 接收任意運算式或值

三元運算子,又稱條件運算子


上一篇
運算式與運算子
系列文
有角拾30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言