deve.K

エンジニアが未来を切り開く。

JavaScript 入門 配列

javascript配列の操作 入門

以前JavaScript入門の変数と定数の学習についての記事を書きました。

以前の記事はこちらになります。

dev-k.hatenablog.com

本日はJavaScript配列の作成および基本的な操作についての学習となります。

JavaScript配列

以前の当ブログの記事で学習されてた読者様であれば変数が保持できる値は1つのみである事はご存知でしょう。

let x = 1;

変数『x』に複数の値を割り当てる事はできません。

その問題を克服する為にJavaScriptでは配列を提供しています。

配列は特殊なタイプの変数であり、一度に複数の値を格納できるオブジェクトとなります。

すべての値は、0から始まる数値インデックスに関連付けられています。

下記テーブルでは、配列が値を格納する方法を示しています。

value(値)→ hello world welcome 20 5
index番号→ 0 1 2 3 4
let arr = ["hello", "world", "welcome", 20, 5];

値が割り当てられていない、インデックスの値はundefinedとなります。

JavaScriptの配列は、配列リテラルと配列コンストラクタ構文の2つの方法で定義および初期化できます。

let arr = new Array(); //配列コンストラクタ

let arr = []; //配列リテラル

配列リテラル

配列を作成する場合、最も簡単な方法は配列リテラルを使用する事です。

ほとんどの場合は配列リテラルを活用します。

配列リテラルの構文は単純となってます、値のリストをカンマ区切りで角かっこ[]で囲みます。

const array1 = ["eat", "sleep"];

こちらでは配列は3つの値を格納しております。

const words = ['hello', 'world', 'welcome'];

alert( words[0] ); // hello
alert( words[1] ); // world
alert( words[2] ); // welcome
//数字の配列

const numberArray = [ 2, 4, 6, 8];

配列要素には、ゼロから始まる番号が付けられているので、角括弧内の数で要素を取得できます。

要素を置き換えることが可能です。

let fruits = ["Apple", "Orange", "Banana"];

fruits[2] = 'Lemon';

// ["Apple", "Orange", "Lemon"];

インデックス番号の2はバナナですので、レモンと入れ替えた事になります。

Arrayに新しく要素の追加も可能となります。

let fruits = ["Apple", "Orange", "Banana"];

fruits[3] = 'Lemon';

// ["Apple", "Orange", "Banana", "Lemon"];

この方法はインデックス2(3番目の要素)に要素を追加しようとすると、3番目の要素は未定義になります。

基本的には高いインデックスに要素を追加しようとすると、その間のインデックスの値は未定義になります。

要素の追加の際、配列の先頭と最後に追加する方法があります。

配列の最後に要素を追加したい場合、組み込みメソッドである『push()』メソッドを使用します。

let fruits = ["Apple", "Orange", "Banana"];

fruits.push( "Lemon");

// ["Apple", "Orange", "Banana", "Lemon"];

配列の先頭に要素を追加する場合は『unshift()』メソッドを使用します。

let fruits = ["Apple", "Orange", "Banana"];

fruits.unshift( "Lemon" );

// ["Lemon", "Apple", "Orange", "Banana"];

配列の最後の要素を削除できます。

pop()メソッドを使用します、このメソッドは削除だけではなく戻り値も返します。

let fruits = ["Apple", "Orange", "Banana", "Lemon"];

fruits.pop()

console.log(fruits) //Apple, Orange, Banana

let fruits = ["Apple", "Orange", "Banana", "Lemon"];

fruits.pop()

// レモンが削除

console.log(fruits) // Apple, Orange, Banana,

const removedElement = fruits.pop(); 

// バナナが削除

console.log(removedElement); 

console.log(fruits) //Apple, Orange

このように扱う事も可能です。

最初の要素を削除したい場合は『shift()』メソッドを使用します、こちらも削除された要素を返します。

let fruits = ["Apple", "Orange", "Banana"];

fruits.shift() //先頭の要素が削除

console.log(fruits) //Orange, Banana

配列内の要素の長さ(要素の総数)を知りたい場合は『.length』プロパティを使用します。

let fruits = ["Apple", "Orange", "Banana"];

console.log(fruits.length);  // 3

配列には、任意のタイプの要素を格納できます。

つまり配列、関数、その他のオブジェクトを配列内に格納可能です。

