配列の操作をまとめました。
間違いがあったらご指摘いただけると嬉しいです。
###使用する配列
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 ]
第一引数、どこから。第二引数(省略可能)、どこまで(指定した場所のひとつ前)。
以上！