JavaScript 19個のJavaScript符号化における簡略文法

11214 ワード
コーディングテクニック JS入門
この記事を読むことは、JavaScriptを使用する開発者にとって非常に必要です.私はこの文章をJavaScriptを使って文法符号化を簡略化する参考にした重要なソースとして何年も使っています.
2017年6月14日:本文はES 6文法更新に基づいて新しい簡略化技術を追加した.ES 6の変更の詳細については、ES 6に関する情報を参照してください.
1.The Ternary Operator(三元演算子)
1行にif..else文を書きたい場合は、これは非常に良い方法です.
オリジナル:
const x = 20;
let big;

if (x > 10) {
    big = true;
} else {
    big = false;
}

簡易版:
const big = x > 10 ? true : false;
if文をネストすることもできます.
const big = x > 10 ? " greater 10" : x < 5 ? "less 5" : "between 5 and 10";

2.Short-circuit Evaluation Shorthand(Null値or未定義チェック)
変数値を別の変数に割り当てる場合は、ソース変数がnull、undefinedまたは''でないことを確認する必要があります.複数の条件を使用して、長いif文を作成したり、短絡賦値を使用したりすることができます.
オリジナル:
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}

簡易版:
const variable2 = variable1  || 'new';

私を信じないの?自分でテストすることができます(es 6 consoleに次のコードを貼り付けます):
let variable1;
let variable2 = variable1  || '';
console.log(variable2 === ''); // prints true

variable1 = 'foo';
variable2 = variable1  || '';
console.log(variable2); // prints foo

3.Dellaring Variables Shorthand(宣言変数)
関数の開始時に変数のレプリケーションを宣言するのは良い習慣です.この簡単な書き方は、複数の変数を同時に宣言するときに多くの時間と空間を節約することができます.
オリジナル:
let x;
let y;
let z = 3;

略記:
let x, y, z=3;

4.If Presence Shorthand(存在するか否か判断)
これは些細なことかもしれませんが、特筆すべきことです.『チェックすれば』を行っている場合、割り当て演算子は省略できる場合があります.
オリジナル:
if (likeJavaScript === true)

簡易版:
if (likeJavaScript)

Note:この2つの例は完全に同じではありません.likeJavaScriptが真の値であれば、簡略版の論理は通過します.
これは別の例です.『a』がtrueに等しくなければ、何かをします.
オリジナル:
let a;
if ( a !== true ) {
// do something...
}

簡易版:
let a;
if ( !a ) {
// do something...
}

5.JavaScript for Loop Shorthand(JSサイクル)
このヒントは、外部のライブラリ、例えばJavaScriptやjQueryに依存するのではなく、純粋なオリジナルloadshを望む場合に便利です.
オリジナル:
for (let i = 0; i < allImgs.length; i++)

簡易版:
for (let index in allImgs)
Array.forEach  簡略化:
function logArrayElements(element, index, array) {
  console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[2] = 9

6.Short-circuit Evaluation(ショート付与)
予想されるパラメータがnullまたはundefinedである場合、デフォルト値を割り当てるために6行のコードを書く必要はありません.したがって、短絡論理演算子を簡単に使用し、同じことを1行のコードで実行することができます.
オリジナル:
let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}

簡易版:
const dbHost = process.env.DB_HOST || 'localhost';

7.Decimal base exponents(10進数基数指数)
これを見たことがあるかもしれません.本質的には、0に続く数字を書く派手な方法です.たとえば、1e7は基本的に1を意味し、その後7はゼロです.これは、10進数の基数(JavaScriptで浮動小数点型として解釈されている)が1000000に等しいことを示しています.
オリジナル:
for (let i = 0; i < 10000; i++) {}

簡易版:
for (let i = 0; i < 1e7; i++) {}

// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

8.Object Property Shorthand(オブジェクト属性)JavaScriptでオブジェクトの字面量を定義することが容易になります.ES 6は、オブジェクトに属性を割り当てる簡単な方法です.属性名と値名が同じであれば、略字記号を使用できます.
オリジナル:
const obj = { x:x, y:y };

簡易版:
const obj = { x, y };

9.Arrow Functions Shorthand(矢印関数)
従来の関数は簡単な形式で読み取りと書き込みが容易ですが、他の関数呼び出しにネストすると、少し冗長になり、困惑することがよくあります.
オリジナル:
function sayHello(name) {
  console.log('Hello', name);
}

setTimeout(function() {
  console.log('Loaded')
}, 2000);

list.forEach(function(item) {
  console.log(item);
});

簡易版:
sayHello = name => console.log('Hello', name);

setTimeout(() => console.log('Loaded'), 2000);

list.forEach(item => console.log(item));

10.Implicit Return Shorthand(暗黙Return)Returnは、私たちがよく使用する関数の最終結果を返すキーワードです.単一の文の矢印関数は、結果の値を暗黙的に返します(この関数は、{}を省略し、returnキーワードを省略する必要があります).
オブジェクトテキストなどの複数行の文を返すには、()ではなく{}を使用して関数体をラップする必要があります.これにより、コードが単一の文として実行されることが保証されます.
オリジナル:
function calcCircumference(diameter) {
  return Math.PI * diameter
}

簡易版:
calcCircumference = diameter => (
  Math.PI * diameter;
)