let fruits = [

"Apple", "Orange", 
{ name: "Taro" }, "Banana", [1, 2, 3],
function hello() {console.log("hello")}

];

要素が配列にない場合は、『indexOf() 』-1を指定します。

let fruits = ["Apple", "Orange", "Banana"];

console.log(fruits.indexOf('Lemon'));

// -1

配列コンストラクター

newキーワード を使用して、配列コンストラクター構文で配列を初期化できます。

下記のように使用します。

let fruits = new Array();

現在fruits配列は空であり、要素を保持しております。

配列を作成し、いくつかの要素で初期化するには、要素をカンマ区切りのリストとしてArray()コンストラクターに渡してあげます。

let fruits = new Array("Apple", "Orange");

//数値
let scores = new Array(5, 10, 6, 2);

JavaScriptでは、Array()コンストラクターを使用する際にnew演算子を省略可能です。

let fruits = Array();

またはこのような定義方法がございます。

let scoresArray = new Array();
scoresArray[0] = 10;
scoresArray[1] = 5;
scoresArray[2] = 8;
scoresArray[3] = 2;

console.log(scoresArray)
// 10, 5, 8, 2

キーである数値インデックスは、文字列やその他データ型にする事はできません、ご注意下さい。

//誤った構文

let scoresArray = new Array();

scoresArray["ten"] = 10;

必ず配列インデックスは数値でなければいけません。

補足として配列は、オブジェクトと同様にカンマで終わる場合があります。

let scoresArray = [
  10,
  5,
  8,
];

実際ではArray()コンストラクターを使用して配列を作成する事は滅多にありません、ほとんどが配列リテラルとなります。

配列を空にする方法をいくつかご紹介します。

下記の配列があり、そのすべての要素を削除したい場合

let fruits = ["Apple", "Orange", "Banana"];

新しい空の配列に割り当てます。

let fruits = ["Apple", "Orange", "Banana"];

console.log(fruits)
// "Apple", "Orange", "Banana"

fruits = [];

console.log(fruits) //全て削除[]

これは配列を空にする手っ取り早い最速方法となります。

これとまったく同じように機能する方法は『splice()』メソッドを使用します。

let fruits = ["Apple", "Orange", "Banana"];

console.log(fruits)
// "Apple", "Orange", "Banana"

fruits.splice(0,fruits.length);

console.log(fruits) //全て削除[]

splice()メソッドは配列のすべての要素を削除し、削除された要素をfruits配列として返します。

他には『length』を使用する方法です。

使い方はプロパティがゼロに設定されている場合、配列のすべての要素が自動的に削除されます。

let fruits = ["Apple", "Orange", "Banana"];

console.log(fruits)
// "Apple", "Orange", "Banana"

fruits.length = 0;// 長さを0にする

console.log(fruits) //自動で全て削除[]

JavaScript 連想配列

連想配列を通常の配列のようにjavascriptで作成することはできません。

javascriptオブジェクトを使用して連想配列を作成できます。

つまり連想配列は基本的にJavaScriptのオブジェクトです。

連想配列は、(キー、値)のペアでデータを含むデータ構造の概念となります。

JavaScript連想配列JavaScriptオブジェクトとして扱われるので、オブジェクトのプロパティとメソッドは任意に割り当てることが可能となります。

角かっこ・ドット・ブラケット記法のいずれかを使用しプロパティの追加ができます。

const person = {};

// 角カッコ表記

person["firstname"] = "Taro";
person["lastname"] = "Yamada";
person["age"] = 30;
person["city"] = "Tokyo";

const person = {};

// ドット表記

person.firstname = "Taro";
person.lastname = "Yamada";
person.age = 30;
person.city = "Tokyo";

//連想配列を作成する別の方法 ブラケット

const person = {

  firstname: "Taro",
  lastname: "Yamada",
  age: 30,
  city: "Tokyo"

};

ドット表記を使用するよりも、角かっこ表記が最適です、それはドット記法が非常に制限されているためです。

ですが大きな違いはございません。

上記の連想配列なら、『firstname』はキーとなります、つまりインデックスです。

値は『Taro』などになります。

これらは通常の配列のような長さプロパティを持ちません、それは変数が配列型ではなくなったため、length属性は効果がありません。

const person = {};

person["firstname"] = "Taro";
person["lastname"] = "Yamada";
person["age"] = 30;
person["city"] = "Tokyo";

console.log("Length: " + person.length); 
// Length: 0

