仕事の効率を上げるJS略語スキル20選

仕事の効率を上げるJS略語スキル20選

序文:

最近、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 ? '合格' : '不合格';


||演算子を使用して変数にデフォルト値を割り当てます

本質は || 演算子の特性を利用することです。前の式の結果がfalseのブール値に変換されると、その値は次の式の結果になります。

//手書き
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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript の書き方に関する 5 つのヒントを共有する
  • 一般的な JavaScript 配列操作スキル (パート 2)
  • 一般的なJavaScript配列操作テクニック
  • JavaScript 構造化分解割り当ての実践ガイド
  • インタラクティブな視覚化 JS ライブラリ gojs の使い方の紹介とヒント
  • JavaScript を学ぶときに知っておくべき 3 つのヒント
  • 49 個の JavaScript のヒントとコツ
  • 7つのキラーJSのヒントを共有

<<:  デュアル VIP を使用した高可用性 MySQL クラスタの構築

>>:  HTMLテーブルではテーブルの外側の境界線のみが表示されます

推薦する

MySQL のユニークインデックスと通常のインデックスのどちらを選択すればよいでしょうか?

ユーザー テーブルを設計するときに、各人の ID 番号が一意であり、検索する必要があるシナリオを想像...

実行中の Docker コンテナにボリュームを動的に追加する方法

以前、Docker コンテナの起動後にボリュームをマウントできるかどうか尋ねられたことがあります。m...

クエリプロファイラを使用して MySQL ステートメントの実行時間を表示する方法

前回の記事では、MySQL ステートメントの実行時間をチェックする 2 つの方法を紹介しました。今日...

MySQLカーソルの詳細な紹介

目次1. カーソルとは何ですか? 2. カーソルの使い方1. カーソルを宣言する2.カーソルを開く3...

Linux環境でログファイルを表示するコマンドの詳細な説明

目次序文1. catコマンド: 2. moreコマンド: 3. lessコマンド: 4. headコ...

http:// の代わりに // を使用する利点は何ですか (アダプティブ https)

//デフォルトプロトコル/ デフォルト プロトコルの使用は、リソース アクセス プロトコルが現在の...

垂直グリッドと漸進的な行間隔の例

新しい質問急いで来て、急いで行ってください。 「垂直グリッドとプログレッシブ行間隔 (パート 1)」...

Linux でファイルプレフィックスを一括で追加する方法

フォルダー内のすべての txt ファイルのファイル名の前に「gt_」を追加する必要があります。つまり...

CSS 極座標のサンプルコード

序文このプロジェクトには、衛星測位用のグラフィックスを含むチャートの要件があり、北半球または南半球の...

Linux で time(NULL) 関数と localtime() を使用して現在の時刻を取得する方法

time(); 関数関数プロトタイプ: time_t time(time_t *timer)関数の目...

nginx.conf ファイルの構文強調表示とフォーマット設定には nginx.vim ツールを使用します。

私はtengineを使用しています。インストールディレクトリは/usr/local/tengineで...

Linux での MySQL 5.7.16 無料インストール バージョンのグラフィック チュートリアル

この記事では、参考までにMySQL 5.7.16の無料インストール版のチュートリアルを紹介します。具...

MySQL での varchar 型の日付の比較、並べ替え、その他の操作の実装

MySQL を使用する場合、日付は通常、datetime や timestamp などの形式で保存さ...

meta name="" content="の機能の詳細な説明

1. 文法: <meta name="名前" content="...