HTML,CSS,Javascript12(javascriptの配列)
・目次
1.目的
・javascriptとjQuaryの配列について記載する。
【jQuery入門】配列の使い方(作成・追加・検索・取得)まとめ！ | 侍エンジニアブログ
2.配列の宣言
配列の定義する方法は下記2つある。
// コンストラクタを使用 型 配列名 = new Array(配列1,配列2,・・・);
// 配列リテラルを使用
型 配列名 = [配列1,配列2,・・・]
例：
//配列の宣言：コンストラクタを使用する場合 var array = new Array("Cnum0","Cnum1","Cnum2"); //配列の宣言：配列リテラル var array2 = ["Rnum0","Rnum1","Rnum2"];
・リテラルとは
文字列や数字などのデータ型の値を直接記述する方法
・コンストラクタとは
新たなオブジェクトを生成する時のメゾット
3.プログラムの作成(配列の確認)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>タイトル</title> <!-- JQuaryの追加 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style></style> </head> <body> <script> window.onload = function () { //配列の宣言：コンストラクタを使用する場合 var array = new Array("Cnum0","Cnum1","Cnum2"); //配列の宣言：配列リテラル var array2 = ["Rnum0","Rnum1","Rnum2"]; //配列の表示 console.log(array); console.log(array2); } </script> </body> </html>
実行結果(F12のコンソールで確認)
4.配列リテラルとコンストラクタの違い
1つの数値を扱う際に、違いが出る。
下記のような場合、
・コンストラクタでは、要素が3つ定義され、中身は入っていない。
・リテラルでは、要素が1つ定義される。
基本は配列リテラルを使う方が分かりやすそう。
//配列の宣言：コンストラクタを使用する場合 ：empty×3を作成 var array = new Array(3); //配列の宣言：配列リテラル:要素に3が入った配列を用意 var array2 = [3];
5.プログラム作成(配列リテラルとコンストラクタの違い確認)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>タイトル</title> <!-- JQuaryの追加 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style></style> </head> <body> <script> window.onload = function () { //配列の宣言：コンストラクタを使用する場合 var array = new Array(3); //配列の宣言：配列リテラル var array2 = [3]; //配列の表示 console.log(array); console.log(array2); console.log("---"); //配列の宣言：コンストラクタを使用する場合 var array3 = new Array(3,1,2); //配列の宣言：配列リテラル var array4 = [3,1,2]; //配列の表示 console.log(array3); console.log(array4); } </script> </body> </html>
結果
6.配列に数値と文字列を入れる
下記形で、配列には数値及び文字列を入れる。
配列に数値を入れる場合 var 配列名 = [数値,数値,数値,・・・] 配列に数値を入れる場合 var 配列名 = ["文字列","文字列","文字列",・・・] 配列に数値と文字列を組み合わせて入れる場合 var 配列名 = ["文字列"+数値,"文字列"+数値,"文字列"+数値,・・・]
7.プログラム確認(配列に数値と文字列を入れ、要素の1つのみ変更)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>タイトル</title> <!-- JQuaryの追加 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style></style> </head> <body> <script> window.onload = function () { //配列の宣言：コンストラクタを使用する場合 var array = new Array("cons"+3,2,1); //配列の宣言：配列リテラル var array2 = ["Rite"+1,2,3]; //配列の表示 console.log(array); console.log(array2); //真ん中の値を変更 array[1] = "cons"+2; array2[1] = "Rite"+2; //配列の真ん中だけ表示 console.log(array[1]); console.log(array2[1]); } </script> </body> </html>
結果
8.空の配列の用意
宣言時に要素数が決まっていなく、空の配列を用意したい場合がある。
その場合は、下記方法で空の配列を用意する。
//配列の宣言：コンストラクタを使用する場合 var array = new Array(); //配列の宣言：配列リテラル var array2 = [];
8.プログラム作成(空の配列確認)
空の配列を用意した後、10個の数値を入れる。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>タイトル</title> <!-- JQuaryの追加 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style></style> </head> <body> <script> window.onload = function () { //空の配列を用意する。 //配列の宣言：コンストラクタを使用する場合 var array = new Array(); //配列の宣言：配列リテラル var array2 = []; console.log(array); console.log(array2); for(var i=0;i<=5;i++){ array[i]=i; array2[i]=i; } console.log(array); console.log(array2); } </script> </body> </html>
結果
