明示的なJavaScript機能

JavaScript言語のあまり知られていない機能についての次の記事を読んで、ブラウザコンソールでいくつかの非常識なソリューションを静かにおしっこするとき、私はよく頭の中で言っています。 結局のところ、この言語は長い間巨大なコミュニティを獲得し、産業開発の驚くほど広い範囲をカバーしています。 もしそうなら、なぜ私たちは彼がすべての人に理解され、これらすべての具体的で「記憶に残る」構造を文字通り宣伝する能力をしばしば忘れるのでしょうか？ はっきりさせてください！

トピックに関する推論

このグラフォマニアはスキップできます。

産業開発について話す場合、ほとんどの場合、サポートされるコードの要件は、ビジネスによって設定されたタスクを解決することよりもさらに重要です。 多くの人にとって、これは一部の人にとっては明らかです-一部（もちろん、まれなダルタニャンも見つかります）。 コードがわかりやすいほど、コードのリスク（ほこりだらけの棚に置かれ、私たちと後継者）が神経系に問題を起こすリスクが少なくなります。

JavaScriptの柔軟性が驚くべきことであり、それが最大の美徳であると同時に厄介な呪いでもあります。 JavaScript開発者の道は長く、非常に興味深いものです。書籍ごと、記事ごとに吸収し、ユニークな経験を積むことができますが、時にはそれは本当に言語固有のものです。 言語の最も広い分布と、同時に多くの蓄積され、与えられた非自明性は、この言語をほとんど偶像化する人々と、それを不器用で揺れる権利のカモと見なす人々の2つの前線の形成に貢献します。

そして、すべてがうまくいきますが、多くの場合、両方の分野の代表者が同じプロジェクトに取り組んでいます。 そして、通常、受け入れられているすべての慣行は、互いのコードを誤解（理解することを望まず、無視することさえする）です。 そして実際、 「私はJava開発者になりましたが、あなたのものではありません！」 。 JavaScriptのフォロワー自身が、 「JavaScriptを実際に誰も知らない！」と言って、火に燃料を追加します。 はい「jsで1行で記述できます！」 。 私は自分が余暇に異常なプログラミングを乱用していると告白します...

限界の代わりになり、バリケードの両側で人々とそのコードを操作した経験を積むと、この問題を感じ始めます。 すべての開発者が相互に理解し合えば、ビジネスラインのレベルだけでなく、実装のレベルでも少なくとも少しは、計画やその他の会議の生産性が高まります。 悪名高い低音要因はプロジェクトにあまり影響を与えません。1人のフロントエンダーの病気が発生した場合、チームの他のメンバーは.jsファイルの一部の行を修正することを軽disしません。 全員がより詳細な画像を持っている場合、チーム内およびそれ以降で知識を共有するプロセスは、全員にとってより透明になります。 まあ、すべて同じように。

「フルグラス」や「Tシェイプ」（今の言い方を教えてください）を誰かに勧めるわけではありませんが、JavaScriptコミュニティからだけであるとしても、このカーテンを少し上げてみませんか？ これを行うには、コードを少しわかりやすくするだけで十分です。言語の柔軟性を活用して、見せびらかさないで理解してください。

成長し責任を負う

JavaScriptは、インターネットページの対話性とリソースの「接着」のための言語としてではなく、完全なクロスプラットフォームで非常にスケーラブルなアプリケーションを作成するための強力で十分なツールとして、その役割を長い間認識しています。

もともとWebデザイナー向けに設計されたこの「最も誤解されたプログラミング言語」は、急速に人気と関連性が高まっているにもかかわらず、長い間水を踏み続けてきました。 ECMAScript 5.1のエディションに先行する13〜14年間、標準のいくつかの重要な変更を思い出すこと、またはその開発のベクトルを理解することは困難です。 当時、コミュニティは言語のエコシステムの形成に多大な貢献をしました：プロトタイプ、jQuery、MooToolsなど。 開発者からこのフィードバックを受け取った後、JavaScriptはバグに対して重要な作業を行いました。2015年のES6の大規模な6年間のリリースと、現在EC39Scriptの年次リリースは、TC39委員会が仕様に新機能を導入するプロセスを再設計したおかげです。

