Edited at

CODEPREP「JavaScript基礎 配列操作編」に登場するプロパティ、メソッド

備忘録として、CODEPREP「JavaScript基礎 配列操作編」に登場するプロパティ、メソッドをまとめてみました。


プロパティ


lengthプロパティ

配列の長さを取得する


コード

var array = ["Taro", "Hanako", "Ichiro"];

console.log(array.length);


コンソール

3



メソッド


pushメソッド

配列の末尾に値を追加する


コード

var array = [1, 2, 3];

array.push(4);
console.log(array);


コンソール

[1, 2, 3, 4]



popメソッド

末尾の要素を取得し、同時に削除する


コード

var array = [1, 2, 3, 4, 5];

var a = array.pop();
console.log(array);
console.log(a);


コンソール

[1, 2, 3, 4]

[5]


shiftメソッド

先頭の要素を取得し、同時に削除する


コード

var array = [1, 2, 3, 4, 5];

var a = array.shift();
console.log(array);
console.log(a);


コンソール

[2, 3, 4, 5]

[1]


unshiftメソッド

配列の先頭に値を追加する(shiftの取り消し)


コード

var array = [1, 2, 3];

array.unshift(0);
console.log(array);


コンソール

[0, 1, 2, 3]



concatメソッド

配列を連結する


コード

var array1 = [1, 2, 3];

var array2 = [4, 5, 6];
var array3 = array1.concat(array2);
console.log(array3);


コンソール

[1, 2, 3, 4, 5, 6]



spliceメソッド

配列の途中から複数の値を削除し、別の複数の値を挿入する


コード

var array = [1, 2, 3, 4, 5, 6];

var a = array.splice(3, 2, 14, 15, 16);
// 第一引数 index: 配列の変更を開始する位置。先頭のインデックスは0。負数の場合は末尾から数えた位置が指定される。
// 第二引数 howMany: 配列から取り除く要素の数。0の場合は要素の削除は行われない。
// 第三引数以降は追加する要素
// 要素を削除した場所に、新たな要素を追加する
console.log(array);
console.log(a);


コンソール

[1, 2, 3, 14, 15, 16, 6]

[4, 5]

配列の途中に値を挿入する


コード

var array = [1, 2, 4];

array.splice(2, 0, 3);
console.log(array);


コンソール

[1, 2, 3, 4]


配列の途中の要素を削除する


コード

var array = [1, 2, 3, 4, 5];

var a = array.splice(1, 2);
console.log(array);
console.log(a);


コンソール

[1, 4, 5]

[2, 3]


indexOfメソッド

先頭から検索して要素の位置を取得する


コード

var array = [1, 2, 3, 5, 3, 2, 7];

var index = array.indexOf(3);
console.log(array);
console.log(index);


コンソール

[1, 2, 3, 5, 3, 2, 7]

2


lastIndexOfメソッド

末尾から検索して要素の位置を取得する


コード

var array = [1, 2, 3, 5, 3, 2, 7];

var index = array.lastIndexOf(3);
console.log(array);
console.log(index);


コンソール

[1, 2, 3, 5, 3, 2, 7]

4


joinメソッド

要素を連結して文字列化する


コード

var array = [1, 2, 3, 5, 3, 2, 7];

console.log(array.join(","));
console.log(array);


コンソール

1, 2, 3, 5, 3, 2, 7

[1, 2, 3, 5, 3, 2, 7]


sliceメソッド

配列の一部を切り出す


コード

var array = [1, 2, 3, 5, 3, 2, 7];

console.log(array.slice(1, 3));
// 第一引数 begin: どこから取得を開始するかを示す0から始まるインデックス。終了位置は含まれない。負数の場合は末尾が指定される。
// 第二引数 end: どこまでを取得するかを示す0から始まるインデックス。負数の場合は末尾から数えた位置になる。省略時は配列の最後までを取得する。
// spliceは元の配列を変更するが、sliceは変更を加えない
console.log(array);


コンソール

[2, 3]

[1, 2, 3, 5, 3, 2, 7]


sortメソッド

