Saya akan menjelaskan dengan contoh:

Operator Elvis (?:)

"Operator Elvis" adalah kependekan dari operator ternary Jawa. Salah satu contoh di mana hal ini berguna adalah untuk mengembalikan nilai 'sensible default' jika ekspresi diputuskan menjadi false atau null. Contoh sederhana mungkin terlihat seperti ini:

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

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

Operator Navigasi Aman (?)

Operator Navigasi Aman digunakan untuk menghindari NullPointerException. Biasanya ketika Anda memiliki referensi ke objek Anda mungkin perlu memverifikasi bahwa itu tidak nol sebelum mengakses metode atau properti objek. Untuk menghindari hal ini, operator navigasi yang aman hanya akan mengembalikan nol alih-alih melemparkan pengecualian, seperti:

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

Anda dapat menggunakan operator 'OR' yang logis sebagai pengganti operator Elvis:

Sebagai contoh displayname = user.name || "Anonymous".

Tetapi Javascript saat ini tidak memiliki fungsi lain. Saya akan merekomendasikan melihat CoffeeScript jika Anda ingin sintaks alternatif. Ini memiliki beberapa singkatan yang mirip dengan apa yang Anda cari.

Misalnya Operator yang Ada

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

Pintasan fungsi

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

Panggilan fungsi seksi

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

Ada juga komentar dan kelas multiline. Jelas Anda harus mengkompilasi ini ke javascript atau menyisipkan ke halaman <script type='text/coffeescript>'tetapi menambahkan banyak fungsi :). Penggunaan <script type='text/coffeescript'>sebenarnya hanya ditujukan untuk pengembangan dan bukan produksi.

Saya pikir yang berikut ini setara dengan operator navigasi yang aman, meskipun sedikit lebih lama:

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

streetNamemaka akan menjadi nilai user.address.streetatau undefined.

Jika Anda ingin default ke hal lain, Anda dapat menggabungkan dengan cara pintas di atas atau memberikan:

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

Operator ATAU logis Javascript adalah hubungan arus pendek dan dapat menggantikan operator "Elvis" Anda:

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

Namun, setahu saya tidak ada yang setara dengan ?.operator Anda .

Saya kadang-kadang menemukan ungkapan berikut berguna:

a?.b?.c

dapat ditulis ulang sebagai:

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

Ini mengambil keuntungan dari fakta bahwa mendapatkan atribut yang tidak dikenal pada suatu objek menghasilkan undefined, daripada melemparkan pengecualian seperti pada nullatau undefined, jadi kami mengganti null dan undefined dengan objek kosong sebelum menavigasi.

Saya pikir lodash _.get()dapat membantu di sini, seperti dalam _.get(user, 'name'), dan tugas-tugas yang lebih kompleks seperti_.get(o, 'a[0].b.c', 'default-value')

Saat ini ada spesifikasi rancangan:

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

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

Untuk saat ini, saya suka menggunakan lodashget(object, path [,defaultValue]) atau dlvdelve(obj, keypath)

Pembaruan (per 23 Desember 2019):

rantai opsional telah pindah ke tahap 4

Pembaruan 2019

JavaScript sekarang memiliki padanan untuk Operator Elvis dan Operator Navigasi Aman.

Akses Properti Aman

The chaining Operator opsional ( ?.) saat ini menjadi tahap 4 ECMAScript usulan . Anda dapat menggunakannya hari ini dengan Babel .

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

The logis operator AND ( &&) adalah "tua", cara yang lebih-verbose untuk menangani skenario ini.

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

Memberikan Default

The Operator penggabungan nullish ( ??) saat ini menjadi tahap 3 ECMAScript usulan . Anda dapat menggunakannya hari ini dengan Babel . Ini memungkinkan Anda untuk menetapkan nilai default jika sisi kiri operator adalah nilai nullary ( null/ undefined).

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

The Operator OR logis ( ||) merupakan solusi alternatif dengan perilaku yang sedikit berbeda . Hal ini memungkinkan Anda untuk mengatur nilai default jika sisi kiri dari operator adalah falsy . Perhatikan bahwa hasil di myVariable3bawah berbeda dari di myVariable3atas.

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

Untuk yang pertama, bisa Anda gunakan ||. Operator "logis atau" Javascript, alih-alih hanya mengembalikan nilai kalengan benar dan salah, mengikuti aturan mengembalikan argumen kirinya jika itu benar, dan sebaliknya mengevaluasi dan mengembalikan argumen kanannya. Ketika Anda hanya tertarik pada nilai kebenaran, hasilnya sama saja, tetapi itu juga berarti foo || bar || bazmengembalikan nilai foo, bar, atau baz paling kiri yang berisi nilai sebenarnya .

Anda tidak akan menemukan satu yang dapat membedakan false dari null, dan 0 dan string kosong adalah nilai-nilai yang salah, jadi hindari menggunakan value || defaultkonstruk yang valuebisa bernilai 0 atau "".

Ya ada! 🍾

Chaining opsional ada di tahap 4 dan ini memungkinkan Anda untuk menggunakan user?.address?.streetformula.

Jika Anda tidak bisa menunggu rilis, instal @babel/plugin-proposal-optional-chainingdan Anda dapat menggunakannya. Berikut adalah pengaturan saya yang berfungsi untuk saya, atau cukup baca artikel 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

Berikut ini setara dengan operator 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

UPDATE SEP 2019

Ya, JS sekarang mendukung ini. Chaining opsional akan segera hadir untuk v8 baca selengkapnya

Ini lebih dikenal sebagai operator penggabungan nol. Javascript tidak memilikinya.

Anda dapat mencapai efek yang hampir sama dengan mengatakan:

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

Saya punya solusi untuk itu, sesuaikan dengan kebutuhan Anda sendiri, kutipan dari salah satu lib saya:

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

bekerja seperti pesona. Nikmati sedikit rasa sakit!

Anda bisa menggulung sendiri:

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

Dan gunakan seperti ini:

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

* hasil tidak ditentukan jika salah satu dari a, b, c atau d tidak terdefinisi.

Saya membaca artikel ini ( https://www.beyondjava.net/elvis-operator-aka-safe-navigation-javascript-typescript ) dan memodifikasi solusi menggunakan 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;
}

Anda menyebutnya seperti ini:

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

Hasilnya akan tidak ditentukan untuk ekspresi yang menemukan nol atau tidak terdefinisi di sepanjang jalurnya. Anda bisa menjadi liar dan memodifikasi prototipe Obyek!

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

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

Melompat sangat terlambat, ada proposal [1] untuk chaining opsional saat ini pada tahap 2, dengan plugin babel [2] tersedia. Saat ini tidak ada di browser apa pun yang saya ketahui.

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

Ini masalah bagi saya untuk waktu yang lama. Saya harus datang dengan solusi yang dapat dengan mudah dimigrasi begitu kita mendapatkan operator Elvis atau sesuatu.

Inilah yang saya gunakan; bekerja untuk array dan objek

letakkan ini di file tools.js atau apalah

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

contoh penggunaan:

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

Yah aku tahu itu membuat kode sedikit tidak terbaca tetapi itu adalah solusi satu liner sederhana dan berfungsi dengan baik. Saya harap ini membantu seseorang :)

Ini adalah solusi menarik untuk operator navigasi yang aman menggunakan beberapa campuran ..

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

Saya membuat paket yang membuat ini jauh lebih mudah digunakan.

NPM jsdig Github jsdig

Anda dapat menangani hal-hal sederhana seperti dan objek:

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

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

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

atau sedikit lebih rumit:

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

Secara pribadi saya menggunakan

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

dan misalnya aman dapatkan:

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