2022年04月23日

javascript:for of

このメソッドの説明

JavaScriptの for of メソッドは [添字配列] を順番に呼び出すループメソッドです。

取り出すのは添字でなく値です。

[連想配列]にこのメソッドを利用するとエラーになります。連想配列for in を使ってください。

 


使い方

for ( val of array ) { 
 // val を使った処理を記述します。
}

■配列(array)の個数だけループが回ります。

■変数(val)に配列のデータが1個ずつ取り出されます。

 


利用例

①添字配列からデータを取り出す

var option_arry = ['リンゴ' , 'みかん' , 'パイナップル' ]; 
for ( var item of option_array) { 
    console.log(item);                             
}

リンゴ , みかん , パイナップルが順番に表示されます。

 メモ

上記を for文 で取り出すサンプルも参照して下さい。

for...of を利用した方が簡単に記述できます。

 

②RGBコードをHEXコードに変更する

・RGBコード:rgbrgb(9,15,250)は

・HEXコード:#090ffa になります。

すなわち 9→09、15→0f、250→fa に変換する必要があります。

よってRGBコードを取り出し、16進に変換し、頭に0を付け、後ろから2桁の文字を取り出す方法で変換します。

var rgb_color = 'rgb(9,15,250)';
var rgb_array =rgb_color.match(/[\d]+/g); // RGBデータを配列で取得する
var hex_data = '#';
for ( val of rgb_array ) { 
   hex_data = hex_data + ('0'+parseInt(val).toString(16)).slice(-2);  // HEXデータを2桁ずつ追加する	
}
console.log(rgb_color);
console.log(hex_data);

■下記が表示されます。

rgb(9,15,250)
#090ffa

■参考:map()メソッドを利用するともっと短いプログラムで記述できます。

 


参考情報

配列を操作する他のメソッドは、配列操作を参照してください。

 

関数一覧
  • 1.JavaScript/jQueryとは
  • 2.[JS] 変数規則と文字連結
  • 3.[JS] if文
  • 4.[JS] 配列操作
  • 5.[JS] 文字列操作
  • 6.[JS] 画面情報&操作
  • 7.[JS] Timer処理
  • console.log()
  • for
  • for in
  • for of
  • indexOf()
  • join()
  • length
  • map()
  • match()
  • Object.keys()
  • Object.values()
  • parseInt()
  • pop()
  • push()
  • replace()
  • shift()
  • slice()
  • split()
  • toString()
  • unshift()
  • 1.jQueryの導入と記述の基本
  • 2.jQueryの機能追加
  • 3.jQuery文法
  • 4.階層構造の要素セレクトと操作
  • 5.要素サイズ取得メソッド
  • animate()
  • append()
  • attr()
  • change(func)
  • click()
  • click(func)
  • css()
  • each(func)
  • effect()
  • empty()
  • fadeTo()
  • get()
  • hover(f1,f2)
  • html()
  • map(func)
  • mousedown(func)
  • prop()
  • resize(func)
  • show()、hide()
  • slideToggle()
  • submit()
  • submit(func)
  • text()
  • toggle()
  • toggleClass()
  • val()