JavaScript コーディングに関する 19 のヒント

この記事は、JavaScript をベースとするあらゆる開発者に適しています。この記事は、誰もが JavaScript の基本をよりよく理解できるように、主に JavaScript のいくつかの短縮コードについて書きました。これらのコードが、さまざまな観点から JavaScript をより深く理解するのに役立つことを願っています。

三項演算子

if...else ステートメントを使用する場合、これはコードを節約する良い方法です。 if...else语句，那么这是一个很好节省代码的方式。

Longhand:

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

Shorthand:

const answer = x > 10 ? 'is greater' : 'is lesser';

你还可以像下面这样嵌套if语句：

const big = x > 10 ? " greater 10" : x

Short-circuit Evaluation

分配一个变量值到另一个变量的时候，你可能想要确保变量不是null、undefined或空。你可以写一个有多个if的条件语句或者Short-circuit Evaluation。

Longhand:

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

Shorthand:

const variable2 = variable1  || 'new';

不要相信我，请先相信自己的测试（可以把下面的代码粘贴在es6console）

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

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

声明变量

在函数中声明变量时，像下面这样同时声明多个变量可以节省你大量的时间和空间：

Longhand:

let x;
let y;
let x = 3;

Shorthand:

let x, y, z=3;

如果存在

这可能是微不足道的，但值得提及。做“如果检查”时，赋值操作符有时可以省略。

Longhand:

if (likeJavaScript === true)

Shorthand:

if (likeJavaScript)

注：这两种方法并不完全相同，简写检查只要likeJavaScript是true都将通过。

这有另一个示例。如果a不是true，然后做什么。

Longhand:

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

Shorthand:

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

JavaScript的for循环

如果你只想要原生的JavaScript，而不想依赖于jQuery或Lodash这样的外部库，那这个小技巧是非常有用的。

Longhand:

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

Shorthand:

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

Short-circuit Evaluation

如果参数是null或者是undefined，我们可以简单的使用一个Short-circuit逻辑运算，实现一行代码替代六行代码的写法。

Longhand:

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

Shorthand:

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

十进制指数

你可能看过这个。它本质上是一个写数字的奇特写法，就是一个数字后面有很多个0。例如1e7本质相当于10000000（1的后面有7个0）。它代表了十进制计数等于10000000。

Longhand:

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

Shorthand:

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;

对象属性

定义对象文字（Object literals）让JavaScript变得更有趣。ES6提供了一个更简单的办法来分配对象的属性。如果属性名和值一样，你可以使用下面简写的方式。

Longhand:

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

Shorthand:

const obj = { x, y };

箭头函数

经典函数很容易读和写，但它们确实会变得有点冗长，特别是嵌套函数中调用其他函数时还会让你感到困惑。

Longhand:

function sayHello(name) {
  console.log('Hello', name);
}

setTimeout(function() {
  console.log('Loaded')
}, 2000);

list.forEach(function(item) {
  console.log(item);
});

Shorthand:

sayHello = name => console.log('Hello', name);

setTimeout(() => console.log('Loaded'), 2000);

list.forEach(item => console.log(item));

隐式返回

return在函数中经常使用到的一个关键词，将返回函数的最终结果。箭头函数用一个语句将隐式的返回结果（函数必须省略{}，为了省略return关键词）。

如果返回一个多行语句（比如对象），有必要在函数体内使用()替代{}。这样可以确保代码是否作为一个单独的语句返回。

Longhand:

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

Shorthand:

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

默认参数值

你可以使用if语句来定义函数参数的默认值。在ES6中，可以在函数声明中定义默认值。

Longhand:

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

Shorthand:

volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24

Template Literals

是不是厌倦了使用+来连接多个变量变成一个字符串？难道就没有一个更容易的方法吗？如果你能使用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}`;

次のように if ステートメントをネストすることもできます:

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;

短絡評価

変数を使用する場合、ある変数値を別の変数に代入する、変数が null、unknown、または空でないことを確認することができます。複数の if を使用して、条件付きステートメントまたは短絡評価を作成できます。

手書き:

import { observable, action, runInAction } from 'mobx';

const { store, form, loading, errors, entity } = this.props;

短縮:

const { store, form, loading, errors, entity:contact } = this.props;

信じないでください、まず自分のテストを信じてください(次のコードをes6consoleに貼り付けることができます)

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.`

🎜🎜ショートハンド:🎜🎜

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

🎜存在する場合🎜🎜これは些細なことかもしれませんが、言及する価値があります。 「if チェック」を行う場合、代入演算子を省略できる場合があります。 🎜🎜🎜筆記体:🎜🎜

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

🎜🎜短縮体:🎜🎜

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

🎜🎜注: 🎜これら 2 つのメソッドはまったく同じではありません。likeJavaScript が true</コード>が渡されます。 🎜🎜別の例を次に示します。 <code>a が true ではない場合の対処方法。 🎜🎜🎜ロングハンド:🎜🎜

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 }

🎜🎜ショートハンド:🎜🎜

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

🎜ループ用JavaScript🎜🎜このちょっとしたトリックは、ネイティブJavaScriptだけが必要で、jQueryやLodashのような外部ライブラリに依存したくない場合に非常に便利です。 🎜🎜🎜手書き:🎜🎜

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

