序文: 最近、JS コードの簡素化に関する記事をいくつか読みました。そのうちの 1 つはかなり良いと思いますが、英語です。中国語の翻訳もいくつか読みました。1 つは、逐語訳が堅苦しすぎて自分のものになっていないことです。もう 1 つは、著者が新しいコンテンツを追加したが、タイムリーに更新していないことです。そのため、自分の言語に合わせてこの記事に翻訳しました。この記事の特徴は、主に簡潔で簡潔なことです。 複数の変数を同時に宣言する場合は、1 行に短縮できます。//手書き xとします。 y = 20とします。 // 省略形 x,y = 20 とします。 分割代入は複数の変数に同時に値を割り当てるために使用できます//手書き a、b、cとします。 a = 5; 8; 12; // 省略形 [a, b, c] = [5, 8, 12]とします。 三項演算子を使用してif elseを簡略化する//手書き マークを 26 にします。 結果を出す; if (点数 >= 30) { 結果 = '合格'; } それ以外 { 結果 = '失敗'; } // 省略形 result = marks >= 30 ? '合格' : '不合格'; ||演算子を使用して変数にデフォルト値を割り当てます本質は || 演算子の特性を利用することです。前の式の結果が //手書き imagePath を設定します。 path = getImagePath(); とします。 if (パス !== null && パス !== 未定義 && パス !== '') { imagePath = パス; } それ以外 { イメージパス = 'default.jpg'; } // 省略形 imagePath を getImagePath() とします || 'default.jpg'; && 演算子を使用して if 文を簡略化するたとえば、ある条件が満たされた場合にのみ関数が呼び出される場合は、次のように短縮できます。 //手書き ログインしている場合 ホームページに移動します(); } // 省略形 ログイン中 && ホームページへ移動(); 分割代入を使用して2つの変数の値を交換するx = 'Hello'、y = 55 とします。 //手書き 定数temp = x; y = 0 です。 y = 温度; // 省略形 y = 0; 矢印関数を適用して関数を簡略化する//手書き 関数 add(num1, num2) { num1 + num2 を返します。 } // 省略形 const add = (num1, num2) => num1 + num2; 矢印関数と通常の関数の違いに注意してください 文字列テンプレートを使用してコードを簡素化する生の文字列連結の代わりにテンプレート文字列を使用する //手書き console.log('' + 番号 + ' から ' + 時刻に不在着信がありました); // 省略形 console.log(`${time} に ${number} から不在着信がありました`); 複数行の文字列は文字列テンプレートを使用して簡略化することもできます。//手書き console.log('JavaScript は JS と略されることが多いですが、\n' + '\n' +に準拠したプログラミング言語 'ECMAScript 仕様。JavaScript は高水準です。\n' + 「多くの場合、ジャストインタイムでコンパイルされ、マルチパラダイムです。」 ); // 省略形 console.log(`JavaScriptはJSと略されることが多いが、 に準拠したプログラミング言語 ECMAScript仕様。JavaScriptは高水準で、 多くの場合、ジャストインタイムコンパイルされ、マルチパラダイムです。 ); 複数値のマッチングでは、すべての値を配列に配置し、配列メソッドを使用して簡略化することができます。//手書き if (値 === 1 || 値 === '1' || 値 === 2 || 値 === '2') { // コードを実行する } // 省略形 1 if ([1, 'one', 2, 'two'].indexOf(value) >= 0) { // コードを実行する } // 省略形 2 if ([1, 'one', 2, 'two'].includes(値)) { // コードを実行する } ES6オブジェクトの簡潔な構文を使用するたとえば、属性名と変数名が同じ場合は、1 つに省略できます。 firstname = 'Amitav' とします。 lastname = 'ミシュラ'; //手書き obj = {firstname: firstname, lastname: lastname} とします。 // 省略形 obj = {firstname, lastname}とします。 単項演算子を使用して文字列から数値への変換を簡素化する//手書き 合計をparseInt('453')とします。 平均をparseFloat('42.6')とします。 // 省略形 合計を +'453' とします。 平均 = +'42.6' とします。 文字列の繰り返しを簡素化するには、repeat() メソッドを使用します。//手書き str = '' とします。 for(i = 0; i < 5; i++) { str += 'こんにちは'; } console.log(str); // こんにちは、こんにちは、こんにちは、こんにちは、こんにちは // 省略形 'こんにちは'.repeat(5); // 100回謝りたいです! '申し訳ありません\n'.repeat(100); Math.pow() の代わりに二重アスタリスクを使用する//手書き const べき乗 = Math.pow(4, 3); // 64 // 省略形 定数べき乗 = 4**3; // 64 Math.floor() の代わりに二重チルダ演算子 (~~) を使用します。//手書き const floor = Math.floor(6.8); // 6 // 省略形 定数フロア = ~~6.8; // 6 ~~は2147483647未満の数字にのみ適用されることに注意してください。 スプレッド演算子 (...) を使用してコードを簡素化する配列のマージを簡素化するarr1 = [20, 30]とします。 //手書き arr2 = arr1.concat([60, 80]); // [20, 30, 60, 80]とします // 省略形 arr2 = [...arr1, 60, 80] とします。 // [20, 30, 60, 80] 単一レイヤーオブジェクトのコピーobj = {x: 20, y: {z: 30}}とします。 //手書き 定数makeDeepClone = (obj) => { newObject を {} にします。 Object.keys(obj).map(キー => { if(typeof obj[key] === 'object'){ 新しいオブジェクト[キー] = makeDeepClone(obj[キー]); } それ以外 { newObject[キー] = obj[キー]; } }); 新しいオブジェクトを返します。 } 定数 cloneObj = makeDeepClone(obj); // 省略形 JSON を文字列化する //単一レベルオブジェクトの省略形 obj = {x: 20, y: 'hello'}とします。 定数 cloneObj = {...obj}; 配列内の最大値と最小値を見つける// 省略形 定数arr = [2, 8, 15, 4]; Math.max(...arr); // 15 Math.min(...arr); // 2 for inとfor ofを使用して通常のforループを簡素化するarr = [10, 20, 30, 40]とします。 //手書き (i = 0 とします; i < arr.length; i++) { コンソールにログ出力します。 } // 省略形 // for ループ (arrのconst値) { コンソールログ(val); } // for in ループ for (const インデックス in arr) { console.log(arr[インデックス]); } 文字列内の文字の取得を簡素化するstr = 'jscurious.com' とします。 //手書き str.charAt(2); // c // 省略形 str[2]; // c オブジェクトプロパティの削除obj = {x: 45, y: 72, z: 68, p: 98}とします。 // 手書き obj.x を削除します。 obj.p を削除します。 console.log(obj); // {y: 72, z: 68} // 省略形 {x, p, ...newObj} = obj とします。 console.log(newObj); // {y: 72, z: 68} arr.filter(Boolean)を使用して配列メンバーの偽値を除外します。arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false] とします。 //手書き filterArray = arr.filter(function(value) { if(値) 戻り値; }); // フィルター配列 = [12, "xyz", -25, 0.5] // 省略形 filterArray = arr.filter(Boolean); とします。 // フィルター配列 = [12, "xyz", -25, 0.5] これで、作業効率を向上させる JS 省略のヒント 20 個についての記事は終了です。より関連性の高い JS 省略のヒントについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: デュアル VIP を使用した高可用性 MySQL クラスタの構築
>>: HTMLテーブルではテーブルの外側の境界線のみが表示されます
1. まず、公式ウェブサイト https://www.python.org/downloads/so...
テーブルヘッダーでは、暗い境界線の色を個別に定義できます。基本的な構文<TH 境界線の色を暗く...
1. まず、自分のdockerhubアカウントを登録します。登録アドレス: https://hub....
目次序文JavaScript find() メソッドJavaScript filter() メソッド...
1. インストール前の準備データベースのバージョンを確認するコマンド: mysql --versio...
数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...
目次1. コンポーネント化とは何ですか? 2. 基本的な使い方序文:場合によっては、HTML 構造化...
今日はサーバーにログインして、データベース内のいくつかのものを変更する準備をしました。しかし、パスワ...
1.ロックしますか? 1.1 ロックとは何ですか?ロックの本当の意味は、鍵またはコードで開くことがで...
目次1.ダウンロード後、インストールしたいディレクトリに解凍します。 2. インストールディレクトリ...
目次テクノロジースタックバックエンドビルドAPIフロントエンドウェブ構築ゲートウェイ建設ゲートウェイ...
今日、プロジェクトのホームページにアクセスするために Tomcat を設定していたところ、404 エ...
現在、CentOS の最新バージョンは CentOS 8 です。次に、CentOS Linux 8....
1. Web ページをデザインするときに、幅を決定するのは非常に面倒な作業です。 jb51.net ...
* 住所 - 住所* blockquote - ブロック引用* center - 中央揃えブロック*...