本記事ついて
本記事は プログラミング初学者の私が学習していく中でわからない単語や概要をなるべくわかりやすい様にまとめたものです。
もし誤りなどありましたらコメントにてお知らせいただけるとありがたいです。
Arrayオブジェクトとは
配列を扱うオブジェクト
構文
new Array(要素1, 要素2, ...)
多数のメソッドとlengthプロパティで構成されている。
Arrayオブジェクトのメソッド群を3グループに分ける。
・アクセサメソッド：配列自体は書き換えずに、メソッドに応じた戻り値を返す
・変更メソッド：配列自体を書き換える
・反復メソッド：配列内の各要素に対して何らかの処置を行う
＊変更メソッドは配列そのもに変更を及ぼす。別名、破壊的なメソッドともいわれる。
アクセサメソッド・プロパティ
| メンバー | 戻り値 | 説明 |
|---|---|---|
| toString() | String | 配列とその要素を表す文字列を返す |
| join(sep) | String | 配列のすべての要素を文字列sepで結合して文字列を返す |
| concat(value1) | Array｜配列または値value1...を配列に連結したものを返す | |
| slice(start,end) | Array | 配列のインデックスstartからendの手前までの要素を抽出する |
| flat([depth]) | Array | 配列を深さdepthに揃えたものを返す |
| includes(element[,start]) | Boolean | 配列のインデックスstart以降に要素elementが含まれているかを判別する |
| indexOf(element[,start]) | Integer | 配列のインデックスstartから後方にむかって検索し要素elementとマッチしたインデックスを返す |
| lastlndexOf(element[,start]) | Integer | 配列のインデックスstartから前方にむかって検索し要素elementとマッチしたインデックスを返す |
お試し
function toshiki() {
const toshikiFamily = ['利樹', 'パパ', 'ママ', 'アッキー', 'ママ'];
console.log(toshikiFamily.length);
console.log(toshikiFamily.toString());
console.log(toshikiFamily.join('|'));
console.log(toshikiFamily.concat('アッキーママ'));
console.log(toshikiFamily.slice(1, 3));
console.log(toshikiFamily.includes('利樹'));
console.log(toshikiFamily.indexOf('ママ'));
console.log(toshikiFamily.lastIndexOf('ママ'));
const toshikiFamily2 = ['利樹', ['パパ'], [['ママ']]];
console.log(toshikiFamily2.flat());
console.log(toshikiFamily2.flat(2));
}
プロパティ
lengthプロパティは配列の要素を求めるもの
構文
配列、length
変更メソッド
| メンバー | 戻り値 | 説明 |
|---|---|---|
| push(element1[,...]) | Integer | 配列の末尾にelement1,...を追加する |
| unshift(element1[,...]) | Integer | 配列の先頭に要素を追加する |
| pop() | Object | 配列から末尾の要素を抜き出す |
| shift() | object | 配列から先頭の要素を吹き出す |
| splice(start,n[element1[,...]]) | Array | 配列のインデックスstartの要素からn個の要素を削除し、element1,...で置き換える |
| copyWithin(target[,start[,end]]) | Array | 配列のインデックスstartからendの手前までの要素をインデックスtargetの位置にコピーする |
| fill(value[,start[,end]]) | Array | 配列のインデックスstartからendの手前までの要素をvalueに設定する |
| sort(fnc) | Array | 関数fncの定義にしたがって配列の要素を並び変える（省略した倍は昇順） |
| reverse() | Array | 配列の要素の順番を逆転する |
お試し
function toshiki() {
const toshikiFamily = ['利樹', 'パパ', 'ママ', 'アッキー'];
toshikiFamily.push('アッキーママ');
console.log(toshikiFamily);
toshikiFamily.unshift('ババ');
console.log(toshikiFamily);
toshikiFamily.reverse();
console.log(toshikiFamily);
toshikiFamily.sort();
console.log(toshikiFamily);
toshikiFamily.copyWithin(4, 0, 2,);
console.log(toshikiFamily);
toshikiFamily.fill('利樹', 3, 5);
console.log(toshikiFamily);
console.log(toshikiFamily.pop());
console.log(toshikiFamily);
console.log(toshikiFamily.shift());
console.log(toshikiFamily);
console.log(toshikiFamily.splice(2, 2, 'ババ'));
console.log(toshikiFamily);
}
反復メソッドとコールバッグ関数
反復メソッドは、配列内の各要素について指定の関数を呼び出すという動作をするもの、その呼び出す関数をコールバック関数という。
| メンバー | 戻り値 | 説明 |
|---|---|---|
| forEach(fnc) | void | 配列の各要素について関数fucを実行する |
| filter(fuc) | Array | 配列の要素のうち関数fucを満たす要素のみで新しい配列を生成して返す |
| map(fuc) | Array | 配列の要素のうち関数fucを呼び出し、その結果を配列として返す |
| some(fuc) | Boolean | 配列の少なくとも一つの要素が関数fucを満たすか判定する |
| every(fuc) | Boolean | 配列のすべての要新が関数fucを満たすか判定する |
| find(fuc) | Object | 配列の要素のうち関数fucを満たす最初の要素を返す |
| findIndex(fuc) | Integer | 配列の要素のうち関数fucを満たす最初のインデックスを返す |
| reduce(fuc[,initialValue]) | Object | 配列内の各要素について先頭から末尾に向かって関数fncを適用し１つの値にまとめたものを返す |
| reduceRight(fuc[,initialValue]) | Object | 配列内の各要素について末尾から先頭に向かって関数fncを適用し１つの値にまとおめたものを返す |
| entries() | Array,Iterator | 配列からインデックスと要素を組み合わせた配列を要素とする反復オブジェクトを生成して返す |
お試し
function toshiki() {
const toshikiFamily = ['利樹', 'パパ', 'ママ', 'アッキー'];
toshikiFamily.forEach((name, index) => console.log(`${index}: こんにちは ${name}!`));
}
every,someメソッドは配列の要素のすべてまたは少なくとも1つがコールバック関数に満たすかどうかでBoolean型をかえす。
filterメソッドは配列の要素の中ので、コールバック関数を満たす要素のみの配列を返す
mapメソッドはコールバック関数の結果を配列として返す
function toshiki() {
const toshikiFamily = ['利樹', 'パパ', 'ママ', 'アッキー'];
console.log(toshikiFamily.every(value => value.length <= 4));
console.log(toshikiFamily.some(value => value === '利樹'));
console.log(toshikiFamily.find(value => value === '利樹'));
console.log(toshikiFamily.findIndex(value => value === '利樹'));
console.log(toshikiFamily.filter(value => value.charAt(1) === 'パ'));
console.log(toshikiFamily.map(value => value.length));
}
reduct,reduceRightメソッドは、配列内の要素を先頭または末尾から、コールバック関数を実行してひとつの値にまとめて返すいう動作をする。
コールバック関数には以下の4つの役割を持つ仮引数を使用できる。
・前回のコールバック関数の戻り値
・現在の値
・インデックス（省略可）
・元の配列（省略可）
function toshiki() {
const toshikiFamily = ['利樹', 'パパ', 'ママ', 'アッキー'];
console.log(toshikiFamily.reduce((accumulator, current) => accumulator + current, 'ババ'));
console.log(toshikiFamily.reduceRight((accumulator, current) => accumulator + current,));
}
配列ループをする際に、その処理内でインデックスを用いたい時、for文を用いる方法や反復メソッドを使用するほうほうがありますが、entriesメソッドを使うとそれを実現できる。
function toshiki() {
const toshikiFamily = ['利樹', 'パパ', 'ママ', 'アッキー'];
for (const [index, person] of toshikiFamily.entries()) {
console.log(`${index}: こんにちは${person}`);
}
}