👸 🕥 👑 ECMAScriptの提案：Array.prototype。{Flat、flatMap} 🎪 📏 💝

ECMAScriptの革新

読者の皆さん、こんにちは。私はあなたの注意に興味深いものをもたらします ~~すぐに表示されます~~ ECMAScript標準にすでに登場しています。すでに利用可能です。ほぼすべてのブラウザとすべての機能でも。このイノベーションは単なるシュガーラッパーであり、独自の手段で解決できます。これも紹介します。しかし、この砂糖は私たちがそれをとても愛しているので、より少ないコードを書くことができます。したがって、基本的な関数が配列に追加されます。この場合は2つあり、マルチレベル配列を1つ以上のネストレベルに拡張できます。はい、はい、これらはすべて箱から出して言うように

ECMAScriptの提案：Array.prototype。{Flat、flatMap}

この提案はかつてArray.prototype.flat {ten、Map}として知られていました 。 ステージステータスがあります。 3 TC39の 4、つまり既に ~~候補者~~ 完成した 少し注意をそらす価値があると思うので、このTC39について、そしてこのリトリートをスキップできる精通した標準について話してください。だから：

JavaScript標準とその準備方法。

ECMAScript

ECMAScriptは、 ECMA Internationalによって開発および保守されている標準です。 1997年6月にEcma総会で採用されました。具体的には、 ECMAScriptはECMAScript言語仕様と呼ばれるECMA-262標準です。この標準は、NetscapeのBrendan Aichの元のJavaScriptバージョンとMicrosoft JScriptインタープリターに基づいて作成されましたが、その後大幅に開発されました。

JavaScriptはECMAScript仕様の実装です。これは、仕様に新しいドラフトまたは公開されたエディションがあるため、ブラウザおよびNode.jsなどのフレームワークの開発者は一貫して新しい機能を実装する必要があることを意味します。これを行うには、これらのブラウザーとフレームワークがJavaScriptコードの解釈と実行に使用するエンジンに変更が加えられます。

なぜ仕様が必要なのですか？ブラウザごとに異なるJavaScriptエンジンを使用します。たとえば、ChromeのV8、FirefoxのSpiderMonkeyなどです。 JavaScriptで記述する場合、すべての環境のすべてのエンジンがコードをまったく同じように解析して実行することを期待します。標準化された仕様がなければ、これらのエンジンのどれでも好きなようにJavaScriptを自由に実行できますが、明らかにこれはあまり良くありません。

TC39

Ecma International Technical Committee 39 （別名TC39）は非常に頭の良い人たちの委員会で、参加者のグループに関連付けられています。彼らは全員、およそ2か月ごとに委員会の会議に集まり、事前に準備された問題のリストについて話し合います。

TC39の目的は、議論と普遍的な合意の後、前述のECMAScript仕様を維持および更新することです。これには、言語の構文、セマンティクス、ライブラリ、および言語の基になる関連テクノロジーが含まれます。

このプロセスはTC39によって定義されています。それはすべて、仕様を拡張または変更する機能のドラフトから始まります。このようなドラフトは、多くの場合、開発者コミュニティまたはTC39メンバー自身からのものです。提案が価値がある場合、ドラフトは公式提案のステータスを取得します。

次に、アイデアから出版までの途中で、提案はいくつかの特定の段階を経ます。ゼロから4人の男性プログラマーに番号が付けられています。

[“Strawman”, “Proposal”, “Draft”, “Candidat”, “Finished”]

次の段階に進むには、TC39の承認が必要です。提案がステージ4に達した場合、ECMA-262規格の仕様の次の公式公開版に含まれることが予想され、その結果、JavaScriptを実行する環境に表示されます。このプロセスの詳細については、ドキュメント自体から学ぶことができます。

標準の導入に関する既存の提案はすべて、GitHubでここにあります。

それでは、さらに先に進みましょう...

Array.prototype.flat

flat（）メソッドは新しい配列を返し、

 var newArray = arr.flat(depth);

配列の下にネストされたすべての要素が、指定された深さレベルまで再帰的に「発生」しました。

例：

 const arr1 = [1, 2, [3, 4]]; arr1.flat(); //? [1, 2, 3, 4] const arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); //? [1, 2, 3, 4, [5, 6]] const arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); //? [1, 2, 3, 4, 5, 6]

副作用もあり、未定義の配列要素を削除します

例：

 const arr4 = [1, 2, , 4, 5]; arr4.flat(); //? [1, 2, 4, 5]

見出しは自分でやる

reduceとconcatを使用します

例：

 const arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; function flattenDeep(arr1) { return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []); } flattenDeep(arr1); //? [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

Array.prototype.flatMap

flatMap（）メソッドは最初に各要素に関数を適用し、次に結果をフラットな構造に変換して新しい配列に配置します。これはmap関数と同じで、その後にdepthパラメーターが1のflat関数を使用しますが、flatMapはもう少し効率的に機能するため、しばしば役立ちます。

 var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) { // return element for new_array }[, thisArg])

callback

-新しい配列の要素を生成する関数は、3つの引数を取ります。

currentValue

処理する配列の現在の要素。
index

（オプション）-配列内で処理するアイテムのインデックス。
array

（オプション）-トラバースする配列。

thisArg

（オプション）-コールバック関数を呼び出すときにこれとして使用される値。

戻り値-新しい配列。各要素はコールバック関数の結果であり、レベル1に「上げられ」ます。

例：

 [ { x: 1, y: 2 }, { x: 3, y: 4 }, { x: 5, y: 6 } ].flatMap(c => [cx, cy]) //? [1, 2, 3, 4, 5, 6] // or const orders = [ { orderId: 42, items: [ {name: 'soap', price: 1.99}, {name: 'shampoo', price: 4.99} ] }, { orderId: 1337, items: [ {name: 'toothpaste', price: 5.59}, {name: 'toothbrush', price: 8.99} ] } ]; orders.flatMap(i => i.items.map(i => i.name)); //? ["soap", "shampoo", "toothpaste", "toothbrush"]

見出しは自分でやる

 var arr1 = [1, 2, 3, 4]; arr1.reduce((acc, x) => acc.concat([x * 2]), []); // [2, 4, 6, 8]

おわりに

この機能は、理由により言語に追加されることに注意してください。 TC39の優秀な人々がこれを行う理由は、言語の品質、抽象化、使いやすさなどの向上です。これらのイノベーションを事前に研究し、それらが公式に公開され、至る所でサポートされるまでに、時間を無駄にすることなくすぐに仕事に取りかかることができます。組織内のJavaScriptエキスパートとして自分自身を位置づけ、コードと製品自体の両方を改善できる新しい言語機能を提供することもできます。

ps：記事の執筆中に:)、提案はステージ4に移動しました

Array.prototype.{flat,flatMap}

ステージ4

ECMAScriptの提案：Array.prototype。{Flat、flatMap}

ECMAScriptの革新