ですが、値へのアクセスは可能です。

オブジェクトを操作しているので、オブジェクトのキーの長さを取得できます。

object.keys()メソッドを使用します。

このメソッドはキーを返します。

オブジェクトキーの長さを取得するには、『.length』プロパティを使用する必要があります。

const person = {};

person["firstname"] = "Taro";
person["lastname"] = "Yamada";
person["age"] = 30;
person["city"] = "Tokyo";

console.log(Object.keys(person).length);
// key Length 4

Arrayオブジェクトのlength属性を使用できなくなるため、使用する前にまず配列を返すメソッドを定義するようにして下さい。

プロパティを削除する場合は、『delete』を使用します。

const person = {

  firstname: "Taro",
  lastname: "Yamada",
  age: 30,
  city: "Tokyo"

};

delete person.age; 

console.log(person);

連想配列(オブジェクト)を単純な配列に変換する事が可能です。

const person = {

  firstname: "Taro",
  lastname: "Yamada",
  age: 30,
  city: "Tokyo"

};

console.log(person)  //連想配列

const elements = Object.keys(person).map(function(x) {
    return person[x];
})

console.log(elements) //通常の配列

キーのリストを返すメソッドとmapメソッドを使用して値も取得します。

オブジェクトの予約語を使用して連想配列を作成し、キーと値を割り当てることも可能です。

const x = new Object();

x["City Name"] = 'Tokyo';

x["ID"] = 123;

console.log(x)

私の知る限りこれら2つの作成の方法に大きな違いはありません。

const obj1 = new Object(); //予約語コンストラクター構文

const obj2 = {};  //オブジェクトリテラル

リテラル表記の方が利点があります、その場でオブジェクトを作成する方が簡単で、より構造化されます。

オブジェクトの初期化に『new』を使用するのは、アロー関数の場合がほとんどかと思います。

() => new Object({ key: value})

通常の配列と何が違うのか?

・単純な配列とは異なり、角括弧だけでなくドットやブラケット記法を使用します。

連想配列の内容または値は、キーによってアクセスします。

連想配列は、数値キーではなく文字列キーを持つ配列となります。

以上を踏まえて、JavaScript連想配列を処理する最も正しい方法は、Mapオブジェクトを作成することです。

これはES6で導入されたJSの新しいMapオブジェクトとなります。

Array.map()メソッドではございません。

通常のオブジェクトに比べいくつかのメリットがあります、キーが文字列に限定されない事とキーは関数、他のオブジェクト、および他のほとんどすべてのプリミティブにすることが可能となります。

重要な点は、Mapオブジェクトは最初から反復可能です。

const fruits = new Map();

fruits.set("Apple", 1);
fruits.set("Orange", 2);
fruits.set("Banana", 3);

特定の値を取得したい場合は『get()』を使用します。

const fruits = new Map();

fruits.set("Apple", 1);
fruits.set("Orange", 2);
fruits.set("Banana", 3);

console.log(fruits.get("Apple")); // 出力 1

console.log(fruits.get("Orange")); // 出力 2

console.log(fruits.get("Banana")); // 出力 3

JavaScriptには様々な奇妙な振る舞いがあります。

このMapオブジェクトもそのうちの一つとなります

Mapを扱う際は角かっこ表記での使用は避けて下さい、コードが意図したとおりに機能しない可能性が発生します。

get()以外の便利なメソッドは、『has()』や『Map delete()』メソッドがございます。

『has()』メソッドはオブジェクトに特定のキーがあるかどうかのチェックするために使用します。

