JS高度演算子

2644 ワード

コードの簡素化の最適化の過程で、私達はいつも考えています.私達のコードを簡潔にして、最小のコードで最高の機能を完成するようにします.
以下に、四つのJS開発最適化の高級演算子の使用を紹介します.
1、3元演算子
三項演算子は、条件演算子ともいいます.
3つの演算を受け入れる数:条件?条件が真である場合に実行する表式.条件が偽である場合に実行する表式.
基本例:
function isChecked(checked) {
    return checked ? ' ' : ' ' 
}
console.log(isChecked(true)) // =>  
console.log(isChecked(false)) // =>  
三元演算子は変数の割り当てに使用されます.
let time = 0
let have = (time > 23) ? '  ' : '  ' 
console.log(have) // => '  '
3元演算子は、空の割り当てのために使用されます.
let x = 1
let x = (x !== null || x !== undefined) ? x : 2
console.log(x) // => 1
関数に使う
function getValue(x, y) {
    return (x == null || x == undefined) ? y : x 
}
getValue(null, 8) // => 8
getValue(4, 8) // => 4
2、空輸ではない演算子
最初のパラメータがnull/undefinedでない場合は、最初のパラメータに戻ります.
基本例:
null ?? 5 // => 5
3 ?? 5 // => 3
開発業務シーン最適化:数値が0または空の文字列「」である場合、0と空の文字列「」を捨てるべきではない.
//    
let prev = 1
let current = 0
let noAccount = null
let future = false
function test(param) {
    return param || `   `
}
console.log(test(prev)) // => 1
console.log(test(current)) // =>    
console.log(test(noAccount)) // =>    
console.log(test(future)) // =>    

//    
let prev = 1
let current = 0
let noAccount = null
let future = false
function test(param) {
    return param ?? `   `
}
console.log(test(prev)) // => 1
console.log(test(current)) // => 0
console.log(test(noAccount)) // =>    
console.log(test(future)) // => false
要約して言えば演算子は、エラー値(0と空の文字列、falseなど)を無視しながらデフォルトを指定することができます.
3、天賦演算子
空でない演算子に関連しています.
let x = null
let y = 5
console.log(x ??= y) // => 5
console.log(x = (x ?? y)) // => 5
この割り当て演算子は、nullまたはundefinedの値である場合にのみ割り当てられます.上の例では、この演算子は本質的には空賦の文法飴であることを強調しています.次に、この演算子とデフォルトのパラメータの違いを見てみましょう.
function settingsWithNull(options) {
    options.speed ??= 1
    options.diff ??= 'easy' 
    return options
}
function settingsWithDefaultParams(speed=1, diff='easy') {
    return {speed, diff}
}
settingsWithNullish({speed: null, diff: null}) // => {speed: 1, diff: 'easy'}
settingsWithDefaultParams(undefined, null) // => {speed: null, diff: null}
4、チェーン判定演算子
チェーン判定演算子?各参照を検証することなく、開発者が深さネストのオブジェクトチェーンにおける属性値を読み取ることができる.参照が空の場合、式は計算を停止し、undefinedを返します.
let book = {
    name: 'js  4',
    content: {
        first: 'hello world',
        second: 'good work'
    }
}
console.log(book.price?.zh) // => undefined