持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情

翻译自github专栏

Day 20

编写规范代码

JavaScript 样式指南

JavaScript样式指南是一组标准，它告诉我们如何编写和组织JavaScript代码。在本节中，我们将讨论JavaScript指南以及如何编写整洁代码。

JavaScript是一种编程语言，与人类语言一样，它也有语法。为了更标准和简单，JavaScript的语法必须遵循一定的风格指导原则。

为什么我们需要样式指南

您已经独自编写代码很长时间了，但是现在基本上都是团队协作。只要项目还在运行，你就可以编写自己代码。当你在一个项目上一二十个开发中同时开发时候，如果没有任何指导原则，代码就会很混乱，很难管理。

您可以制定自己的指导方针，也可以调整完善指导方针。让我们了解最常见的指导原则。最常见的JavaScript样式指南

Airbnb JavaScript 样式指南
JavaScript 标准样式指南
Google JavaScript 样式指南

Airbnb JavaScript 样式指南

Airbnb是互联网上最受欢迎的JavaScript风格指南之一。它几乎涵盖了JavaScript的各个方面，并被许多开发人员和公司采用。您可以查看 AIRBNB样式指南。我也建议尝试一下。它们的风格非常易于使用，并且简单地理解。

JavaScript 标准样式指南

并不像Airbnb那么受欢迎的指南，但值得一看。这份指南中删除了样式指南中的分号。

Google JavaScript 样式指南

我对Google的指南没有太多说法，因为我没有使用过，所以建议您从链接看一下。

JavaScript编码约定

在本篇文章中，我们还使用了通用的JavaScript编码编写约定和指南。编码约定是由个人、团队或公司开发的编程风格指南。编码约定有助于：

编写整洁代码
提高代码可读性
提高代码复用性和稳定性

编码规范包括

变量的命名和声明规则
函数的命名和声明规则
空白、缩进和注释的使用规则
编程实践和原则

30DaysOfJavaScript 中使用的约定

在这篇文章中，我们遵循常规的JavaScript约定，但我也添加了我的写作偏好。

我们将骆驼用于变量和方法.
所有变量名称都以字母开头.
我们选择将const用于常量、数组、对象和函数。我们选择使用单引号或反勾号代替双引号。单引号成为趋势
我们还从代码中删除了分号，但这是个人喜好的问题。
算术运算符、赋值运算符和逗号后的空格
箭头函数代替函数声明
如果函数是一个线性函数，则显式返回而不是隐式返回
对象的最后一个值中没有逗号
我们更倾向于 +=, -=, *= /=, **= 替代完全写法
当我们使用console.log（）时最好使用标记字符串打印，以标识控制台的位置

变量

let firstName = 'Asabeneh'
let lastName = 'Yetayeh'
let country = 'Finland'
let city = 'Helsinki'

const PI = Math.PI
const gravity = 9.81

数组

我们选择使数组名称复数，带s

names
numbers
countries
languages
skills
fruits
vegetables

// arrays
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const numbers = [0, 3.14, 9.81, 37, 98.6, 100]
const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland']
const languages = ['Amharic', 'Arabic', 'English', 'French', 'Spanish']
const skills = ['HTML', 'CSS', 'JavaScript', 'React', 'Python']
const fruits = ['banana', 'orange', 'mango', 'lemon']
const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot']

方法

现在您已经非常熟悉函数声明、表达式函数、箭头函数和匿名函数。在本篇文章中，我们倾向于使用箭头函数而不是其他函数。箭头功能不能替代其他函数。此外，箭头函数和函数声明并不完全相同。因此，您应该知道何时使用，何时不使用。我将在其他部分详细介绍这一差异。如果函数是一个线性函数，我们将使用显式返回而不是隐式返回

// function which return full name of a person
const printFullName = (firstName, lastName) => firstName + ' ' + lastName

// function which calculates a square of a number
const square = (n) => n * n

// a function which generate random hexa colors
const hexaColor = () => {
  const str = '0123456789abcdef'
  let hexa = '#'
  let index
  for (let i = 0; i < 6; i++) {
    index = Math.floor(Math.random() * str.length)
    hexa += str[index]
  }
  return hexa
}

