見出し画像

【JavaScript】for-ofでデータを取り扱う

関野泰宏

みなさんは、「for - in文」とよく似た書き方に「for - of文」があります。

しかし、この2つは見た目が「似ている」だけで、その使い方や概念はまったく違います 。が、そういう話はまた後日書きます。

とりあえず、考え方が違う！という程度で覚えてください。

for - of文

まずは、基本的な使い方になります。

for (変数 of 配列) {
    //この中に処理を書きます
}

「配列」の値を1つずつ「変数」へ代入してくれます。

使ってみます

配列データは下記のような形で作成します。

var array = ['大津','京都','神戸','奈良','和歌山'];
for (city of array) {
    console.log(city);
}

サンプルプログラム

<html>
<head>
    <title>for-ofでデータ取得</title>
</head>
<script>    
    //データ部分
    var array = ['大津','京都','神戸','奈良','和歌山'];

    //データ取得部分
    for (city of array) {
        console.log(city);
    }
</script>
</head>
<body>
</body>
<html>

サンプルダウンロード


DOMでデータ取得

次のようなHTMLデータがあります。

<p>東京</p>
<p>大阪</p>
<p>横浜</p>

このHTMLの「p要素」を取得、文字列「東京」〜「横浜」を表示します。

「p」の要素を取得します

var p = document.getElementsByTagName( 'p' );

getElementsByTagNameで「p」の要素を含んだデータを取得することができます。

サンプルプログラム

<html>
<head>
    <title>pのデータ取得</title>
</head>
</head>
<body>

<p>東京</p>
<p>大阪</p>
<p>横浜</p>

<script>
    var array = document.getElementsByTagName("p");
    
    //データ取得部分
    for (city of array) {
        console.log(city);
    }
</script>

</body>
<html>

サンプルダウンロード

出力結果はこのようになります。

<p>東京</p>
<p>大阪</p>
<p>横浜</p>

もっとJavaScriptを学びたい人は！こちらの本がおすすめです

#JavaScript #JavaScript初心者 #JavaScript学習 #プログラミング #プログラミング学習 #プログラミング初心者

この記事が気に入ったらサポートをしてみませんか？