JavaScriptの配列には、様々な便利な関数が用意されている.例えばNode.js(Reactなど)で配列の処理をするとき,さまざまな操作をしたいと思うが,以下にその例を記載する.
map
配列の各要素に対して指定された関数を適用し,新しい配列を返す.
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
filter
配列の要素をフィルタリングし,指定された条件に合う要素だけを含む新しい配列を返す.
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
reduce
配列の要素を累積的に処理し,単一の値を返す.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15
find
配列内で指定された条件に合う最初の要素を返す.
const fruits = ['apple', 'banana', 'orange'];
const foundFruit = fruits.find(fruit => fruit.startsWith('b'));
console.log(foundFruit); // 'banana'
forEach
配列の各要素に対して指定された関数を実行する.
const fruits = ['apple', 'banana', 'orange'];
fruits.forEach(fruit => console.log(fruit));
// 'apple'
// 'banana'
// 'orange'
includes
配列に指定された要素が含まれているかどうかを真偽値で返す.
const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // true
console.log(fruits.includes('grape')); // false
some
配列の少なくとも1つの要素が指定された条件を満たすかどうかを真偽値で返す.
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.some(num => num > 3)); // true
console.log(numbers.some(num => num > 10)); // false
every
配列のすべての要素が指定された条件を満たすかどうかを真偽値で返す.
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.every(num => num > 0)); // true
console.log(numbers.every(num => num > 3)); // false
sort
配列の要素を並べ替える.デフォルトでは,要素を文字列に変換して辞書順に並べ替える.
const fruits = ['banana', 'apple', 'orange'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'orange']
reverse
配列の要素の順序を反転
const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]
slice
配列の一部を取り出して新しい配列を返す.
const numbers = [1, 2, 3, 4, 5];
const slicedNumbers = numbers.slice(1, 4);
console.log(slicedNumbers); // [2, 3, 4]
concat
複数の配列を結合して新しい配列を返す.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const concatenatedArray = array1.concat(array2);
console.log(concatenatedArray); // [1, 2, 3, 4, 5, 6]
join
配列の要素を指定された区切り文字で結合して文字列を返す.
const fruits = ['apple', 'banana', 'orange'];
const joinedString = fruits.join(', ');
console.log(joinedString); // 'apple, banana, orange'
flat
多次元配列を平坦化して新しい配列を返す.
const nestedArray = [1, [2, 3], [4, [5, 6]]];
const flattenedArray = nestedArray.flat(2);
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]
findIndex
配列内で指定された条件に合う最初の要素のインデックスを返す.
const numbers = [1, 2, 3, 4, 5];
const index = numbers.findIndex(num => num > 3);
console.log(index); // 3
Array.from
配列様のオブジェクトや反復可能なオブジェクトから新しい配列を作成
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const newArray = Array.from(arrayLike);
console.log(newArray); // ['a', 'b', 'c']
このように関数を使うことで処理の単純化に役立ててほしい.
Comments
配列メソッドの紹介で
sort()
やreverse()
を紹介するなら、結果を新しい配列として返すtoSorted()
やtoReversed()
も合わせて紹介するといいと思います。Let's comment your feelings that are more than good