さて、アプリケーションが十分に大きくなったとき、ユーザータイプを記述するためのプロトタイプOOPモデルは、通常とは異なるアプローチのために正当化されなくなりました。 まあ真剣に、それは何ですか？

function Animal() { /* Call me via new and I will be the constructor ;) */ } function Rabbit() {} Rabbit.prototype = Object.create(Animal.prototype); Rabbit.prototype.constructor = Rabbit;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クラスは言語には表示されませんでしたが、構文は表示されました。 そして、コードは伝統的なクラス指向のパラダイムの支持者に利用可能になりました：

 class Animal { constructor() { /* Obviously, the constructor is here! */ } } class Rabbit extends Animal {}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現在、リリースの候補の段階では、クラスのプライベートフィールドがあります。 アンダースコアで私有財産を命名することで合意することで、遅かれ早かれお互いの笑い声が止まるとは信じられません。

同時に、関数が1次オブジェクトであり、一定の偶然性がある言語では、非常に一般的です。

 let that = this; setTimeout(function() { that.n += 1; }, 1000);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、ここでこのコンテキストとJavaScriptの閉鎖についての説明が始まります。これは、外部の開発者1人おきを怖がらせます。 しかし、多くの場合、この言語はFunction.prototype.bindなどを明示的に使用することで、不必要な驚きを回避します。

 setTimeout(() => this.n += 1, 1000);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、矢印関数も取得しましたが、これらは実際には関数であり、機能的なインターフェイスではありません（はい、Java？）。 配列を操作するためのメソッドの拡張セットと一緒に、通常の宣言的なペイライン計算を記述するのにも役立ちます。

 [-1, 2, -3, 4] .filter(x => x > 0) .map(x => Math.pow(2, x)) .reduce((s, x) => s + x, 0);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

