配列に値を追加
末尾に追加(push)
const array = [1, 2, 3, 4, 5, 6];
array.push('追加した要素');
console.log(array);
//【出力】
//[1, 2, 3, 4, 5, 6, '追加した要素']
先頭に追加(unshift)
const array = [1, 2, 3, 4, 5, 6];
array.unshift("追加した要素");
console.log(array);
//【出力】
//['追加した要素', 1, 2, 3, 4, 5, 6]
配列の値を削除
末尾を削除(pop)
const array = [1, 2, 3, 4, 5, 6];
array.pop();
console.log(array);
//【出力】
//[1, 2, 3, 4, 5]
先頭を削除(shift)
const array = [1, 2, 3, 4, 5, 6];
array.shift();
console.log(array);
//【出力】
//[2, 3, 4, 5, 6]
配列内部を検索
検索して最初にマッチしたデータを取り出す(find)
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.find(v => {
return v % 2 === 0;
});
//【出力】
//2
find
メソッドは true
を返すと検索が止まり、要素が見つからなければ undefined
を返す。
検索してマッチしたデータで配列を作成(filter)
下記コードは array
のインデックスが 2
より大きいものを抽出し、新たな配列を作成する。
const array = ["大阪", "兵庫", "京都", "奈良", "和歌山"];
const new_array = array.filter(function (value, index, list) {
return index > 2;
});
console.log(new_array);
//【出力】
//['奈良', '和歌山']
filter
メソッドの各引数には
- 第一引数:
value
は配列の値 - 第二引数:
index
は配列のインデックス番号 - 第三引数:
list
は現在処理している配列
が渡ってくる。
const array = ["大阪", "兵庫", "京都", "奈良", "和歌山"];
const new_array = array.filter(function (value, index, list) {
console.log(value, index, list);
});
//【出力】
//大阪 0 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//兵庫 1 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//京都 2 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//奈良 3 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//和歌山 4 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
ある条件の要素が存在するかどうか判定(some)
指定された条件に、配列内の要素が 1つでも当てはまるか
どうかを判定。
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.some(function(item){
return item === 2;
});
console.log(reslut);
//【出力】
//true
- 配列の要素が1つでも条件を満たしていれば
true
を返し、そうでなければfalse
を返す - 引数
item
には配列の値が渡ってくる
ある条件の要素が存在するかどうか判定(every)
指定された条件に、配列内の要素が 全ての要素が当てはまるか
どうかを判定。
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.every(function(item){
return item >= 2;
});
console.log(reslut);
//【出力】
//false
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.every(function(item){
return item >= 1;
});
console.log(reslut);
//【出力】
//true
- 配列要素の全てが条件を満たしていれば
true
を返し、そうでなければfalse
を返す
ある条件の要素が含まれているかどうか判定(includes)
特定の要素が配列に含まれているかどうかを判定。
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.includes(5);
console.log(reslut);
//【出力】
//true
- 1つでも要素が含まれていれば
true
を返し、そうでなければfalse
を返す
配列を順番に処理
配列を順番に処理(forEach)
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let sum = 0;
array.forEach(function (v) {
sum += v;
console.log(sum);
});
//【出力】
//1
//3
//6
//10
//15
//21
//28
//36
forEach
メソッドの各引数には
- 第一引数:
value
は配列の値 - 第二引数:
index
は配列のインデックス番号 - 第三引数:
list
は現在処理している配列
が渡ってくる。
const array = ["大阪", "兵庫", "京都", "奈良", "和歌山"];
array.forEach(function (value, index, list) {
console.log(value, index, list);
});
//【出力】
//大阪 0 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//兵庫 1 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//京都 2 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//奈良 3 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//和歌山 4 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
Array.prototype.forEach()
配列を作成
処理行った要素で新しい配列を作成(map)
map
メソッドは、forEach
メソッドに似ているが、それぞれの要素になにかしらの処理をした値で再度、新しい配列を得ることができる。
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let new_array = array.map(function(v){
return v * 2;
});
console.log(new_array);
//【出力】
//[2, 4, 6, 8, 10, 12, 14, 16]
map
メソッドの各引数には
- 第一引数:
value
は配列の値 - 第二引数:
index
は配列のインデックス番号 - 第三引数:
list
は現在処理している配列
が渡ってくる。
const array = [1, 2, 3, 4, 5, 6, 7, 8];
array.map(function(value, index, list){
console.log(value, index, list);
});
//【出力】
//0 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//1 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//2 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//3 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//4 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//5 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//6 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//7 (8) [1, 2, 3, 4, 5, 6, 7, 8]
reduce()
const array = [1, 2, 3, 4];
const result = array.reduce(function (accumulator, currentValue, currentIndex, array) {
return accumulator + currentValue;
});
//【出力】
//10
- 第三引数
currentIndex
と第四引数、array
は省略可能
処理の流れ
関数実行回数 | accumulator | currentValue | currentIndex |
---|---|---|---|
1回目 | 1 | 2 | 1 |
2回目 | 3 | 3 | 2 |
3回目 | 6 | 4 | 3 |
- 初めは
accumulator
にarray
の0番目である1
、currentValue
にarray
の1番目である2
が入る -
1 + 2
の結果である3
が2回目の第一引数accumulator
に渡る - 2回目は第一引数
accumulator
に 1回目の1 + 2
の計算結果である3
が入り、第二引数currentValue
にはarray
の2番目である3
が入る -
3 + 3
の結果である6
が3回目の第一引数accumulator
に渡る - 3回目は第一引数
accumulator
に 2回目の3 + 3
の計算結果である6
が入り、第二引数currentValue
にはarray
の3番目である4
が入る -
accumulator
の6
とcurrentValue
の4
を足して出力は10
となる