配列をソートする


コード

var array = [1, 2, 3, 5, 3, 2, 7];

array.sort();
console.log(array);


コンソール

[1, 2, 2, 3, 3, 5, 7]


条件を指定して配列をソートする


コード

var array = ["one", "two", "three", "four", "five", "six", "seven", "eight"];

// 文字数の多い順にソート
array.sort((a, b) => {
return a.length > b.length ? -1 : 1;
});
console.log(array);


コンソール

["eight", "seven", "three", "five", "four", "six",  "two", "one"]



forEachメソッド

個別に要素を処理する


コード

var array = ["Taro", "Hanako", "Ichiro", "Keiko", "Jiro"];

array.forEach((v, idx) => {
// 第一引数 配列のデータ
// 第二引数 配列のインデックス番号
// 第三引数 現在処理している配列
console.log(idx + ": " + v);
});


コンソール

0: Taro

1: Hanako
2: Ichiro
3: Keiko
4: Jiro


filterメソッド

要素を条件で絞る


コード

var array = [1, 2, 3, 4, 5, 6, 7];

var array2 = array.filter(v => { // コールバック関数
return v % 2 === 0;
});
console.log(array2);
console.log(array);


コンソール

[2, 4, 6]

[1, 2, 3, 4, 5, 6, 7]


mapメソッド

要素を変換する


コード

var array = [1, 2, 3, 4, 5, 6, 7];

var array2 = array.map(v => { // コールバック関数
return v + 5;
});
console.log(array2);
console.log(array);


コンソール

[6, 7, 8, 9 , 10, 11, 12]

[1, 2, 3, 4, 5, 6, 7]


findメソッド

条件に合う最初の要素を検索し、その要素を返す


コード

var array = [1, 2, 3, 4, 5, 6, 7];

var a = array.find(v => { // コールバック関数
return v % 2 === 0;
});
console.log(a);
console.log(array);


コンソール

2

[1, 2, 3, 4, 5, 6, 7]


findIndexメソッド

条件に合う最初の要素を検索し、そのインデックスを返す


コード

var array = [1, 2, 3, 4, 5, 6, 7];

var a = array.findIndex(v => { // コールバック関数
return v % 2 === 0;
});
console.log(a);
console.log(array);


コンソール

1

[1, 2, 3, 4, 5, 6, 7]


everyメソッド

すべての要素が条件を満たすかを検証する


コード

var array1 = [1, 2, 3, 4, 5, 6, 7, 8];

var array2 = [2, 4, 6, 8];
var a1 = array1.every(v => { // コールバック関数
return v % 2 === 0;
});
var a2 = array2.every(v => { // コールバック関数
return v % 2 === 0;
});
console.log(a1);
console.log(a2);
console.log(array1);
console.log(array2);


コンソール

false

true
[1, 2, 3, 4, 5, 6, 7, 8]
[2, 4, 6, 8]


someメソッド

いずれかの要素が条件を満たすかを検証する


コード

function isEven(v) {

return v % 2 === 0;
}

var array1 = [1, 2, 3, 4, 5, 6, 7, 8];
var array2 = [1, 3, 5, 7];

var a1 = array1.some(isEven);
var a2 = array2.some(isEven);

console.log(a1);
console.log(a2);
console.log(array1);
console.log(array2);



コンソール

true

false
[1, 2, 3, 4, 5, 6, 7, 8]
[1, 3, 5, 7]


reduceメソッド

要素に関数を適用しながらまとめる(1)


コード

var array = [1, 2, 3, 4, 5];

var a = array.reduce((a, b) => {
return a + b;
});
console.log(a);
console.log(array);


コンソール

15

[1, 2, 3, 4, 5]

要素に関数を適用しながらまとめる(2)


コード

var array = ["Taro", "Hanako", "Ichiro", "Keiko", "Jiro"];

var a = array.reduce((a, b) => {
return a + b.length;
}, 0); // 初期値0
console.log(a);
console.log(array);


コンソール

25

["Taro", "Hanako", "Ichiro", "Keiko", "Jiro"]