避免长点符号链的模式

Question

When accessing nested objects using dot notation, I always have to make sure that the previous object exists, which gets pretty exhausting.

I basically want to avoid long if chains like

if (a && a.b && a.b.c && a.b.c[0] ... ) { v = a.b.c[0]; }

The only other thing I can think of is via the use of a try catch.

var v; try { v = a.b.c[0].d.e; } catch (e) {}

Is there a better pattern for this?

Answer 1

I think you've got the two prettiest solutions already.

But note that for something like, say, obj.obj.string.length your first solution will fail if string === "" . Since an empty string is falsey, it'll trip the && guard.

But speaking of strings, you could do something like:

function getNestedProperty(obj, propChain) {
    var props = propChain.slice(0), prop = props.shift();
    if(typeof obj[prop] !== "undefined") {
        if(props.length) {
            return getNestedProperty(obj[prop], props);
        } else {
            return obj[prop];
        }
    }
}

var v = getNestedProperty(a, ["b", "c", 0, "d", "e"]);

Yeah... not too pretty :P

I'd say that, of the solutions proposed, try...catch is probably the simplest way to go

Answer 2

How about this one:

var hasProperty = function (object, property) {

    var properties = property.split('.'),
        temp = object;

    while (temp && properties.length) {
        temp = temp[properties.shift()];
    }

    return !!temp;
};

and then use it like:

if (a && hasProperty(a, 'b.c.0' ) { v = a.b.c[0]; }

Answer 3

The scenario you are referring to in your question is also called "optional chaining". Some languages already support it by now – for example C# has so called null-conditional operators which allow you to short-circuit your expressions:

var count = customers?[0]?.Orders?.Count();

Unfortunately, this feature has not yet made it into the current JS specifications.

There is an open Stage 1 proposol for "optional chaining" that can be tracked here .

This would allow you to write...

a?.b[3].c?.(x).d

...instead of:

a == null ? undefined : a.b[3].c == null ? undefined : a.b[3].c(x).d

If you want to take the risk and use it already at this early stage, you can target it via babel to include it in your project.

Answer 4

It's rather evil, but this should work and doesn't look too horrible:

var i = !a ? null : !a.b ? null : !a.b.c ? null : !a.b.c.d ? a.b.c.d.e;

The reason for the ! is to invert the test flag, to allow the success case to be the last expression in the ?: . That allows us to chain them together like this.

Do check the operator precedence if you want to do this for real (I did some very basic tests and I think I got it right). And do expect people to point and laugh if they see it in your code.