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

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

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

foreachは、List・Collection・Arrayといったデータ構造の各要素に対して繰り返し処理を実行するために扱われる、制御構造の構文です。

JavaScript

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

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

Q&A

解決済

2回答

835閲覧

[JavaScript]forEachで配列に入ったオブジェクト操作

tamamo11

総合スコア7

foreach

foreachは、List・Collection・Arrayといったデータ構造の各要素に対して繰り返し処理を実行するために扱われる、制御構造の構文です。

JavaScript

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

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

0グッド

0クリップ

投稿2020/02/10 08:58

前提・実現したいこと

某チュートリアル中の疑問を解決したい

発生している問題・エラーメッセージ

配列の中のオブジェクトのusernameプロパティに"!"を全部つけるというのを
forEachを使って解けという問題です。

ソース1がお手本

ソースコードの機能はわかるんですが、ソース1の3行目
let { username }
の使い方がよくわからなくて、自分で書いたソース2との違いが上手くのみこめてません。

該当のソースコード

JavaScript

1// ソース1 2// arrayの中にオブジェクトが複数あってそれぞれusernameプロパティを持ってる 3 4let newArray = [] 5array.forEach(user => { 6 let { username } = user; 7 console.log(username); 8 username = username + "!"; 9 newArray.push(username); 10}) 11console.log(newArray); 12 13// ソース2(自分で書いたもの) 14let jibunArray = []; 15array.forEach(function(ele){ 16 jibunArray.push(ele.username = ele.username + "!"); 17}) 18console.log(m1Array); 19

試したこと

補足情報(FW/ツールのバージョンなど)

特になし

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

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

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

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

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

miyabi-sun

2020/02/10 09:11

forEachを配列に使う動機は処理なので、すなわち破壊的である事を要求しているように思えますが、 破壊・非破壊は課題の問題文に含まれていますか? そしてコードの「ソース1」というのは模範解答のコードでしょうか? 模範解答としてはforEachの用途として微妙な気がします。
tamamo11

2020/02/10 12:03

特に指定はありません。 ソース1はチュートリアルの模範解答です。 mapはこの問題の直後に同じ問題ででてきてるのでそんなに使用目的を考えたものではないと思います。
guest

回答2

0

ベストアンサー

そもそも問題文に対してこの結果は私が想定したものとは違いますが、
これが正解なのでしょうか?

js

1const array = [{username: "taro"}, {username: "jiro"}]; 2 3newArray = []; 4array.forEach(user => { 5 let { username } = user; 6 username = username + "!"; 7 newArray.push(username); 8}) 9 10console.log(newArray); 11// ["taro!", "jiro!"]

上記のコードは非破壊的なコードなので
非破壊で良いのであれば、下記のようにArray.mapを使うのが適切です。

授業の順序をコントロールする為にあえてforEachでやらせているだけなのでしょうか?

js

1const array = [{username: "taro"}, {username: "jiro"}]; 2const result = array.map(it => `${it.username}!`); 3 4console.log(result); 5// ["taro!", "jiro!"]

let { username }の使い方

オブジェクトの分割代入というテクニックです。
スプレッド構文やレスト構文と共にモダンなJavaScriptで採用された比較的新しいテクニックです。

これはlet username = user.username;と等価です。
威力で言うと2個以上の変数を一気に定義する時に使うと強力ですね。

js

1// この分割代入は 2let {username, age, score} = user; 3 4// この3行と等価!長くなっちゃう!! 5let username = user.username; 6let age = user.age; 7let score = user.score;

投稿2020/02/10 09:26

編集2020/02/10 09:31
miyabi-sun

総合スコア21158

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

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

0

分割代入ですね。
オブジェクトの分割代入 | 分割代入 - JavaScript | MDN

js

1let username = user.username;

とだいたい同義です。

投稿2020/02/10 09:07

編集2020/02/10 09:10
Lhankor_Mhy

総合スコア35865

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問