19のJavaScriptの便利な略字の書き方を共有します.

原文はリンクして、最近とても怒る1篇の文章
This really is a must read for any JavaScript-based developer.I have written this article as a vital source of reference for learning sharit JavaScript coding techniques that I have picked up the yeares thereders stars
この文章はjavascript開発者に基づいて必ず読まなければならない文章です.この文章を書くのは長年にわたって私がよく知っているJavaScriptの書き方を勉強しています.
June 14 th、2017:This artile was udated to add new shothand tips based on ES 6.If you want to learn more about the changes in ES 6、sign up for SitePoint Prmium and check out screencast A Look inest 6
本文は長年のJavaScriptコード技術の経験から来ています.JavaScriptを使ってプログラムを作成しているすべての開発者に適しています.
本論文の目的はJavaScript言語をより熟練したものにして開発活動を行うことにある.
文章は初級編と上級編に分けて、それぞれ紹介します.
1.三元操作子if...else文を書きたい時、3元のオペレータを使って代替します.
普通の書き方:

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

2.短絡は値を求めて簡単に書きます.
変数に別の値を割り当てると、ソース開始値はnull、undefined、または空の値ではないと判断したい.複数条件のif文を書くことができます.

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

或いは短絡求値方法を使ってもいいです.

const variable2 = variable1 || 'new';

3.変数の書き方を宣言する

let x;
let y;
let z = 3;

簡単な書き方:

let x, y, z=3;

4.if存在条件簡易書き方

if (likeJavaScript === true)

略字:

if (likeJavaScript)

likeJavaScriptが真の値である場合にのみ、両者の語句は等しいです.
判断値が真の値でない場合は、このようにすることができる.

let a;
if ( a !== true ) {
// do something...
}

略字:

let a;
if ( !a ) {
// do something...
}

5.JavaScript循環略記方法

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.短絡評価
変数に割り当てられた値は、nullまたはundefinedであるかどうかを判断することによって、

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

略字:

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

7.十進数指数
数字を書く時、多くの0を持っている場合(例えば100000万)、この数字の代わりに指数(1 e 7)を採用します.

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

略字:

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

//       true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

8.オブジェクト属性の略記
属性名がkey名と同じであれば、ES 6の方法を採用することができる.

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

略字:

const obj = { x, y };

9.矢印関数の略記
伝統関数の編纂方法は分かりやすく編纂されますが、他の関数に入れ子をするとこれらの利点はなくなります.

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.暗黙的な戻り値を簡単に書く
関数の最終結果には常にreturn文が使用され、個々のステートメントの矢印関数はその値を暗黙的に返すことができる(関数は{}を省略しなければならない.returnキーワードを省略するために)
複数行の語句(例えば、オブジェクトの字面式)を返すためには、関数体を囲む()必要があります.

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

var func = function func() {
 return { foo: 1 };
};

略字:

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

var func = () => ({ foo: 1 });

11.標準パラメータ値
関数内のパラメータにデフォルト値を伝えるためには、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.テンプレート文字列
伝統的なJavaScript言語は、出力テンプレートは通常このように書かれています.

const welcome = 'You have logged in as ' + first + ' ' + last + '.'

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

ES 6は、逆引用符および${}を使用して簡略化されてもよい.

const welcome = `You have logged in as ${first} ${last}`;

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

13.プロファイルの書き方
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;
//        contact

14.複数行の文字列の簡略化
複数行の文字列を出力する必要があります.

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.拡張演算子の略字
拡張演算子には、いくつかの用例があります.JavaScriptコードをより効果的に使用して、行列関数の代わりに使用できます.

// 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()関数と違って、拡張演算子は、1つの配列の中で任意に別の配列を挿入するために使用されてもよい.

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 }

16.強制パラメータの略記
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;
}

17.Aray.find略記
配列からある値を検索するには、ループが必要です.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]略記
検証関数を考慮する

function validate(values) {
 if(!values.first)
 return false;
 if(!values.last)
 return false;
 return true;
}

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

異なるドメインとルールが必要な場合は、汎用関数を作成して実行時に確認できますか?

//       
const schema = {
 first: {
 required:true
 },
 last: {
 required:true
 }
}

//       
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.二重非ビット演算簡略
二重非演算演算演算演算子のための有効な用例がある.Math.floor()の代わりに使用することができます.より速く動作することができるという利点があります.この記事を読んで、より多くのビット演算を理解することができます.

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

簡体字

~~4.9 === 4 //true

これで関連の紹介を完成しました.次の関連記事を引き続き見ることをオススメします.