🫡

JSerのための配列操作基本編

2023/09/26に公開

はじめに

配列の作成方法とよく使用されるメソッドの基本的な操作を紹介します。JavaScriptでの配列操作をよりスムーズに行うためのヒントとして、ご活用ください。

一番ポピュラーな配列の作り方です。ほとんどのコードはこの書き方で定義されています。この後紹介する3番の方法と意味は同じです。

const ar = ['りんご', 'バナナ'];

N個の~~undefined~~emptyが配列に格納された状態で定義されます。配列を定義するときの長さを可変長に出来るのがポイントです。上級者向けの書き方です。

const ar = Array(2)
console.log(array) // [undefined, undefined]

配列リテラル記法の長いバージョンです。最も基本的な書き方ですが、1番と意味が同じなので初心者の方は混乱してしまうかも知れません。この書き方は知っていればOKです。

const ar = Array('りんご', 'バナナ');

map()は配列の各要素に関数を適用して、その結果からなる新しい配列を作成します。

// 数字が入った配列
const numbers = [2, 3, 4];

// 全て2倍にした新しい配列を作る
const doubles = numbers.map((n) => n * 2);
console.log(doubles); // [4, 6, 8]

filter()は配列の要素の中から特定の条件を満たす要素だけを抜き出して新しい配列を作成します。

// 数字が入った配列
const numbers = [2, 3, 4, 5];

// 2の倍数だけにした新しい配列を作る
const filtered = numbers.map((n) => n % 2 == 0);
console.log(filtered); // [2, 4]

find()は配列の中から条件を満たす最初の要素を返します。条件を満たす要素がない場合はundefinedを返します。

// 数字が入った配列
const numbers = [2, 3, 4, 5];

// 2の倍数である一番最初の数字を取得する
const found = numbers.find((n) => n % 2 == 0);
console.log(found); // 2

join()は配列の要素を指定した文字で結合して、1つの文字列を作成します。

// 数字が入った配列
const numbers = [2, 3, 4, 5];

// 全ての数字を'-'で連結して新しい文字列を作る
const joined = numbers.join('-');
console.log(joined); // '2-3-4-5'