仕事の効率を上げる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テーブルではテーブルの外側の境界線のみが表示されます

推薦する

HTML のインラインブロックの空白を素早く削除する 5 つの方法

inline-block プロパティ値は、「インライン」要素のマージンとパディングを制御する必要があ...

MySQL 接続で認証失敗エラーが発生する場合の分析と解決方法

[問題の説明]アプリケーション側では、次のエラーが時々表示されます。メソッド 'mysql_...

Windows で MySQL 5.6 を 5.7 にアップグレードする方法

前面に書かれたMySQL をアップグレードする方法には、インプレース アップグレードと論理アップグレ...

JS でパブリッシュ サブスクライブ モデルを作成する

目次1. シーン紹介2 コードの最適化2.1 ファンを増やす問題を解決する2.2 作品追加の問題を解...

JS配列の次元削減のいくつかの方法の詳細な説明

2次元配列の次元削減配列インスタンスメソッド concat と ES6 スプレッド演算子を使用した次...

Dockerディスク容量不足の問題を解決する

Docker が配置されているサーバーをしばらく稼働させたところ、サーバーのディスク ディレクトリの...

太陽系の惑星のアニメーション効果を実現するHTML+CSS3コード

太陽系の 8 つの惑星(衛星を除く)のアニメーションを作成します。すべての惑星は太陽の周りを回ってい...

TypeScript のクラス

目次1. 概要2. シンプルなクラスを定義する3. 継承4. public、private、prot...

Vue.jsは9グリッド画像表示モジュールを実装します

Vue.js を使用して、クリックしてズームできる 9 グリッドの画像表示モジュールを作成しました。...

Linuxファイアウォールiptablesの詳細な紹介、設定方法と事例

1.1 iptablesファイアウォールの概要Netfilter/Iptables (以下、Ipta...

Ubuntu 上の MySQL における中国語文字化け問題の解決方法

問題を見つける最近 Django を学習しているのですが、MySQL データと組み合わせてデータを挿...

JavaScript 状態コンテナ Redux の詳細な説明

目次1. Reduxを選ぶ理由2. Reduxデータフロー3つの原則4. Reduxソースコード分析...

MySQLマスタースレーブ遅延現象と原理の詳細な分析

1. 現象早朝、オンライン テーブルにインデックスが追加されました。テーブル内のデータ量が大きすぎた...

MySQL btree インデックスとハッシュ インデックスの違い

MySQL では、ほとんどのインデックス (PRIMARY KEY、UNIQUE、INDEX、FUL...

Nginx におけるサーバーとロケーションのマッチングロジックの詳細な理解

サーバーマッチングロジックNginx は、リクエストを実行するサーバー ブロックを決定するときに、サ...