JavaScript 開発者向けの 10 の役立つヒント-jsチュートリアル-php.cn

JavaScript 開発者向けの 10 の役立つヒント

hzc

リリース： 2020-06-17 09:36:28

転載

1970 人が閲覧しました

これらの非常に役立つヒントを見逃している可能性があります。

著者 Mahdhi Rezvi の 10 Super Useful Tricks for JavaScript Developers から翻訳。

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

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

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

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

ログイン後にコピー

JSON コードのフォーマット

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]

ログイン後にコピー

配列内の Boolean(v) が false の値を削除します

Boolean(v) が ## の値を削除したい場合があります。配列内の #false の値。 JavaScript には次の 6 つの型しかありません:

空の文字列
false

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: 'John Ludwig',
  gender: 'Male',
  primary: 'Mani Primary School',
  secondary: 'Lass Secondary School',
  programming: 'Extreme',
  swimming: 'Average',
  sleeping: 'Pro'
}

ログイン後にコピー

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">
  <div></div>
</body>

ログイン後にコピー

この単純なコードスニペットにより、ユーザーが右クリックできなくなります。

構造化中の名前変更

構造化代入は JavaScript の機能であり、変数の面倒な宣言と代入を必要とせずに、配列またはオブジェクトから値を直接取得できるようになります。オブジェクトの場合、次の方法で属性名の名前を再定義できます。

const object = { number: 10 };
// Grabbing number
const { number } = object;
// Grabbing number and renaming it as otherNumber
const { 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('Something went wrong'))]; Promise.all(PromiseArray) .then(data => console.log('all resolved! here are the resolve values:', data)) .catch(err => console.log('got rejected! reason:', err))</pre><div class="contentsignin">ログイン後にコピー</div></div>

Promise.all

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

Promise.allSettled

を使用できます。これはES2020の新機能です。 <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("Something went wrong")), ]; Promise.allSettled(PromiseArray) .then((res) => { console.log("here", res); }) .catch((err) => console.log(err)); >>> here [ { status: 'fulfilled', value: 100 }, { status: 'rejected', reason: null }, { status: 'fulfilled', value: 'Data release' }, { status: 'rejected', 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><div class="contentsignin">ログイン後にコピー</div></div> 推奨チュートリアル: 「

JS チュートリアル

」

以上がJavaScript 開発者向けの 10 の役立つヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。