Wie vermeide ich, dass die Eigenschaft undefinierter Fehler nicht gelesen werden kann?

In meinem Code beschäftige ich mich mit einem Array, das einige Einträge mit vielen ineinander verschachtelten Objekten enthält, während andere dies nicht tun. Es sieht ungefähr so ​​aus:

// where this array is hundreds of entries long, with a mix
// of the two examples given
var test = [{'a':{'b':{'c':"foo"}}}, {'a': "bar"}];

Dies gibt mir Probleme, weil ich manchmal durch das Array iterieren muss und die Inkonsistenz mir Fehler wie folgt wirft:

for (i=0; i<test.length; i++) {
    // ok on i==0, but 'cannot read property of undefined' on i==1
    console.log(a.b.c);
}

Ich bin mir bewusst, dass ich sagen kann if(a.b){ console.log(a.b.c)}, aber dies ist außerordentlich mühsam in Fällen, in denen bis zu 5 oder 6 Objekte ineinander verschachtelt sind. Gibt es eine andere (einfachere) Möglichkeit, dass ich NUR das console.log ausführen kann, wenn es vorhanden ist, aber ohne einen Fehler auszulösen?

Update :

• Wenn Sie JavaScript gemäß ECMAScript 2020 oder höher verwenden, lesen Sie die optionale Verkettung .
• TypeScript hat Unterstützung für optionale Verkettung in Version 3.7 hinzugefügt .

// use it like this
obj?.a?.lot?.of?.properties

Lösung für JavaScript vor ECMASCript 2020 oder TypeScript älter als Version 3.7 :

Eine schnelle Problemumgehung ist die Verwendung einer Try / Catch-Hilfsfunktion mit ES6- Pfeilfunktion :

function getSafe(fn, defaultVal) {
    try {
        return fn();
    } catch (e) {
        return defaultVal;
    }
}

// use it like this
getSafe(() => obj.a.lot.of.properties);

// or add an optional default value
getSafe(() => obj.a.lot.of.properties, 'nothing');

Arbeitsausschnitt:

function getSafe(fn, defaultVal) {
  try {
    return fn();
  } catch (e) {
    return defaultVal;
  }
}

// use it like this
console.log(getSafe(() => obj.a.lot.of.properties));

// or add an optional default value
console.log(getSafe(() => obj.a.lot.of.properties, 'nothing'));

Weitere Informationen finden Sie in diesem Artikel .

Was Sie tun, löst eine Ausnahme aus (und das zu Recht).

Das kannst du immer tun

try{
   window.a.b.c
}catch(e){
   console.log("YO",e)
}

Aber ich würde nicht an Ihren Anwendungsfall denken.

Warum greifen Sie auf Daten zu, 6 Ebenen verschachtelt, die Sie nicht kennen? Welcher Anwendungsfall rechtfertigt dies?

Normalerweise möchten Sie tatsächlich überprüfen, um welche Art von Objekt es sich handelt.

Außerdem sollten Sie keine Randanweisungen wie verwenden, if(a.b)da sie false zurückgeben, wenn ab 0 ist oder sogar wenn sie "0" ist. Überprüfen Sie stattdessen, oba.b !== undefined

Wenn ich Ihre Frage richtig verstehe, möchten Sie am sichersten feststellen, ob ein Objekt eine Eigenschaft enthält.

Am einfachsten ist es, den inOperator zu verwenden .

window.a = "aString";
//window should have 'a' property
//lets test if it exists
if ("a" in window){
    //true
 }

if ("b" in window){
     //false
 }

Natürlich können Sie dies so tief verschachteln, wie Sie möchten

if ("a" in window.b.c) { }

Ich bin mir nicht sicher, ob dies hilft.

Wenn Sie lodash verwenden , können Sie deren "has" -Funktion verwenden. Es ähnelt dem nativen "in", erlaubt jedoch Pfade.

var testObject = {a: {b: {c: 'walrus'}}};
if(_.has(testObject, 'a.b.c')) {
  //Safely access your walrus here
}

Versuche dies. Wenn a.bundefiniert, wird die ifAnweisung ausnahmslos verlassen.

if (a.b && a.b.c) {
  console.log(a.b.c);
}

Dies ist ein häufiges Problem bei der Arbeit mit tiefen oder komplexen JSON-Objekten. Daher versuche ich zu vermeiden, mehrere Prüfungen zu versuchen / abzufangen oder einzubetten, die den Code unlesbar machen würden. Normalerweise verwende ich diesen kleinen Code in meinem gesamten Verfahren, um die Arbeit zu erledigen.