foo = (bar = mandatory()) => {
  return bar;
}

🎜🎜省略:🎜🎜

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

🎜Array.forEach省略:🎜

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

🎜短絡評価🎜🎜パラメータが null またはunknown の場合、単純に短絡論理演算を使用して、6 行のコードを 1 行のコードに置き換えることができます。 🎜🎜🎜手書き:🎜🎜

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

🎜10進指数🎜🎜これを見たことがあるかもしれません。これは基本的に数字の奇妙な書き方であり、数字の後に 0 がたくさんあります。たとえば、1e7 は基本的に 10000000 と同等です (1 の後には 7 0 が続きます) >) 。これは、10000000 に等しい 10 進表記を表します。 🎜🎜🎜筆記体:🎜🎜

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

🎜🎜短縮体:🎜🎜

~~4.9 === 4  //true

🎜オブジェクトプロパティ🎜🎜 JavaScriptをより面白くするためにオブジェクトリテラルを定義します。 ES6 では、オブジェクト プロパティを割り当てる簡単な方法が提供されます。プロパティ名と値が同じ場合は、次の省略形を使用できます。 🎜🎜🎜手書き:🎜🎜rrreee🎜🎜短縮:🎜🎜rrreee🎜アロー関数🎜🎜古典的な関数は読み書きが簡単ですが、特に入れ子関数が他の関数を呼び出す場合、少し冗長になります。 🎜🎜🎜筆記体:🎜🎜rrreee🎜🎜短縮体:🎜🎜rrreee🎜暗黙的なreturn🎜🎜return関数でよく使用されるキーワードは、関数の最終結果を返します。アロー関数は、暗黙的に 1 つのステートメントで結果を返します (return キーワードを省略するには、関数で {} を省略する必要があります)。 🎜🎜複数行のステートメント (オブジェクトなど) を返す場合は、関数本体で {} の代わりに () を使用する必要があります。これにより、コードが別のステートメントとして返されるようになります。 🎜🎜🎜筆記体:🎜🎜rrreee🎜🎜短縮体:🎜🎜rrreee🎜デフォルトパラメータ値🎜🎜 if ステートメントを使用して、関数パラメータのデフォルト値を定義できます。 ES6では関数宣言でデフォルト値を定義できるようになりました。 🎜🎜🎜筆記体:🎜🎜rrreee🎜🎜短縮体:🎜🎜rrreee🎜テンプレートリテラル🎜🎜 + を使用して複数の変数を 1 つの文字列に連結することにうんざりしていませんか?もっと簡単な方法はないでしょうか？ ES6 を使用できる場合は幸運です。 ES6 では、アポストロフィと ${} を使用し、変数を中かっこで囲む必要があります。 🎜🎜🎜手書き:🎜🎜rrreee🎜🎜短縮:🎜🎜rrreee🎜代入の分割🎜🎜 一般的な Web フレームワークのいずれかを使用している場合、配列の形式やデータ オブジェクトの間で受け渡しを行う機会がたくさんあります。 API 情報。データ オブジェクトがコンポーネントに到達したら、それを展開する必要があります。 🎜🎜🎜筆記体:🎜🎜rrreee🎜🎜短縮体:🎜🎜rrreee🎜変数名を自分で指定することもできます: 🎜rrreee🎜複数行文字列🎜🎜 複数行文字列の記述に使用したコードは次のようになります。 🎜

Longhand:

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'

但还有一个更简单的方法。使用撇号。

Shorthand:

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.`

Spread Operator

Spread Operator是ES6中引入的，使JavaScript代码更高效和有趣。它可以用来代替某些数组的功能。Spread Operator只是一个系列的三个点(...)。

Longhand:

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

Shorthand:

// 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()函数，使用Spread Operator你可以将一个数组插入到另一个数组的任何地方。

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语句，如果未定义将会抛出一个错误，或者你可以使用强制参数（Mandatory parameter）。

Longhand:

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

Shorthand:

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

foo = (bar = mandatory()) => {
  return bar;
}

Array.find

如果你以前写过一个查找函数，你可能会使用一个for循环。在ES6中，你可以使用数组的一个新功能find()。

Longhand:

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

Shorthand:

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

Object[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

这个函数可以正常工作。然而，需要考虑一个这样的场景：有很多种形式需要应用验证，而且不同领域有不同规则。在运行时很难创建一个通用的验证功能。

Shorthand:

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

现在我们有一个验证函数，可以各种形式的重用，而不需要为每个不同的功能定制一个验证函数。

Double Bitwise NOT

如果你是一位JavaScript新手的话，对于逐位运算符（Bitwise Operator）你应该永远不会在任何地方使用。此外，如果你不处理二进制0和1，那就更不会想使用。

然而，一个非常实用的用例，那就是双位操作符。你可以用它替代Math.floor()。Double Bitwise NOT运算符有很大的优势，它执行相同的操作要快得多。你可以在这里阅读更多关于位运算符相关的知识。

Longhand:

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

Shorthand:

~~4.9 === 4  //true

以上がJavaScript コーディングに関する 19 のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。