使用括號表示法（使用變量）訪問對象的屬性的好處

-1

雖然在需要訪問某些存儲的信息時使用諸如點操作符等替代方法很有意義，但我在理解爲什麼和在我們將使用什麼樣的變量來完成相同的任務。使用括號表示法（使用變量）訪問對象的屬性的好處

例如：

var myObj = { 
    prop1: "val1", 
    prop2: "val2" 
}; 
var prop1val = myObj.prop1; // val1 
var prop2val = myObj.prop2; // val2

與：

var testObj = { 

    12: "Namath", 
    16: "Montana", 
    19: "Unitas" 
}; 

var playerNumber = 16;  
var player = testObj[playerNumber];

這純粹是喜好問題，還是有使用每個實際的好處？

來源

2017-01-18 Lukon

括號語法允許您使用動態屬性名稱 – mhodges

括號語法允許您動態地訪問屬性名稱，而點語法不允許。下面是它如何被使用的例子：

var data = { 
 
    prop1: "I am prop 1", 
 
    prop2: "I am prop 2" 
 
}; 
 
function clickHandler() { 
 
    var prop = this.getAttribute("data-property"); 
 
    console.log(data[prop]); // <-- Dynamically access object properties with [] syntax 
 
} 
 

 
var buttons = document.querySelectorAll("[data-property]"); 
 
for (var i = 0; i < buttons.length; i++) { 
 
    var button = buttons[i]; 
 
    button.addEventListener("click", clickHandler); 
 
}

<button data-property="prop1">Get Prop 1</button> 
 
<button data-property="prop2">Get Prop 2</button>

括號語法還允許您使用無效，否則變量名（不推薦對象屬性的能力，而且是可行的）。

例如：

var data = { 
 
    "property name with spaces": "I'm a property with spaces", 
 
    "another-invalid-variable-name": "I'm an invalid variable name" 
 
}; 
 
console.log(data["property name with spaces"]) 
 
console.log(data["another-invalid-variable-name"])

來源

2017-01-18 23:40:34 mhodges

非常棒的例子，非常感謝！ – Lukon

@Cory不客氣！很高興幫助=） – mhodges

下標語法比在幾個方面圓點符號更加靈活。在你自己的例子，一些執行下列操作顯然是不可能的：

var playerNumber = 16; 
var player = testObj.playerNumber; //null; this is equivalent to: 
var player = testObj["playerNumber"]; //which is subscripting by the string "playerNumber" 
var player = testObj[playerNumber]; //this is valid and produces the expected result: subscripting with the value 16

點符號是有限的，它不能與控股動態值的變量中。 testObj.playerNumber與testObj[playerNumber]的完全不同。

來源

2017-01-18 23:40:45

括號語法是動態的 - 它通常用於集合，例如列表，數組，字典等等。對於不可迭代的字段，方法以及其他您可能想要從類中訪問的其他內容，時間表示法更有用。

舉例來說，你可以遍歷一個列表與

var aggregate; 
for (int i = 0; i < arrayOfNumbers.length; i++){ 
    aggregate += arrayOfNumbers[i]; 
}

來源

2017-01-18 23:41:03 Phygon

一件事，他們的區別是，與點符號，你已經知道你要訪問的屬性。

考慮，你可能需要獲取用戶輸入或其他一些外部因素來決定，以獲得什麼性質的實例：

function myFunction(property) { 

    var data = { 
     thingOne: "1", 
     thingTwo: "2" 
    } 

    return data[property]; 
}

在上面的函數，一個寫不出return data.property - 它會尋找一個財產叫property！你必須使用索引符號來獲得正確的值。

來源

2017-01-18 23:41:37 farisj

這是非常有益的，謝謝！ – Lukon

它通常基於首選項，但是我喜歡使用數組的括號表示法和對象的點表示法。但是，如果該對象上有一個帶有破折號的屬性，則只能使用括號符號。

foo = { "bar-baz": "value" }; 
foo["bar-baz"]; //returns "value" 
foo.bar-baz; //error

來源

2017-01-18 23:41:44

使用括號表示法（使用變量）訪問對象的屬性的好處

回答

相關問題