配列を操作する（Array.prototype）
破壊的メソッド（元の配列を変更する）
push(末尾に追加)返り値：追加した後のlengthの値
let items = [1,2,3];
items.push(4);
console.log(items); // [1,2,3,4]
pop(末尾を削除)返り値：取り除いた値
let items = [1,2,3];
items.pop();
console.log(items); // [1,2]
unshift(先頭に追加)返り値：追加した後のlengthの値
let items = [1,2,3];
items.unshift(0);
console.log(items); // [0,1,2,3]
shift(先頭を削除)返り値：取り除いた値
let items = [1,2,3];
items.shift();
console.log(items); // [2,3]
unshift,shiftの挙動について
- 先頭を操作するのでその後に続く値を操作（詰めたり）しているので処理は重くなる
- 極力使うのは避けたい
splice(万能)
oo番目から全て削除
let items = [1,2,3];
items.splice(1);
console.log(items); // [1]
oo番目からxx個削除
let items = [1,2,3];
items.splice(2,1);
console.log(items); // [1,2]
削除した値を受け取る
let items = [1,2,3];
let spliceItem = items.splice(2,1);
console.log(spliceItem); // [3]
削除した場所に新たな値を置き換える
let items = [1,2,3];
items.splice(1, 1, 50);
console.log(items); // [1,50,3]
追加するだけ
let items = [1,2,3];
items.splice(2,0,50,60);
console.log(items); // [1,2,50,60,3]
後ろから指定もできる
let items = [1,2,3];
items.splice(-1,1);
console.log(items); // [1,2]
fill(埋める)
全て埋める
let items = [1,2,3,4];
items.fill(0);
console.log(items); // [0,0,0,0]
スタート指定
let items = [1,2,3,4];
items.fill(0,2);
console.log(items); // [1,2,0,0]
終わり指定
let items = [1,2,3,4,5];
items.fill(0,2,4);
console.log(items); // [1,2,0,0,5]
copyWithin(配列の一部分を任意の場所にコピー)
インデックス2から3(4を含まない)を0にコピー
let items = [1,2,3,4,5,6,7];
items.copyWithin(0,2,4);
console.log(items); // [3,4,3,4,5,6,7]
reverse(反転)
let items = [1,2,3];
items.reverse();
console.log(items); // [3,2,1]
sort(並び替え)
通常の挙動(文字列に変換されて並び替えている)
let items = [10,0,1,4];
items.sort();
console.log(items); // [0,1,10,4]
明示的に挙動を指定する
let items = [10,0,1,4];
items.sort((a,b)=>{
return a - b;
});
console.log(items); // [0,1,4,10]
↑何をしているか
- aとbに配列の値が順番に入る
- a – b の結果が正ならbの値を先に表示
- a – b の結果が負ならaの値を先に表示
の様な処理をしてください的なアルゴリズム
非破壊的メソッド（元の配列は変更しない）
slice(切り取る)
oo番目から全て
let items = [1,2,3,4,5];
let result = items.slice(2);
console.log(result); // [3,4,5]
oo番目からxx番目まで
let items = [1,2,3,4,5];
let result = items.slice(2,4);
console.log(result); // [3,4]
concat(結合)
let items = [1,2,3];
let result = items.concat([4,5,6]);
console.log(result); // [1,2,3,4,5,6]
join(配列を結合して文字列に)
let items = ['a','b','c'];
let result = items.join();
console.log(result); // a,b,c
let otherResult = items.join('');
console.log(otherResult); // abc
indexOf(指定した値のキーを取得)
let items = ['apple','banana','grape','banana'];
let result = items.indexOf('banana');
console.log(result); // 1
// スタート位置を指定
let otherResult = items.indexOf('banana',2);
console.log(otherResult); // 3
lastIndexOf(お尻から検索)
let items = ['apple','banana','grape','banana'];
let result = items.lastIndexOf('banana');
console.log(result); // 3
// スタート位置を指定
let otherResult = items.lastIndexOf('banana',2);
console.log(otherResult); // 1
includes(含むかどうか)
let items = ['apple','banana','grape','banana'];
let result = items.includes('banana');
console.log(result); // true;
// スタート位置を指定
let otherResult = items.includes('apple',1);
console.log(otherResult); // false
map(関数を使ってそれぞれの値に処理を加える)
全ての値を10倍にする
let items = [1,2,3];
let result = items.map((item)=>{
return item * 10;
});
console.log(result); //[10,20,30]
flat(ネストされた配列をフラットに)
let items = [1,2,[3]];
let result = items.flat();
console.log(result); // [1,2,3]
// 階層を指定
let otherItems = [1,2,[3,[4]]];
let otherResult = otherItems.flat(2);
console.log(otherResult); // [1,2,3,4]
flatMap(mapで行った処理結果をフラットに)
flatMapを使わずに
let items = [1,2,3];
let result = items.map((item)=>{
return [item,item*10];
});
console.log(result); // [1,10][2,20][3,30]
result = result.flat();
console.log(result); // [1,10,2,20,3,30]
上記と全く同じ処理をflatMapを使って
let items = [1,2,3];
let result = items.flatMap((item)=>{
return [item,item*10];
});
console.log(result); // [1,10,2,20,3,30]
filter(関数にてtrueを返した値のみ新しい配列に加える)
let items = [1,2,3,4,5,6];
result = items.filter((item)=>{
return item > 3;
})
console.log(result); // [4,5,6]
reduce(返した値を積み上げていく)
let items = [1,2,3];
let result = items.reduce((previousItem,item) => {
return previousItem + item;
}, 0);
console.log(result); // 6
↑reduceの処理順
- itemの1つ目に1が入り、previousItemには第二引数で設定した0が入る
- 上記の0 + 1 の結果である1が次ループのpreviousItemに入り、itemには2つ目の要素が入る
- 上記ループを繰り返し、最終的に出た値がresultに入る
reduceRight(単純にreduceを右から処理する)
find(関数でtrueが返ってきた時にその値を返す)
let items = ['apple','banana','grape','banana'];
let result = items.find((item)=>{
return item === 'banana';
});
console.log(result); // banana
findIndex(関数でtrueが返ってきた時にそのインデックスを返す)
let items = ['apple','banana','grape','banana'];
let result = items.findIndex((item)=>{
return item === 'banana';
});
console.log(result); // 1
// なければ -1 が返る
let otherResult = items.findIndex((item)=>{
return item === 'mango';
});
console.log(otherResult); // -1
IndexOfより詳細に書ける
every(全てがtrueならtrueを返す)
let items = [1,2,3,4];
let result = items.every((item)=>{
return item < 5;
});
console.log(result); // true
some(1つでもtrueならtrueを返す)
let items = [1,2,3,4];
let result = items.some((item)=>{
return item < 3;
});
console.log(result); // true
at(-を指定できる)
let items = [1,2,3,4];
console.log(items.at(-1)); // 4