console.log(fruits.has("Apple")); // true
console.log(fruits.delete("Apple"); //削除

console.log(fruits.has("Apple")) // fales

角括弧を使用した連想配列(オブジェクト)の場合、挿入順序は保持されません。

正確には数字以外の文字を使用する場合に限り、挿入順序は保持されます。

Mapオブジェクトの場合、順序は関係なく保持されます。

どれをどのように使用していくかは、キーで値にアクセスする必要があり、配置順序を気にしない場合は、通常のオブジェクトを使用します。

配置の順序が気になる場合は、Mapオブジェクトを使用してください。

JavaScript 多次元配列

多次元配列は、別の配列を含む配列となります。

JavaScriptは、多次元配列の組み込みサポートを提供していません。

JavaScriptで多次元配列を作成する方法はありませんが代わりに、ネストされた配列を使用して多次元配列を作成できるという事になります。

これだけでは理解が追いつかないと思いますので例を見てみましょう。

const data = [[1, 2, 3], [1, 3, 4], [4, 5, 6]];
let usersData = [['Taro', 20], ['Hanako', 23], ['Michael', 25]];

上記の多次元配列ならば、3行の2列テーブルになっていると思って下さい。

順序は列ではなく行であることに注意してください

コンソールで確認すると下記のようになります。

let usersData = [['Taro', 20], ['Hanako', 23], ['Michael', 25]];

console.log(usersData[0][0]); // Taro

console.log(usersData[0][1]); // 20

console.log(usersData[0][2]); // error

console.log(usersData[1][1]); // 23

console.log(usersData.length); //3

console.log(usersData[0].length); // 2

つまり多次元配列とは、単なる配列の中にある配列です。

最も単純な配列は1次元配列となります、ほとんどの場合、2次元配列で十分です。

3次元配列を見てみましょう。

let arr = [
  [
    [1, 2, 3],
    [4, 5, 6]
  ],
  [
    [7, 8, 9],
    [10, 11, 12]
  ]
];

//  出力は7
console.log(arr[1][0][0]);

// 出力は6
console.log(arr[0][1][2]);

数値の場合、インデックス番号とごっちゃになり最初は分かりづらいかと思いますので文字列で学習下さい。

let arr = [
  [
    ["a", "b", "c"],
    ["d", "e", "f"]
  ],
  [
    ["g", "h", "i"],
    ["j", "k", "l"]
  ]
];

// 出力 a
console.log(arr[0][0][0]);

// 出力 b
console.log(arr[0][1][0]);

// 出力c
console.log(arr[0][0][2]);

3次元配列を使用できる場所は3D操作、または物理計算などの場合となります。

カンマ区切りで配置してあげれば、2次元・3次元…と配列が作成可能です。

通常の配列では1次元配列であり、単一のインデックスを使用してアクセスできます。

ただし、ネストされた配列が1つある場合は、2次元配列となります。

その場合、2つのインデックスを使用してネストされた配列の要素にアクセスできます。

同様に、内部に配列がありその中に別の配列がある場合、それは3次元配列になります。

要素の追加や削除などは、前述したメソッド『push()』や『splice()』等を使用します。

定数の配列

JavaScriptで配列を定数として定義する場合、配列のサイズが変更されないことを意味します。

ただし、配列内のすべての要素が反復時間中に一定のままであるという意味でもありません、それは同じことです。

ブロック内で宣言された配列は、ブロック外で宣言された配列と同じではありません。

const fruits = ["Apple", "Orange", "Banana"];

console.log(fruits);

//  fruits[0]は "Apple"

{
  const fruits = ["Lemon", "Orange", "Banana"];

console.log(fruits);
 // fruits[0]は"Lemon"

}

console.log(fruits);
// fruits[0]は"Apple"

つまり定数はブロックスコープです、したがってブロック内で定義された変数は、外部の変数とは異なる値を表します。

constは別のスコープまたは別のブロックで、constを使用して配列を再宣言可能です。

const fruits = ["Apple", "Orange", "Banana"];
   // 許可
console.log(fruits);

{
  const fruits = ["Apple", "Orange", "Banana"];
 // 許可
console.log(fruits);
}

{

  const fruits = ["Apple", "Orange", "Banana"];
 //許可
console.log(fruits);
}
{

  const fruits = ["Apple", "Orange", "Banana"];
//error

  const fruits = ["Apple", "Orange", "Banana"];
//error

  const fruits = ["Apple", "Orange", "Banana"];
//error

}

配列では値を変更可能です。

ただし、配列参照は変更できません。 

const fruits = ["Apple", "Orange", "Banana"];

fruits[2] = "Lemon";

console.log(fruits);

// Apple, Orange, Lemon

配列では定数にするべき?

これは配列またはオブジェクトのどちらを使用する必要があるかに基づいております。

まとめ

JavaScriptでは配列は値の順序リストであり、タイプを混合し値を保持します。

それら配列は動的で、必要に応じて拡大または縮小します。

しかしJavaScriptで配列を定数として定義する場合、それは配列が縮小または拡大できず、一定のサイズを持ち、配列内のすべての要素が一定であり、それらの値を変更できないことになります。

本日は以上となります。

最後まで読んで頂きありがとうございました。

プライバシーポリシー