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メソッドを使って、lemon・grapeを追加しました。
結果として、配列には「’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配列に初期値を３つ入れて、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つ要素を入れました。
colors1とcolors2をconcatで結合して出力しました。
結果として「[‘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は存在する」が出力されます。
コメント