Explicaré con el ejemplo:

Operador de Elvis (?:)

El "operador de Elvis" es una abreviatura del operador ternario de Java. Una instancia de donde esto es útil es para devolver un valor 'sensible por defecto' si una expresión se resuelve como falsa o nula. Un ejemplo simple podría verse así:

def gender = user.male ? "male" : "female"  //traditional ternary operator usage

def displayName = user.name ?: "Anonymous"  //more compact Elvis operator

Operador de navegación segura (?.)

El operador de navegación segura se utiliza para evitar una excepción NullPointerException. Normalmente, cuando tiene una referencia a un objeto, es posible que deba verificar que no sea nulo antes de acceder a los métodos o propiedades del objeto. Para evitar esto, el operador de navegación segura simplemente devolverá nulo en lugar de lanzar una excepción, de esta manera:

def user = User.find( "admin" )           //this might be null if 'admin' does not exist
def streetName = user?.address?.street    //streetName will be null if user or user.address is null - no NPE thrown

Puede usar el operador lógico 'OR' en lugar del operador de Elvis:

Por ejemplo displayname = user.name || "Anonymous".

Pero Javascript actualmente no tiene la otra funcionalidad. Recomiendo mirar CoffeeScript si desea una sintaxis alternativa. Tiene una taquigrafía similar a la que estás buscando.

Por ejemplo, el operador existencial

zip = lottery.drawWinner?().address?.zipcode

Atajos de funciones

()->  // equivalent to function(){}

Llamada de función sexy

func 'arg1','arg2' // equivalent to func('arg1','arg2')

También hay comentarios y clases de varias líneas. Obviamente, debe compilar esto en JavaScript o insertarlo en la página, <script type='text/coffeescript>'pero agrega mucha funcionalidad :). El uso <script type='text/coffeescript'>realmente solo está destinado al desarrollo y no a la producción.

Creo que lo siguiente es equivalente al operador de navegación segura, aunque un poco más largo:

var streetName = user && user.address && user.address.street;

streetNameentonces será el valor de user.address.streeto undefined.

Si desea que el valor predeterminado sea otra cosa, puede combinarlo con el acceso directo anterior o dar:

var streetName = (user && user.address && user.address.street) || "Unknown Street";

El operador lógico OR de Javascript está en cortocircuito y puede reemplazar su operador "Elvis":

var displayName = user.name || "Anonymous";

Sin embargo, que yo sepa, no hay equivalente para su ?.operador.

En ocasiones he encontrado útil el siguiente idioma:

a?.b?.c

puede reescribirse como:

((a||{}).b||{}).c

Esto aprovecha el hecho de que obtener atributos desconocidos en un objeto devuelve indefinido, en lugar de lanzar una excepción como lo hace en nullo undefined, por lo que reemplazamos nulo e indefinido con un objeto vacío antes de navegar.

Creo que lodash _.get()puede ayudar aquí, como en _.get(user, 'name'), y tareas más complejas como_.get(o, 'a[0].b.c', 'default-value')

Actualmente hay un borrador de especificación:

https://github.com/tc39/proposal-optional-chaining

https://tc39.github.io/proposal-optional-chaining/

Por ahora, sin embargo, me gusta usar lodashget(object, path [,defaultValue]) o dlvdelve(obj, keypath)

Actualización (a partir del 23 de diciembre de 2019):

el encadenamiento opcional se ha movido a la etapa 4

Actualización 2019

JavaScript ahora tiene equivalentes tanto para el operador de Elvis como para el operador de navegación segura.

Acceso seguro a la propiedad

El operador de encadenamiento opcional ( ?.) es actualmente una propuesta de ECMAScript de etapa 4 . Puedes usarlo hoy con Babel .

// `undefined` if either `a` or `b` are `null`/`undefined`. `a.b.c` otherwise.
const myVariable = a?.b?.c;

El operador lógico AND ( &&) es la forma "antigua" y más detallada de manejar este escenario.

const myVariable = a && a.b && a.c;

Proporcionar un valor predeterminado

El operador de fusión nulo ( ??) es actualmente una propuesta de ECMAScript de etapa 3 . Puedes usarlo hoy con Babel . Le permite establecer un valor predeterminado si el lado izquierdo del operador es un valor nulo ( / ).nullundefined

const myVariable = a?.b?.c ?? 'Some other value';

// Evaluates to 'Some other value'
const myVariable2 = null ?? 'Some other value';

// Evaluates to ''
const myVariable3 = '' ?? 'Some other value';

El operador lógico OR ( ||) es una solución alternativa con un comportamiento ligeramente diferente . Le permite establecer un valor predeterminado si el lado izquierdo del operador es falso . Tenga en cuenta que el resultado de myVariable3abajo difiere del de myVariable3arriba.

const myVariable = a?.b?.c || 'Some other value';

// Evaluates to 'Some other value'
const myVariable2 = null || 'Some other value';

