質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

587閲覧

Object.keys(that).forEachの描画で起こった問題点

MOTOMUR

総合スコア195

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/03/15 14:40

編集2018/03/16 04:12

連想配列の描画の管理についてつまずいたので、質問させてください。

普段、配列をrender内で扱う時、this.state.object.map(()=>{return()})
のように扱うのですが、連想配列がこれでは許されません。

Object.key(this.state.object).forEach((key)=>{return()})

として、return内で

this.state.object[key]

として描画可能ということを調べて記述しました。

現在描画段階でつまずいており、function内でのconsole.log()で、forEachは成功していることが判明。

renderの再描画の判定はこれだと間に合わないのでしょうか?
(object.keyを挟まない時はうまく行くのでこのように考えました。)

それとも別の要因でしょうか?

うまくいかないコードです。

js

1 2{ 3 Object.keys(this.state.subjects).forEach( 4 key => { 5 return( 6 <ListItem> 7 <Text>a {this.state.subjects[key].subject}</Text> 8 </ListItem> 9 ) 10 } 11 ) 12}

key内のstateの表示はできていたのに、内部に作成できないのは何が原因でしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

const forEachResult = [1,2,3].forEach(v => v) console.log(forEachResult) //undefined const mapResult = [1,2,3].map(v => v) console.log(mapResult) // [1, 2, 3]

Array.prototype.forEach
Array.prototype.forEachの戻り値はundefinedですよ。

それに対して、Array.prototype.mapの戻り値は配列です。

投稿2018/03/16 06:04

HayatoKamono

総合スコア2415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MOTOMUR

2018/03/16 10:05

詳しい説明ありがとうございます。なるほど、そのような違いがあったのですね。
guest

0

ベストアンサー

forEachとmapに関してざっと解説します。
まず、このforEachやmapのようなコールバック関数を一つ引数として受け取り、
配列の中身を1個ずつ抜き出してコールバック関数で適用していくのを指して、「リスト操作」と呼びます。

  • forEach: 処理を行い、戻り値は不要なので捨てる(例えばconsole.logで表示するだけとか、Ajax通信を発射するだけとかに使う)
  • map: コールバック関数を適用した結果の戻り値を利用して、新しい配列を作り直す

やってる事自体はmapはforEachの上位互換と呼べるかも知れません。
ですが、mapは地図の他に、工場のライン生産で大量の商品を一気にプレス加工で作り出すという意味があります。

処理に特化したforEach、これはmapとの違いは戻り値を捨てるだけの違いしかありませんが、
コードリーディング時に「これは処理だから戻り値を捨てるんだ」という宣言にもなりますので確実に使い分けて下さい。

投稿2018/03/16 10:15

miyabi-sun

総合スコア21168

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MOTOMUR

2018/03/16 14:08

ありがとうございます。今後気を付けてコーディングをしようと思います。
guest

0

Array.forEachではなくArray.mapを利用してはどうでしょうか?

投稿2018/03/16 04:52

k.tada

総合スコア1679

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MOTOMUR

2018/03/16 05:27

mapだと表示されました。。。 なぜforEachだとうまくいかなかったのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問