JavaScriptの開発のすべての開発者に適した記事に基づいています。私がこれを書いている時点で、主にあなたがより良いいくつかのJavaScriptの基礎を理解するためのいくつかの速記のJavaScriptコードが含まれます。私たちは、さまざまな角度からこれらのコードは、あなたがより良いJavaScriptを理解するのに役立つことを願っています。
三項演算子
あなたが使用している場合はif...elseステートメントを、これはコードを保存するための良い方法です。
手書き：
const x = 20;
let answer;
if (x > 10) {
answer = 'is greater';
} else {
answer = 'is lesser';
}短縮形：
const answer = x > 10 ? 'is greater' : 'is lesser';あなたはすることもでき、次のような巣ifの文：
const big = x > 10 ? " greater 10" : x短絡評価
別の変数の値に変数を割り当てて、あなたは変数がないことを確認したい場合null、undefinedまたは空。あなたは複数書くことができますif条件文または短絡評価を。
手書き：
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変数を宣言します
あなたは、同時に、このような関数で変数を宣言するときは、複数の変数を宣言するあなたの時間と多くのスペースを節約することができます。
手書き：
let x;
let y;
let x = 3;短縮形：
let x, y, z=3;もしそこに
これは些細な、しかし、言及する価値があるかもしれません。「チェックした場合」、代入演算子は時々省略することができますか。
手書き：
if (likeJavaScript === true)短縮形：
if (likeJavaScript)注意：これらの2つの方法が同一でない限り、省略検査のように
likeJavaScriptあるtrueすべてを通して。
ここで別の例です。場合aではないtrue、そして何をすべきか。
手書き：
let a;
if ( a !== true ) {
// do something...
}短縮形：
let a;
if ( !a ) {
// do something...
}ループのためのJavaScript
あなただけのJavaScriptのネイティブをしたいが、この小さなトリックは非常に有用であることを、jQueryのかLodash、このような外部のライブラリに依存したくない場合。
手書き：
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短絡評価
パラメータがある場合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';小数指数
あなたはこれを見ている可能性があります。それは数字の背後にある多くのがあり、基本的に派手な言葉遣いの書き込み番号です0。例えば1e7、本質的量10000000（1背後で）。これは、小数点数が等しいを表します。7010000000
手書き：
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;オブジェクトのプロパティ
JavaScriptをより面白くするオブジェクトリテラル（オブジェクトリテラル）を定義します。ES6は、オブジェクトの属性を割り当てるための簡単な方法を提供します。プロパティ名と値であれば、あなたは以下の簡単な方法を使用することができますよう。
手書き：
const obj = { x:x, y:y };短縮形：
const obj = { x, y };アロー機能
クラシック機能は、読み取りおよび書き込みするのは簡単ですが、彼らは少し退屈な、特にネストされた関数は他の関数Shihaiはあなたが混乱して感じるようになって呼び出すん。
手書き：
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));暗黙のリターン
return多くの場合、キーワードの機能に使用される、関数は、最終的な結果を返します。暗黙のステートメントは、（機能が省略されている必要があり、結果を返す関数と矢印{}省略するために、returnキーワードを）。
（そのようなオブジェクトのような）であれば、複数の戻りラインステートメントは、インビボでの機能に使用することが必要である()代替{}。これは、コードが別々のステートメントとして返されることが保証されます。
手書き：
function calcCircumference(diameter) {
return Math.PI * diameter
}短縮形：
calcCircumference = diameter => (
Math.PI * diameter;
)デフォルトのパラメータ値
あなたは使用することができます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テンプレートのリテラル
使用しての疲れている+文字列に複数の変数を接続するには？もっと簡単な方法はありませんか？あなたはES6を使用することができるなら、あなたはラッキーです。ES6では、あなたが行う必要がありアポストロフィを使用することです${}、そして中括弧で囲まれたあなたの変数を置きます。
手書き：
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}`;分割代入
あなたが任意の一般的なWebフレームワークを使用している場合は、フォームやAPIデータオブジェクトの配列を使用したり、多くの機会を形成する間の情報の伝達があります。データオブジェクトは、コンポーネントの1組に達すると、あなたはそれを拡張する必要があります。
手書き：
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;複数行の文字列
あなたは、次のようなコードの複数行の文字列を書き込む前に自分自身を見つけるでしょう。
手書き：
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.`スプレッド演算子
オペレータは、スプレッド ES6をより効率的かつ楽しい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];また、解体として破ることができます。
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 }必須パラメータ
デフォルトでは、JavaScriptを使用して、関数のパラメータに値を渡さない場合、それは次のようになります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;
}Array.find
あなたが前にルックアップ関数を書いた場合は、使用する可能性のある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];
}
}
}
短縮形：
pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }オブジェクトの[キー]
あなたが知っている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この機能は正常に動作することができます。しかし、このようなシナリオを検討する必要が：検証を必要とする多くのフォームアプリケーションがあり、そして異なる領域は、異なるルールを持っています。実行時に、一般的な認証を作成することは困難。
短縮形：
// 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今、私たちは、それぞれ異なる機能のためのカスタム検証機能を必要とせずに、様々な形で再利用することができ、検証機能を持っています。
ダブルビット演算はありません
あなたが初心者である場合、ビット演算子のためのJavaScript（ビット単位の演算子）あなたはどこにも使用されることはありません。あなたがバイナリを処理しない場合にも、0そして1、あなたが使用する必要はありません。
しかし、非常に実用的な実施形態の使用は、それは、二位置演算子です。あなたは交換し、それを使用することができますMath.floor()。ダブルビット単位NOT演算子は、それがはるかに高速に同じ動作を行い、大きな利点を持っています。あなたは、ビット演算子、関連知識についての詳細を読むことができます。
手書き：
Math.floor(4.9) === 4 //true短縮形：
~~4.9 === 4 //true