14
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

【JavaScript】配列でよく使用する関数まとめ

概要

JavaScriptを使用して開発をしている際に、配列でよく使用する関数を項目ごとにまとめました。
各例のトップレベルで下記のコードが定義されている事を前提とします。

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

要素の追加・削除

pop()/push()

pop(): 配列の最後の要素を削除し、その要素を返します。
push(): 配列の最後に要素を追加し、新しい配列の要素数を返します。

arr.push(6);
console.log(arr); //=> [1, 2, 3, 4, 5, 6]

arr.pop(6);
console.log(arr); //=>  [1, 2, 3, 4, 5]

shift()/unshift()

shift(): 配列の先頭の要素を削除し、その要素を返します。
unshift(): 配列の先頭に要素を追加し、新しい配列の要素数を返します。

arr.unshift(0);
console.log(arr); //=> [0, 1, 2, 3, 4, 5]

arr.shift();
console.log(arr); //=>  [1, 2, 3, 4, 5]

slice()

配列内の一部を切り取り、新しい配列として返します。

let a4 = arr.slice(0, 3);
console.log(a4); //=>  [1, 2, 3]

splice()

古い要素の削除しながら、新しい要素を追加することで、配列の内容を変更します。

基本Syntax
array.splice(index, howMany, Elements)
/**
 index: 配列の変更を開始するインデックスを指定します。
 howMany: 削除する古い配列要素の数を指定します。
 Elements: 追加する要素、または配列を指定します。
**/
var months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb');
// インデックス1の0個の要素を入れ替える(インデックス1の場所に要素を追加)
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, 'May');
// インデックス4つ目の1つの要素を入れ替える。
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']

concat()

2つ以上の配列を組み合わせ、組み合わせた配列を返します。

let a1 = arr.concat([6, 7]);
console.log(a1); //=> [1, 2, 3, 4, 5, 6, 7]

要素の繰り返し

forEach()

与えられた関数を、配列の各要素に対して一度ずつ実行します。

function repeat(ele) {
  console.log(ele);
}
arr.forEach(repeat); //=> 1 2 3 4 5

配列内での検索

indexOf()

指定されたインデックスの位置にある要素を返す。
見つからなければ-1を返します。

console.log(arr.indexOf(0)) //=> 1
console.log(arr.indexOf(10)) //=> -1

find()/findIndex()

提供されたテスト関数を満たす配列内の 最初の要素の
値を返します。

console.log(arr.find(num => num > 2)); //=> 3
console.log(arr.findIndex(num => num > 2)); //=> 2

includes()

配列が渡された要素を持つかどうか判定します。

console.log(arr.includes(2)); //=> true

filter()

テスト関数を配列の各要素に対して実行し、それに合格した全ての要素からなる新しい配列を返します。

let a2 = arr.filter(num => num > 3);
console.log(a2); //=> [4, 5]

配列を変換する

map()

与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

a3 = arr.map(ele => ele - 1);
console.log(a3); //=> [0, 1, 2, 3, 4]

sort()

配列内の要素を並び替えます。

let array = [4, 2, 3, 4, 5, 6, 7];
console.log(array.sort()); //=> [2, 3, 4, 4, 5, 6, 7]

reverse()

配列内の要素の順序を反対にします。

console.log(arr.reverse()) //=> [5, 4, 3, 2, 1];

reduce()

配列の各要素に対して(引数で与えられた)関数を実行して、単一の値にします。

基本Syntax
let value = arr.reduce(function(accumulator, currentItem, index, array) {
  // ...
}, initial);
  • accumulator: それまでの値の累積値
  • currentItem: 現在値
  • index: 現在のインデックス
  • array: ソースの配列
let result = arr.reduce((sum, current) => sum + current, 0);

console.log(result); //=> 15

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
14
Help us understand the problem. What are the problem?