MENU

アイデアを形にする( プログラミング / クラウド / フレームワーク / ライブラリ / デザイン / IT豆知識 )

わくわくBank

わくわくBank

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

2018/09/012024/03/23

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

目次

length｜要素数取得

配列

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

console.log(arr.length)

連想配列

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

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

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｜連想配列のコピー

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

あわせて読みたい

オブジェクトのコピー・マージ(shallow copy, deep copy) オブジェクトのコピー、マージについて取り上げます。「shallow copy」「deep copy」などの違いを意識して実装する必要があります。

要素変更

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)
})

詳しい使い方を確認 →

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

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)

詳しい使い方を確認 →

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)

詳しい使い方を確認 →

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

詳しい使い方を確認 →

よかったらシェアしてね！