Je vais vous expliquer par exemple:

Opérateur Elvis (?:)

L '"opérateur Elvis" est un raccourci de l'opérateur ternaire de Java. Un exemple où cela est pratique consiste à renvoyer une valeur «sensible par défaut» si une expression se résout à faux ou null. Un exemple simple pourrait ressembler à ceci:

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

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

Opérateur de navigation sécurisée (?.)

L'opérateur de navigation sécurisée est utilisé pour éviter une exception NullPointerException. En règle générale, lorsque vous avez une référence à un objet, vous devrez peut-être vérifier qu'il n'est pas nul avant d'accéder aux méthodes ou aux propriétés de l'objet. Pour éviter cela, l'opérateur de navigation sécurisée retournera simplement null au lieu de lever une exception, comme ceci:

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

Vous pouvez utiliser l'opérateur logique «OU» à la place de l'opérateur Elvis:

Par exemple displayname = user.name || "Anonymous" .

Mais Javascript n'a actuellement pas les autres fonctionnalités. Je recommanderais de regarder CoffeeScript si vous voulez une syntaxe alternative. Il a une sténographie similaire à ce que vous recherchez.

Par exemple, l'opérateur existentiel

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

Raccourcis de fonction

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

Appel de fonction sexy

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

Il existe également des commentaires et des classes multilignes. Évidemment, vous devez le compiler en javascript ou l'insérer dans la page, <script type='text/coffeescript>'mais cela ajoute beaucoup de fonctionnalités :). L'utilisation <script type='text/coffeescript'>n'est vraiment destinée qu'au développement et non à la production.

Je pense que ce qui suit est équivalent à l'opérateur de navigation sécurisée, bien qu'un peu plus long:

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

streetNamesera alors soit la valeur de user.address.streetou undefined.

Si vous voulez qu'il par défaut soit différent, vous pouvez le combiner avec le raccourci ci-dessus ou donner:

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

Javascript de l' opérateur logique OR est un court-circuit et peut remplacer votre opérateur « Elvis »:

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

Cependant, à ma connaissance, il n'y a pas d'équivalent à votre ?.opérateur.

J'ai parfois trouvé l'idiome suivant utile:

a?.b?.c

peut être réécrit comme:

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

Cela profite du fait que l'obtention d'attributs inconnus sur un objet renvoie undefined, plutôt que de lever une exception comme il le fait sur nullou undefined, nous remplaçons donc null et undefined par un objet vide avant de naviguer.

je pense que lodash _.get()peut aider ici, comme dans _.get(user, 'name'), et des tâches plus complexes comme_.get(o, 'a[0].b.c', 'default-value')

Il existe actuellement un projet de spécification:

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

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

Pour l'instant, cependant, j'aime utiliser lodashget(object, path [,defaultValue]) ou dlvdelve(obj, keypath)

Mise à jour (au 23 décembre 2019):

le chaînage optionnel est passé à l'étape 4

Mise à jour 2019

JavaScript a maintenant des équivalents à la fois pour l'opérateur Elvis et pour l'opérateur de navigation sécurisée.

Accès sécurisé aux propriétés

L' opérateur de chaînage facultatif ( ?.) est actuellement une proposition ECMAScript de stade 4 . Vous pouvez l' utiliser aujourd'hui avec Babel .

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

L' opérateur logique ET ( &&) est la «vieille» manière plus détaillée de gérer ce scénario.

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

Fournir un défaut

L' opérateur coalescent nul ( ??) est actuellement une proposition ECMAScript de stade 3 . Vous pouvez l' utiliser aujourd'hui avec Babel . Il vous permet de définir une valeur par défaut si le côté gauche de l'opérateur est une valeur nulle ( / ).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';

L' opérateur logique OR ( ||) est une solution alternative avec un comportement légèrement différent . Il vous permet de définir une valeur par défaut si le côté gauche de l'opérateur est faux . Notez que le résultat myVariable3ci - dessous diffère de celui myVariable3ci-dessus.

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';

Pour les premiers, vous pouvez utiliser ||. L'opérateur Javascript "logique ou", plutôt que de simplement renvoyer des valeurs vraies et fausses prédéfinies, suit la règle de renvoyer son argument gauche s'il est vrai, et autrement d'évaluer et de renvoyer son argument droit. Lorsque vous êtes uniquement intéressé par la valeur de vérité, cela fonctionne de la même manière, mais cela signifie également que foo || bar || bazrenvoie le plus à gauche de foo, bar ou baz qui contient une vraie valeur .

Cependant, vous n'en trouverez pas qui puisse distinguer faux de null, et 0 et une chaîne vide sont de fausses valeurs, alors évitez d'utiliser la value || defaultconstruction où valuepeut légitimement être 0 ou "".

Oui il y a! 🍾

Le chaînage facultatif est à l'étape 4 et cela vous permet d'utiliser la user?.address?.streetformule.

Si vous ne pouvez pas attendre la sortie, installez @babel/plugin-proposal-optional-chaininget vous pouvez l'utiliser. Voici mes paramètres qui fonctionnent pour moi, ou lisez simplement l'article 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

Voici un simple équivalent d'opérateur elvis:

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

MISE À JOUR SEP 2019

Oui, JS prend désormais cela en charge. Le chaînage optionnel arrive bientôt sur v8 en savoir plus

Ceci est plus communément appelé opérateur à coalescence nulle. Javascript n'en a pas.

Vous pouvez obtenir à peu près le même effet en disant:

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

J'ai une solution pour cela, adaptez-la à vos propres besoins, un extrait de l'une de mes bibliothèques:

    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;
        }
    },

fonctionne comme un charme. Profitez du moins de douleur!

Vous pouvez rouler le vôtre:

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;
};

Et utilisez-le comme ceci:

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

* le résultat n'est pas défini si l'un des éléments a, b, c ou d n'est pas défini.

J'ai lu cet article ( https://www.beyondjava.net/elvis-operator-aka-safe-navigation-javascript-typescript ) et modifié la solution à l'aide de proxys.

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;
}

Vous l'appelez comme ceci:

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

Le résultat sera indéfini pour une expression qui rencontre null ou indéfini le long de son chemin. Vous pouvez vous déchaîner et modifier le prototype d'objet!

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

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

Saut très tard, il y a une proposition [1] pour le chaînage optionnel actuellement au stade 2, avec un plugin babel [2] disponible. Ce n'est actuellement dans aucun navigateur que je connaisse.

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

Cela a été un problème pour moi pendant longtemps. J'ai dû trouver une solution qui peut être facilement migrée une fois que nous obtenons l'opérateur Elvis ou quelque chose.

C'est ce que j'utilise; fonctionne pour les tableaux et les objets

mettre cela dans le fichier tools.js ou quelque chose

// 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]
};

exemple d'utilisation:

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

Eh bien, je sais que cela rend le code un peu illisible, mais c'est une solution simple et fonctionne très bien. J'espère que ça aide quelqu'un :)

C'était une solution intéressante pour l'opérateur de navigation en toute sécurité utilisant un mixin ..

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();

J'ai créé un package qui rend cela beaucoup plus facile à utiliser.

NPM jsdig Github jsdig

Vous pouvez gérer des choses simples comme et objet:

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

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

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

ou un peu plus compliqué:

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

Personnellement j'utilise

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

et par exemple obtenir en toute sécurité:

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