/* ex: getProperty(myObj,'aze.xyz',0) // return myObj.aze.xyz safely
 * accepts array for property names: 
 *     getProperty(myObj,['aze','xyz'],{value: null}) 
 */
function getProperty(obj, props, defaultValue) {
    var res, isvoid = function(x){return typeof x === "undefined" || x === null;}
    if(!isvoid(obj)){
        if(isvoid(props)) props = [];
        if(typeof props  === "string") props = props.trim().split(".");
        if(props.constructor === Array){
            res = props.length>1 ? getProperty(obj[props.shift()],props,defaultValue) : obj[props[0]];
        }
    }
    return typeof res === "undefined" ? defaultValue: res;
}

Wenn Sie lodash haben, können Sie seine .getMethode verwenden

_.get(a, 'b.c.d.e')

oder geben Sie einen Standardwert ein

_.get(a, 'b.c.d.e', default)

Ich benutze undefsafe religiös. Es testet jede Ebene in Ihrem Objekt, bis es entweder den gewünschten Wert erhält oder "undefiniert" zurückgibt. Aber niemals Fehler.

Wenn Sie Babel verwenden, können Sie die optionale Verkettungssyntax bereits mit dem Babel-Plugin @ babel / plugin-comment-optional-chaining verwenden . Dies würde es Ihnen ermöglichen, dies zu ersetzen:

console.log(a && a.b && a.b.c);

mit diesem:

console.log(a?.b?.c);

Ich mag die Antwort von Cao Shouguang, aber ich mag es nicht, bei jedem Aufruf eine Funktion als Parameter an die getSafe-Funktion zu übergeben. Ich habe die Funktion getSafe geändert, um einfache Parameter und reines ES5 zu akzeptieren.

/**
* Safely get object properties.    
* @param {*} prop The property of the object to retrieve
* @param {*} defaultVal The value returned if the property value does not exist
* @returns If property of object exists it is returned, 
*          else the default value is returned.
* @example
* var myObj = {a : {b : 'c'} };
* var value;
* 
* value = getSafe(myObj.a.b,'No Value'); //returns c 
* value = getSafe(myObj.a.x,'No Value'); //returns 'No Value'
* 
* if (getSafe(myObj.a.x, false)){ 
*   console.log('Found')
* } else {
*  console.log('Not Found') 
* }; //logs 'Not Found'
* 
* if(value = getSafe(myObj.a.b, false)){
*  console.log('New Value is', value); //logs 'New Value is c'
* }
*/
function getSafe(prop, defaultVal) {
  return function(fn, defaultVal) {
    try {
      if (fn() === undefined) {
        return defaultVal;
      } else {
        return fn();
      }
    } catch (e) {
      return defaultVal;
    }
  }(function() {return prop}, defaultVal);
}

In der Antwort von str wird der Wert 'undefined' anstelle des festgelegten Standardwerts zurückgegeben, wenn die Eigenschaft undefined ist. Dies kann manchmal zu Fehlern führen. Im Folgenden wird sichergestellt, dass die defaultVal immer zurückgegeben wird, wenn entweder die Eigenschaft oder das Objekt undefiniert ist.

const temp = {};
console.log(getSafe(()=>temp.prop, '0'));

function getSafe(fn, defaultVal) {
    try {
        if (fn() === undefined) {
            return defaultVal
        } else {
            return fn();
        }

    } catch (e) {
        return defaultVal;
    }
}

Lodash verfügt über eine getMethode, die einen Standard als optionalen dritten Parameter zulässt, wie unten gezeigt:

const myObject = {
  has: 'some',
  missing: {
    vars: true
  }
}
const path = 'missing.const.value';
const myValue = _.get(myObject, path, 'default');
console.log(myValue) // prints out default, which is specified above

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

Stellen Sie sich vor, wir möchten eine Reihe von Funktionen xgenau dann anwenden, wenn sie xnicht null sind:

if (x !== null) x = a(x);
if (x !== null) x = b(x);
if (x !== null) x = c(x);

Nehmen wir nun an, wir müssen dasselbe tun, um y:

if (y !== null) y = a(y);
if (y !== null) y = b(y);
if (y !== null) y = c(y);

Und das gleiche zu z:

if (z !== null) z = a(z);
if (z !== null) z = b(z);
if (z !== null) z = c(z);

