JavaScript~配列の操作~その１ #JavaScript

配列の操作をまとめました。
間違いがあったらご指摘いただけると嬉しいです。

使用する配列


const array1 = [1, 2, 3, 4, 5]
const array2 = [6, 7, 8, 9, 10]

※別の配列を使う場合はコード内に記載。

破壊的メソッド(元の配列を変更する)

push (末尾に追加)

const result = array1.push(6)//戻り値は配列の長さ
console.log(result) //6
console.log(array1) //[ 1, 2, 3, 4, 5, 6 ]

array1.push(array2)
console.log(result) //6
console.log(array1) //[ 1, 2, 3, 4, 5, [ 6, 7, 8, 9, 10 ] ]

unshift (先頭に追加)

const result = array1.unshift(0) //戻り値は配列の長さ
console.log(result) //6
console.log(array1) //[ 0, 1, 2, 3, 4, 5 ]


array1.unshift(array2)
console.log(result) //6
console.log(array1) //[ [ 6, 7, 8, 9, 10 ], 1, 2, 3, 4, 5 ]

pop (末尾を削除)

const result = array1.pop()//戻り値は削除した値
console.log(result)//5
console.log(array1)//[ 1, 2, 3, 4 ]

shift (先頭を削除)

const result = array1.shift()//戻り値は削除した値
console.log(result)//1
console.log(array1)//[ 2, 3, 4, 5 ]

splice (値の追加や削除)

const result1 = array1.splice(1, 2)//戻り値は削除した値
console.log(result1)//[ 2, 3 ]
console.log(array1)//[ 1, 4, 5 ]

const result2 = array1.splice(1, 2, "Hello", "Bye")
console.log(result2)//[ 2, 3 ]
console.log(array1)//[ 1, 'Hello', 'Bye', 4, 5 ]

第一引数、どこから。第二引数、削除する数。第三引数以降、追加する値。

copyWithin

const result1 = array1.copyWithin(1, 3)//[1]の(2)の場所に、[3]からの(4，5)をコピー
console.log(result1) //[1, 4, 5, 4, 5]
console.log(array1) //[1, 4, 5, 4, 5]

const result2 = array2.copyWithin(1, 2, 4)//[1]の(7)の場所に、[2]から[4]までの(8, 9)をコピー
console.log(result2) //[6, 8, 9, 9, 10 ]
console.log(array2) //[6, 8, 9, 9, 10 ]

第一引数、どこに。第二引数、どこから。第三引数(省略可能)、どこまで。

reverse (逆転)

const result = array1.reverse()
console.log(result) //[ 5, 4, 3, 2, 1 ]
console.log(array1) //[ 5, 4, 3, 2, 1 ]

sort (並び替え)

const array = [3, 5, 2, 1, 4]
const result = array.sort()
console.log(result)
console.log(array)

const users = [ {name: "J", age: 40}, {name: "A", age: 29}, {name: "M", age: 13}, {name: "T", age: 65}, {name: "B", age: 88}]
users.sort((a, b) => a.age - b.age)//ageで昇順
console.log(users)
/*[
    { name: 'M', age: 13 },
    { name: 'A', age: 29 },
    { name: 'J', age: 40 },
    { name: 'T', age: 65 },
    { name: 'B', age: 88 }
 ] */
users.sort((a, b) => b.age - a.age)//a,bを入れ替えると降順
console.log(users)
/*[
    { name: 'B', age: 88 },
    { name: 'T', age: 65 },
    { name: 'J', age: 40 },
    { name: 'A', age: 29 },
    { name: 'M', age: 13 }
  ]*/

nameでのソート

users.sort((a, b) => {
  if (a.name > b.name) {
    return 1
  } else {
    return -1
  }
})
console.log(users)
/*[
    { name: 'A', age: 29 },
    { name: 'B', age: 88 },
    { name: 'J', age: 40 },
    { name: 'M', age: 13 },
    { name: 'T', age: 65 }
 ]*/

fill (特定の値で埋める)

const array = new Array(10).fill(1)
console.log(array)
array.fill("a", 2)//[2]から"a"にする
console.log(array)//[ 1, 1, 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a' ]
array.fill("b", 3, 7)//[3]から[7]の前までを"b"にする
console.log(array) //[ 1, 1, 'a', 'b', 'b', 'b', 'b', 'a', 'a', 'a' ]

第一引数、入れる値。第二引数、どこから。第三引数、どこまで。

非破壊的メソッド(新しい配列を返す)

concat (配列の結合)

const result = array1.concat(array2)
console.log(array1)//[ 1, 2, 3, 4, 5 ]
console.log(result)//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

基本的には下で紹介する、スプレッド演算子を使用

... スプレッド演算子 (配列の展開)

const result1 = [...array1, ...array2]
console.log(result1)//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
const result2 = [ 0, ...result1, 11]
console.log(result2)//[ 0, 1, 2, 3, 4, 5, 6, 7,  8, 9, 10, 11 ]
console.log(array1)//[ 1, 2, 3, 4, 5 ]
console.log(array2)//[ 6, 7, 8, 9, 10 ]

配列に対して...を使う事で展開できる。

slice (部分配列)

const result1 = array1.slice(2)//第二引数を指定しなかった場合は指定した場所からの全ての値
const result2 = array1.slice(1, 4)//[1]から[4]まで
const result3 = array1.slice(-3, -1)//-を使うと最後からになる
console.log(result1)//[ 3, 4, 5 ]
console.log(result2)//[ 2, 3, 4 ]
console.log(result3)//[ 3, 4 ]
console.log(array1)//[ 1, 2, 3, 4, 5 ]

第一引数、どこから。第二引数(省略可能)、どこまで(指定した場所のひとつ前)。

以上！