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

JavaScript

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

配列の宣言をする

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」になりました。

spliceを使用する

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は存在する」が出力されます。

コメント

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