JavaScriptの速記技能

この記事では、すべての開発者に適した符号化技術は、JavaScriptプログラミングの読み取りを使用しているJavaScriptの長年の経験から来ています。

この記事の目的は、開発作業を行うためのJavaScript言語のあなたより多くの熟練した使用を支援することです。

記事は、導入された、主要記事や二つの部分の高度な部分に分かれています。

主な記事
1は、三項演算子
以下が良い例である、完全な文の場合は、コードの行を省略します。

const x = 20;
let answer;
if (x > 10) {
    answer = 'greater than 10';
} else {
    answer = 'less than 10';
}

略記：

const answer = x > 10 ? 'greater than 10' : 'less than 10';

ループ2、
純粋なJavaScriptを（例えばjQueryのまたはlodashなどの外部ライブラリに依存していない）を使用する場合、以下の略語は、有用であろう。

for (let i = 0; i < allImgs.length; i++)

略記：

for (let index of allImgs)

以下は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

3、宣言した変数
、関数の開始前に、変数の代入は良い習慣です。ときに複数の変数を宣言します。

let x;
let y;
let z = 3;

これは、と略記することができます。

せてX、Y、Z = 3。

if文。4、
使用時には、基本的な場合に決定され、代入演算子を省略することができます。

if (likeJavaScript === true)

略記：

if (likeJavaScript)

図5に示すように、進数
を使用することができる代わりに、このような千万のような大きな科学的表記データは、1E7と略記することがあります。

for (let i = 0; i < 10000; i++) { }

略記：

for (let i = 0; i < 1e7; i++) { }

6、複数行の文字列を
使用すると、このように、文字列に複数行のコードを記述する必要がある場合：

const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
    + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
    + 'veniam, quis nostrud exercitation ullamco laboris\n\t'
    + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
    + 'irure dolor in reprehenderit in voluptate velit esse.\n\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.`

            web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路

高度な記事

1、変数の代入
別の変数に1つの変数の値は、あなたが最初の元の値が、ヌル、未定義またはnullでないことを確認する必要があります。

これは、複数の条件を含む文を書き込むことによって決定することができます。

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}

または、次のフォームに省略：

const variable2 = variable1  || 'new';

次のコードは、独自のテストでes6consoleに貼り付けることができます。

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

2、デフォルト値の代入

期待されるパラメータがnullまたは未定義の場合は、デフォルト値を割り当てるには、コードの6行を記述する必要はありません。私たちは、同じ操作を達成するために1行のコードで、ほんの短い論理演算子を使用することができます。

let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}

略記：

const dbHost = process.env.DB_HOST || 'localhost';

図3に示すように、オブジェクトのプロパティ

ES6は、オブジェクトのプロパティを割り当てるための非常に簡単な方法を提供します。属性名と同じキーの名前場合は、短縮形を使用することができます。

const obj = { x:x, y:y };

略記：

const obj = { x, y };

図4に示すように、矢印関数

クラシック機能は読み書きが簡単ですが、巣、彼らは他の関数で呼び出すとき場合、関数全体が長く、やや混乱になります。この時、あなたは矢印関数速記を使用することができます。

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));

5、暗黙的の戻り値

戻り値は、我々は通常、キーワードの最終結果を返すために使用される機能です。文は、矢印のみの関数であり、暗黙的に（関数は括弧は（{}）、キーワードを戻すために省略され、省略されなければならない）、結果を返します。

本体をラップする代わりに関数のマルチステートメント（例えば、テキストオブジェクト）、必要（）{}に戻ります。これは、コードは、個々の文の形で評価されることを保証します。

function calcCircumference(diameter) {
  return Math.PI * diameter
}

略記：

calcCircumference = diameter => (
  Math.PI * diameter;
)

6、デフォルトのパラメータ値

あなたは、関数の引数のデフォルト値を定義するためにif文を使用することができます。デフォルト値で指定ES6は、関数宣言で定義することができます。

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

7、テンプレート文字列

