【JavaScript】for-inでデータを取り扱う
まずは、for-inから学びましょう
前回、forを学びましたが、こちらから復習できます。
for-inを使ってみる
今回は、forの派生、for-inを学びます。
「for-in文」はオブジェクトのデータを効率よく扱うための構文になります。
オブジェクトデータというのはこういった形になります。
var obj = {
name: "鈴木一朗",
age: 20,
country: 'Japan'
}こちら、obj変数に「name(名前)」「age(年齢)」「country(国)」の情報が格納されています。
これらの「name」「age」「country」のプロパティ部分を取得する際に「for-in文」を使います。
一般的な構文としては次のようになります。
for( var 変数 in オブジェクト ) {
//ここに繰り返し処理を書く
}
「オブジェクト」は先ほどの例で言うと「obj」になり、その中身であるプロパティが1つずつ「変数」に格納されて処理を行うことができるわけです。
オブジェクトのプロパティを取得する方法は下記のようします
「obj」のデータプロパティを使い、コンソールにすべて出力するには次のように書きます。
サンプルプログラム
<html>
<head>
<title>for-inでプロパティ取得</title>
</head>
<script>
//データ部分
var obj = {
name: "鈴木一朗",
age: 20,
country: 'Japan'
}
//データ取得部分
for(var item in obj) {
console.log(item);
}
</script>
</head>
<body>
</body>
<html>プログラムダウンロード
実行結果
name
age
country
変数「item」にオブジェクトのプロパティが1つずつ格納されます。
列挙できるプロパティがなくなり次第プログラムは自動的に終了します。
プロパティの「値」を取得
書き方は、先ほどのプロパティをほぼ同じですが、「値」を表示するには変数に格納されたプロパティを上手く活用します。
for (var item in obj) {
console.log( obj[item] );
}
サンプルプログラム
<html>
<head>
<title>プロパティの「値」を取得</title>
</head>
<script>
//データ部分
var obj = {
name: "鈴木一朗",
age: 20,
country: 'Japan'
}
//データ取得部分
for(var item in obj) {
console.log(obj[item]);
}
</script>
</head>
<body>
</body>
<html>プログラムダウンロード
実行結果
鈴木一朗
20
Japan
プロパティを表示するだけなら変数「item」をそのまま使うだけですが、「値」を取得する場合は「オブジェクト[プロパティ]」の形で取得します。
配列で値を取得する
「for - in文」はその性質上、オブジェクトだけでなく配列にも利用することができます。
サンプルプログラム
<html>
<head>
<title>配列で値を取得</title>
</head>
<script>
//データ部分
var array = ['東京', '横浜', '千葉','さいたま'];
//データ取得部分
for(var item in array) {
console.log(array[item]);
}
</script>
</head>
<body>
</body>
<html>プログラムダウンロード
実行結果
東京
横浜
千葉
さいたま
配列「array」の要素を「for-in文」を使って出力します。
先ほどと同じように配列 array の「値」を取得する場合は「オブジェクト[プロパティ]」の形で取得します。
もっとJavaScriptを学びたい人は！こちらの本がおすすめです
#JavaScript #JavaScript初心者 #JavaScript学習 #プログラミング #プログラミング学習 #プログラミング初心者
この記事が気に入ったらサポートをしてみませんか？