【JavaScript】関数から返された配列にアクセスする方法
JavaScriptでは、関数の戻り値として配列を返し、呼び出し元でその配列を受け取って自由に操作することができます。本記事では、関数から返された配列へアクセスする具体的な方法を、実際に動作するサンプルコードとともに解説します。
実装例：関数から配列を返してアクセスする
以下のサンプルでは、引数に渡された数値の1倍〜10倍の値を要素とする配列を生成して返すretTable()関数を定義しています。ボタンをクリックすると、この関数が返した配列を変数で受け取り、画面に表示します。
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<title>Document</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScriptで関数が返す配列へのアクセス</h1>
<div class='result'></div>
<br />
<button class='Btn'>ここをクリック</button>
<h3>上のボタンをクリックすると、retTable()関数から配列が返され、その内容にアクセスして表示します</h3>
<script>
let resEle = document.querySelector('.result');
let BtnEle = document.querySelector('.Btn');
function retTable(num) {
let tempNum = [];
for (let i = 1; i <= 10; i++) {
tempNum.push(i * num);
}
return tempNum;
}
BtnEle.addEventListener('click', () => {
let tableArr = retTable(5);
resEle.innerHTML = 'tableArr = ' + tableArr;
});
</script>
</body>
</html>
実行結果
「ここをクリック」ボタンをクリックすると −
コードのポイント
- 配列の生成：
retTable()関数内で空の配列tempNumを作成し、forループを使って引数numの1倍〜10倍の値を順にpush()メソッドで追加しています。 - 配列の返却：
return文でtempNumを返すことで、関数の呼び出し元がこの配列をそのまま受け取れるようになります。 - 配列へのアクセス： クリックイベントハンドラ内で
let tableArr = retTable(5);と記述することで、戻り値の配列を変数tableArrに格納し、innerHTML経由で画面に表示しています。
このように、関数が返した配列は通常の変数と同じように扱えるため、受け取った後にループ処理やフィルタリングなど、さまざまな操作を行うことが可能です。
-
JavaScriptの配列findIndex()関数の使い方をわかりやすく解説
JavaScriptのfindIndex()関数は、配列の中から指定した条件を満たす最初の要素を見つけ、そのインデックス番号を返すメソッドです。条件に合う要素が見つかった場合、その要素のインデックスが返されます。もし条件を満たす要素がひとつも存在しない場合は、-1が返されるという特徴があります。findIndex()の基本的な使い方以下は、findIndex()関数を使ったサンプルコードです。ボタンをクリックすると、配列内の「lion」という要素のインデックスを取得して表示します。サンプルコード<!DOCTYPE html> <html lang="ja"
-
JavaScriptの配列some()メソッドの使い方をわかりやすく解説
JavaScriptのArray.some()メソッドは、配列の要素の中に、指定されたテスト（条件）を満たすものが「1つでも存在するかどうか」を判定するためのメソッドです。ここでいうテストとは、配列の各要素に対して順番に実行されるコールバック関数のことを指します。コールバック関数が1つでもtrueを返した時点でsome()はtrueを返し、すべての要素が条件を満たさなかった場合はfalseを返します。なお、空の配列に対して呼び出した場合は常にfalseを返すという仕様になっている点にも注意しましょう。some()メソッドのサンプルコード以下は、配列のsome()メソッドを使った具体的な実装例で