🚸
JavaScript / TypeScript 配列操作まとめ（基礎）
JavaScript（及び TypeScript）の配列操作に関する”技”をまとめました
要素数取得：length
const array = [40, 30, 20, 10];
console.log(array.length);
// 出力
4
配列内要素の存在確認：includes
const array = [4, 3, 2, 1];
console.log(array.includes(1));
console.log(array.includes(500));
// 出力
true
false
要素の位置（インデックス）確認：indexOf
const array = [4, 3, 2, 1];
console.log(array.indexOf(1));
console.log(array.indexOf(500));
// 「3」という要素のインデックスから、2個後ろの要素のインデックスを出力
console.log(array.indexOf(3, 2));
// 出力
3
-1 // 要素が存在しない場合は -1 を返す
3
要素同士の結合：join
const array = [4, 3, 2, 1];
// つなぎ目の文字を指定できる
const strings1 = array.join('');
const strings2 = array.join('--');
console.log(strings1);
console.log(strings2);
// 出力
"4321"
"4--3--2--1"
先頭の要素を削除：shift
const array = [4, 3, 2, 1];
array.shift();
console.log(array);
// 出力
[3, 2, 1]
末尾の要素を削除：pop
const array = [4, 3, 2, 1];
array.pop();
console.log(array);
// 出力
[4, 3, 2]
先頭に追加：unshift
const array = [4, 3, 2, 1];
array.unshift(100);
console.log(array);
// 出力
[100, 4, 3, 2, 1]
末尾に追加：push
const array = [4, 3, 2, 1];
array.push(100);
console.log(array);
// 出力
[4, 3, 2, 1, 100]
要素の位置（インデックス）を指定して削除 & 追加：splice
const array = [4, 3, 2, 1];
// インデックスが1の要素を含めて、そこから2つ取り除く
array.splice(1, 2);
console.log(array);
// 出力
[4, 1]
// インデックスが1の要素を含め、そこから1つも取り除かずに前に「600」を追加
array.splice(1, 0, 600);
console.log(array);
// 出力
[4, 600, 1]
// インデックスが1の要素を含めそこから1つ取り除いて前に「800」、「900」を追加
array.splice(1, 1, 800, 900);
console.log(array);
// 出力
[4, 800, 900, 1]
並び替え：sort
// 昇順
const array1 = [4, 7, 56, 90, 1];
// 降順
const array2 = [4, 7, 56, 90, 1];
const compare = (x, y) => y - x;
console.log(array1.sort());
console.log(array2.sort(compare));
//出力
[1, 4, 7, 56, 90]
[90, 56, 7, 4, 1]
要素の順序変更（逆順）：reverse
const array1 = [4, 3, 2, 1];
console.log(array1.reverse());
// 出力
[1, 2, 3, 4]
ループ処理：forEach
各要素に一度、与えられた関数を適用させます
const array1 = [4, 3, 2, 1];
array1.forEach(value => {
console.log(value + 1);
});
// 出力
5
4
3
2
マッピング：map
forEach は一つ一つの要素に処理を実行するだけで終わりですが、こちらは実行後の結果を配列データとして返却してくれるという違いがあります。
const array1 = [4, 3, 2, 1];
const newArray = array1.map(value => {
return value * 2;
});
console.log(array1);
console.log(newArray);
// 出力
[4, 3, 2, 1]
[8, 9, 4, 2]
// ↓ のような書き方もできます
const array2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// value: 配列の要素
// index: 配列のインデックス番号
// array: 現在処理している配列のことを指す
array2.map(( value, index, array ) => {
//「array」と「index」を利用して、元の配列データを変更する
array[index] = value * 2;
});
console.log(array2);
// 出力
[2, 4, 6, 8, 10, 12, 14, 16, 18]
複数要素の絞り込み：filter
filter() 内での条件に合格するものが全て残されます
const array1 = [40, 30, 20, 10];
const array2 = array1.filter(value => {
return value > 20;
});
console.log(array2);
// 出力
[40, 30]
絞り込み（一つの要素のみ）：find
find() 内での条件に当てはまるものを一つでも見つけ次第それを返却し終了します
const array = [40, 30, 20, 10];
const values = array.find(value => {
return valur > 20
});
console.log(values);
// 出力
40
続きはこちら
Discussion