言語はそれ自体がマルチパラダイム的であると正しく考えています。 しかし、いくつかの関数のシグネチャに関する簡単な例を次に示します。

 function ping(host, count) { count = count || 5; /* send ping to host count times */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初に、通りかかった人は、おそらく関数は最初の引数しか受け取れないという質問をし、次にこの場合のカウントはブール値になります！？ 実際、この関数には2つの用途があります 。 カウントありとカウントなしです。 しかし、これは完全に自明ではありません。実装を見て理解する必要があります。 JSDocを使用すると役立つ場合がありますが、これは一般的な方法ではありません。 そして、ここではJavaScriptが前進し、オーバーロードではなく、少なくともデフォルトパラメータのサポートが追加されました。

 function ping(host, count = 5) { /* ... */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

要約すると、JavaScriptには、ジェネレーター、イテレーター、 セットコレクションとマップディクショナリー、型付き配列、さらには正規表現でさえ、 後読みサポートで満足できるものがたくさんありました 。 この言語は、多くのことに適し、すべての人に親しくなるためにすべてを行います。

明白なものへの好ましい道

言語自体は確かによくできており、それについて議論するのは難しいです！ しかし、何が悪いのでしょうか？ JavaScriptがどういうわけか異なることを世界中に常に思い出させるのはなぜですか？ 広く使用されているいくつかの手法の例を見て、それらの適切性について尋ねましょう。

タイプキャスト

はい。JavaScriptには動的で弱い型システムがあり、あらゆるものに対して操作を実行でき、暗黙的に変換を実行できます。 しかし、多くの場合、明示的なキャストが依然として必要であり、次のことが観察できます。

 let bool = !!(expr); let numb = +(expr); let str = ''+(expr);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらのトリックはすべてのJavaScript開発者に知られており、「すばやく」何かを何かに変えることができると言っているという事実に動機付けられています。ここでの速度とは、短い記録を意味します。 ！ 開発者が印刷可能な文字を非常に心配している場合は、お気に入りのIDEで、必要なライブテンプレートまたはオートコンプリートを簡単に構成できます。 そして、もし-公開されたコードのサイズに対して、私たちは常に難読化ツールを介してそれを実行します。 なぜ：

 let bool = Boolean(expr); let numb = Number(expr); let str = String(expr);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果は同じで、誰にでも明らかです。

文字列の変換にはtoStringがありますが、数値の変換には興味深いvalueOfがあり 、これもオーバーライドできます。 「未経験者」をst迷者に導入する古典的な例：

 let timestamp = +new Date;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ただし、 Dateには既知のgetTimeメソッドがあります。それを使用してみましょう。

 let timestamp = (new Date()).getTime();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または既製の機能：

 let timestamp = Date.now();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

暗黙の型変換を活用する必要はまったくありません。

論理演算子

論理演算子AND（&&）とOR（||）には特別な注意が払われます。これらはJavaScriptでは完全に論理的ではありません。あらゆる種類の値を受け入れて返します。 論理式計算機の操作の詳細については説明しませんが、例を検討します。 関数で以前に提示されたオプション：

 function ping(host, count) { count = count || 5; /* ... */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のようになります。

 function ping(host, count) { // OR arguments.length? if (typeof count == 'undefined') { count = 5; } /* ... */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このような検証はより身近なものであり、場合によっては間違いを避けるのに役立ちます。

むしろ、最初にJavaScriptパスを選択した開発者にとっては野avなようです。 しかし、他のほとんどの人にとって、このコードは本当にワイルドです：

 var root = (typeof self == 'object' && self.self === self && self) || (typeof global == 'object' && global.global === global && global);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

はい、それはコンパクトです、そして、はい、人気のある図書館はそれを買う余裕があります。 ただし、JavaScriptの寄稿者ではなく、割り当てられた時間内にビジネス上の問題を解決する開発者によってコードが読み取られるため、悪用しないでください。

そのようなパターンは、まったく発生する可能性があります。

 let count = typeof opts == 'object' && opts.count || 5;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは通常の三項演算子よりも明らかに短いですが、このコードを読むとき、最初に覚えておくべきことは、使用する操作の優先順位です。

同じArray.prototype.filterに渡す述語関数を作成する場合、戻り値をブール値でラップするのが良い方法です。 この関数の目的はすぐに明らかになり、言語に「正しい」論理演算子がある開発者の間で不協和音はありません。

ビット演算

いくつかのチュートリアルでも提供されている、ビット単位のNOT（NOT）を使用して、配列内の要素または文字列内の部分文字列の存在を確認する一般的な例：

 if (~[1, 2, 3].indexOf(1)) { console.log('yes'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これはどのような問題を解決しますか？ indexOfは要素のインデックスまたは-1を取得し、チルダは1を追加して符号を変更するため、 ！== -1をチェックする必要はありません。 したがって、インデックスが-1の場合、式は「偽」になります。

ただし、コードの重複は別の方法で回避できます。他の目的でビット演算を使用するよりも、すべてのユーザーが行うように、一部のutilsオブジェクトの別の関数にチェックを入れます。 このためにlodashにinclude関数があり、それは機能しません アナルセックス チルダ。 ECMAScript 2016ではArray.prototype.includesメソッドが修正されたため、喜ぶことができます（行にも1つあります）。

しかし、そこにありました！ 別のチルダ（XORとともに）を使用して数値を丸め、小数部分を破棄します。

 console.log(~~3.14); // 3 console.log(2.72^0); // 2
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ただし、これらの目的にはparseIntまたはMath.floorがあります。 ここでのビット演算は、他の算術よりも優先度が低いため、コンソールでコードをすばやく入力するのに便利です。 しかし、コードレビューでは、見逃さない方が良いでしょう。

構文および言語構成

一部の奇妙な慣行は、特定のセクションに起因することは困難です。 たとえば、コンストラクターを呼び出すとき、括弧はオプションであり、次の2つの式は同一であると言います。

 let rabbit = new Rabbit(); let rabbit = new Rabbit;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてそれは本当に！ しかし、なぜ最初から質問を作成するのですか？ すべての言語がそのような「機能」を誇るわけではありません。 そして、もしそれでもいいのであれば、それをプロジェクト全体の合意にしましょう。 そうでなければ、違いがあるという誤った感覚があります。

変数のセットを宣言する同様の状況。 varおよびletディレクティブの構文を使用すると、複数の変数をコンマで区切って一度に宣言（および定義）できます。

 let count = 5, host, retry = true;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

誰かが読みやすくするために改行を使用していますが、いずれにしても、この構文は一般的な言語では一般的ではありません。 誰も手を挙げて、あなたがこのように書くかどうか尋ねません：

 let count = 5; let retry = true; let host;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

繰り返しますが、プロジェクト/企業レベルで良いスタイルに関する合意がある場合、質問はありません。 気分に合わせて構文のバリエーションを組み合わせる必要はありません。

IIFEなど、言語には完全に特定の構造があり、定義の場所ですぐに関数を呼び出すことができます。 全体の秘trickは、パーサーが関数宣言ではなく関数式を認識することです。 そして、これはさまざまな方法で行うことができます：古典的に括弧で囲む、 voidまたはその他の単項演算子を使用する。 そして、それについて素晴らしいことは何もありません！ 唯一のオプションを選択する必要があり、それを必要なく残さないでください：

 (function() { /* ... */ }());
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

パーサーをハックするためにオペレーターを使用する必要はありません。 新規参入者がプロジェクトに来たとき、アプリケーションのビジネスロジックに浸し、これらの感嘆符や空白がすべてスパイされた場所からの説明を提供したくない。 また、2番目の古典的なブラケットエントリと、このテーマに関するCrockfordからの興味深いコメントもあります。

ES6のクラス構文の出現には、通常のアクセス修飾子が付随していませんでした。 また、開発者はクラスをじっくり見たり、プライバシーを観察したい場合があります。 これはこのフランケンシュタインのコードにつながります：

 class Person { constructor(name) { let _name = name; this.getName = function() { return _name; } } toString() { return `Hello, ${this.getName()}`; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

つまり、コンストラクターでインスタンスのアクセサーが作成され、クロージャーを介してローカルプロパティ変数にアクセスすることでプライバシーが実現されます。 この例はLacconcinoにかなり似ていますが、ドキュメント化されたフレームワークソリューションを構築しない限り、これは完全にスケーラブルなアプローチではありません。 紳士、利用可能なクラス（およびプライベートフィールドの標準化を待つ）、または人気のあるパターンモジュールを使用してみましょう。 ここで何らかの中間ミックスソリューションを作成することは、クラスがクラスでなくなり、コードがわかりやすいため、自分にとっては非常に重要です。

要約すると、彼はプロジェクトで採用されているスタイルガイド、リンターの設定、またはプロジェクトにJavaScript以外のコンポーネントを提供している同僚と単にコードの断片と、常識を共有します。 この言語には、文字通りすべての典型的なタスクに対していくつかのオプションが用意されているため、互いの理解を深め、共通の分母に分類することは難しくありません（またはほとんど）。

ミスアドベンチャー

このトピックは確かに全体論的であり、さらに多くの例がありますが、記事の主なメッセージは、これを回避できるJavaScriptの非自明性を悪用すべきではないということです。 この言語の性質は独特です。エレガントで表現力豊かな（「頑固な」程度まで）ソリューションを作成できるほか、誰もが理解しやすくアクセスできるようになっています。 JavaScriptは「自分自身を罰する」または「善意と失敗の山に埋もれている」という従来の知恵に根本的に反対します。 なぜなら、今では奇妙さのほとんどは言語ではなく、開発者の文化とその周りに形成された（無関心ではない）によって実証されているからです。