過去には、私たちは、文字列に複数の変数を変換するために、「+」を使用するために使用されるが、それを行うには簡単な方法はありませんか？

ES6は、我々は1つの文字列に逆引用符と$ {変数}を使用することができ、対応する方法を提供しました。

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}`;

8、解体の割り当て

割り当てを非構造は式、アレイまたはオブジェクトからの急速な抽出のための可変特性値であり、定義され割り当てます。

コードの速記の用語では、解体の割り当ては非常に良い結果を得ることができます。

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;

図9に示すように、オペレータは、展開します

オペレータは、オペレータがJavaScriptコードは、より効果的かつ楽しく作ることができます拡大使用してES6で導入されて展開します。

配列関数の一部を置き換えるためにオペレータを展開して使用します。

// 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];

拡張し、ES6オペレーター解体シンボルを結合するために使用することができます。

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 }

10、必須パラメータ

そうしない場合、デフォルトでは、JavaScript関数は、パラメータ値が定義されていない関数に渡されたパラメータを設定します。他の言語には、警告やエラーが発行されます。文が未定義のエラーをスローし、または使用できる場合は、パラメータの割り当てを実行するには、使用することができ、「必須パラメータを。」

function foo(bar) {
  if(bar === undefined) {
    throw new Error('Missing parameter!');
  }
  return bar;
}

略記：

mandatory = ( ) => {
  throw new Error('Missing parameter!');
}
foo = (bar = mandatory( )) => {
  return bar;
}

11、Array.find

あなたは一般的な機能を見つけるJavaScriptで記述された場合は、forループを使用する場合があります。ES6では、アレイは、find（）短いループのために達成することができると呼ばれる新しい機能を導入します。

const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
  for(let i = 0; i<pets.length; ++i) {
    if(pets[i].type === 'Dog' && pets[i].name === name) {
      return pets[i];
    }
  }
}

12、オブジェクト[キー]

foo.bar書かFOO [「バー」]は一般的であるが、このアプローチは、再利用可能なコードの製造のための基礎を形成しますが。

この検証機能の以下の簡単な例を考えてみましょう。

  function validate(values) {
      if(!values.first)
        return false;
      if(!values.last)
        return false;
      return true;
    }
    console.log(validate({first:'Bruce',last:'Wayne'})); // true

上記の機能は完全に検証作業を完了します。しかし、多くの形態がある場合には、アプリケーションを検証する必要があります、この時間は異なるフィールドとルールが存在します。あなたは、実行時に一般的な構成の検証機能を構築することができた場合、それは良い選択となります。

// 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

さて、この検証機能で、我々は、各フォームのカスタム検証関数を記述することなく、すべての形で再利用することができます。Webフロントエンドの開発リソースQqun：767273102、無料の開発ツール、ゼロベース、高度なビデオチュートリアル、私は初心者の迂回路を願っていますがあります

13、二位置演算子

ビット演算子には、JavaScriptの主なカリキュラムの基本的な知識ですが、我々は多くの場合、ビット演算子を使用しないでください。場合には、バイナリを扱っていないので、誰もが1と0を使用することを望んでいません。

しかし、2ビットの演算子非常に実用的な場合があります。あなたはMath.floor（）を置き換えるために二位置演算子を使用することができます。利点は、それがより速く、同じ動作を行うことで二重否定演算子ビット。

Math.floor(4.9) === 4  //true

略記：

~~4.9 === 4  //true

JavaScriptの開発ツールを推奨

遠位純粋な形態は、.NET、Javaおよび移動のための制御グリッドと機能は、ソート、HTML5が完全式エンジンを提供制御するJavaScriptスプレッドシート、フィルタリング、入力制御、データの視覚化、Excelのインポート/エクスポート機能に基づいているSpreadJS Excelなどの表計算プログラムの開発のようなオンライン編集機能など、エンド・プラットフォーム。

上記記載されていない他の速記のスキルがある場合は、いくつかの一般的に使用されるJavaScriptの速記のスキルですが、また追加することを歓迎します。

おすすめ