// a function which shows date and time
const showDateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = now.getMonth() + 1
  const date = now.getDate()
  let hours = now.getHours()
  let minutes = now.getMinutes()
  if (hours < 10) {
    hours = '0' + hours
  }
  if (minutes < 10) {
    minutes = '0' + minutes
  }

  const dateMonthYear = date + '.' + month + '.' + year
  const time = hours + ':' + minutes
  const fullTime = dateMonthYear + ' ' + time
  return fullTime
}

new Dat().toLocaleString() 可用于显示当前日期时间。 toLocaleString() 方法采用不同的参数。您可能会从中了解更多有关日期和时间的信息 link.

循环

我们涵盖了许多类型的循环。常规for循环、while循环、do-while循环、for-of循环、forEach循环和for-in循环。让我们看看如何使用它们：

for (let i = 0; i < n; i++){
    console.log()
}

// declaring an array variable
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']

// iterating an array using regular for loop
let len = names.length;
for(let i = 0; i < len; i++){
    console.log(names[i].toUpperCase())
}


// iterating an array using for of
for( const name of names) {
    console.log(name.toUpperCase())
}

// iterating array using forEach 
names.forEach((name) => name.toUpperCase())


const person = {
  firstName: 'Asabeneh',
  lastName: 'Yetayeh',
  age: 250,
  country: 'Finland',
  city: 'Helsinki',
  skills: ['HTML','CSS','JavaScript','React','Node','MongoDB','Python','D3.js'],
  isMarried: true
}
for(const key in person) {
    console.log(key)
}

对象

我们用const声明对象，字面量。

// declaring object literal
const person = {
  firstName: 'Asabeneh',
  lastName: 'Yetayeh',
  age: 250,
  country: 'Finland',
  city: 'Helsinki',
  skills: ['HTML','CSS','JavaScript','TypeScript', 'React','Node','MongoDB','Python','D3.js'],
  isMarried: true
}
// iterating through object keys
for(const key in person) {
    console.log(key, person[key])
}

条件判断

if, if else, if else if else, switch 和三元运算符

// syntax
if (condition) {
 // this part of code run for truthy condition
} else {
 // this part of code run for false condition
}

// if else
let num = 3
if (num > 0) {
 console.log(`${num} is a positive number`)
} else {
 console.log(`${num} is a negative number`)
}
//  3 is a positive number

// if else if else if else

let a = 0
if (a > 0) {
 console.log(`${a} is a positive number`)
} else if (a < 0) {
 console.log(`${a} is a negative number`)
} else if (a == 0) {
 console.log(`${a} is zero`)
} else {
 console.log(`${a} is not a number`)
}

// Switch More Examples
let dayUserInput = prompt('What day is today ?')
let day = dayUserInput.toLowerCase()

switch (day) {
 case 'monday':
   console.log('Today is Monday')
   break
 case 'tuesday':
   console.log('Today is Tuesday')
   break
 case 'wednesday':
   console.log('Today is Wednesday')
   break
 case 'thursday':
   console.log('Today is Thursday')
   break
 case 'friday':
   console.log('Today is Friday')
   break
 case 'saturday':
   console.log('Today is Saturday')
   break
 case 'sunday':
   console.log('Today is Sunday')
   break
 default:
   console.log('It is not a week day.')
}

// ternary

let isRaining = true
isRaining
 ? console.log('You need a rain coat.')
 : console.log('No need for a rain coat.')

Classes类

我们用以字母开头的CamelCase驼峰命名来声明类。

// syntax
class ClassName {
    // code goes here
}

// defining class
class Person {
  constructor(firstName, lastName) {
    console.log(this) // Check the output from here
    this.firstName = firstName
    this.lastName = lastName
  }
}

无论你遵循什么风格指南，都要保持一致。遵循一些编程范例和设计模式。请记住，如果您不按照特定的顺序或方式编写代码，代码可读性将会很差。

30天JavaScript: 编写规范代码(Day 20)