// Evaluates to 'Some other value'
const myVariable3 = '' || 'Some other value';

Para el primero, puedes usar ||. El operador "lógico o" Javascript, en lugar de simplemente devolver valores verdaderos y falsos enlatados, sigue la regla de devolver su argumento izquierdo si es verdadero y, de lo contrario, evaluar y devolver su argumento derecho. Cuando solo le interesa el valor de verdad, funciona igual, pero también significa que foo || bar || bazdevuelve el extremo izquierdo de foo, bar o baz que contiene un valor verdadero .

Sin embargo, no encontrará uno que pueda distinguir falso de nulo, y 0 y la cadena vacía son valores falsos, así que evite usar la value || defaultconstrucción donde valuelegítimamente puede ser 0 o "".

¡Sí hay! 🍾

El encadenamiento opcional está en la etapa 4 y esto le permite utilizar eluser?.address?.street fórmula.

Si no puede esperar el lanzamiento, instálelo @babel/plugin-proposal-optional-chainingy puede usarlo. Aquí están mis configuraciones que funcionan para mí, o simplemente lea el artículo de Nimmo .

// package.json

{
  "name": "optional-chaining-test",
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "7.2.0",
    "@babel/core": "7.2.0",
    "@babel/preset-env": "^7.5.5"
  }
  ...
}

// .babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "debug": true
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ]
}

// index.js

console.log(user?.address?.street);  // it works

Aquí hay un simple operador de Elvis equivalente:

function elvis(object, path) {
    return path ? path.split('.').reduce(function (nestedObject, key) {
        return nestedObject && nestedObject[key];
    }, object) : object;
}

> var o = { a: { b: 2 }, c: 3 };
> elvis(o)

{ a: { b: 2 }, c: 3 }

> elvis(o, 'a');

{ b: 2 }

> elvis(o, 'a.b');

2

> elvis(o, 'x');

undefined

ACTUALIZACIÓN SEP 2019

Sí, JS ahora es compatible con esto. El encadenamiento opcional llegará pronto a v8 leer más

Esto se conoce más comúnmente como operador de fusión nula. Javascript no tiene uno.

Puede lograr aproximadamente el mismo efecto diciendo:

var displayName = user.name || "Anonymous";

Tengo una solución para eso, adaptarlo a sus propias necesidades, un extracto de una de mis librerías:

    elvisStructureSeparator: '.',

    // An Elvis operator replacement. See:
    // http://coffeescript.org/ --> The Existential Operator
    // http://fantom.org/doc/docLang/Expressions.html#safeInvoke
    //
    // The fn parameter has a SPECIAL SYNTAX. E.g.
    // some.structure['with a selector like this'].value transforms to
    // 'some.structure.with a selector like this.value' as an fn parameter.
    //
    // Configurable with tulebox.elvisStructureSeparator.
    //
    // Usage examples: 
    // tulebox.elvis(scope, 'arbitrary.path.to.a.function', fnParamA, fnParamB, fnParamC);
    // tulebox.elvis(this, 'currentNode.favicon.filename');
    elvis: function (scope, fn) {
        tulebox.dbg('tulebox.elvis(' + scope + ', ' + fn + ', args...)');

        var implicitMsg = '....implicit value: undefined ';

        if (arguments.length < 2) {
            tulebox.dbg(implicitMsg + '(1)');
            return undefined;
        }

        // prepare args
        var args = [].slice.call(arguments, 2);
        if (scope === null || fn === null || scope === undefined || fn === undefined 
            || typeof fn !== 'string') {
            tulebox.dbg(implicitMsg + '(2)');
            return undefined;   
        }

        // check levels
        var levels = fn.split(tulebox.elvisStructureSeparator);
        if (levels.length < 1) {
            tulebox.dbg(implicitMsg + '(3)');
            return undefined;
        }

        var lastLevel = scope;

        for (var i = 0; i < levels.length; i++) {
            if (lastLevel[levels[i]] === undefined) {
                tulebox.dbg(implicitMsg + '(4)');
                return undefined;
            }
            lastLevel = lastLevel[levels[i]];
        }

        // real return value
        if (typeof lastLevel === 'function') {
            var ret = lastLevel.apply(scope, args);
            tulebox.dbg('....function value: ' + ret);
            return ret;
        } else {
            tulebox.dbg('....direct value: ' + lastLevel);
            return lastLevel;
        }
    },

Funciona de maravilla. ¡Disfruta del menor dolor!

Podrías rodar el tuyo:

function resolve(objectToGetValueFrom, stringOfDotSeparatedParameters) {
    var returnObject = objectToGetValueFrom,
        parameters = stringOfDotSeparatedParameters.split('.'),
        i,
        parameter;

    for (i = 0; i < parameters.length; i++) {
        parameter = parameters[i];

        returnObject = returnObject[parameter];

        if (returnObject === undefined) {
            break;
        }
    }
    return returnObject;
};

