ホームページ > 記事 > ウェブフロントエンド > JavaScript 開発者が使用する 10 の一般的なトリック
JavaScript 開発者が使用する 10 の一般的なトリック
- Guanhui転載
- 2020-06-16 17:35:552445ブラウズ
私たちは、JavaScript が急速に発展している言語であることを知っています。 ES2020 に加えて、多くの優れた機能が追加されました。正直なところ、コードはさまざまな方法で記述できます。同じ機能を実装する場合、非常に長いコードもあれば、非常に短いコードもあります。コードをよりクリーンで明確にするために実行できるトリックがいくつかあります。以下のヒントは、次の開発作業に必ず役立ちます。
関数パラメータバリデータ
JavaScript を使用すると、関数パラメータのデフォルト値を設定できます。この機能を使用すると、関数のパラメーターを検証するためのちょっとしたトリックを実装できます。
const isRequired = () => { throw new Error('param is required'); };
const print = (num = isRequired()) => { console.log(`printing ${num}`) };
print(2); //printing 2print(); // errorprint(null); //printing nullJSON コードのフォーマット
JSON.stringify についてはよく知っているはずですが、 を渡すこともできることをご存知ですか? stringify メソッドを使用してコードをフォーマットします。実はとてもシンプルなのです。
stringify メソッドには、value replacer および space という 3 つのパラメーターがあります。最後の 2 つのパラメータはオプションであるため、通常は使用しません。出力コードをインデントしたい場合は、2 つのスペースまたは 4 つのスペースを使用できます。
console.log(JSON.stringify({ name:"John", Age:23 }, null, ' '));
>>>
{ "name": "John", "Age": 23}配列の重複排除
以前は、配列の重複排除時に filter 関数を使用して重複値をフィルターで除外していました。ただし、新しい Set 機能を使用してフィルタリングできるようになりました。非常に簡単です:
let uniqueArray = [...new Set([1, 2, 3, 3, 3, "school", "school", 'ball', false, false, true, true])]; >>> [1, 2, 3, "school", "ball", false, true]
配列内の false である Boolean(v) 値を削除します
Boolean(v)## を削除したい場合があります。配列内の # は false の値です。 JavaScript には次の 6 つの型しかありません:
- #未定義
-
-
空の文字列 - false
array.filter(Boolean)
最初にいくつかの変更を加えてからフィルタリングする場合は、次のメソッドを使用できます。元の配列
array は変更されておらず、新しい配列が返されることに注意してください。 <pre class="brush:php;toolbar:false">array
.map(item => { // Do your changes and return the new item
})
.filter(Boolean);</pre>
複数のオブジェクトまたはクラスを同時にマージする必要がある場合は、次の方法を使用できます。
const user = { name: "John Ludwig", gender: "Male",
};const college = { primary: "Mani Primary School", secondary: "Lass Secondary School",
};const skills = { programming: "Extreme", swimming: "Average", sleeping: "Pro",
};const summary = { ...user, ...college, ...skills };
>>>
{ name: 'John Ludwig', gender: 'Male', primary: 'Mani Primary School', secondary: 'Lass Secondary School', programming: 'Extreme', swimming: 'Average', sleeping: 'Pro'}3 つのドットは展開演算子とも呼ばれます。
数値配列の並べ替えJavaScript 配列には、ネイティブの並べ替えメソッド
arr.sort があります。デフォルトでは、この並べ替え方法は配列要素を文字列に変換し、辞書順に並べ替えます。このデフォルトの動作は、数値配列を並べ替えるときに問題を引き起こす可能性があるため、この問題に対処する方法を次に示します。 <pre class="brush:php;toolbar:false">[0, 10, 4, 9, 123, 54, 1].sort()
>>> [0, 1, 10, 123, 4, 54, 9]
[0, 10, 4, 9, 123, 54, 1].sort((a,b) => a-b);
>>> [0, 1, 4, 9, 10, 54, 123]</pre>
ユーザーが右クリックできないようにしたい場合があります。この要件はまれですが、便利な場合があります。
<body oncontextmenu="return false"> <p></p> </body>
この単純なコード スニペットにより、ユーザーが右クリックできなくなります。
構造化中の名前変更代入の構造化は、変数や変数の面倒な宣言を必要とせずに、配列やオブジェクトから直接値を取得できるようにする JavaScript の機能です。それから割り当てです。オブジェクトの場合、次の方法で属性名の名前を再定義できます。
const object = { number: 10 };// Grabbing numberconst { number } = object;// Grabbing number and renaming it as otherNumberconst { number: otherNumber } = object;console.log(otherNumber); // 10配列の最後の項目を取得する配列の最後の項目を取得したい場合は、
slice 関数を使用できます。 、引数として負の数を取ります。 <pre class="brush:php;toolbar:false">let array = [0, 1, 2, 3, 4, 5, 6, 7]
console.log(array.slice(-1));
>>>[7]console.log(array.slice(-2));
>>>[6, 7]console.log(array.slice(-3));
>>>[5, 6, 7]</pre>
後続の操作を実行する前に、いくつかの Promise が実行されるまで待機する必要がある場合があります。
Promise.all を使用して、これらの Promise を並行して実行できます。 <pre class="brush:php;toolbar:false">const PromiseArray = [ Promise.resolve(100), Promise.reject(null), Promise.resolve("Data release"), Promise.reject(new Error(&#39;Something went wrong&#39;))];Promise.all(PromiseArray)
.then(data => console.log(&#39;all resolved! here are the resolve values:&#39;, data))
.catch(err => console.log(&#39;got rejected! reason:&#39;, err))</pre>
の 1 つが拒否状態にある限り、実行は直ちに停止され、例外がスローされることに注意してください。 解決済みまたは拒否されたステータスを無視したい場合は、
を使用できます。これはES2020の新機能です。 <pre class="brush:php;toolbar:false">const PromiseArray = [ Promise.resolve(100), Promise.reject(null), Promise.resolve("Data release"), Promise.reject(new Error("Something went wrong")),
];Promise.allSettled(PromiseArray)
.then((res) => { console.log("here", res);
})
.catch((err) => console.log(err));
>>>
here [
{ status: &#39;fulfilled&#39;, value: 100 },
{ status: &#39;rejected&#39;, reason: null },
{ status: &#39;fulfilled&#39;, value: &#39;Data release&#39; },
{ status: &#39;rejected&#39;, reason: Error: Something went wrong
at Object.<anonymous>
at Module._compile (internal/modules/cjs/loader.js:1200:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
at Module.load (internal/modules/cjs/loader.js:1049:32)
at Function.Module._load (internal/modules/cjs/loader.js:937:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47
}
]</pre> 推奨チュートリアル: 「
以上がJavaScript 開発者が使用する 10 の一般的なトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。