JavaScriptの配列操作まとめ!(追加 / 削除 / 取得 / 結合 / 判定)

JavaScript

JavaScriptで配列を使うときに、よく使いそうな配列操作をまとめてみました。
配列の宣言から始まって、追加・削除・取得・結合・判定について書いています。

PR

配列の宣言をする

JavaScriptで配列を作るには、角括弧([])を使用するか、Arrayクラスを使用します。
角括弧([])を使用する場合は、下記のように使って配列を宣言します。

let myArray = []

Arrayクラスを使用して配列を宣言する場合は、下記のようにします。

let myArray = new Array()

初期値を設定した配列宣言

どちらも最初から初期値を入れて、宣言することも可能です。

let myArray = ["apple", "orange", "grape"]
console.log(myArray) // 出力結果:['apple', 'orange', 'grape']
let myArray = new Array("apple", "orange", "grape")
console.log(myArray) // 出力結果:['apple', 'orange', 'grape']

角括弧とArrayクラスの違い

Arrayクラスを使用して、初期値を入れる場合に数値をひとつだけ指定すると、空の要素が数値分入ってしまうので注意する必要があります。
下記の例では、角括弧([])を使った場合には、数値の入った配列がひとつだけ用意されます。
Arrayクラスを使用すると、空要素が3つ入った配列になります。

let numbers = [3]
console.log(numbers) // 出力結果:[3]

let numbers = new Array(3)
console.log(numbers) // 出力結果: (3) [空 × 3]

配列に要素を追加する

配列に対して、pushメソッドを使用して格納したい内容を渡すことで、追加することが可能です。
pushメソッドを使用すると、末尾に要素が追加されます。

例えば、下記のように使用することができます。

let fruits = ['apple']

fruits.push('lemmon')
fruits.push('grape')

console.log(fruits) // 出力結果:['apple', 'lemmon', 'grape']

最初にfruits配列にappleという文字列が入っています。
その後にpushメソッドを使って、lemongrapeを追加しました。
結果として、配列には「’apple’, ‘lemmon’, ‘grape’」が入った状態になります。

要素を一括で追加する

複数要素を一括で追加する場合には、引数を増やして追加します。
下記は、foods配列を作成してpushメソッドに複数指定して追加しています。

let foods = []

foods.push('ramen', 'pizza', 'humberger')

console.log(foods) // 出力結果:['ramen', 'pizza', 'humberger']

配列要素番号を指定して追加する

要素番号を指定して、追加することも可能です。
下記は、foods配列を作成して、要素番号をひとつずつ指定して追加しています。

let foods = []

foods[0] = 'ramen'
foods[1] = 'pizza'
foods[2] = 'humberger'

console.log(foods) // 出力結果:['ramen', 'pizza', 'humberger']

先頭に要素を追加する

先頭に要素を追加したい場合は、unshiftメソッドを使用します。
下記では、foods配列に初期値を3つ入れて、unshiftを使用して先頭に要素を追加しています。

let foods = ['ramen', 'pizza', 'humberger']
foods.unshift('sushi')

console.log(foods) // 出力結果:['sushi', 'ramen', 'pizza', 'humberger']

配列の要素を削除する

配列を削除する方法もいくつかパターンがあります。

deleteを使用する

delete演算子を使用して、配列要素を削除することが可能です。
この場合には削除した箇所が、空の状態で残り、配列の要素数は変わりません。

let foods = ['ramen', 'pizza', 'humberger']

delete foods[1]
console.log(foods) // 出力結果:['ramen', なし, 'humberger']
console.log(foods.length) // 出力結果:3

上記では、foods配列に3つ要素を入れて、1番目を指定して削除しています。
結果として、要素自体は消えますが、空の状態で残ります。(空の場所を指定するとundefinedが返ってきます)
空の要素が残るので、要素数も「3」のまま変わりません。

popを使用する

popメソッドを使用して削除すると、最後に入れた要素が配列から削除されます。(取り出されます。)

let foods = ['ramen', 'pizza', 'humberger']
let poped = foods.pop()

console.log(poped) // 出力結果:humberger
console.log(foods)  // 出力結果:['ramen', 'pizza']

console.log(foods.length)  // 出力結果:2

上記ではfoods配列に3つ要素を入れて、popメソッドで最後だけ削除しました。
呼び出した時に、要素の最後が取り出されて返ってくるので、poped変数に入れて出力してみました。

結果、poped変数にはhumbergerが入っていて、foods変数には['ramen', 'pizza']が入った状態になります。
要素数も配列が詰められて「3」から「2」になりました。

shiftを使用する

shiftメソッドを使用して削除すると、先頭に入れた要素が配列から削除されます。(こちらも取り出されます。)

let foods = ['ramen', 'pizza', 'humberger']
let firstElement = foods.shift()

console.log(firstElement) // 出力結果:ramen
console.log(foods)  // 出力結果:['pizza', 'humberger']

console.log(foods.length)  // 出力結果:2

