JS 組み込み関数一覧表配列と文字列

今まで「関数」について様々な角度から学習してきましたが、JavaScriptにはあらかじめ定義されている関数が多数用意されています。

実はその一部はすでに、「配列」や「文字列メソッド」を学習した時に見ているのですが、関数を理解した今、改めてどんなものがあるのか見てみましょう。

配列
文字列
あとがき

配列

一覧表

関数	意味
split()	文字列を配列にする
join()	配列を文字列にする「,」以外も指定出来る
toString()	配列を文字列にする
push()	配列の最後に項目を追加複数の項目を追加するには「,」でつなぐ
unShift()	配列の先頭に追加
pop()	最後尾の項目を削除
shift()	先頭の項目を削除

これらの関数の簡単な使い方は以前の記事で確認しています。

関数	意味
forEach()	コールバック関数を使って要素の値、インデックス、配列を取り出すことが出来ます。
map()	引数に渡した新しい値を元の配列に変えて新しい配列を生成する
filter()	条件を満たした要素だけを集めた配列を生成する
find()	配列の中で最初に「true」となった要素を返す
findIndex()	配列の中で条件を満たすインデックスを返す
some()	配列の中に条件を満たす要素が一つでもあれば「true」を返すなければ「false」を返す
every()	配列の中で条件を満たす要素がすべてであれば「true」を返す一つでも条件を満たさなければ「false」を返す
reduce()	配列の要素のすべての合計を返します
concat()	配列に別の配列を結合します
splice()	指定した範囲の要素を別の要素に置き換える

「filter()」から「every()」までは、まとめて覚えておくと便利です。

forEach()

let animals = ['dog','cat'];

animals.forEach(function(array,index,element){
    console.log(array);
    console.log(index);
    console.log(element);
});
 dog
 0
 (2) ['dog', 'cat']
 cat
 1
 (2) ['dog', 'cat']

配列の中から、「要素、インデックス、配列」を表示しています。

表示したいものだけを指定することも出来ます。

map()

let nums = [1,2,3,4,5];

let newNums = nums.map(function(value){
    return value* 2;
});

console.log(newNums);
 (5) [2, 4, 6, 8, 10]

console.log(nums);
 (5) [1, 2, 3, 4, 5]

新しい配列が生成されているのが分かると思います。

「forEach」と似ていますが、新しい配列を作るかどうかが大きな違いです。

filter()

let num = [3,5,7,12,15,22];

let newNum = num.filter(function(element){
    return element > 10;
});

console.log(newNum);
(3) [12, 15, 22]

console.log(num);
 (6) [3, 5, 7, 12, 15, 22]

10より大きい要素だけを集めて新しい配列を生成しています。

find()

let num = [3,5,7,12,15,22];

let newNum = num.find(function(element){
    return element > 10;
});

console.log(newNum);
 12

配列の中で最初に10を超えた（trueになった）要素を返しています。

findIndex()

let num = [3,5,7,12,15,22];

let newNum = num.findIndex(function(element){
    return element > 10;

console.log(newNum);
 3

10以上のインデックスを返します。

some()

let num = [3,5,7,12,15,22];

let newNum = num.some(function(element){
    return element > 10;
});

console.log(newNum);
 true

//30以上の要素があるかどうか

let newNum = num.some(function(element){
    return element > 30;
});

console.log(newNum);

 false

10以上の要素はあるので「true」、30以上の要素はないので「false」が返されています。

every()

let num = [3,5,7,12,15,22];

let newNum = num.every(function(element){
    return element > 2;
});

console.log(newNum);
 true

//条件を満たさない場合

let newNum = num.every(function(element){
    return element > 5;
});

console.log(newNum);
 false

2よりもすべての要素が大きければ「true」を、5よりもすべての要素が大きくないので、「false」を返しています。

reduce()

let num = [3,5,7,12,15,22];

let newNum = num.reduce(function(sum, element){
    return sum + element;
},0);

console.log(newNum);
 64

要素の合計が返されています。

concat()

let num = [3,5,7,12,15,22];

let newNum = num.concat([1,2,4,6,8,10]);

console.log(newNum);
 (12) [3, 5, 7, 12, 15, 22, 1, 2, 4, 6, 8, 10]

console.log(num);
 (6) [3, 5, 7, 12, 15, 22]

配列だけでなく、値を指定することも出来ます。

splice()

let num = [3,5,7,12,15,22];

num.splice(0,3,1,2,4);

console.log(num);
 (6) [1, 2, 4, 12, 15, 22]

配列の[3,5,7]が[1,2,4」に置き換わっています。

「num.splice(0,3,1,2,4);」の最初の「0,3」で範囲を指定して、「1,2,4」で置き換える値を記述します。

置き換える配列を指定しなければ、最初に指定した範囲が削除されます。

また、「num.splice(0,0,1,2,4);」のように、範囲指定の2番目に「0」を指定するとその場所に指定した値が追加されます。

この場合であれば、「[1, 2, 4, 3, 5, 7, 12, 15, 22]」と表示されます。

文字列

一覧表

関数	意味
indexOf()	()内の指定した文字列が始まる数値を返す文字列がない場合は「-1」を返す
slice()	特定の文字列を返す（例）slice(5,10)：5番目から10番目までの文字列 slice(5)：5番目以降の文字列
toUpperCase()	大文字に切り替える
toLowerCase()	小文字に切り替える
replace()	文字の一部分を書き換える
includes()	指定した文字列が含まれているかどうか、「true」、「false」で返します
split()	指定した区切り文字で分割します。

includes()

let text = 'I play soccer.';

console.log(text.includes('soccer'));
 true

console.log(text.includes('soccer',7));
 true
console.log(text.includes('soccer',8));
 false

「’soccer’」が含まれているので「true」を返しています。

カンマで繋いで、インデックスの開始位置を指定することも出来ます。

ここでは、7番目から始まるので、「7」を指定した場合は「true」、「８」を指定した場合は「false」が返っています。

split()

let sports = 'soccer.tennis.baseball.basket';

let newSports = sports.split('.');

console.log(newSports);
 (4) ['soccer', 'tennis', 'baseball', 'basket']

「(‘.’),2」のように区切る回数を指定することも出来ます。

元になるテキストの最初、または最後に区切り文字がある場合、空の要素が入ります。