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

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

Guanhui

リリース： 2020-06-16 17:35:55

転載

2584 人が閲覧しました

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 つの型しかありません:

空の文字列

array.filter(Boolean)

ログイン後にコピー

最初にいくつかの変更を加えてからフィルタリングする場合は、次のメソッドを使用できます。元の配列

array

は変更されておらず、新しい配列が返されることに注意してください。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">array .map(item => { // Do your changes and return the new item }) .filter(Boolean);</pre><div class="contentsignin">ログイン後にコピー</div></div>

複数のオブジェクトを同時にマージする

複数のオブジェクトまたはクラスを同時にマージする必要がある場合は、次の方法を使用できます。

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

があります。デフォルトでは、この並べ替え方法は配列要素を文字列に変換し、辞書順に並べ替えます。このデフォルトの動作は、数値配列を並べ替えるときに問題を引き起こす可能性があるため、この問題に対処する方法を次に示します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div>

右クリックを無効にする

ユーザーが右クリックできないようにしたい場合があります。この要件はまれですが、便利な場合があります。

<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

関数を使用できます。、引数として負の数を取ります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div>

すべての Promise が実行されるまで待機する

後続の操作を実行する前に、いくつかの Promise が実行されるまで待機する必要がある場合があります。

Promise.all

を使用して、これらの Promise を並行して実行できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div>

Promise.all

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

Promise.allSettled

を使用できます。これはES2020の新機能です。

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
  }
]

ログイン後にコピー

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