后端开发教程 - Java、Spring Boot 实战 - msg200.com
编写最少的 ES6 代码
编码愉快👨💻
在瞬息万变的 JavaScript 生态系统中，设计简洁高效的代码比以往任何时候都更加重要。ES6 的发布引入了一系列新功能，简化并精简了 JavaScript 的编写方式。本文探讨了各种新的 ES6 方法，它们可以取代老旧、冗长的模式，从而生成更简洁、更易读的代码。从布尔类型转换到强大的展开运算符，这些策略提高了代码的可读性、效率和可维护性。让我们来看看 JavaScript 编写者在构建精简 ES6 代码时应该遵循的一些基本技巧。
1. 布尔转换
根据 Airbnb 风格指南，今天推荐的方法
const age = Boolean(input.value) //old
const age = !!input.value //new
2. 空值合并
当左侧操作数为空或未定义时，返回其右侧
//old
const addId = (user, id) => {
user.id =
id !== null && id !== undefined
? id
: "Unknown"
return user
}
//new
const addId = (user, id) => {
user.id = id ?? "Unknown"
return user
}
3.默认参数
描述：函数参数默认为未定义，因此为这种可能性设置一个值很有用。
//old
const createUser = (name, email) => {
const user = {
email,
name: name ?? "Unknown",
}
// create user
}
//new
const createUser = (
name = "Unknown",
email
) => {
const user = { email, name }
// create user
}
4. 可选链式调用
描述：允许您读取深度嵌套属性的值，而无需检查它是否是有效链。
//old
const hasValidPostcode = u =>
u &&
u.address &&
u.address.postcode &&
u.address.postcode.valid
//new
const hasValidPostcode = u => u?.address?.postcode?.valid
5. 解构对象
描述：通过将对象的属性解包到不同的变量中来编写更少的代码。
//old
const save = params => {
saveData(
params.name,
params.email,
params.dob
)
}
//new
const save = ({name, email, dob}) => {
saveData(name, email, dob)
}
6. 解构数组
描述：通过将数组中的值解包到不同的变量中来编写更少的代码。
//old
const data = [
["axios", "recharts"],
["flocked", "flick"]
]
const plugins = data[0], apps = data[1]
//new
const data = [
["axios", "recharts"],
["flocked", "flick"]
]
const [plugins, apps] = data
7. 扩展运算符
描述：使用这个很酷的语法将两个对象合并为一个，在编码对象时也非常干净。
//old
const details = {name: "Man Utd"}
const stats = {games: 7, points: 21}
const team = Object.assign(
{},
details,
stats
)
//new
const details = {name: "Man Utd"}
const stats = {games: 7, points: 21}
const team = {
...details,
...stats
}
8. For(of)
描述：可以说所需的代码量相同，但 for(of) 比 forEach 快 24%。
//old
const array = []
const fillArray = items => {
items.forEach(i => array.push(i))
}
//new
const array = []
const fillArray = items => {
for (let i of items) {
array.push(i)
}
}
结论
总而言之，使用 ES6 功能可以显著简化你的 JavaScript 代码，使其更简洁、更易读、更高效。整合这些现有方法将使代码更简洁、更易于维护，从而提升开发效率和性能。实施这些方法可以提高你的代码规范并简化你的任务。