JavaScript学习指南

主题

编写清洁代码 ​

编写清洁代码 ​

JavaScript 风格指南 ​

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

JavaScript 是一种编程语言，就像人类语言一样，它有语法。JavaScript 的语法必须遵循某种风格指南来编写，以便于方便和简单。

为什么我们需要风格指南 ​

你已经独自编码很长时间了，但现在似乎要在团队中工作。只要代码能运行，你如何编写代码并不重要，但是当你在一个有10个或20个或更多开发人员的团队中工作在一个项目和同一个代码库上时，如果没有任何指南可遵循，代码将会混乱且难以管理。

你可以开发自己的指南和约定，或者你也可以采用已经开发好的指南。让我们看看最常见的已知指南。

最常见的 JavaScript 风格指南

  • Airbnb JavaScript 风格指南
  • JavaScript 标准风格指南
  • Google JavaScript 风格指南

Airbnb JavaScript 风格指南 ​

Airbnb 在互联网上拥有最受欢迎的 JavaScript 风格指南之一。它几乎涵盖了 JavaScript 的每个方面，并被许多开发人员和公司采用。你可以查看 Airbnb 风格指南。我也建议尝试一下。他们的风格非常易于使用且简单易懂。

标准 JavaScript 风格指南 ​

这个指南不如 Airbnb 受欢迎，但值得一看。他们在他们的风格指南中删除了分号。

Google JavaScript 风格指南 ​

我对 Google 的指南没有太多要说的，我也没有使用过，但我建议你从这个链接看一看。

JavaScript 编码约定 ​

在这个挑战中，我们也使用了一般的 JavaScript 编码编写约定和指南。编码约定是由个人、团队或公司开发的编程风格指南。

编码约定有助于：

  • 编写清洁代码
  • 提高代码可读性
  • 提高代码的可重用性和可维护性

编码约定包括

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

30DaysOfJavaScript 中使用的约定 ​

在这个挑战中，我们遵循常规的 JavaScript 约定，但我也添加了我的编写偏好。

  • 我们对变量和函数使用驼峰命名法。
  • 所有变量名都以字母开头。
  • 我们选择对常量、数组、对象和函数使用 const。我们选择使用单引号或反引号而不是双引号。单引号正在成为趋势。
  • 我们也从代码中删除了分号，但这是个人偏好的问题。
  • 算术运算符、赋值运算符周围的空格以及逗号后的空格
  • 箭头函数而不是函数声明
  • 如果函数是一行的，则显式返回而不是隐式返回
  • 对象最后一个值中没有尾随逗号
  • 我们更喜欢这个 +=、-=、*=、/=、**= 而不是更长的版本
  • 当我们使用 console.log() 时，最好用标签字符串打印以识别控制台来自哪里

变量 ​

js

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

const PI = Math.PI
const gravity = 9.81

数组 ​

我们选择使数组名称为复数

  • names
  • numbers
  • countries
  • languages
  • skills
  • fruits
  • vegetables
js
// 数组
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']

函数 ​

到现在为止，你已经非常熟悉函数声明、表达式函数、箭头函数和匿名函数。在这个挑战中，我们倾向于使用箭头函数而不是其他函数。箭头函数不是其他函数的替代品。此外，箭头函数和函数声明并不完全相同。所以你应该知道何时使用以及何时不使用。我将在其他部分详细介绍差异。如果函数是一行的，我们将使用显式返回而不是隐式返回

js
// 返回一个人全名的函数
const printFullName = (firstName, lastName) => firstName + ' ' + lastName

// 计算数字平方的函数
const square = (n) => n * n

// 生成随机十六进制颜色的函数
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
}

// 显示日期和时间的函数
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 Date().toLocaleString() 也可以用来显示当前日期时间。toLocaleString() 方法接受不同的参数。你可以从这个链接了解更多关于日期和时间的信息。

循环 ​

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

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

// 声明一个数组变量
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']

// 使用常规 for 循环迭代数组
let len = names.length;
for(let i = 0; i < len; i++){
    console.log(names[i].toUpperCase())
}


// 使用 for of 迭代数组
for( const name of names) {
    console.log(name.toUpperCase())
}

// 使用 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 声明对象字面量。

js
// 声明对象字面量
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
}
// 迭代对象键
for(const key in person) {
    console.log(key, person[key])
}

条件语句 ​

我们在之前的挑战中说过 if、if else、if else if else、switch 和三元运算符。

js
// 语法
if (condition) {
 // 这部分代码为真条件运行
} else {
 // 这部分代码为假条件运行
}
js
// 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
js
// 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`)
}
js
// Switch 更多示例
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.')
}
js
// 三元运算符

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

类 ​

我们用驼峰命名法声明类，以大写字母开头。

js
// 语法
class ClassName {
    // 代码在这里
}
js
// 定义类
class Person {
  constructor(firstName, lastName) {
    console.log(this) // 从这里检查输出
    this.firstName = firstName
    this.lastName = lastName
  }
}

无论你遵循什么风格指南，都要保持一致。遵循一些编程范式和设计模式。记住，如果你不按照某种顺序或方式编写代码，将很难阅读你的代码。所以，为了你自己或为了将要阅读你代码的人，通过编写可读的代码来帮个忙。

🌕 你很整洁。现在，你知道如何编写清洁代码，所以任何懂英语的人都能理解你的代码。你总是在进步，你在通往伟大的道路上已经前进了20步。

🎉 恭喜！🎉

Copyright © 2025 e2ways.com