Blog Post

JavaScript ニッチ な Array メソッド 5 選


作成日 2023-02-20

目次

概要

JS 早見表 では JS のソースコード見ると、よく見かけるメソッドを紹介しました。
本記事では上記で取り上げられなかった 5 つのニッチなメソッドを紹介します。

at

index 番号を指して参照するメソッドです。

> [1,2,3,4,5].at(0)
1
> [1,2,3,4,5].at(1)
2
> [1,2,3,4,5].at(-1)
5

従来だと、最後の要素を取り出すのに length メソッドを使うケースがあると思いますが、上記使うと綺麗になります。

> const arr = [1,2,3,4,5]
> arr[arr.length - 1]
5
> arr.at(-1)
5

copyWithin

配列内の要素をコピーするメソッドです。 シャローコピーです。

以下メソッドの説明です。target は インデックスです。

copyWithin(target) // 既存の配列をコピーし、 target の位置からおきます。
copyWithin(target, start) // start から配列をコピーし、 target の位置からおきます。
copyWithin(target, start, end) // start から end まで配列をコピーし、 target の位置からおきます。

元の配列は変わります。
-1 等の -インデックスも使えます。

> const array1 = [1,2,3,4,5];
> array1.copyWithin(0, 3, 4);
[4,2,3,4,5]
> array1.copyWithin(1, 3);
[4,4,5,4,5]
> const array2 = [1,2,3,4,5]
> array2.copyWithin(-2, -3, -1);
[1,2,3,3,4]

flat

配列の中にある N 次配列を、1つの配列に展開するメソッドです。 元の配列は変わりません。

> const arr = [1,2,3,[[4,5]],[5,6]]
> arr.flat(1)
[1,2,3,[4,5],5,6]
> arr.flat(2)
[1,2,3,4,5,5,6]
> arr.flat(0) // 何も出ない
[1,2,3,[[4,5]],[5,6]]

unshift

0 番目のインデックスから値を入力するメソッドです。 元の配列は変わります。

> const arr = [4,5,6];
> arr.unshift(3)
4
> arr.unshift(0,1,2)
7
> arr
[0,1,2,3,4,5,6]

fill

同じ値を入力するメソッドです。 元の配列は変わります。

fill(value) // 全要素に value を入力します。
fill(value, start) // start の要素から最後の要素まで value を入力します。
fill(value, start, end) // start の要素から end の要素まで value を入力します。
> const array1 = [1,2,3,4]
> array1.fill(0,2,4)
[1,2,0,0]
> array1.fill(4,1)
[1,4,4,4]
> array1.fill(6);
[6,6,6,6]

まとめ

本記事では array であまり知られていないけど便利なメソッドをいくつか紹介しました。
今後、ご活用いただけると嬉しいです。

参考文献

https://developer.mozilla.org/ Array