view source

JavaScript

//配列と連想配列、それぞれの繰り返し処理

var val = '';


// 配列
var ary = [
  9,8,7,6,5,
];

ary.forEach(function(v, index){
  console.log({
    index : index,
    v : v,
  });
  val += v + ', ';
});

val += '\n\n';


// 連想配列(オブジェクト)
var obj = {
  a : 'b',
  c : 'd',
  e : 'f',
};
Object.keys(obj).forEach(function(key){
  console.log({
    key: key,
    val: obj[key],
  });
  val += obj[key] + ', ';
});

val += '\n\n\n';


// 連番配列
var aryNums = new Array(12).fill().map((_, i) => i);
aryNums.forEach(function(v, index){
  console.log({
    index : index,
    v : v,
  });
  val += v + ', ';
});
val += '\n\n';

// 連番配列2
const minitues = [...Array(24).keys()];
minitues.forEach(function(v, index){
  console.log({
    index : index,
    v : v,
  });
  val += v + ', ';
});
val += '\n\n';


//文字列
var str = 'ABCD';
[].forEach.call(str, function(v, index) {
  console.log({
    index : index,
    v : v,
  });
  val += v + ', ';
});
val += '\n\n';

// DOM要素
Array.from(document.querySelectorAll('script')).forEach(function(e){
  console.log(e.src);
});
val += '\n\n';


// ES2015
[0,1].forEach(v => console.log(v));






// continue 途中で次のループへ
var aryNums = new Array(9).fill().map((_, i) => i);
aryNums.forEach(function(v, index){
  if(v<4){
    return true;
  }
  val += v + ', ';
});
val += '\n\n';


// break 途中で抜ける
var aryNums = new Array(9).fill().map((_, i) => i);
aryNums.some(function(v, index){
  val += v + ', ';
  if(v>4){
    return true;
  }
});
val += '\n\n';


//Sort
sortTraget = [1,2,55,10,8];
sortTraget = sortTraget.sort();
console.log(sortTraget);


sortTraget = sortTraget.sort((a, b) => a - b);
console.log(sortTraget);


var textarea = document.createElement('textarea');
var div = document.getElementById('demo'); 
div.appendChild(textarea);
textarea.style.width = '400px';
textarea.style.height = '200px';
textarea.value = val;

CSS


  
HTML

  

    
ページのソースを表示 : Ctrl+U , DevTools : F12

    
view-source:https://hi0a.com/demo/-js/js-forEach/

  

  
ABOUT

  

    
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

    
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    
必要な機能の関数をコピペ利用したり勉強に活用できます。

    
プログラムの動作サンプル結果は画面上部に出力表示されています。

    
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

    
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。