配列操作(追加, 削除, filter, map, reduceなど)

Javascriptで配列操作に必要な知識をまとめました。「要素数取得」「要素の追加・削除」「並び替え」といった基礎知識から「map」「reduce」「some」などのメソッドの使い方まで解説します。

目次

length|要素数取得

配列

const arr = [40, 30, 20, 10]

console.log(arr.length)
4

連想配列

オブジェクト( 連想配列 )の要素数を取得したい場合、以下のようにします。

Object.keys({}).length  // 0
Object.keys({'a': 123}).length  // 1

Object.keys()

includes|存在確認

const arr = [40, 30, 20, 10]

console.log(arr.includes(20))
console.log(arr.includes(50))
true
false

詳しい使い方を確認 →


IE11ではサポートされていません。利用したい場合、babel-polyfil を導入するなどの対応が必要です。

indexOf|位置確認 & 存在確認

const arr = [40, 30, 20, 10]

console.log(arr.indexOf(20))
console.log(arr.indexOf(50))

if (arr.indexOf(20) !== -1){
  console.log('存在します')
}

if (arr.indexOf(50) === -1){
  console.log('存在しません')
}
2
-1
"存在します"
"存在しません"

詳しい使い方を確認 →

join|結合

const arr = [40, 30, 20, 10]

console.log(arr.join())
console.log(arr.join('-'))
"40,30,20,10"
"40-30-20-10"

詳しい使い方を確認 →

slice|配列のコピー生成

コピーなので、arr2 に要素を追加しても arr1 に変化はありません。

const arr1 = [40, 30, 20, 10]
const arr2 = arr1.slice()
arr2.push(70)
console.log(arr1)
console.log(arr2)
[40, 30, 20, 10]
[40, 30, 20, 10, 70]

Object.assign|連想配列のコピー

連想配列(オブジェクト)のコピーについては、以下で取り上げています。

要素変更

unshift|先頭に追加
(破壊的)

const arr = [40, 30, 20, 10]

arr.unshift(1)
console.log(arr) // [1, 40, 30, 20, 10]

arr.unshift(3, 4)
console.log(arr)  // [3, 4, 1, 40, 30, 20, 10]

非破壊的にするには以下のようにします。

const arr = [40, 30, 20, 10]

const arr1 = [1, ...arr]
console.log(arr) // [40, 30, 20, 10]
console.log(arr1) // [1, 40, 30, 20, 10]

const arr2 = [...[3, 4], ...arr1]
console.log(arr)  // [40, 30, 20, 10]
console.log(arr1) // [1, 40, 30, 20, 10]
console.log(arr2) // [3, 4, 1, 40, 30, 20, 10]

詳しい使い方を確認 →

push|末尾に追加
(破壊的)

const arr = [40, 30, 20, 10]

arr.push(1)
console.log(arr)  // [40, 30, 20, 10, 1]

arr.push(3, 4)
console.log(arr)  // [40, 30, 20, 10, 1, 3, 4]

非破壊的にするには以下のようにします。

const arr = [40, 30, 20, 10]

const arr1 = [...arr, 1]
console.log(arr)  // [40, 30, 20, 10]
console.log(arr1)  // [40, 30, 20, 10, 1]

const arr2 = [...arr1, ...[3, 4]]
console.log(arr)  // [40, 30, 20, 10]
console.log(arr1)  // [40, 30, 20, 10, 1]
console.log(arr2)  // [40, 30, 20, 10, 1, 3, 4]

詳しい使い方を確認 →

shift|先頭を削除
(破壊的)

const arr = [40, 30, 20, 10]

arr.shift()
console.log(arr)  // [30, 20, 10]

arr.shift()
console.log(arr)  // [20, 10]

非破壊的にするには以下のようにします。

const arr = [40, 30, 20, 10]

const arr1 = [...arr]
arr1.shift()
console.log(arr)  // [40, 30, 20, 10]
console.log(arr1) // [30, 20, 10]

const arr2 = [...arr1]
arr2.shift()
console.log(arr)  // [40, 30, 20, 10]
console.log(arr1) // [30, 20, 10]
console.log(arr2) // [20, 10]

詳しい使い方を確認 →

pop|末尾を削除
(破壊的)

const arr = [40, 30, 20, 10]

arr.pop()
console.log(arr)  // [40, 30, 20]

arr.pop()
console.log(arr)  // [40, 30]

非破壊的にするには以下のようにします。

const arr = [40, 30, 20, 10]

const arr1 = [...arr]
arr1.pop()
console.log(arr)  // [40, 30, 20, 10]
console.log(arr1) // [40, 30, 20]