上記ではfoods配列に3つ要素を入れて、shiftメソッドを使用して最初の要素を削除しました。
呼び出した時に、要素の最初が取り出されて返ってきます。
これをfirstElement変数に入れて出力してみました。

結果、firstElement変数にはramenが入っていて、foods変数には['pizza', 'humberger']が入った状態になります。
要素数も配列が詰められて「3」から「2」になりました。

sliceを使用する

spliceメソッドを使用すると、配列の要素を削除したり、置き換えたり、追加することが可能です。
配列の要素を削除する場合は、「削除を開始する位置」と「削除する個数」を指定します。

下記では、spliceを使用して、ユーザー名の配列(users)と果物の配列(fruits)から要素を削除してみました。

let users = ['taro', 'jiro', 'saburo', 'hanako']
let user = users.splice(2, 1)

console.log(user) // 結果:['saburo']
console.log(users) // 結果:['taro', 'jiro', 'hanako']

let fruits = ['orange', 'grape', 'banana', 'lemon']
let myFruits = fruits.splice(0, 2)

console.log(myFruits) // 結果:['orange', 'grape']
console.log(fruits) // 結果:['banana', 'lemon']

users配列には4つの名前が入っています。
users.splice(2, 1)とすることで、配列の2番目から1つの要素を抜き出しています。
つまり、spliceの第1引数が「削除を開始する位置」で第2引数が「削除する個数」となります。

取り出された値をuser変数に入れて出力しています。
結果として、user変数には配列の形で「[‘saburo’]」が入っていることが確認できます。

users配列には要素が取り出された後の「[‘taro’, ‘jiro’, ‘hanako’]」が残っていることが確認できます。
users配列の要素数も変更されて、4から3になります。

次にfruits配列にも4つの果物名が入っています。
ここでは、spliceを使用して、fruits配列の0番目から2つ取り出してみました。

取り出した値はmyFruits配列に格納しました。
結果として、myFruits配列には「[‘orange’, ‘grape’]」が入っていることが確認できました。
fruits配列には取り出した後に残った「[‘banana’, ‘lemon’]」が入っていることが確認できました。

配列の要素を取得する

作成した配列の要素は、下記のように要素番号を指定すると取得できます。

let foods = ['ramen', 'pizza', 'humberger']

console.log(foods[1]) // 出力結果:pizza

配列の要素番号は0から始まリます。
上記の例だと、1を指定しているので、結果として「pizza」が返ってきます。

配列を結合する

配列を結合する場合には、concatメソッドを使用します。
既存の配列は変更されずに新しい配列が作成されます。

const colors1 = ['red', 'blue', 'green']
const colors2 = ['black', 'white', 'purple']

const colors = colors1.concat(colors2)
console.log(colors) // 結果:['red', 'blue', 'green', 'black', 'white', 'purple']

色の名前を入れた2つの配列を作成して、concatメソッドを使用してみました。

colors1配列とcolors2配列に、それぞれ3つ要素を入れました。
colors1colors2concatで結合して出力しました。

結果として「[‘red’, ‘blue’, ‘green’, ‘black’, ‘white’, ‘purple’]」が出力されて、結合されていることが確認できます。

配列に特定要素が存在するか判定する

indexOfメソッドを使うと、配列に要素が存在するか確認することが可能です。

indexOf配列に要素が存在しない場合は-1を返します。
配列に要素が存在する場合は、要素番号を返します。

let users = ['taro', 'jiro', 'saburo', 'hanako']

if (users.indexOf('yasuaki') !== -1) {
    console.log('usersにyasuakiは存在する')
} else {
    console.log('usersにyasuakiは存在しない')
}


if (users.indexOf('jiro') !== -1) {
    console.log('usersにjiroは存在する')
} else {
    console.log('usersにjiroは存在しない')
}

users配列に名前を4つ入れて、存在するか判定してみました。

最初はyasuakiという要素があるか判定します。
存在しないので、elseを通って「usersにyasuakiは存在しない」が出力されます。

次にjiroという要素があるか判定します。
存在するので、ifを通って「usersにjiroは存在する」が出力されます。

JavaScriptプログラミング
独学に限界を感じたら、オンラインのプログラミングスクールへ...
  • Code ViIlage
      挫折させない本気のプログラミングスクール。学習継続率93.3%・卒業生800名以上。
  • DMM WEBCAMP
      働きながら自分のペース学んでエンジニア転職。無料カウンセリング満足度99%!
  • TECH CAMP
      無料カウンセリング満足度95%!本業に活かせる。キャリアアップにつながる。
  • TechAcademy
      現役エンジニアから学べるオンラインに特化したプログラミングスクール。
  • テックパートナーズカレッジ
      WEBシステム開発会社のノウハウが学べるオンラインスクール。14日無料体験有り!
  • \ PHP・Laravelに特化したオンラインスクール /
    yasuakiをフォローする
    codelikeなブログ

    コメント

    タイトルとURLをコピーしました