JavaScriptに関するお知らせ

SINCE2019
>
【Python】【JS】Pythonのスター演算子とJSのスプレッド演算子でクールに配列追加

【Python】【JS】Pythonのスター演算子とJSのスプレッド演算子でクールに配列追加


こんにちは!今日はPythonのスター演算子とJavaScriptのスプレッド演算子を使った配列操作について書いていきます。

スター演算子(*)とスプレッド演算子(...)とは

どちらもほぼ一緒。配列をバラバラにする演算子です。

...というと分かりにくいので、Pythonを例にするとこんな感じ。

arr = [0, 1, 2]

print(arr) # [0, 1, 2]
print(* arr) # 0, 1, 2

スターをつけることで、配列の数字がバラバラになりました。**1つの数列[0, 1, 2]**だったのが、3つの数字0, 1, 2にバラされた感じですね!

ちなみにバラバラにした数字をもう一回配列にもできます。こんな感じに...

arr = [0, 1, 2]

print(arr) # [0, 1, 2]
print(* arr) # 0, 1, 2
print([* arr]) # [0, 1, 2]
print(* [* arr]) # 0, 1, 2
print([* [* arr]]) # [0, 1, 2]
print(* [* [* arr]]) # 0, 1, 2

JSのスプレッド演算子でもできます:)

ただし、JSのconsoleは引数が1つしか取れません。

const arr = [0, 1, 2]

console.dir(arr) // [0, 1, 2]
console.dir([...arr]) // [0, 1, 2]
console.dir([...[...arr]]) // [0, 1, 2]

PythonとJSで普通に配列追加

配列[0,1,2]に0を足して[0,1,2,0]にします。フリーダイヤル。

pythonならシンプルにこう。

arr = [0, 1, 2]
arr.append(0)

print(arr) # [0, 1, 2, 0]

JSでもほぼ同じです。

let arr = [0, 1, 2]
arr.push(0)

console.dir(arr) // [0, 1, 2, 0]

ただ、appendやpushは破壊的変更を伴います。できれば避けたいところ...

その上appendもpushも式ではなく文なので記述量が増えてまいます。

PythonとJSでクールに配列追加

本題。スター演算子とスプレッド演算子を使ってクールに配列追加しましょう。まずはpythonから

arr = [0, 1, 2]

print([* arr, 0]) # [0, 1, 2, 0]

そしてJS

const arr = [0, 1, 2]

console.dir([...arr, 0]) // [0, 1, 2, 0]

最高

使い所

正直めちゃくちゃ使えると思います。スプレッド演算子はともかく、スター演算子が殆ど使われないの不思議。

みんなも配列、拡散してみてくれよな!



PREV
2019-04-09
【JS】reduceの使い方と破壊力-2.reduce=filter+map

NEXT
2019-04-22
【JS】HTMLCollectionをループ処理可能にする