JavaScript簡潔の道

7917 ワード
1.強いタイプの検査===の代わりに==を使う.
//       ，           。   ，     ，       ，    
0 == false // true
0 === false // false
2 == "2" // true
2 === "2" // false

//   
const value = "500";
if (value === 500) {
  console.log(value);
  //      ，    
}

if (value === "500") {
  console.log(value);
  //     ，   
}
2.変数
よく知られている方法で変数名をつけます.この方法によって、一人でそれらを見ると、検索して理解しやすいです.
悪い方法:
let daysSLV = 10;
let y = new Date().getFullYear();

let ok;
if (user.age > 30) {
  ok = true;
}
良い方法:
const MAX_AGE = 30;
let daysSinceLastVisit = 10;
let currentYear = new Date().getFullYear();

...

const isUserOlderThanAllowed = user.age > MAX_AGE;
変数名に不要な単語を追加しないでください.
悪い方法:
let nameValue;
let theProduct;
良い方法:
let name;
let product;
変数のコンテキストを簡単に書かないでください.
悪い方法:
const users = ["John", "Marco", "Peter"];
users.forEach(u => {
  doSomething();
  doSomethingElse();
  // ...
  // ...
  // ...
  // ...
  //            ，  `u`     
  register(u);
});
良い方法:
const users = ["John", "Marco", "Peter"];
users.forEach(user => {
  doSomething();
  doSomethingElse();
  // ...
  // ...
  // ...
  // ...
  register(user);
});
不必要なコンテキストを追加しないでください.
悪い方法:
const user = {
  userName: "John",
  userSurname: "Doe",
  userAge: "28"
};

...

user.userName;
良い方法:
const user = {
  name: "John",
  surname: "Doe",
  age: "28"
};

...

user.name;
3.関数
長くて説明性のある名前を使います.関数がある行動を表すことを考慮して、関数名は動詞または短い語であるべきで、その背後の意図やパラメータの意図を説明するために用いられる.関数の名前は彼らが何をしたかを説明するべきです.
悪い方法:
function notif(user) {
  // implementation
}
良い方法:
function notifyUser(emailAddress) {
  // implementation
}
大量のパラメータの使用を避ける.理想的には、関数は2つ以上のパラメータを指定するべきです.パラメータが少ないほど、テスト関数が容易になり、パラメータが多い場合は対象を使用することができます.
悪い方法:
function getUsers(fields, fromDate, toDate) {
  // implementation
}
良い方法:
function getUsers({ fields, fromDate, toDate }) {
  // implementation
}

getUsers({
  fields: ['name', 'surname', 'email'],
  fromDate: '2019-01-01',
  toDate: '2019-01-18'
});
標準パラメータの代替||を使用して動作します.
悪い方法:
function createShape(type) {
  const shapeType = type || "cube";
  // ...
}
良い方法:
function createShape(type = "cube") {
  // ...
}
一つの関数は一つのことしかしないべきです.一つの関数で複数の操作を実行しないでください.
悪い方法:
function notifyUsers(users) {
  users.forEach(user => {
    const userRecord = database.lookup(user);
    if (userRecord.isVerified()) {
      notify(user);
    }
  });
}
良い方法:
function notifyVerifiedUsers(users) {
  users.filter(isUserVerified).forEach(notify);
}

function isUserVerified(user) {
  const userRecord = database.lookup(user);
  return userRecord.isVerified();
}
Object.assignを使ってオブジェクトのデフォルト値を設定します.
悪い方法:
const shapeConfig = {
  type: "cube",
  width: 200,
  height: null
};

function createShape(config) {
  config.type = config.type || "cube";
  config.width = config.width || 250;
  config.height = config.height|| 250;
}

createShape(shapeConfig);
良い方法:
const shapeConfig = {
  type: "cube",
  width: 200
  // Exclude the 'height' key
};

function createShape(config) {
  config = Object.assign(
    {
      type: "cube",
      width: 250,
      height: 250
    },
    config
  );

  ...
}

