वहाँ एक जावास्क्रिप्ट अपरिभाषित संपत्ति Angular2 में की तरह से निपटने

Question

टेम्पलेट्स अगर वहाँ ऐसा करने का एक साफ रास्ता है मैं सोच रहा था है।

मुझे पता चला कि Angular2 के इस तरह के मामलों के लिए वास्तव में कुछ अच्छा है। लेकिन मुझे लगता है यह टेम्पलेट्स के लिए केवल है:

<div>{{this?.object?.foo?.bar}}</div> 

यह मैं मिल गया वास्तव में से बाहर निकल गया क्योंकि मुझे लगता है कि सिर्फ पहला उदाहरण की तरह लग रहा कोड का एक बहुत कुछ है। यह काम पूरा हो गया है, लेकिन मैं वास्तव में कुछ और परिष्कृत कुछ हॉपिंग कर रहा हूँ।

Answer 1

कई भाषाओं में यह कार्यक्षमता है, कुछ इसे safe navigation operator या यहां तक ​​कि Elvis operator (हाँ हाहा) कहते हैं।

जावास्क्रिप्ट में यह कार्यक्षमता नहीं है। यदि आप CoffeeScript का उपयोग करने के लिए खुले हैं, तो आप existential operator पर एक नज़र डाल सकते हैं।

लेकिन, आप जे एस के साथ रखना चाहते हैं, तो आप lodash.get() पर एक नज़र है, जो आप कुछ इस तरह करने की सुविधा देता लेना चाहिए:

var object = { 'a': [{ 'b': { 'c': 3 } }] }; 

_.get(object, 'a[0].b.c'); 
// → 3 

_.get(object, 'a.b.d.c', 'default'); 
// → 'default' 

Answer 2

मैं कुछ समय नेट पर वापस इस समाधान पाया:

function checkNested(obj /*, level1, level2, ... levelN*/) { 
    var args = Array.prototype.slice.call(arguments, 1); 

    for (var i = 0; i < args.length; i++) { 
    if (!obj || !obj.hasOwnProperty(args[i])) { 
     return false; 
    } 
    obj = obj[args[i]]; 
} 
    return true; 
} 

var test = {level1:{level2:{level3:'level3'}} }; 

checkNested(test, 'level1', 'level2', 'level3'); // true 
checkNested(test, 'level1', 'level2', 'foo'); // false 

jsFiddle: https://jsfiddle.net/nikdtu/kjsxnunp/

Answer 3

नहीं बॉक्स से बाहर।

var string = function(v){ return v == null? "": String(v) } //because I usually want this behaviour 

var fetch = function(path, obj){ 
    path instanceof Array || (path = string(path).split('.')); 
    for(var i=0, v=obj; i<path.length; v = v[path[i++]]) 
     if(v == null) return void 0; 
    return v; 
} 

और अपने कोड:

if(fetch("object.foo", app)){ 
    alert(app.object.foo.bar); 
} 

या यहां तक ​​कि और अधिक प्रत्यक्ष: क्योंकि इस समारोह आमतौर पर मेरी कोड में curried है

alert(fetch("object.foo.bar", app)); 
//will alert undefined, if the path could not be resolved 

तर्क आदेश, चारों ओर इस तरह से है, इसलिए मैं यह कर सकते हैं एसएचएच की तरह:

arr.map(fetch('some.deeper.path')); 

Answer 4

थोड़ा कम (मूल की तुलना में) जावास्क्रिप्ट में जिस तरह से (कम पठनीय)

if ((a = app) && (o = a.object) && (f = o.foo)) { 
    alert(f.bar); 
} 

तरह से मैं लिखते हैं CoffeeScript में (मेरी पसंदीदा तरीका)

alert f.bar if f = app?.object?.foo? 

तुम सच में जावास्क्रिप्ट का उपयोग कर रहे हैं और यह साफ प्रकट करने के लिए चाहते हैं, आप की तरह कुछ इस्तेमाल कर सकते हैं:

function ifExist (name) { // Returns undefined if it doesn't exist 
    arr = name.split('.'); 
    obj = eval('if (typeof '+(x = arr.splice(0,1)[0])+' !== \'undefined\') '+x); 
    for (i = 0; i < arr.length; i++) { 
    if (typeof obj === 'undefined') { 
     return obj; 
    } 
    else { 
     obj = obj[arr[i]]; 
    } 
    } 
    return obj 
} 

alert(ifExist('app.object.foo.bar')); 

क्योंकि यह eval का उपयोग करता है, यह एक सुरक्षा जोखिम पैदा कर सकता है अगर app.object.foo.bar एक उपयोगकर्ता द्वारा उत्पन्न होता है । यह साधारण मामलों में काम करता है (जैसे कि आपने ऊपर पोस्ट किया है), लेकिन app.object['foo'].bar जैसे कुछ का उपयोग करने से शायद कुछ इनपुट चेक जोड़ने के बिना इसे तोड़ दिया जाएगा।