Y úsalo así:

var result = resolve(obj, 'a.b.c.d'); 

* el resultado no está definido si alguno de a, b, c o d no está definido.

Leí este artículo ( https://www.beyondjava.net/elvis-operator-aka-safe-navigation-javascript-typescript ) y modifiqué la solución usando Proxies.

function safe(obj) {
    return new Proxy(obj, {
        get: function(target, name) {
            const result = target[name];
            if (!!result) {
                return (result instanceof Object)? safe(result) : result;
            }
            return safe.nullObj;
        },
    });
}

safe.nullObj = safe({});
safe.safeGet= function(obj, expression) {
    let safeObj = safe(obj);
    let safeResult = expression(safeObj);

    if (safeResult === safe.nullObj) {
        return undefined;
    }
    return safeResult;
}

Lo llamas así:

safe.safeGet(example, (x) => x.foo.woo)

El resultado será indefinido para una expresión que encuentre nulo o indefinido a lo largo de su ruta. ¡Podría enloquecer y modificar el prototipo de Objeto!

Object.prototype.getSafe = function (expression) {
    return safe.safeGet(this, expression);
};

example.getSafe((x) => x.foo.woo);

Saltando muy tarde, hay una propuesta [1] para encadenamiento opcional actualmente en la etapa 2, con un complemento de babel [2] disponible. Actualmente no estoy en ningún navegador que yo sepa.

1. https://github.com/tc39/proposal-optional-chaining
2. https://www.npmjs.com/package/@babel/plugin-proposal-optional-chaining

Esto fue un problema para mí por mucho tiempo. Tuve que encontrar una solución que se pueda migrar fácilmente una vez que obtengamos el operador de Elvis o algo así.

Esto es lo que uso; funciona tanto para matrices como para objetos

poner esto en el archivo tools.js o algo

// this will create the object/array if null
Object.prototype.__ = function (prop) {
    if (this[prop] === undefined)
        this[prop] = typeof prop == 'number' ? [] : {}
    return this[prop]
};

// this will just check if object/array is null
Object.prototype._ = function (prop) {
    return this[prop] === undefined ? {} : this[prop]
};

ejemplo de uso:

let student = {
    classes: [
        'math',
        'whatev'
    ],
    scores: {
        math: 9,
        whatev: 20
    },
    loans: [
        200,
        { 'hey': 'sup' },
        500,
        300,
        8000,
        3000000
    ]
}

// use one underscore to test

console.log(student._('classes')._(0)) // math
console.log(student._('classes')._(3)) // {}
console.log(student._('sports')._(3)._('injuries')) // {}
console.log(student._('scores')._('whatev')) // 20
console.log(student._('blabla')._('whatev')) // {}
console.log(student._('loans')._(2)) // 500 
console.log(student._('loans')._(1)._('hey')) // sup
console.log(student._('loans')._(6)._('hey')) // {} 

// use two underscores to create if null

student.__('loans').__(6)['test'] = 'whatev'

console.log(student.__('loans').__(6).__('test')) // whatev

bueno, sé que hace que el código sea un poco ilegible, pero es una solución simple y funciona muy bien. Espero que esto ayude a alguien :)

Esta fue una solución interesante para el operador de navegación segura que utilizaba algunas combinaciones.

http://jsfiddle.net/avernet/npcmv/

  // Assume you have the following data structure
  var companies = {
      orbeon: {
          cfo: "Erik",
          cto: "Alex"
      }
  };

  // Extend Underscore.js
  _.mixin({ 
      // Safe navigation
      attr: function(obj, name) { return obj == null ? obj : obj[name]; },
      // So we can chain console.log
      log: function(obj) { console.log(obj); }
  });

  // Shortcut, 'cause I'm lazy
  var C = _(companies).chain();

  // Simple case: returns Erik
  C.attr("orbeon").attr("cfo").log();
  // Simple case too, no CEO in Orbeon, returns undefined
  C.attr("orbeon").attr("ceo").log();
  // IBM unknown, but doesn't lead to an error, returns undefined
  C.attr("ibm").attr("ceo").log();

Creé un paquete que hace que esto sea mucho más fácil de usar.

NPM jsdig Github jsdig

Puede manejar cosas simples como y objeto:

const world = {
  locations: {
    europe: 'Munich',
    usa: 'Indianapolis'
  }
};

world.dig('locations', 'usa');
// => 'Indianapolis'

world.dig('locations', 'asia', 'japan');
// => 'null'

o un poco más complicado:

const germany = () => 'germany';
const world = [0, 1, { location: { europe: germany } }, 3];
world.dig(2, 'location', 'europe') === germany;
world.dig(2, 'location', 'europe')() === 'germany';

Personalmente uso

function e(e,expr){try{return eval(expr);}catch(e){return null;}};

y por ejemplo seguro obtener:

var a = e(obj,'e.x.y.z.searchedField');