javascriptで配列を使いたいな~
こんな方向けの記事です。
配列の使い方と操作方法を紹介します。
配列の宣言
配列の宣言は
const(let ,var) 配列名 = [];
となります。[]の中に初期値として文字列や数字を入れることが可能です。
1 2 3 4 5 | //配列の定義 const array0 = []; const array1 = [1,2,3]; const array2 = ['佐藤','田中'] const array3 = ['佐藤',1,2]; |
配列の長さを取得したい
配列の長さは「配列.length」で取得できます。
1 2 3 4 | //配列の長さを取得したい const array1Len = array1.length; console.log(array1Len); //結果:3 |
配列の各要素を扱いたい
for文やfor of 文でも各要素を扱うことが出来ますが、ここではforEach文を使って簡単に要素を扱う方法を紹介します。
1 2 3 4 5 | /配列の各要素を扱いたい array2.forEach(function(name) { console.log(name); }); //結果:佐藤 田中 |
forEach文はコールバック関数を引数にとります。nameは要素です。
また引数を2つにするとインデックスを取ることができます。
1 | array2.forEach((name,index) => console.log(index,name));//アロー関数によって簡略化 |
結果
1 2 | 0 "佐藤" 1 "田中" |
アロー関数の使い方はこちらの記事に書いています。
関連記事
アロー関数の使い方を分かりやすく解説します。アロー関数の定義は以下の通りです。変数 => { 処理 } 実際に書いてみました。const calc = (x,y,z) => { con[…]
配列に要素を追加したい
要素の追加はunshiftとpushでできます。
unshift | 配列の先頭に追加 |
push | 配列の末尾に追加 |
1 2 3 4 5 | array0.unshift('javascript','html');//先頭に追加 console.log(array0); array0.push('css');//末尾に追加 console.log(array0); |
となります。
配列の要素を削御したい
配列の削除はshiftとpopでできます。
1 2 3 | array0.shift();//先頭の要素を消す array0.pop();//末尾を消す console.log(array0); |
結果は [“html”]となります。
配列の要素を置き替えたい
配列の要素を置き換えるには、spliceを使います。
splice(): 第1引数:置き換えたい要素のインデックス 第2引数:入れ替える要素数 第3引数:新たに追加する要素
1 2 3 | array1.push(4,5,6,7);//要素の追加 console.log(array1); array1.splice(2,1,'javascript');//3番目の要素を1つ消し、javascriptという要素を追加する |
結果
1 | [1, 2, "javascript", 4, 5, 6, 7] |
配列を連結したい
配列の連結はconcatでできます。
1 2 | array4 = array1.concat(array2); console.log(array4); |
結果
1 | [1, 2, "javascript", 4, 5, 6, 7, "佐藤", "田中"] |
また配列の要素を連結して1つの文字列とすることも可能です。
その場合はjoinを使います。
1 | console.log(array4.join()); |
結果
1 | 1,2,javascript,4,5,6,7,佐藤,田中 |
配列の要素を調べたい
配列の要素を調べてその要素のインデックスを返すindexOf、lastIndexOfと要素があるかないかをtrue,falseで教えてくれるincludesがあります。
indexOf | 先頭から調べて要素のインデックスを返します。 |
lastIndexOf | 末尾から調べて要素のインデックスを返します。 |
includes | 配列に調べたい要素があるか、ないかが分かります。ある場合はtrueをない場合はfalseを返します。 |
1 2 3 4 | a = array2.indexOf('佐藤'); b = array2.lastIndexOf('佐藤'); c = array2.includes('佐藤'); console.log(a,b,c); |
1 | 0 0 true |