1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】配列の取り出し・追加を行う4つのメソッド

Posted at

##.shift()メソッド

.shift()は0番目のインデックスの要素を削除して、後続のインデックスの値を0番目のインデックスにシフトし、削除した値を返すメソッド。

shift

const arr = [100,200]

console.log(arr.shift()) //配列から削除した100が返される
console.log(arr) //配列に現在ある要素は[200]

console.log(arr.shift()) //配列から削除した200が返される
console.log(arr) //0番目のインデックスの要素を削除したため、配列は空

console.log(arr.shift()) //配列から削除する要素がないためundefinedになる

実行結果

[ 200 ]
100
[]
200
[]
undefined

##.unshift()メソッド
.unshift()は配列の最初に 1 つ以上の要素を追加し、追加後の要素数を返すメソッド。

unshift

const arr = [100,200,300]

console.log (arr.unshift('AAA'))//配列の最初にAAAが追加される
console.log (arr)//追加後の要素数を返す

console.log (arr.unshift('BBB','CCC'))//複数追加の場合、記載順に追加される
console.log (arr)//追加後の要素数を返す

実行後

4
[ 'AAA', 100, 200, 300 ]
6
[ 'BBB', 'CCC', 'AAA', 100, 200, 300 ]

##.pop()メソッド

.pop()は配列から最後の要素を取り除き、その取り除いた要素を返すメソッド。

pop
const arr = [100,200]

console.log(arr.pop())//配列の最後の要素200が返される
console.log(arr)//配列の最後の要素を削除したため、現在ある要素は[100]

console.log(arr.pop())//配列の最後の要素100が返される
console.log(arr);//配列の最後の要素を削除したため、配列の中身は空

console.log(arr.pop())//削除する要素がないためundefinedになる

実行結果

200
[ 100 ]
100
[]
undefined

##.push()メソッド

配列の最後に 1 つ以上の要素を追加し、追加後の配列の要素数を返すメソッド。

const arr = [100,200,300]

console.log(arr.push('AAA'))//配列の最後に'AAA'が追加される
console.log(arr)//追加後の配列の要素数を返す

console.log(arr.push('BBB','CCC'))//複数追加の場合、記載順に追加される
console.log(arr)//追加後の配列の要素数を返す

実行結果

4
[ 100, 200, 300, 'AAA' ]
6
[ 100, 200, 300, 'AAA', 'BBB', 'CCC' ]
1
0
0

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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?