八种技巧让你编写更简洁的 JavaScript 代码

发布时间：2025-11-05 12:11:50 来源：云智核 作者：系统运维

在本文中，种技我们将介绍八种不同的巧让技术来帮助您编写更简洁的 JavaScript 代码。

现在让我们讨论每种技术，编写一次一个。更简

纯函数是代码在给定相同输入的情况下始终返回相同输出的函数。除了提供的种技输入之外，它不依赖于任何外部变量，巧让也不影响/更改任何外部变量。编写拥有纯函数使测试变得更加容易，更简因为它们使测试变得超级容易，代码因为您可以随时存根/模拟输入并测试您的种技预期值。让我们看看下面的巧让例子

let name = "Yu DongSu";

const splitName = () => {

name = name.split( );

}

name = splitName();

虽然上面的代码看起来很合适。不是编写开玩笑。这是更简因为该splitName函数依赖于一个名为的外部变量name，如果其他人开始更改此变量，代码该函数将splitName开始提供不同的输出。使它成为一个非纯函数，因为我们仍然会调用splitName()它，但输出会有所不同。

让我们把它改成一个纯函数，看看它是高防服务器什么样子的：

let name = "Yu DongSu";

const splitName = (nameString) => {

return nameString.split( );

}

name = splitName(name);

通过上述更改，splitName现在是一个纯函数，因为：

使用函数时，我们经常使用位置参数，这些参数必须在函数声明中声明时提供。例如，在 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+ 时将任何参数设为可选(使用默认值)，那将是一场灾难，可能看起来像这样：

你可以看到上面的语句看起来一点也不干净。此外，从函数调用语句中很难看出哪个参数对应于函数的哪个参数。所以这是我们可以遵循的做法：

让我们在上面的例子中使用这个技术，看看它是什么样子的：

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;

在上面的例子中，多次使用这个user.*符号是非常令人恶心的。这就是对象解构的用武之地。我们可以使用对象解构将上面的示例更改如下：

const user = {

name: Sudongyu,

email: hi@xxx,

designation: Software Architect,

loves: The Code

}

看！好多了。对?让我们考虑另一个例子：

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];

啊。我什至讨厌编写上述示例的代码。虽然不得不这样做。您可以看到代码看起来非常怪异且难以阅读。我们可以使用 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);

相关文章