すべてのJavaScript開発者が知っておくべき配列メソッド Part-1

JavaScriptの配列操作で忘れず知っておきたい配列関数一覧 その1。

map()

map()メソッドは、配列の各要素に対して、指定された関数を呼び出した結果からなる新しい配列を作成します。

const array = [1, 2, 3, 4, 5, 6];
const mappedArray = array.map(element => element + 20);
console.log(mappedArray);
// Array [21, 22, 23, 24, 25, 26]

filter()

filter()メソッドは、与えられた関数内の条件を満たす要素のみを持つ、新しい配列を作成します。

const array = [1, 2, 3, 4, 5, 6];
const mappedArray = array.filter( element => element === 2 || element === 5);
console.log( mappedArray);
// Array [2, 5]

sort()

sort()メソッドは、配列の要素を昇順または降順に並べ替えます。

const array = [1, 2, 3, 4, 5, 6];
const alphabets = ["t", "h", "e", "i", "n", "d", "i", "a", "n", "d", "e", "v"];
//降順に並べる
const descArray = array.sort((a, b) => a > b ? -1 : 1);
console.log(descArray);
// Array [6, 5, 4, 3, 2, 1]
// 昇順にソート
const ascArray = alphabets.sort((a, b) => a > b? 1: -1);
console.log(ascArray);
// Array ["a", "d", "d". "e", "e", "h", "i", "i", "n", "n", "t", "v"]

forEach()

forEach()メソッドは、配列の各要素に対して指定されたコールバック関数を実行することで、配列のループ処理を行います

const array = [1, 2, 3, 4];
array.forEach(element => console.log(element));
//1
//2
//3
//4

every()

every()メソッドは、条件を満たす配列のすべての要素をチェックし、必要に応じてtrueまたはfalseを返します

const array = [1, 2, 3, 4, 5, 6];
// すべての要素が4より大きい
const isGreaterThanFour = array.every( number => number > 4);
console.log( isGreaterThanFour); //false
// すべての要素が10以下
const isLessThanTen = array.every(number => number < 10);
console.log(isLessThanTen); //true

some()

some()メソッドは、配列の中に条件を満たす要素が少なくとも1つあるかをチェックし、必要に応じてtrueまたはfalseを返します。

const array = [1, 2, 3, 4, 5, 6];
// 4より大きい要素がある
const isGreaterThanFour = array.some ( number => number > 4);
console.log(isGreaterThanFour);
//true
//0より小さい要素がある
const isLessThanTen = array.some(number => number < 0);
console.log(isLessThanTen);
// false

find()

find()メソッドは、検証機能で配列内から条件を満たす最初の要素の値を返します。下記の例だと、最初に一致した4だけを返却しています。

const array = [1, 2, 3, 4, 5, 6];
const foundElement = array.find(element => element > 3);
console.log( foundElement);
// 4