Unterschied zwischen Punktnotation und Klammernotation in Javascript

Question

Ich versuche, den Unterschied zwischen .Notation und [] Notation zu verstehen. In meinem Problem unten, wenn ich if (object[key] === true) benutze, bekomme ich die richtige Antwort. Wenn ich if (object.key === true) verwende, funktioniert es nicht. Könnte jemand erklären, warum es anders ist?

var myObj = { 
    one: false, 
    two: false, 
    three: false, 
    four: true, 
    five: false, 
    six: false 
}; 
var myFunc = function (object) { 
    for (var key in object) { 
     if (object[key] === true) { 
      return "There is a true value in this object"; 
     } else { 

     } 
    } 
    return "Sorry, there are no true values in this object"; 
}; 

Answer 1

Wenn Sie Punktnotation verwenden, key die tatsächliche Eigenschaft in dem Objekt, das es nicht sein wird. So wird undefined zurückgegeben, was nicht gleich true ist. Wenn Sie [] Notation verwenden, greifen Sie auf die Eigenschaft im Objekt mit dem Namen in der Variablen key zu. Also, das wird funktionieren.

Zum Beispiel

var myObj = { 
    myVar : 1 
}; 

for (var key in myObj) { 
    console.log(key); 
    console.log(myObj.key); 
    console.log(myObj[key]); 
} 

Dies wird drucken,

myVar 
undefined 
1 

Weil myObj kein Mitglied key (myObj.key versucht, das Element mit dem Namen key zu erhalten) genannt hat und im nächsten Fall myObj hat ein Mitglied mit dem Namen myVar (myObj[key] versucht, das Mitglied mit dem Wert in key zu erhalten).

Punktnotation

jslint prefers dot notation.

[] Notation

Dies bietet Flexibilität. Sie können dynamisch auf die Mitglieder mit einer Variablen zugreifen.

Answer 2

Punktnotation ist schneller zu schreiben und klarer zu lesen.

Eckige Klammernotation ermöglicht den Zugriff auf Eigenschaften mit Sonderzeichen und die Auswahl von Eigenschaften mit Variablen.

<form id="myForm"> 
<div><label> 
<input type="checkbox" name="foo[]" value="1"> 1 
</label></div> 
<div><label> 
<input type="checkbox" name="foo[]" value="2"> 2 
</label></div> 
<div><label> 
<input type="checkbox" name="foo[]" value="3"> 3 
</label></div> 
</form> 

Beispiel mit Fehlern:

var inputs = myForm.foo[]; 

Eckige Klammer-Notation, auf der anderen Seite ermöglicht:

var inputs = myForm["foo[]"]; 

Da die eckigen Klammern Teil eines Strings, deren besondere Bedeutung sind doesn Der zweite Vorteil der eckigen Klammernotation liegt im Umgang mit variablen Eigenschaftsnamen.