👩🏾‍🎨 ♉️ 🖼️ JavaScript：7つの便利な雑学 🏵️ 🐈 👩

今日私たちが公開している翻訳のノートの著者は、他のプログラミング言語と同様に、JavaScriptでも、単純な問題から非常に複雑な問題までさまざまな問題を解決するために設計された多くの小さなトリックを見つけることができると言います。これらの手法のいくつかは広く知られていますが、あまり一般的ではないものもありますが、それらについて知らない人を楽しく驚かせるかもしれません。次に、7つの便利なJavaScriptプログラミング手法を見ていきます。

1.一意の配列値を取得する

JavaScriptでは、別の配列から一意の値のみを含む配列を生成することは、おそらく思っているよりも簡単です。

var j = [...new Set([1, 2, 3, 3])] // [1, 2, 3]

演算子...とSetデータ型を使用して、この問題を解決する方法が気に入っています。

2.配列と論理値

論理型への変換がfalse 配列から値を削除する必要がありましfalseか？たとえば、これらは0 、 undefined 、 null 、 falseなどの値です。これを行うために、これを行うことができることを知らなかったかもしれません：

 myArray   .map(item => {       // ...   })   //       .filter(Boolean);

ご覧のとおり、このような値をすべて.filter()するには、 Booleanを.filter()配列メソッドに渡すだけで十分です。

3.本当に空のオブジェクトを作成する

オブジェクトリテラル{}構文を使用して、空のように見えるオブジェクトを作成できると確信しています。しかし、プロトタイプ（ __proto__ ）はそのようなオブジェクトに割り当てられ、 hasOwnProperty()メソッドと他のオブジェクトメソッドを持ちます。たとえば、「辞書」として使用できる真に空のオブジェクトを作成するには、次のようにします。

 let dict = Object.create(null); // dict.__proto__ === "undefined" //        ,

この方法で作成されたオブジェクトには、プログラマーによって追加されないプロパティとメソッドはありません。

4.オブジェクトのマージ

JavaScriptで書く人は、他のオブジェクトのコンテンツを含むようなオブジェクトを常に作成する必要がありました。このタスクは、クラスがJavaScriptに登場し、プログラマーがウィジェットソフトウェア表現のようなものを使用しなければならなくなったときに特に緊急になりました。他のいくつかのオブジェクトに基づいて新しいオブジェクトを作成する方法は次のとおりです。

 const person = { name: 'David Walsh', gender: 'Male' }; const tools = { computer: 'Mac', editor: 'Atom' }; const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' }; const summary = {...person, ...tools, ...attributes}; /* Object { "computer": "Mac", "editor": "Atom", "eyes": "Blue", "gender": "Male", "hair": "Brown", "handsomeness": "Extreme", "name": "David Walsh", } */

演算子は、オブジェクトをマージするタスクのソリューションを大幅に簡素化します。

5.必要な関数パラメーター

デフォルトの関数引数値の設定は、JavaScriptの優れた拡張機能です。しかし、いくつかの必須パラメーターを関数に渡さずに、単純に動作を拒否するようにする方法は次のとおりです。

 const isRequired = () => { throw new Error('param is required'); }; const hello = (name = isRequired()) => { console.log(`hello ${name}`) }; //    ,     name hello(); //     hello(undefined); //        hello(null); hello('David');

私たちの前には、関数に渡されるものの追加レベルの検証があります。

6.オブジェクトの抽出されたプロパティの破壊的な割り当てと新しい名前

分解は新しい便利なJavaScript機能ですが、オブジェクトから取得したプロパティには、それらのオブジェクトにあるものとは異なる名前を割り当てる必要がある場合があります。方法は次のとおりです。

 const obj = { x: 1 }; //      obj.x   x const { x } = obj; //   obj.x     otherName const { x: otherName } = obj;

この手法は、変数名または定数の競合を回避する必要がある場合に役立ちます。

7.クエリ文字列の解析

長年にわたり、クエリ文字列を解析するための正規表現を作成してきましたが、これらの時代は過ぎました。さて、この問題を解決するために、素晴らしいAPI URLSearchParamsを使用できます：

 // ,     "?post=1234&action=edit" var urlParams = new URLSearchParams(window.location.search); console.log(urlParams.has('post')); // true console.log(urlParams.get('action')); // "edit" console.log(urlParams.getAll('action')); // ["edit"] console.log(urlParams.toString()); // "?post=1234&action=edit" console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

URLSearchParams APIの使用は、正規表現を使用して同じタスクを解決するよりもはるかに簡単です。

まとめ

最新のJavaScriptは非常に急速に進化しており、さまざまな便利な改善が絶えず現れています。しかし、言語を改善しても、プログラマーがコードについて考え、それらに直面するさまざまな問題に対する効果的な解決策を探す必要がないという意味ではありません。今日お話しした小さなJavaScriptのトリックが役に立つことを願っています。

親愛なる読者！ 役に立つJSプログラミングのコツを知っていますか？もしそうなら、それらを共有してください。

JavaScript：7つの便利な雑学