11.Default Parameter Value(デフォルトパラメータ値)if文を使用して、関数パラメータのデフォルト値を定義できます.ES 6では、関数宣言でデフォルト値を定義できます.
オリジナル:
function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

簡易版:
volume = (l, w = 3, h = 4 ) => (l * w * h);

volume(2) //output: 24

12.Template Literals(テンプレート文字)
あなたは+を使って複数の変数を1つの文字列に接続することに飽きませんか?これはもっと簡単な方法ではありませんか?ES 6を試用できれば、あなたはラッキーです.必要なことはすべて使用することです.  `  記号、および${}は、あなたの変数を含む.
オリジナル:
const welcome = 'You have logged in as ' + first + ' ' + last + '.'

const db = 'http://' + host + ':' + port + '/' + database;

簡易版:
const welcome = `You have logged in as ${first} ${last}`;

const db = `http://${host}:${port}/${database}`;

13.Destructuring Assignment Shorthand(解体配分)
流行のWebフレームワークを使用している場合は、配列またはデータを使用してコンポーネントとAPIの間の情報をオブジェクト文字で伝えることができます.データ・オブジェクトがコンポーネントに到達すると、パケットを解く必要があります.
オリジナル:
const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');

const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;

簡易版:
import { observable, action, runInAction } from 'mobx';

const { store, form, loading, errors, entity } = this.props;

自分の変数名を割り当てることもできます.
const { store, form, loading, errors, entity:contact } = this.props;

14.Multiline String Shorthand(複数行文字列)
コードに複数行の文字列を記述する必要があることに気づいたら、次のように記述します.
オリジナル:
const lorem = 'Lorem ipsum dolor sit amet, consectetur
\t'
    + 'adipisicing elit, sed do eiusmod tempor incididunt
\t'
    + 'ut labore et dolore magna aliqua. Ut enim ad minim
\t'
    + 'veniam, quis nostrud exercitation ullamco laboris
\t'
    + 'nisi ut aliquip ex ea commodo consequat. Duis aute
\t'
    + 'irure dolor in reprehenderit in voluptate velit esse.
\t'

ただし、より簡単なスキームがあります.逆引用符を使用するだけです.
簡易版:
const lorem = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse.`

15.Spread Operator Shorthand(拡張オペレータ)
ES 6に導入された拡張演算子には、JavaScriptコードの使用をより効率的かつ面白くするためのいくつかの例があります.いくつかの配列関数を置き換えるために使用できます.拡張オペレータは、一連の3つの点にすぎません.
オリジナル:
// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()

簡易版:
// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];
concat()メソッドとは異なり、拡張演算子を使用して別の配列の任意の場所に配列を挿入できます.
const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

また、拡張演算子をES 6デコンストラクト記号と組み合わせることもできます.
const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

16.Mandatory Parameter Shorthand(必須パラメータ)
デフォルトでは、JavaScriptは関数パラメータをundefinedに設定します.値が伝達されていない場合は、他の言語で警告またはエラーが発生します.パラメータ割り当てを強制するには、undefinedの場合はif文を使用してエラーを投げ出すか、「パラメータの略記を強制」の利点を利用します.
オリジナル:
function foo(bar) {
  if(bar === undefined) {
    throw new Error('Missing parameter!');
  }
  return bar;
}

簡易版:
mandatory = () => {
  throw new Error('Missing parameter!');
}

foo = (bar = mandatory()) => {
  return bar;
}

17.Array.find Shorthand(配列のfind関数)
オリジナルJavaScriptで検索機能を記述する必要がある場合は、forループを使用している可能性があります.ES 6では、find()という新しい配列関数が導入されています.
オリジナル:
const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]

function findDog(name) {
  for(let i = 0; i

簡易版:
pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

18.Object[key]Shorthand(運用対象のKey)Foo.barをFoo ['bar']と書くこともできることを知っていますか?最初は理由がないようですが、この記号は再利用可能なコードを書くコンストラクションブロックを提供しています.
検証関数の簡略化例を考えます.
function validate(values) {
  if(!values.first)
    return false;
  if(!values.last)
    return false;
  return true;
}

console.log(validate({first:'Bruce',last:'Wayne'})); // true

この機能はその作業を完了しました.しかし、1つの状況を考慮すると、検証を適用する必要があるが異なるフィールドとルールがたくさんあります.実行時に構成できる汎用検証関数を構築したほうがいいのではないでしょうか.
簡易版:
// object validation rules
const schema = {
  first: {
    required:true
  },
  last: {
    required:true
  }
}

// universal validation function
const validate = (schema, values) => {
  for(field in schema) {
    if(schema[field].required) {
      if(!values[field]) {
        return false;
      }
    }
  }
  return true;
}


console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true

各関数にカスタム検証関数を記述することなく、すべてのコードブロックで再利用できる検証関数があります.
19. Double Bitwise NOT Shorthand
ビット演算子は、初心者JavaScriptチュートリアルで学んだ機能の1つであり、どこでも実現できません.また、バイナリファイルを処理しない場合は、これらのゼロとゼロを処理したい人はいません.
しかし、~~の場合、非常に実用的な例です.Math.floor()の代わりに使用できます.同じ操作を実行するのが速いという利点があります.
オリジナル:
Math.floor(4.9) === 4  //true

簡易版:
~~4.9 === 4  //true

20.Suggest One?(あなたも提案しますか?)
volatileは非原子操作を原子操作に変えることができますか?
Javaの深い分析-同時原子量