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); // 初期値０
console.log(a);
console.log(array);

コンソール

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