JavaScriptではオブジェクトのプロパティにアクセスする方法が2つあります：1. ドット記法（.）2. ブラケット記法（[]）
// ドット記法でプロパティ値を取得する（キーは静的）
const userData = {userName: "田中", userAge: 25};
console.log(userData.userName);
// ブラケット記法でプロパティ値を取得する（キーは動的、文字列や数値形式が可能）
const fruitStock = {"リンゴ": 5, "バナナ": 3};
const numberData = {1: "first", 2: "second"};
console.log(fruitStock["リンゴ"]);
console.log(numberData[1]); // 配列と混同しやすい注意点、numberDataは依然としてオブジェクトです
// オブジェクトの全キーを取得する方法
console.log(Object.keys(fruitStock)); // 出力: [ 'リンゴ', 'バナナ' ]
静的と動的の違いとは？
序文：
今日、関数をカプセル化する際に、[]記法では動作するのに.記法では動作しないという現象に遭遇しました。非常に不思議に思ったので、技術ブログをいくつか調べてみたところ、ようやくこの問題の解決策がわかりました。以下にその内容を共有します。
コード：任意の要素の任意のスタイル属性を取得する
<style>
*{
margin: 0;
padding: 0;
}
#container{
width: 150px;
height: 150px;
background: lightblue;
left: 150px;
top:75px;
}
</style>
<body>
<input type="button" value="スタイル表示" id="showBtn">
<div id="container"></div>
<script>
const element = document.getElementById('container');
function getStyleValue(targetElement,styleProperty){
if(window.getComputedStyle){
return window.getComputedStyle(targetElement,null)[styleProperty];
}else{
return targetElement.currentStyle[styleProperty];
}
}
document.getElementById('showBtn').onclick=function(){
console.log(getStyleValue(element,'top')); //75px、文字列型
}
</script>
</body>
注意： 上記のコードで[styleProperty]を.stylePropertyに変更すると値を取得できなくなります。その理由は ドット記法ではプロパティ値を取得する際、キーは静的である必要がある からです。ブラケット記法ではプロパティ値を取得する際、キーは動的で文字列や数値形式が可能 なのです。ここでstylePropertyは渡されたパラメータであり、値は可変ですから、.記法でプロパティ値を取得することはできないのです。皆さんもこの落とし穴には気をつけてください！