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

推薦する

Linux 上で Python3.6 をコンパイルしてインストールするための詳細なチュートリアル

1. まず、公式ウェブサイト https://www.python.org/downloads/so...

HTML テーブル マークアップ チュートリアル (40): ヘッダーの暗い境界線の色属性 BORDERCOLORDARK

テーブルヘッダーでは、暗い境界線の色を個別に定義できます。基本的な構文<TH 境界線の色を暗く...

独自の Docker イメージを作成して Dockerhub にアップロードする方法

1. まず、自分のdockerhubアカウントを登録します。登録アドレス: https://hub....

JavaScript の find() メソッドと filter() メソッドの違いのまとめ

目次序文JavaScript find() メソッドJavaScript filter() メソッド...

MySQL 8.0.17 をインストールしてリモート アクセスを構成する方法

1. インストール前の準備データベースのバージョンを確認するコマンド: mysql --versio...

デザイン協会: なぜ間違った場所を探したのですか?

数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...

Vueコンポーネント化の基本的な使用方法の詳細

目次1. コンポーネント化とは何ですか? 2. 基本的な使い方序文:場合によっては、HTML 構造化...

MySQLにログインする際のエラー「ERROR 1045 (28000)」を解決する方法

今日はサーバーにログインして、データベース内のいくつかのものを変更する準備をしました。しかし、パスワ...

開発者がデータベースロックを詳細に理解する必要がある理由

1.ロックしますか? 1.1 ロックとは何ですか?ロックの本当の意味は、鍵またはコードで開くことがで...

Windows 10 に MySQL 8.0.19 を zip 形式でインストールする詳細なチュートリアル

目次1.ダウンロード後、インストールしたいディレクトリに解凍します。 2. インストールディレクトリ...

Docker+DockerCompose を使用して Web アプリケーションをカプセル化する方法

目次テクノロジースタックバックエンドビルドAPIフロントエンドウェブ構築ゲートウェイ建設ゲートウェイ...

Tomcat が localhost に通常アクセスすると 404 を報告する問題の解決方法

今日、プロジェクトのホームページにアクセスするために Tomcat を設定していたところ、404 エ...

CentOS8 Linux 8.0.1905 のインストール手順(図解)

現在、CentOS の最新バージョンは CentOS 8 です。次に、CentOS Linux 8....

最適なウェブページ幅とその互換性のある実装方法

1. Web ページをデザインするときに、幅を決定するのは非常に面倒な作業です。 jb51.net ...

XHTML ブロックレベルタグの概要

* 住所 - 住所* blockquote - ブロック引用* center - 中央揃えブロック*...