配列とは何か？
複数の値をまるで1つのデータのように取り扱うことができるようになるもの。
配列データを作成することで大量の値を1つのデータのように扱えるわけです。
よく言う例えとしては、データを入れる箱のようなものと覚えておけばいいでしょう。
配列の作成方法
[]のなかにデータを入れていく。
constarray=['リンゴ','バナナ','イチゴ'];配列の要素を取得する方法
配列の0番目から数えて取得したい値の番号を指定する。
constarray=['リンゴ','バナナ','イチゴ'];console.log(array[0]); // =>リンゴ配列の要素を検索する方法
「indexOf()」は、指定した「値」が配列データに存在する場合にその場所を「インデックス番号」で取得できる機能を持っています。なのでこちらのメソッドを使用します。
constarray=['リンゴ','バナナ','イチゴ'];constresult=items.indexOf('リンゴ');console.log(result); // =>0配列要素の追加
pushメソッドを使用することで配列の最後に要素を追加できる。
constarray=['リンゴ','バナナ','イチゴ'];array.push('メロン');console.log(array); // =>['リンゴ', 'バナナ', 'イチゴ', 'メロン']配列の要素を削除する方法
deleteメソッドを使用することで、指定した要素を削除できます。
※削除した部分は空になります。
constarray=['リンゴ','バナナ','イチゴ'];deletearray[1];console.log(array); // =>['リンゴ', '', 'イチゴ']配列から要素を削除・追加して組み替える
splice()メソッドを使用することで、配列の要素を自由に削除・追加してデータを組み替えることが出来ます。
constarray=['リンゴ','バナナ','イチゴ'];// const newArray = array(追加・削除する位置, 削除する要素の数, 追加する要素...);constnewArray=array.splice(1,2,'メロン','マンゴー');console.log(newArray); // =>['リンゴ', 'メロン', 'マンゴー']配列を連結・結合する方法
join()メソッドを使用することで、配列の各要素を連結・結合して「文字列（String）」として出力することができる。
※引数に何も指定しなければカンマ区切りになります。
constitems=[2020,6,29];constresult=items.join('/');console.log(result); // =>2020/6/29配列を分割する方法
slice()を使用することで、指定した配列のインデックス番号を境目に末尾まで分割して、新しい配列データを取得することができます。
※第一引数=開始位置、第二引数=終了位置 と言う指定方法も可能。
constarray=['リンゴ','バナナ','イチゴ'];constresult=array.slice(2);console.log(newArray); // =>['イチゴ']配列要素を抽出する方法
filter()メソッドは、任意の条件に合致する配列要素だけを抽出して新しい配列データを作成することができます。
constitems=[55,20,70,80,30,15,65,85,40];constresult=items.filter(function(value){//50よりも小さい数値だけを抽出returnvalue<50;})console.log(result); // =>[55, 70, 80, 65, 85]処理した要素を新しい配列で作成する方法
map()メソッドを使用することで、処理した後に新たに配列を作成してくれます。
constitems=[1,2,3,4,5];constresult=items.map(function(value){//配列の各要素を2倍にするreturnvalue*2;});console.log(result); // =>[2, 4, 6, 8, 10]配列要素を繰り返し処理する方法
forEach()メソッドを使用することで、配列データに対してのみ実行することが可能で、各要素1つずつに任意の処理を実行させることができます。
letitems=[1,2,3,4,5];letresult=items.forEach(function(value){//配列の各要素を2倍にするreturnvalue*2;});// =>2// =>4// =>6// =>8// =>10配列をコピーする方法
concat()メソッドを使用することで、指定した配列を対象の配列に連結出来ます。
空の配列に連結させることでコピーしているような形になります。
constarray=['リンゴ','バナナ','イチゴ'];constnewArray=array.concat();console.log(array);// => ['リンゴ', 'バナナ', 'イチゴ']console.log(newArray);// => ['リンゴ', 'バナナ', 'イチゴ']配列の要素数を調べる方法
lengthメソッドを使用することで配列内の要素数を調べることが出来ます。
constarray=['リンゴ','バナナ','イチゴ'];array.length;配列をソートする方法
sort()メソッドを利用することで、効率よくソート（並び替え）を行うことができます。
※文字列の場合はそのままで良いが、数値やオブジェクトの場合は比較関数を使います。
//文字列の場合conststr=['sa','mu','ra','i'];str.sort();console.log(str);// => ["i", "mu", "ra", "sa"]//数値の場合functioncompareFunc(a,b){returna-b;}varnum=[5,3,10,6,55];num.sort(compareFunc);console.log(num);// => [55, 10, 6, 5, 3]//オブジェクトの場合constlists=[{name:'メロン',price:500},{name:'バナナ',price:100},{name:'スイカ',price:280},{name:'イチゴ',price:300}];lists.sort(function(a,b){if(a.name>b.name){return1;}else{return-1;}})console.log(lists);// =>[{name:"イチゴ",price:300}{name:"スイカ",price:280}{name:"バナナ",price:100}{name:"メロン",price:500}]スプレッド構文
配列やオブジェクトの要素を文字通り展開する構文のこと。
constfoo=[1,2];// 要素を追加して新しい配列を生成constbaz=[...foo,3,4];// => [1, 2, 3, 4]レスト構文
複数の要素を集約して 1 つのオブジェクトにまとめることが出来ます。
関数の引数や分割代入での不特定多数の値を配列として受け取る際に利用します。
constarr=[1,2,3,4,5];const[a,b,...c]=arr;console.log(a,b,c);// => 1 2 [3, 4, 5]まとめ
JavaScriptで使うであろう配列の知識をまとめました。
これらを使いこなせば基礎は身につくんではないかと思います！