JavaScript 開発者が知っておくべき簡単なヒント (上級)

この記事では、JavaScript 開発者が知っておくべき略語スキル (上級) を紹介します。必要な方は参考にしていただければ幸いです。

1. 変数の割り当て

ある変数の値を別の変数に割り当てる場合は、最初に元の値が null、未定義、空でないことを確認する必要があります。

これは、複数の条件を含む判定ステートメントを記述することで実現できます:

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

または次の形式に省略できます:

const variable2 = variable1  || 'new';

次のコードを es6console 、Test に貼り付けることができます。自分で:

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 少し長くてわかりにくいかもしれません。このとき、アロー関数を使用してこれを省略できます:

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 暗黙的な戻り値

戻り値は通常のものです。キーワード関数の最終結果を返すために使用します。ステートメントが 1 つだけあるアロー関数は、暗黙的に結果を返すことができます (return キーワードを省略するには、関数で括弧 ({ }) を省略する必要があります)。

複数行のステートメント (オブジェクト テキストなど) を返すには、{} の代わりに () を使用して関数本体をラップする必要があります。これにより、コードが単一のステートメントとして評価されることが保証されます。

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 は対応するメソッドを提供しており、バックティックと $ { } を使用して変数を文字列に結合できます。

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 展開演算子は ES6 にあります。スプレッド演算子を使用すると、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() と 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 は関数のパラメータを未定義に設定します。他の言語では警告またはエラーが表示されます。パラメータの割り当てを実行するには、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;
}

11 Array.find

通常の JavaScript で find 関数を作成したことがある場合は、for ループを使用したことがあるかもしれません。 ES6 では、for ループを実装するための省略表現である 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 === &#39;Dog&#39; && pets[i].name === name) {
      return pets[i];
    }
  }
}

省略形は:

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

12. オブジェクト [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

上記の関数は検証作業を完全に完了します。ただし、フォームが多数ある場合は検証を適用する必要があり、さまざまなフィールドやルールが存在します。実行時に構成できる汎用の検証関数を構築できれば、それは良い選択となるでしょう。

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

この検証関数を使用すると、フォームごとにカスタム検証関数を作成することなく、すべてのフォームでそれを再利用できるようになります。

13. ダブルビット演算子

ビット演算子は JavaScript 初心者向けチュートリアルの基本的な知識ポイントですが、ビット演算子はあまり使用しません。なぜなら、バイナリを扱わずに 1 と 0 を扱いたい人はいないからです。

しかし、2 ビット演算子には非常に実用的なケースがあります。 Math.floor( ) の代わりに倍ビット演算子を使用できます。ダブルネガティブ位置決め演算子の利点は、同じ操作をより速く実行できることです。

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

省略形は次のとおりです:

~~4.9 === 4  //true

上記は、JavaScript 開発者が知っておく必要がある省略テクニック (上級) の完全な紹介です。

JavaScript ビデオについて詳しく知りたい場合は、こちらをご覧ください。チュートリアル

、PHP 中国語 Web サイトに注意してください。

以上がJavaScript 開発者が知っておくべき簡単なヒント (上級)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。