LoginSignup

Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

0
2

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']

このように関数を使うことで処理の単純化に役立ててほしい.

0
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
tarakokko3233

@tarakokko3233(tara manji)

Python,Java,Ruby,Goでのバックエンド,nginxでのイサーバー構築,JavaScript,Typescriptでのフロントエンド, VR MR(Unity)での開発をしている大学生です!1週間1Qiita頑張ってます! Email:tarakokko3233@gmail.com

Comments

jsdtue55
@jsdtue55

配列メソッドの紹介でsort()reverse()を紹介するなら、結果を新しい配列として返すtoSorted()toReversed()も合わせて紹介するといいと思います。

0

Let's comment your feelings that are more than good

Being held Article posting campaign

アプリケーション開発に注力するための工夫をシェアしよう! sponsored by Qmonus Value Stream

~
View details

これからの情報伝達手段の在り方について考えてみよう!

~
View details
0
2

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address