JavaScript Quickie- ドット記法 vs. ブラケット記法

オブジェクトのプロパティにアクセスする
ドット表記
Bracket Notation
Recap

オブジェクトのプロパティにアクセスする

オブジェクトのプロパティにアクセスする方法は2つあります：

ドット記法
ブラケット記法

最も頻繁に使用されているのはドット記法です。

ドット表記

まず、ドット表記について見てみましょう。以下の例を考えてみましょう。

let obj = {
cat: 'meow',
dog: 'woof'
};let sound = obj.cat;console.log(sound);
// meow

私たちがドット記法を使用している5行目に注目してほしい。 let sound = obj.cat;. これはドット記法の一例である。オブジェクトのプロパティにアクセスするには、オブジェクトの名前を指定し、ドット（ピリオド）の後にプロパティ名を指定します。これは構文です。 objectName.propertyName;.

ドット表記で作業する場合、プロパティ識別は英数字のみ（および _ と $ ）にすることができます。プロパティは数字で始めることはできません。

ドット記法はブラケット記法よりはるかに読みやすく、そのためより頻繁に使用されています。しかし、オブジェクトのプロパティにアクセスする 2 つ目の方法として、注意しなければならないことがあります。

Bracket Notation

以下は、ブラケット記法の例です：

let obj = {
cat: 'meow',
dog: 'woof'
};let sound = obj;console.log(sound);
// meow

もう一度、5行目に注目してください。 let sound = obj;. オブジェクトのプロパティにアクセスするには、オブジェクトの名前に続いてプロパティ名をブラケットで指定します。以下はその構文です。 objectName.

配列を扱うときにブラケット記法を見たことがあると思います。次の例では、構文を使用して arr の 2 番目の要素にアクセスします。 arrayName

let arr = ;let letter = arr;console.log(letter);
// b

しかし、ブラケット表記はオブジェクトを扱うときにも便利です。

ブラケット表記を使用する場合、プロパティ識別子は文字列でなければなりません。それらは、スペースを含む任意の文字を含むことができます。

これは、ブラケット表記を使用する際の制限が少ないことを意味します。おそらく最も重要なことは、オブジェクト内のプロパティにアクセスするために変数を使用できるようになったことです。

この変数の例を見てみましょう。

let obj = {
cat: 'meow',
dog: 'woof'
};let dog = 'cat';
let sound = obj;console.log(sound);
// meow

上記の例は、すでに見たことのある以前の例と同様です。主な違いは、変数を渡すのにブラケット記法を使うようになったことです。注意すべきは、objの中にあるdogというプロパティを探しているように見えるかもしれませんが、それは全体として正しいわけではありません。 dogは'cat'という値を持つ変数です。括弧を使っているので、文字列の値が渡され、'cat'プロパティ-objを検索しているのです。

以下、同じことをドット表記で行ってみます。

let obj = {
cat: 'meow',
dog: 'woof'
};let dog = 'cat';
let sound = obj.dog;console.log(sound);
// woof

すぐに、woofと返ってくることに気づくはずです。これは他の例と大きく異なり、ドット記法では変数を使用できないためです。 obj.dog を検索しようとすると、実際には変数の値ではなく、オブジェクトの中の 'dog' という文字列の値を探します。したがって、obj.dog は woof を返します。

Recap

ドット表記とブラケット表記には、いくつかの重要な違いがあります：

ドット表記：

プロパティ ID は英数文字のみ（および _ と $）
プロパティ ID が数字から始まることはあり得ません。
Property identifiersに変数を含めることはできません。
OK – obj.prop_1, obj.prop$
NG-obj.1prop、obj.prop name

ブラケット表記：

プロパティ識別子はStringかStringを参照する変数でなければならない。
変数、スペース、数字で始まるStringは使っても良い
OK – obj、obj

お読みいただきありがとうございました! もし、あなたがWeb開発を最終的に学ぶ準備ができているなら、「6ヶ月でフルスタックWeb開発を学ぶ究極のガイド」を30ドルでチェックしてみてください。 JavaScriptのスキルを向上させたい方は、こちらをご覧ください。 JavaScriptのスキルを上げたい方は、「A Beginners Guide to Advanced JavaScript

I publish 4 articles on web development each week」をご覧ください。また、Twitterのフォローもお願いします。

Free Press