JavaScript 開発者が使用する 10 の一般的なトリック-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript 開発者が使用する 10 の一般的なトリック

Guanhui

Jun 16, 2020 pm 05:35 PM

javascriptjs

JavaScript 開発者が使用する 10 の一般的なトリック

私たちは、JavaScript が急速に発展している言語であることを知っています。 ES2020 に加えて、多くの優れた機能が追加されました。正直なところ、コードはさまざまな方法で記述できます。同じ機能を実装する場合、非常に長いコードもあれば、非常に短いコードもあります。コードをよりクリーンで明確にするために実行できるトリックがいくつかあります。以下のヒントは、次の開発作業に必ず役立ちます。

関数パラメータバリデータ

JavaScript を使用すると、関数パラメータのデフォルト値を設定できます。この機能を使用すると、関数のパラメーターを検証するためのちょっとしたトリックを実装できます。

const isRequired = () => { throw new Error(&#39;param is required&#39;); };
const print = (num = isRequired()) => { console.log(`printing ${num}`) };
print(2); //printing 2print(); // errorprint(null); //printing null

JSON コードのフォーマット

JSON.stringify についてはよく知っているはずですが、 を渡すこともできることをご存知ですか? stringify メソッドを使用してコードをフォーマットします。実はとてもシンプルなのです。

stringify メソッドには、value replacer および space という 3 つのパラメーターがあります。最後の 2 つのパラメータはオプションであるため、通常は使用しません。出力コードをインデントしたい場合は、2 つのスペースまたは 4 つのスペースを使用できます。

console.log(JSON.stringify({ name:"John", Age:23 }, null, &#39;  &#39;));
>>> 
{  "name": "John",  "Age": 23}

配列の重複排除

以前は、配列の重複排除時に filter 関数を使用して重複値をフィルターで除外していました。ただし、新しい Set 機能を使用してフィルタリングできるようになりました。非常に簡単です:

let uniqueArray = [...new Set([1, 2, 3, 3, 3, "school", "school", &#39;ball&#39;, 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: &#39;John Ludwig&#39;,  gender: &#39;Male&#39;,  primary: &#39;Mani Primary School&#39;,  secondary: &#39;Lass Secondary School&#39;,  programming: &#39;Extreme&#39;,  swimming: &#39;Average&#39;,  sleeping: &#39;Pro&#39;}

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 が実行されるまで待機する必要がある場合があります。

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>

Promise.all

の 1 つが拒否状態にある限り、実行は直ちに停止され、例外がスローされることに注意してください。解決済みまたは拒否されたステータスを無視したい場合は、

Promise.allSettled

を使用できます。これは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> 推奨チュートリアル: 「

JS チュートリアル

」

以上がJavaScript 開発者が使用する 10 の一般的なトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事はjuejinで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

See all articles