ホームページ > ウェブフロントエンド > jsチュートリアル > 配列とオブジェクトへのアクセス

配列とオブジェクトへのアクセス

Linda Hamilton
リリース: 2024-11-17 14:36:02
オリジナル
526 人が閲覧しました

Array and Object Access

オブジェクトとは何ですか?
オブジェクトは、さまざまなデータとより複雑なエンティティのキ​​ー付きコレクションを保存するために使用されます。オブジェクトは変数ですが、多くの値を含めることができます。オブジェクトは、空またはキーと値のペアを入力できる括弧を使用して作成できます。キーはプロパティ名とも呼ばれる文字列で、値はキーに関連するものであれば何でも構いません。キーと値のペアには順序がありません。オブジェクトには、他のオブジェクト、関数、プリミティブ データ型、配列を格納できます。

オブジェクト リテラルは空のオブジェクトです。

var user = {};
ログイン後にコピー
ログイン後にコピー
var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};
ログイン後にコピー
ログイン後にコピー

ドット表記と括弧表記
value プロパティには、そのキーによってアクセスできます。キーの既存のプロパティの値を変更できます。オブジェクトに新しいプロパティを追加できます。

オブジェクトのドット表記
オブジェクトのドット表記により、オブジェクトのキーとメソッドにアクセスできるようになります。ドット表記は、オブジェクト名 dot(.) キー/プロパティで記述されます。
オブジェクト.キー

var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};
console.log(user.name); //output "Carol"
ログイン後にコピー

object.key を使用してオブジェクトを変更するには

var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};

user.name = 'Bonnie'
console.log(user); //
//output 

name: '"Bonnie",
age: 30,
occupation: "Teacher"

ログイン後にコピー

object.key を使用してオブジェクトに追加するには

var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};
user.favColor = 'Red'
console.log(user);
//output
age: 30,
  name: "Carol",
  occupation: "Teacher",
  favColor: "Red"

ログイン後にコピー

オブジェクトの括弧表記
この式を使用すると、文字列 (引用符で囲まれた) またはプロパティ名を保持する変数を使用してオブジェクトのプロパティにアクセスできます。ドット表記が使用できない場合に便利です。括弧表記を使用すると、ドット表記
とは異なり、変数をプロパティ名として使用できます。 オブジェクト['式'];

var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};

console.log(user['name']);//output "Carol"
ログイン後にコピー

オブジェクトを変更するには

var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};

user['name'] = 'Bonnie'
console.log(user);
//output
name: 'Bonnie',
age: 30,
occupation: 'Teacher'
};
ログイン後にコピー

オブジェクトに追加するには

var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};

user['favColor'] = 'Red'
console.log(user);
//output
name: 'Carol'
age: 30
occupation: 'Teacher'
user['favColor'] = 'Red'

};


ログイン後にコピー

配列とは何ですか?
配列には、数値、文字列、ブール値、null などのさまざまな値を保持できます。配列内の各値は要素と呼ばれ、各要素には 0 から始まるインデックスによってアクセスされます。インデックスは要素の位置を示します。要素は角かっこ ([]) で囲まれ、カンマで区切られます。

空の配列リテラル

var user =[]
ログイン後にコピー
index:      0     1      2
var user = [1, 'Carol', true, ];
ログイン後にコピー

1 は数値であり、インデックス 0 に位置します。
「Carol」は文字列であり、最初のインデックスにあります。
True はブール値で、3 番目のインデックスにあります。

配列メソッドは、要素を追加、削除、変更する JavaScript メソッドに組み込まれています。

.push() を使用すると、配列の末尾に要素を追加できます。

var vegetables = ['spinach', 'broccoli', 'green beans', 'kale'];
vegetables.push('cauliflower')
console.log(vegetables)
//output
var vegetables = ['spinach', 'broccoli', 'green beans', 'kale', 'cauliflower'];

ログイン後にコピー

.pop() を使用すると、配列の末尾の値を削除できます。

var vegetables = ['spinach', 'broccoli', 'green beans', 'kale', 'cauliflower'];
vegetables.pop()
console.log(vegetables);
//output
var vegetables = ['spinach', 'broccoli', 'green beans', 'kale'];

ログイン後にコピー

.unshift() を使用すると、配列の先頭に値を追加できます。

var vegetables = ['spinach', 'broccoli', 'green beans', 'kale'];
vegetables.unshift('Brussel sprouts');
console.log(vegetables);
//output
var vegetables = ['Brussel sprouts', 'spinach', 'broccoli', 'green beans', 'kale'];
ログイン後にコピー

.shift() を使用すると、配列の先頭にある値を削除できます。

var vegetables = ['Brussel sprouts', 'spinach', 'broccoli', 'green beans', 'kale'];
vegetables.shift();
console.log(vegetables);
//output
var vegetables = ['spinach', 'broccoli', 'green beans', 'kale'];
ログイン後にコピー

.length() プロパティを使用すると、配列内の項目の数を取得できます。

var user = {};
ログイン後にコピー
ログイン後にコピー

配列の括弧表記
大括弧表記とインデックスを使用して、配列内の要素の値を取得できます。
インデックスは 0 から始まり、最初の要素が与えられ、インデックス 1 は 2 番目の要素、そして次の要素を与えます。

var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};
ログイン後にコピー
ログイン後にコピー

結論
配列とオブジェクトは両方とも、値を操作できる JavaScript のコレクションです。配列は、プリミティブ データ型の順序付けされたコレクションであり、0 から始まるインデックスを使用して各要素にアクセスできます。配列メソッドは、ドット表記を使用して配列を追加、削除、または変更するために使用されます。各要素にアクセスするための括弧表記とゼロから始まるインデックス。オブジェクトは、キーを使用して値にアクセスする、順序付けされていない複雑なデータ型のコレクションです。単純なキーにはドット表記が使用され、より複雑なキーにはブラケット表記が使用されます。
参考文献:
1.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
2.https://www.w3schools.com/js/js_arrays.asp
3.https://javascript.info/array

以上が配列とオブジェクトへのアクセスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート