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