createShape(shapeConfig);
パラメータとしてマークを使用しないでください.これは関数が行うべきものより多いことを教えてくれます.
悪い方法:
function createFile(name, isPublic) {
  if (isPublic) {
    fs.create(`./public/${name}`);
  } else {
    fs.create(name);
  }
}
良い方法:
function createFile(name) {
  fs.create(name);
}

function createPublicFile(name) {
  createFile(`./public/${name}`);
}
グローバル変数を汚染しないでください.既存のオブジェクトを拡張するには、元のオブジェクトのプロトタイプチェーンではなく、ESクラスと継承を使って関数を作成します.
悪い方法:
Array.prototype.myFunc = function myFunc() {
  // implementation
};
良い方法:
class SuperArray extends Array {
  myFunc() {
    // implementation
  }
}
4.条件
悪条件の使用を避ける.
悪い方法:
function isUserNotBlocked(user) {
  // implementation
}

if (!isUserNotBlocked(user)) {
  // implementation
}
良い方法:
function isUserBlocked(user) {
  // implementation
}

if (isUserBlocked(user)) {
  // implementation
}
使用条件は簡単です.これは取るに足りないかもしれませんが、言及する価値があります.この方法はブール値にのみ使用され、undefinedまたはnullではないと確信される場合に使用される.
悪い方法:
if (isValid === true) {
  // do something...
}

if (isValid === false) {
  // do something...
}
良い方法:
if (isValid) {
  // do something...
}

if (!isValid) {
  // do something...
}
できるだけ条件文を避けて、多形性と継承を使います.
悪い方法:
class Car {
  // ...
  getMaximumSpeed() {
    switch (this.type) {
      case "Ford":
        return this.someFactor() + this.anotherFactor();
      case "Mazda":
        return this.someFactor();
      case "McLaren":
        return this.someFactor() - this.anotherFactor();
    }
  }
}
良い方法:
class Car {
  // ...
}

class Ford extends Car {
  // ...
  getMaximumSpeed() {
    return this.someFactor() + this.anotherFactor();
  }
}

class Mazda extends Car {
  // ...
  getMaximumSpeed() {
    return this.someFactor();
  }
}

class McLaren extends Car {
  // ...
  getMaximumSpeed() {
    return this.someFactor() - this.anotherFactor();
  }
}
5.クラスclassはJavaScriptの中の新しい文法糖です.すべての仕事は以前の原型のようですが、今は違って見えます.彼らはES 5より普通の機能が好きです.
悪い方法:
const Person = function(name) {
  if (!(this instanceof Person)) {
    throw new Error("Instantiate Person with `new` keyword");
  }

  this.name = name;
};

Person.prototype.sayHello = function sayHello() { /**/ };

const Student = function(name, school) {
  if (!(this instanceof Student)) {
    throw new Error("Instantiate Student with `new` keyword");
  }

  Person.call(this, name);
  this.school = school;
};

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.printSchoolName = function printSchoolName() { /**/ };
良い方法:
class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    /* ... */
  }
}

class Student extends Person {
  constructor(name, school) {
    super(name);
    this.school = school;
  }

  printSchoolName() {
    /* ... */
  }
}
リンクを使用します.多くのライブラリ(jQueryやLodashなど)はこのパターンを使用しています.クラスでは、各関数の末尾にthisを返すだけで、より多くのこのような方法をリンクすることができる.
悪い方法:
class Person {
  constructor(name) {
    this.name = name;
  }

  setSurname(surname) {
    this.surname = surname;
  }

  setAge(age) {
    this.age = age;
  }

  save() {
    console.log(this.name, this.surname, this.age);
  }
}

const person = new Person("John");
person.setSurname("Doe");
person.setAge(29);
person.save();
良い方法:
class Person {
  constructor(name) {
    this.name = name;
  }

  setSurname(surname) {
    this.surname = surname;
    // Return this for chaining
    return this;
  }

  setAge(age) {
    this.age = age;
    // Return this for chaining
    return this;
  }

  save() {
    console.log(this.name, this.surname, this.age);
    // Return this for chaining
    return this;
  }
}

const person = new Person("John")
    .setSurname("Doe")
    .setAge(29)
    .save();
nodejs類構造例