【Javascript】配列の使い方
目次
配列を宣言するには以下のように記述します。
js
let array = ['html', 'css', 'js'];
console.log(array[2]);//js
コンストラクタを使って以下のように記述することも出来ます。
js
let array2 = new Array('java', 'python', 'php');
console.log(array2[2]);//php
以下のように記述することで配列の長さを指定することもできます。
js
let array3 = new Array(3);
array3[0] = 'c';
array3[1] = 'vba';
array3[2] = 'cobol';
console.log(array3[1]);//vba
length)配列のサイズを取得するにはlengthプロパティを使用します。
js
let array = ['html', 'css', 'js'];
console.log(array.length);//3
isArray)変数が配列かどうかを判定するにはisArrayメソッドを使用します。
配列の場合はtrueが、配列でない場合にはfalseを返却します。
js
let array = ['html', 'css', 'js'];
console.log(Array.isArray(array));//true
toString)配列を文字列に変換するにはtoString()メソッドを使用します。
js
let array = ['html', 'css', 'js'];
console.log(array.toString());//html,css,js
indexOf)ある文字列を検索するにはindexOfメソッドを使用します。
指定したindexをキーに右方向に検索し、指定したarrayのキーを返します。
js
let array = ['html', 'css', 'js'];
console.log(array.indexOf('css'));//1
console.log(array.indexOf('css',1));//1
console.log(array.indexOf('css',2));//-1
foreach)配列を繰り返し処理するにはforeachメソッドを使用します。
ただし、処理した結果をreturnすることはできません。
js
let array = ['html', 'css', 'js'];
array.forEach((value)=>{console.log("sample." + value)});
実行結果
sample.html
sample.css
sample.js
処理した結果をreturnするとundefindになります。
js
let array = ['html', 'css', 'js'];
let result = array.forEach((value)=>{ return "sample." + value});
console.log(result);//undefined
処理した結果をreturnしたい場合は、後述のmapメソッドを使用します。
map)配列を繰り返し処理して結果を戻すにはmapメソッドを使用します。
js
let array = ['html', 'css', 'js'];
let result = array.map((value)=>{ return "sample." + value});
console.log(result);// ['sample.html', 'sample.css', 'sample.js']
entries)すべてのキーと値を取得するにはentriesメソッドを使用します。
js
let array = ['html', 'css', 'js'];
for(let [key, val] of array.entries()){
console.log(key,val);
}
実行結果
0 html
1 css
2 js
keys)すべてのキーを取得するにはkeysメソッドを使用します。
js
let array = ['html', 'css', 'js'];
for(let key of array.keys()){
console.log(key);
}
実行結果
0
1
2
values)すべての値を取得するにはvaluesメソッドを使用します。
js
let array = ['html', 'css', 'js'];
for(let val of array.values()){
console.log(val);
}
実行結果
html
css
js
concat)配列の末尾に別の配列を追加するにはconcatメソッドを使用します。
js
let array = ['html', 'css', 'js'];
let array2 =['java', 'c', 'python'];
console.log(array); //['html', 'css', 'js']
console.log(array2);//['java', 'c', 'python']
//ここで連結。
let array3 = array.concat(array2);
console.log(array); //['html', 'css', 'js']
console.log(array2); //['java', 'c', 'python']
console.log(array3); //['html', 'css', 'js', 'java', 'c', 'python']
join)配列内の要素を連結して文字列として返すにはjoinメソッドを使用します。
js
let array = ['html', 'css', 'js'];
console.log(array); //['html', 'css', 'js']
//ここで連結。
let str = array.join('-');
console.log(array); //['html', 'css', 'js']
console.log(str);//html-css-js
引数に空文字を指定すればそのまま連結します。
js
let array = ['html', 'css', 'js'];
//ここで連結。
let str = array.join('');
console.log(array); //['html', 'css', 'js']
console.log(str);//htmlcssjs
slice)js
let array = ['html', 'css', 'js', 'java', 'php', 'python'];
//ここでスライス。
let array2 = array.slice(0,6);
console.log(array2);//['html', 'css', 'js', 'java', 'php', 'python']
元の配列はそのまま残ります。
js
let array = ['html', 'css', 'js', 'java', 'php', 'python'];
console.log(array); //['html', 'css', 'js', 'java', 'php', 'python']
//ここでスライス。
let array2 = array.slice(0,3);
console.log(array); //['html', 'css', 'js', 'java', 'php', 'python']
console.log(array2);//['html', 'css', 'js']
js
let array = ['html', 'css', 'js', 'java', 'php', 'python'];
//ここでスライス。
let array2 = array.slice(3);
console.log(array2);//['java', 'php', 'python']
pop)配列の末尾の要素取得して削除するにはpopメソッドを使用します。
js
let array = ['html', 'css', 'js', 'java', 'php', 'python'];
let result = array.pop();
console.log(array);//[ 'html', 'css', 'js', 'java', 'php' ]
console.log(result);//python
push)配列の末尾に要素を追加するにはpushメソッドを使用します。
js
let array = ['html', 'css', 'js', 'java', 'php', 'python'];
let result = array.push('vba','c');
console.log(array);//[ 'html', 'css', 'js', 'java', 'php', 'python', 'vba', 'c' ]
console.log(result);//8
shift)配列の先頭の要素を取得して削除するにはshiftメソッドを使用します。
js
let array = ['html', 'css', 'js', 'java', 'php', 'python'];
let result = array.shift();
console.log(array);//[ 'css', 'js', 'java', 'php', 'python' ]
console.log(result);//html
unshift)配列の先頭に「指定した要素」を追加するにはunshiftメソッドを使用します。
js
let array = ['html', 'css', 'js', 'java', 'php', 'python'];
let result = array.unshift('ruby','swift');
console.log(array);//[ 'ruby', 'swift', 'html', 'css', 'js', 'java', 'php', 'python' ]
console.log(result);//8
fill)配列を指定した値で上書きするにはfillメソッドを使用します。
元の配列も上書きされるので注意が必要です。
js
let array = ['html', 'css', 'js', 'java', 'php', 'python'];
let array2 = array.fill('c','0','6');
console.log(array);//[ 'c', 'c', 'c', 'c', 'c', 'c' ]
console.log(array2);//[ 'c', 'c', 'c', 'c', 'c', 'c' ]
reverse)※降順ではない配列の要素を逆順に並び替えるにはreverseメソッドを使用します。
元の配列も上書きされるので注意が必要です。
js
let array = [10,5,1,8,4,6,2,7,3,9];
let result = array.reverse();
console.log(array);//[ 9, 3, 7, 2, 6, 4, 8, 1, 5, 10 ]
console.log(result);//[ 9, 3, 7, 2, 6, 4, 8, 1, 5, 10 ]
sort)配列の要素を昇順（辞書順）に並び替えるにはsortメソッドを使用します。
元の配列も上書きされるので注意が必要です。
js
let array = [10,5,1,8,4,6,2,7,3,9];
let result = array.sort();
console.log(array);//[ 1, 10, 2, 3, 4, 5, 6, 7, 8, 9 ]
console.log(result);//[ 1, 10, 2, 3, 4, 5, 6, 7, 8, 9 ]
昇順に並び替えるには以下のように記述する必要があります。
元の配列も上書きされるので注意が必要です。
js
let array = [10,5,1,8,4,6,2,7,3,9];
let result = array.sort((a, b) => a - b);
console.log(array);//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log(result);//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
降順に並び替えるには一度array.sort((a, b) => a - b)で昇順に並び替えたものをreverseで逆順に並び替えることによって実現します。
元の配列も上書きされるので注意が必要です。
js
let array = [10,5,1,8,4,6,2,7,3,9];
let asc = array.sort((a, b) => a - b);
let desc = asc.reverse();
console.log(array);//[ 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 ]
console.log(asc);//[ 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 ]
console.log(desc);//[ 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 ]
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！