19のJavaScriptの役に立つ略字技術

8148 ワード

1.三元操作子
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" : x2.短絡は値を求めて簡単に書きます.
変数に別の値を割り当てると、ソースの開始値は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)は、Aray.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.十進数指数
書くべき数字が多くゼロを持っている場合(例えば100000万)、この数字の代わりに指数(1 e 7)を採用することができます.

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

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

8.オブジェクト属性の略記
属性名がkey名と同じであれば、ES 6の方法を採用することができる.
略記:for (let i = 0; i < 10000; i++) {}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()関数ではなく、拡張演算子を使用して、他の配列を任意の配列に挿入できます.

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.flor()の代わりに使用することができます.もっと速く実行することができるという利点があります.この文章を読んで複数の演算を知ることができます.const obj = { x:x, y:y };略記:const obj = { x, y };この記事はSitePointに転載します.https://www.sitepoint.com/shorthand-javascript-techniques/

python+requestsはapi自動化テストの枠組みを構築します.(ソース無料ダウンロード)