私の応答は、ここで最も高い評価された応答に主に基づいています。うまくいけば、誰もが理解します(私のGitHubでも同じ説明があります)。これが、彼の地図への取り組みが機能する理由です。
Object.keys(images).map((key) => images[key] = 'url(' + '"' + images[key] + '"' +
')');
この関数の目的は、オブジェクトを取得し、配列を返さずにすべてのオブジェクト(オブジェクトと配列)で使用できるメソッドを使用して、オブジェクトの元の内容を変更することです。JS内のほとんどすべてがオブジェクトであり、そのため、継承のパイプラインのさらに下の要素は、技術的に使用可能なもの(およびその逆)を技術的に使用できます。
これが機能する理由は、既存のオブジェクトを単に変更する代わりに、配列の明示的または暗黙的なRETURNを提供するREQUIRING配列を返す.map関数が原因です。基本的にプログラムをだまして、オブジェクトが配列であると考えるようにします。これにより、個々のキーが関連付けられている値に作用するマップ関数を使用できるようになります(実際には誤って配列を返しましたが、修正しました)。通常の意味での戻りがない限り、元のオブジェクトをそのまま使用して作成され、プログラムどおりに変更された配列はありません。
この特定のプログラムは、イメージと呼ばれるオブジェクトを取得し、そのキーの値を取得して、別の関数内で使用するためにurlタグを追加します。オリジナルはこれです:
var images = {
snow: 'https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305',
sunny: 'http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-east-
Matanzas-city- Cuba-20170131-1080.jpg',
rain: 'https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg' };
...そして変更されたのはこれです:
var images = {
snow: url('https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305'),
sunny: url('http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-
east-Matanzas-city- Cuba-20170131-1080.jpg'),
rain: url('https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg')
};
オブジェクトの元の構造はそのまま残り、戻り値がない限り、通常のプロパティアクセスが可能です。通常のように配列を返さないでください。すべて問題ありません。目標は、元の値(images [key])を必要なものに再割り当てし、それ以外のものには再割り当てしないことです。私が知る限り、配列の出力を防ぐために、イメージ[キー]の再割り当てが必要であり、配列を返す暗黙的または明示的な要求はありません(変数の割り当てでこれが行われ、問題が発生していました)。
編集:
元のオブジェクトの変更を回避するために、新しいオブジェクトの作成に関する彼の他の方法に対処する予定です(そして、誤って配列を出力として作成するのを回避するために、再割り当てが依然として必要であるようです)。これらの関数は矢印構文を使用し、将来使用するために新しいオブジェクトを作成したいだけの場合に使用します。
const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
result[key] = mapFn(obj)[key];
return result;
}, {});
var newImages = mapper(images, (value) => value);
これらの関数の動作方法は次のとおりです。
mapFnは、後で追加される関数(この場合(値)=>値)を取り、そこに格納されているものをそのキーの値として返すか、またはmapFn( obj)[key]、
次に、result [key] = mapFn(obj)[key]のキーに関連付けられた元の値を再定義します
そして、結果に対して実行された操作を返します(.reduce関数の最後にある括弧内にあるアキュムレータ)。
これはすべて、選択したオブジェクトに対して実行されており、返された配列に対する暗黙の要求はまだありません。私が知る限り、値を再割り当てする場合にのみ機能します。これには、いくつかの頭の体操が必要ですが、上記のように必要なコード行が減ります。出力は次のようにまったく同じです。
{snow: "https://www.trbimg.com/img-5aa059f5/turbine/bs-
md-weather-20180305", sunny: "http://www.cubaweather.org/images/weather-
photos/l…morning-east-Matanzas-city-Cuba-20170131-1080.jpg", rain:
"https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg"}
これはNON-NUMBERSで機能することを覚えておいてください。mapFN関数で値を単純に返すことで、任意のオブジェクトを複製できます。
Object.keys
していますが、これには明確な順序はありません。これは問題になる可能性があるので、Object.getOwnPropertyNames
代わりに使用することをお勧めします。