八种技巧让你编写更简洁的 JavaScript 代码
在本文中，种技我们将介绍八种不同的巧让技术来帮助您编写更简洁的 JavaScript 代码。
现在让我们讨论每种技术，编写一次一个。更简
纯函数是代码在给定相同输入的情况下始终返回相同输出的函数。除了提供的种技输入之外，它不依赖于任何外部变量，巧让也不影响/更改任何外部变量。编写拥有纯函数使测试变得更加容易，更简因为它们使测试变得超级容易，代码因为您可以随时存根/模拟输入并测试您的种技预期值。让我们看看下面的巧让例子
let name = "Yu DongSu";
const splitName = () => {
name = name.split( );
}
name = splitName();
console.log(name); // outputs [ Yu, DongSu ]虽然上面的代码看起来很合适。不是编写开玩笑。这是更简因为该splitName函数依赖于一个名为的外部变量name，如果其他人开始更改此变量，代码该函数将splitName开始提供不同的输出。使它成为一个非纯函数，因为我们仍然会调用splitName()它，但输出会有所不同。
让我们把它改成一个纯函数，看看它是亿华云什么样子的：
let name = "Yu DongSu";
const splitName = (nameString) => {
return nameString.split( );
}
name = splitName(name);
console.log(name); // outputs [ Yu, DongSu ]通过上述更改，splitName现在是一个纯函数，因为：
它仅依赖于输入(nameString输入)。它不会更改/重新分配任何外部变量。更少或命名参数使用函数时，我们经常使用位置参数，这些参数必须在函数声明中声明时提供。例如，在 call中，如果不提供and arithmaticOp(num1, num2, operator)，我们就无法提供operator参数。虽然这适用于这个例子，但对于许多功能来说，这会成为一个问题。考虑以下示例：
const createButton = (title, color, disabled, padding, margin, border, shadow) => {
console.log(title, color, disabled, padding, margin, border, shadow)
}查看上面的代码，您已经可以看到，如果我们想在调用createButton+ 时将任何参数设为可选(使用默认值)，那将是一场灾难，可能看起来像这样：
createButton(Sudongyu er, undefined /* optional color */, true ,2px...., undefined /* optional margin*/);你可以看到上面的语句看起来一点也不干净。此外，从函数调用语句中很难看出哪个参数对应于函数的哪个参数。所以这是我们可以遵循的做法：
如果我们有 2 个或更少的参数，我们可以将它们保留为位置参数否则，我们提供一个带有键值对的b2b信息网对象让我们在上面的例子中使用这个技术，看看它是什么样子的：
const createButton = ({title, color, disabled, padding, margin, border, shadow}) => {
console.log(title, color, disabled, padding, margin, border, shadow)
}
createButton({
title: Sudongyu er,
disabled: true,
shadow: 2px....
});请注意，调用createButton函数的语句现在更简洁了。我们可以很容易地看到键值对中的哪个值对应于函数的参数。耶耶！
对象/数组解构考虑以下 javascript 示例，其中我们从对象中获取一些属性并分配给它们的各个变量：
const user = {
name: Sudongyu,
email: hi@xxx,
designation: Software Architect,
loves: The Code
}
const name = user.name;
const email = user.email;
const loves = user.loves;在上面的例子中，多次使用这个user.*符号是非常令人恶心的。这就是对象解构的用武之地。我们可以使用对象解构将上面的示例更改如下：
const user = {
name: Sudongyu,
email: hi@xxx,
designation: Software Architect,
loves: The Code
}
const {name, email, loves} = user;看！好多了。对?让我们考虑另一个例子：
const getDetails = () => {
return [xxx, sudongyu, Some Street, Some City, Some Zip, Some Country];
}
const details = getDetails();
const uName = details[0];
const uEmail = details[1];
const uAddress = `${details[2]}, ${details[3]}, ${details[4]}, ${details[5]}`;
const uFirstName = uName.split( )[0];
const uLastName = uName.split( )[1];啊。我什至讨厌编写上述示例的代码。虽然不得不这样做。您可以看到代码看起来非常怪异且难以阅读。我们可以使用 Array Destructuring 将其写得更简洁，如下所示：
const getDetails = () => {
return [xxx, sudongyu, Some Street, Some City, Some Zip, Some Country];
}
const [uName, uEmail, ...uAddressArr] = getDetails();
const uAddress = uAddressArr.join(, );
const [uFirstName, uLastName] = uName.split();
console.log({
uFirstName,
uLastName,
uEmail,
uAddress
});你可以看到这有多干净！
避免硬编码值/
*** 阿巴阿巴
*
*
*
*
*
*/
setInterval(() => {
// do something
}, 86400000);
// WHAT IS THIS 86400000 ???