Is it possible to check for null inline in javascript?

前端 未结 7 2286
孤街浪徒
孤街浪徒 2020-12-15 18:27

I have a function which parses the address components of the Google Maps API JSON and then returns the city / locality / route name.

The getAddre

相关标签:
7条回答
  • 2020-12-15 19:03

    Code below simplified return num ? num : 0 for me:

    return num || 0;

    0 讨论(0)
  • 2020-12-15 19:06

    What you want is a null coalescent operator. Javascript doesn't have one. Most of the time peoples use the logical OR || for this purpose but it doesn't work on property access.

    There's proposal for adding null coalescing to the language, but it's nowhere near: https://github.com/tc39/proposal-nullish-coalescing
    https://tc39.github.io/proposal-nullish-coalescing/

    If you really, really, absolutly want to use it you can use this Babel plugin: https://www.npmjs.com/package/babel-plugin-transform-optional-chaining
    But I would strongly suggest you don't: this may never make it to the language and you would have unvalid code in your codebase.

    0 讨论(0)
  • 2020-12-15 19:08
    • There is no "null-safe navigation operator" in Javascript (EcmaScript 5 or 6), like ?. in C#, Angular templates, etc. (also sometimes called Elvis operator, when written ?:) , at least yet, unfortunately.

    • You can test for null and return some dependent expression in a single line with the ternary operator ?:, as already given in other answers :

      (use === null to check only for nulls values, and == null to check for null and undefined)

      console.log(myVar == null ? myVar.myProp : 'fallBackValue');
      
    • in some cases, like yours, when your variable is supposed to hold an object, you can simply use the fact that any object is truthy whereas null and undefined are falsy values :

      if (myVar) 
          console.log(myVar.myProp)
      else
          console.log('fallbackValue')
      

      You can test for falsy values by coalescing to boolean with !! and make this inline :

      console.log(!!myVar ? myVar.myProp : 'fallbackValue');
      

      Be very careful though with this "falsy test", for if your variable is 0, '', or NaN, then it is falsy as well, even though it is not null/undefined.

    0 讨论(0)
  • 2020-12-15 19:11
    let component = getAddressComponent(addressComponents, 'route');
    let route = component ? component : null
    

    you can use the ? operator to check the value is true or false then set the value in javascript null will be false

    0 讨论(0)
  • 2020-12-15 19:16

    .? cannot be used in javascript, for that, you might look into typescript.

    For example, you can use try...catch construction:

    let route
    
    try {
      route = getAddressComponent(addressComponents, 'route').value.long_name
    } catch (error) {
      route = null
    }
    
    0 讨论(0)
  • 2020-12-15 19:17

    2020 Answer, It Exists!!!

    You can now directly use ?. inline to test for existence. It is called the Optional Chaining Operator, supported by all modern browsers.

    If a property exists, it proceeds to the next check, or returns the value. Any failure will immediately short-circuit and return undefined.

    const example = {a: ["first", {b:3}, false]}
    
    example?.a  // ["first", {b:3}, false]
    example?.b  // undefined
    
    example?.a?.[0]     // "first"
    example?.a?.[1]?.a  // undefined
    example?.a?.[1]?.b  // 3
    
    domElement?.parentElement?.children?.[3]?.nextElementSibling
    

    To ensure a default defined value, you can use ??. If you require the first truthy value, you can use ||.

    example?.c ?? "c"  // "c"
    example?.c || "c"  // "c"
    
    example?.a?.[2] ?? 2  // false
    example?.a?.[2] || 2  // 2
    

    If you do not check a case, the left-side property must exist. If not, it will throw an exception.

    example?.First         // undefined
    example?.First.Second  // Uncaught TypeError: Cannot read property 'Second' of undefined
    

    ?. Browser Support - 84%, Dec 2020

    ?? Browser Support - 84%

    Node Support - v14+

    0 讨论(0)
提交回复
热议问题