Wie Sie ohne eine ordnungsgemäße Abstraktion sehen können, werden wir am Ende immer wieder Code duplizieren. Eine solche Abstraktion existiert bereits: die Vielleicht- Monade.

Die Vielleicht- Monade enthält sowohl einen Wert als auch einen rechnerischen Kontext:

1. Die Monade schützt den Wert und wendet Funktionen darauf an.
2. Der Rechenkontext ist eine Nullprüfung vor dem Anwenden einer Funktion.

Eine naive Implementierung würde folgendermaßen aussehen:

⚠️ Diese Implementierung dient nur zu Illustrationszwecken! Dies sollte nicht so gemacht werden und ist auf vielen Ebenen falsch. Dies sollte Ihnen jedoch eine bessere Vorstellung davon geben, wovon ich spreche.

Wie Sie sehen, kann nichts brechen:

1. Wir wenden eine Reihe von Funktionen auf unseren Wert an
2. Wenn der Wert zu irgendeinem Zeitpunkt null (oder undefiniert) wird, wenden wir einfach keine Funktion mehr an.

const abc = obj =>
  Maybe
    .of(obj)
    .map(o => o.a)
    .map(o => o.b)
    .map(o => o.c)
    .value;

const values = [
  {},
  {a: {}},
  {a: {b: {}}},
  {a: {b: {c: 42}}}
];

console.log(

  values.map(abc)

);

<script>
function Maybe(x) {
  this.value = x; //-> container for our value
}

Maybe.of = x => new Maybe(x);

Maybe.prototype.map = function (fn) {
  if (this.value == null) { //-> computational context
    return this;
  }
  return Maybe.of(fn(this.value));
};
</script>

Anhang 1

Ich kann nicht erklären, was Monaden sind, da dies nicht der Zweck dieses Beitrags ist und es Leute gibt, die dies besser können als ich. Wie Eric Elliot jedoch in seinem Blog-Beitrag sagte, wurden JavaScript-Monaden leicht gemacht :

Unabhängig von Ihrem Kenntnisstand oder Ihrem Verständnis der Kategorietheorie erleichtert die Verwendung von Monaden die Arbeit mit Ihrem Code. Wenn Sie Monaden nicht nutzen, kann es schwieriger sein, mit Ihrem Code zu arbeiten (z. B. Rückrufhölle, verschachtelte bedingte Zweige, mehr Ausführlichkeit).

Anlage 2

Hier ist, wie ich Ihr Problem mit dem lösen würde Vielleicht- Monade vonmonetjs

const prop = key => obj => Maybe.fromNull(obj[key]);

const abc = obj =>
  Maybe
    .fromNull(obj)
    .flatMap(prop('a'))
    .flatMap(prop('b'))
    .flatMap(prop('c'))
    .orSome('🌯')
    
const values = [
  {},
  {a: {}},
  {a: {b: {}}},
  {a: {b: {c: 42}}}
];

console.log(

  values.map(abc)

);

<script src="https://www.unpkg.com/monet@0.9.0/dist/monet.js"></script>
<script>const {Maybe} = Monet;</script>

Ich habe das schon einmal beantwortet und heute zufällig eine ähnliche Überprüfung durchgeführt. Eine Vereinfachung, um zu überprüfen, ob eine verschachtelte gepunktete Eigenschaft vorhanden ist. Sie können dies ändern, um den Wert zurückzugeben, oder einen Standardwert, um Ihr Ziel zu erreichen.

function containsProperty(instance, propertyName) {
    // make an array of properties to walk through because propertyName can be nested
    // ex "test.test2.test.test"
    let walkArr = propertyName.indexOf('.') > 0 ? propertyName.split('.') : [propertyName];

    // walk the tree - if any property does not exist then return false
    for (let treeDepth = 0, maxDepth = walkArr.length; treeDepth < maxDepth; treeDepth++) {

        // property does not exist
        if (!Object.prototype.hasOwnProperty.call(instance, walkArr[treeDepth])) {
            return false;
        }

        // does it exist - reassign the leaf
        instance = instance[walkArr[treeDepth]];

    }

    // default
    return true;

}

In Ihrer Frage könnten Sie etwas tun wie:

let test = [{'a':{'b':{'c':"foo"}}}, {'a': "bar"}];
containsProperty(test[0], 'a.b.c');

Ich benutze normalerweise so:

 var x = object.any ? object.any.a : 'def';