はじめに
コジマです。
JavaScriptでmapを使うときに、条件を満たすものだけの配列を作りたいときにcontinueできたらなーと思って
こんなコード書くとあれ？ってなります。
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 偶数だけの配列が欲しい
const arr2 = arr.map(e => {
if(e % 2 !== 0){
// 奇数は即return(continueぽくしたつもり)
return
}
return e
})
// [2, 4, 6, 8]になるといいな。。。
console.log(arr2)
実際の結果
Array [undefined, 2, undefined, 4, undefined, 6, undefined, 8, undefined]
余談ですが、
mapやforeachのようなcallback関数を渡すものはcontinueの代わりにreturnを使います。
mapはcallbackの戻り値で配列を再構築する関数です。
returnでなにも返さないとcontinueのようにスキップするのではなく、undefinedを返してしまいます。
そのため、undefinedを省くためのもうひと手間が要ります。
そのためにfilterを使います。
filter追加した版
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 偶数だけの配列が欲しい
const arr2 = arr.map(e => {
if(e % 2 !== 0){
// 奇数は即return(continueぽくしたつもり)
return
}
return e
}).filter(e => e)
console.log(arr2)
実行結果
> Array [2, 4, 6, 8]
filter(e => e)を追加することで、各要素が真となるもののみでfilterします。
その結果、undefinedはfalseとなるため、undefinedを除く[2, 4, 6, 8]だけが取得できました。
簡単に済ませたい場合はこの方法でよいでしょう。
しかし、0などのJavaScriptがデフォルトでfalseとみなす値を使用する場合は注意しましょう。
undefinedはいらないが、0は欲しいという場合は上のサンプルは機能しません。
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] // 0 を追加した
// 偶数だけの配列が欲しい
const arr2 = arr.map(e => {
if(e % 2 !== 0){
// 奇数は即return(continueぽくしたつもり)
return
}
return e
}).filter(e => e)
console.log(arr2)
実行結果
> Array [2, 4, 6, 8]
これを解決する一例としてtypeofを使うパターンを紹介します。
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] // 0 を追加した
// 偶数だけの配列が欲しい
const arr2 = arr.map(e => {
if(e % 2 !== 0){
// 奇数は即return(continueぽくしたつもり)
return
}
return e
}).filter(e => typeof e !== 'undefined') // 型がundefinedでないものだけ取る
console.log(arr2)
実行結果
> Array [0, 2, 4, 6, 8]
さいごに
途中話したデフォルトでfalse～～みたいな話は以下の記事にも書いてます。
【JavaScript】0と1を真偽値として使う場合は型に注意する
この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！
もっと学びたい人はこちら
JavaScriptをもっと学びたいエンジニアのためにおすすめのUdemy講座を紹介いたします！
JavaScript初心者向けの講座です。
HTML、CSSと合わせて学ぶことができます。
フロントエンド開発の基本的な知識を網羅的に学ぶことができます。
個人的には著作権表記についても触れているところが推せますね。
ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！
JavaScriptをより深く学びたい人はこちらがおすすめです。
JavaScript初心者を脱するとよりよいコードを書かなければなりません。
つまずきがちなオブジェクト操作や、非同期処理の仕組みについて学ぶこともできるため、JavaScriptの仕組みから深く学ぶことができます。
【JS】ガチで学びたい人のためのJavaScriptメカニズム
気になった人はぜひ見てみてくださいね！
以上、コジマでした。
