TIL coding
  • Initial page
  • 排版
  • Flexbox
  • Grid
  • jQuery
  • Untitled
  • JavaScript
    • An Introduction to JavaScript
    • Hello, world!
    • Code structure
    • The modern mode, "use strict"
    • Variables
    • Data types
    • Type Conversions
    • Operators
    • Comparisons
    • Interaction: alert, prompt, confirm
    • Conditional operators: if, '?'
    • Logical operators
    • Loops: while and for
    • The "switch" statement
    • Functions
    • Function expressions and arrows
    • JavaScript specials
    • Comments
    • Ninja code
    • Automated testing with mocha
    • Polyfills
    • Objects
    • Garbage collection
    • Symbol type
    • Object methods, "this"
    • Object to primitive conversion
    • Constructor, operator "new"
    • Methods of primitives
    • Numbers
    • Strings
    • Arrays
    • Array methods
    • Iterables
    • Map, Set, WeakMap and WeakSet
    • Object.keys, values, entries
    • Destructuring assignment
    • Date and time
    • JSON methods, toJSON
    • Recursion and stack
    • Rest parameters and spread operator
    • Closure
    • The old "var"
    • Global object
    • Function object, NFE
    • The "new Function" syntax
    • Scheduling: setTimeout and setInterval
    • Decorators and forwarding, call/apply
    • Function binding
    • Currying and partials
    • Arrow functions revisited
    • Property flags and descriptors
    • Property getters and setters
    • Prototypal inheritance
    • F.prototype
    • Native prototypes
    • Prototype methods, objects without __proto__
    • The “class” syntax
    • Class inheritance
    • Static properties and methods
    • Private and protected properties and methods
    • Extending built-in classes
    • Class checking: "instanceof"
    • Mixins
    • Error handling, "try..catch"
    • Custom errors, extending Error
    • Introduction: callbacks
    • Promise
    • Promises chaining
    • Error handling with promises
    • Promise API
  • Bootstrap
    • Navbar
Powered by GitBook
On this page
  • || (OR)
  • OR finds the first truthy value
  • && (AND)
  • AND finds the first falsy value
  • ! (NOT)

Was this helpful?

  1. JavaScript

Logical operators

有 3 個邏輯運算符號在 JavaScript,|| (OR)、&& (AND)、! (NOT),可以被使用在任何類型的值,結果可以是任何類型的值。

|| (OR)

任何一個參數為真,返回 true,皆為錯誤,返回 false,非布林值的參數會轉為布林值,大多時候用在 if statement 檢測任一判斷式是否為真。

alert( true || true );   // true
alert( false || true );  // true
alert( true || false );  // true
alert( false || false ); // false

if (1 || 0) { // works just like if( true || false )
  alert( 'truthy!' );
}

let hour = 12;
let isWeekend = true;

if (hour < 10 || hour > 18 || isWeekend) {
  alert( 'The office is closed.' ); // it is the weekend
}

OR finds the first truthy value

JavaScript 的特性,or 將由左至右計算布林值,若有一為真,停止計算並返回該值,若皆為錯誤,返回最後一個值。

result = value1 || value2 || value3;

alert( null || 0 || 1 ); // 1 (the first truthy value)
alert( undefined || null || 0 ); // 0 (all falsy, returns the last value)
  1. 假設有一串變數,其中有些是空的有些有存資料,可以用 or 判斷。

    let currentUser = null;
    let defaultUser = "John";
    
    let name = currentUser || defaultUser || "unnamed";
    alert( name ); // selects "John" – the first truthy value
  2. 短路檢測:可以用來寫精簡的 if statement 。

    let x;
    
    true || (x = 1);
    alert(x); // undefined, because (x = 1) not evaluated
    
    let x;
    
    false || (x = 1);
    alert(x); // 1

&& (AND)

如果參數皆為真,返回 true,若有錯誤返回 false。

result = a && b;

alert( true && true );   // true
alert( false && true );  // false
alert( true && false );  // false
alert( false && false ); // false

if (1 && 0) { // evaluated as true && false
  alert( "won't work, because the result is falsy" );
}

AND finds the first falsy value

and 由左至右尋找第一個錯誤值,若皆無錯誤,返回最後一個值。

result = value1 && value2 && value3;

alert( null && 5 ); // null
alert( 1 && 2 && null && 3 ); // null
alert( 1 && 2 && 3 ); // 3, the last one

短路檢測:可以用來寫精簡的 if statement 。

let x = 1;

(x > 0) && alert( 'Greater than zero!' );

// same
let x = 1;

if (x > 0) {
  alert( 'Greater than zero!' );
}

! (NOT)

轉換值變成相反布林值。

result = !value;

alert( !true ); // false
alert( !0 ); // true

!! 轉換類型成布林值。

alert( !!"non-empty string" ); // true
alert( !!null ); // false

// same
alert( Boolean("non-empty string") ); // true
alert( Boolean(null) ); // false

執行順序:! > && > ||

PreviousConditional operators: if, '?'NextLoops: while and for

Last updated 5 years ago

Was this helpful?