const arr2 = [...arr1]
arr2.pop()
console.log(arr)  // [40, 30, 20, 10]
console.log(arr1) // [40, 30, 20]
console.log(arr2) // [40, 30]

詳しい使い方を確認 →

splice|位置指定して削除 and 追加
(破壊的)

const arr = [40, 30, 20, 10]

// 2番目の要素から2つ取り除く
arr.splice(1, 2)
console.log(arr)

// 2番目の要素から1つも取り除かず、60を追加
arr.splice(1, 0, 60)
console.log(arr)

// 2番目の要素から1つ取り除ぞいて、80, 90を追加
arr.splice(1, 1, 80, 90)
console.log(arr)
[40, 10]
[40, 60, 10]
[40, 80, 90, 10]

詳しい使い方を確認 →

concat|他の配列と結合

pushと違い、元の配列に変更(ミューテート)を加えません。

const arr = [40, 30, 20, 10]
const arr2 = [70, 50, 80]

console.log(arr.concat(arr2))
[40, 30, 20, 10, 70, 50, 80]

詳しい使い方を確認 →

slice|一部を抜粋して、配列生成

const arr = [40, 30, 20, 10]

// 2番目の要素から最後まで取り出す
console.log(arr.slice(1))

// 2番目の要素から3番目の要素まで取り出す
console.log(arr.slice(1, 3))

// 1番目の要素から2番目の要素まで取り出す
console.log(arr.slice(0, 2))
[30, 20, 10]
[30, 20]
[40, 30]

詳しい使い方を確認 →

fill|固定値で埋める
(破壊的)

console.log([4, 5, 1, 2].fill(100))
console.log([4, 5, 1, 2].fill(100, 1, 2))
console.log([4, 5, 1, 2].fill(100, 1, 3))
[100, 100, 100, 100]
[4, 100, 1, 2]
[4, 100, 100, 2]

詳しい使い方を確認 →

順序変更

reverse|逆順
(破壊的)

const arr = [40, 50, 20, 10]

console.log(arr.reverse())
[10, 20, 50, 40]

詳しい使い方を確認 →

sort|並び替え
(破壊的)

// 昇順
const arr = [40, 50, 10, 20]
console.log(arr.sort())  // [10, 20, 40, 50]

// 降順
const arr2 = [40, 50, 10, 20]
const compare = (x, y) => y - x
console.log(arr2.sort(compare))  // [50, 40, 20, 10]

非破壊的にするには以下のようにします。

// 昇順
const arr = [40, 50, 10, 20]
console.log([...arr].sort())  // [10, 20, 40, 50]
console.log(arr)			  // [40, 50, 10, 20]

// 降順
const arr2 = [40, 50, 10, 20]
const compare = (x, y) => y - x
console.log([...arr2].sort(compare))  // [50, 40, 20, 10]
console.log(arr2)				 	  // [40, 50, 10, 20]

詳しい使い方を確認 →

各要素に関数適用

foreach|ループ処理

const arr = [40, 50, 10, 20]
arr.forEach(elm => {
  console.log(elm)
})
40
50
10
20

詳しい使い方を確認 →

オブジェクトで利用したい場合

const obj = { 
  'name': 'yamada',  
  'old': 49
}

Object.keys(obj).forEach(key => {
  console.log(`key: ${key} value: ${obj[key]}`)
});
"key: name value: yamada"
"key: old value: 49"

map|新しい配列を生成

const arr = [40, 50, 10, 20]
const arr2 = arr.map(elm => {
  return elm * 2
})

console.log(arr)
console.log(arr2)
[40, 50, 10, 20]
[80, 100, 20, 40]

詳しい使い方を確認 →

reduce|1つの値を取得

const arr = [40, 50, 10, 20]
const initialValue = 100
const sum = arr.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
}, initialValue)

console.log(sum)
220

詳しい使い方を確認 →

filter|絞り込み(複数要素)

const arr = [40, 50, 10, 20]
const arr2 = arr.filter(elm => {
  return elm > 20
})

console.log(arr2)
[40, 50]

詳しい使い方を確認 →

find|絞り込み(1要素)

const arr = [40, 50, 10, 20]
const val = arr.find(elm => {
  return elm > 20
})

console.log(val)
40

詳しい使い方を確認 →

some|1つでもtrueであれば、true

const arr = [40, 50, 10, 20]

console.log(arr.some(elm => {
  return elm > 20
}))

console.log(arr.some(elm => {
  return elm > 60
}))
true
false

詳しい使い方を確認 →

every|すべてがtrueであれば、true

const arr = [40, 50, 10, 20]

console.log(arr.every(elm => {
  return elm > 20
}))

console.log(arr.every(elm => {
  return elm < 60
}))
false
true

詳しい使い方を確認 →

よかったらシェアしてね!
目次