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

概要

JavaScriptの配列でよく使用する関数をまとめてみました。

push()

push(): 配列の末尾に要素を追加し、新しい配列の要素数を返します。

引数：配列の末尾に追加する要素
返値：メソッドが呼び出されたオブジェクトの新しいlengthプロパティ

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

pop()

pop(): 配列の末尾の要素を削除し、その要素を返します。

引数：なし
返値：配列の末尾の要素。配列が空の場合はundefinedを返す。

const arr = [1,2,3,4,5];
const firstElement = arr.pop();
console.log(arr); //⇒[1,2,3,4]
console.log(firstElement); //⇒5

unshift()

unshift(): 配列の先頭に要素を追加し、新しい配列の長さを返します。

引数：先頭に追加する要素。
返値：メソッドで呼び出した後のオブジェクトの新しいlengthプロパティの値。

const arr = [1,2,3,4,5];
const firstElement = arr.unshift(0);
console.log(arr); //⇒[0,1,2,3,4,5]
console.log(firstElement); //⇒6

shift()

shift(): 配列から先頭の要素を取り除き、その要素を返します。
　　　このメソッドは配列の長さを変えます。

引数：なし。
返値：配列から取り除かれた要素を返す。
　　　配列が空の場合はundefinedを返す。

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

sort()

sort()：配列の要素を任意の比較関数に従ってソートします。
　　　返値はソートされた配列ですが、元の配列もソートされています。

返値：ソートされた元の配列。

const arr = [1,30,4,21,100000];
arr.sort();
console.log(arr); //⇒[1,100000,21,30,4]

reverse()

reverse()：配列の要素の順序を反対にします。
　　　　　返値は反転した配列ですが、元の配列も反転しています。

返値：反転された元の配列。

const arr = ['one','two','three'];
const reversed = arr.reverse(arr);
consle.log(arr); //⇒['three','two','one']

slice()

slice()：配列の一部をstartからend(endは含まれない)までの範囲で選択した新しい配列オブジェクトにシャローコピーして返します。元の配列は変更されません。

引数：strat・・・抽出を始める位置。
　　　end・・・抽出し終える位置。
返値：取り出された要素を含む新しい配列。

　

const fruits = ['Banana','Orange','Lemon','Apple','Mango']
const citrus fruits.slice(1,3);
console.log(fruits); //⇒['Banana','Orange','Lemon','Apple','Mango'] ※元の配列は変更されない
console.log(citrus); //⇒['Orange','Lemon']

splice()

splice()：既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。

引数：strat・・・配列の変更を始める位置。
　　　deleteCount・・・配列のstartの位置から取り除く古い要素の個数を示す整数。
　　　item1,...,itemN・・・ 配列に追加する要素。
返値：取り除かれた要素を含む配列。
　　　要素が取り除かれなかった場合は空の配列が返される。

　

const months = ['Jan','March','April','June'];
months.splice(1 , 0 , 'Feb'); //1の位置から0個取り除き、そこへ'Feb'を追加する
console.log(months); //⇒['Jan','Feb','March','April','June']

concat()

concat()：2つ以上の配列を組み合わせて、組み合わせた配列を返します。
　　　　このメソッドは既存の配列を変更せず、新しい配列を返します。

const arr1 = ['a','b','c'];
const arr2 = ['d','e','f'];
const arr3 =arr1.concat(arr2);
console.log(arr3); //⇒['a','b','c','d','e','f']

filter()

filter()：与えられた条件に合致する要素のみを抽出したシャローコピーを作成します。

返値：与えられた条件に合致する要素のみを抽出してシャローコピーしたもの。合致した要素がない場合は空の配列が返される。

const words = ['spray','elite','exuberant','destruction'];
const result = words.filter((word) => word.length > 6);
console.log(result); //⇒['exuberant','destruction']

some()

some()：与えられた条件に合致する要素が一つ以上あるのかの判定処理です。

返値：真偽値

const array = [1,2,3,4,5];
const even = ((element) => element % 2 === 1 );
console.log(array.some(even)); //⇒true

every()

every()：与えられた条件に全ての要素が合致するかの判定処理です。

const array = [1,30,39,29,10,13];
const isBelowThreshold = (currentValue) => currentValue < 40;
console.log(array.every(isBelowThreshold)); //⇒true

find()

find()：与えられた条件に合致する最初の要素を返します。
合致する要素が存在しない場合はundefiedを返します。

const array = [5,12,8,130,44];
const found = array.find((element) => element > 10 );
console.log(found); //⇒12

includes()

includes()：特定の要素が配列に含まれているかの判定処理です。

const arr = [1,2,3,4,5];
firstElement = arr.includes(2);
console.log(firstElement); //⇒true

map()

map()：与えられた関数を配列の全ての要素に適用させて新しい配列を生成します。

const array = [1,4,9,16];
const map1 = array.map((x) => x - 2);
console.log(map1); //⇒[0,2,7,14]

join()

join()：配列のすべての要素を指定した区切り文字で連結した文字列を返します。

const array = [1,2,3,4,5];
text = array.join('_');
console.log(text); //⇒[1_2_3_4_5]