在每个项目中使用的 JavaScript 一行代码

川长思鸟来 2023-09-26 21:10 125阅读 0赞

JavaScript 是一种功能强大的语言，可以用很少的代码做很多事情。

在某些情况下，您需要编写的代码量不会超过一行，这就是它们被称为单行代码的原因。

让我们来看看 10 个基本的 one liner，它们几乎在您创建的每个 JavaScript 项目中都值得使用。

**1. 如何将文字大写**  
const capitalize = (str) => `${str.charAt(0).toUpperCase()}${str.slice(1)}`;  
大写字符串不是 JavaScript 的内置功能。

为了解决这个问题，我们可以创建一个capitalize函数，它接受一些文本并将第一个字母设为大写，然后附加字符串的其余部分。

这种单行文字几乎适用于您想要大写的每一种文本。我最常使用它来显示用户名。

const name = “robert”;

capitalize(name) // “Robert”;  
**2. 如何计算百分比**  
const calculatePercent = (value, total) => Math.round((value / total) \* 100)  
计算百分比非常简单，只涉及一些简单的数学运算。如果您想显示用户进度，这是一项基本任务，例如递增进度条。

calculatePercent接受一定金额，除以总金额，然后乘以 100。最后，我们将Math.round()结果四舍五入到最接近的整数。

const questionsCorrect = 6;  
const questionTotal = 11;

calculatePercent(questionsCorrect, questionsTotal); // 55  
**3.如何获取随机元素**  
const getRandomItem = (items) => items\[Math.floor(Math.random() \* items.length)\];  
当您想为您的用户制作独一无二的东西时，获取随机元素和数组非常好。

例如，您可能希望根据某些操作向用户显示祝贺消息。但您可能不想每次都向他们展示相同的内容，因为那样会变得重复和乏味。

getRandomItem使用该Math.random()函数，它返回一个介于 0 和 1 之间的小数。将其乘以数组的长度以选择一个随机索引，该索引可用于选择一个随机元素。

const items = \[“Nicely done!”, “Good job!”, “Good work!”, “Correct!”\];

getRandomItem(items); // “Good job!”  
**4.如何删除重复元素**  
const removeDuplicates = (arr) => \[…new Set(arr)\];  
删除数组中的重复值是 JavaScript 中的一项基本任务。

例如，您可能要将一个用户添加到另一个用户的朋友列表中，但您不希望该用户被添加或显示两次。

此removeDuplicates函数利用SetJavaScript 中的构造函数，默认情况下会删除任何重复（原始）值。之后，我们使用扩展运算符…将其值扩展到一个新数组中。

const friendList = \[“Jeff”, “Jane”, “Jane”, “Rob”\];

removeDuplicates(friendList); // \[‘Jeff’, ‘Jane’, ‘Rob’\]  
**5. 如何根据特定属性对元素进行排序**  
const sortBy = (arr, key) => arr.sort((a, b) => a\[key\] > b\[key\] ? 1 : a\[key\] < b\[key\] ? -1 : 0);  
在 JavaScript 中显示数据时的一个常见任务是根据某些属性对其进行排序。

此sortBy函数使用本机排序方法，根据提供的键比较数组中的元素，并按升序对数组进行排序。

这有什么用？如果您要根据位置键获取应该位于某个位置的数据，sortBy将确保这些元素以正确的顺序放置。

const lessons = \[\{ position: 1, name: “Intro” \}, \{ position: 0, name: “Basics” \}\];

sortBy(lessons, ‘position’);

// \{position: 0, name: ‘Basics’\},  
// \{position: 1, name: ‘Intro’\}  
**6. 如何检查数组/对象是否相等**  
const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);  
使用 JavaScript 原语（如数字和字符串）检查是否相等很容易。

然而，检查数组和对象之间的相等性有点困难。幸运的是，您可以使用一个巧妙的技巧JSON.stringify将数组或对象转换为 JSON 字符串。如果所有元素匹配，isEqual将返回一个值 true。

当您期望来自用户的多个输入时，这非常方便，例如，如果他们正在回答一个问题并且您想将其与正确的解决方案进行比较。

isEqual(\[1, ‘2’\], \[1, 2\]); // false  
isEqual(\[1, 2\], \[1, 2\]); // true  
**7. 如何计算出现次数**  
const countOccurrences = (arr, value) => arr.reduce((a, v) => (v === value ? a + 1 : a), 0);  
另一个有用的基于数组的衬垫是计算数组中元素出现的次数。它使用.reduce()函数。如果在数组中找到该值，它会将计数器加一。

一个有用的例子可能是一项民意调查，以确定大多数人投票给了什么。

const pollResponses = \[“Yes”, “Yes”, “No”\];  
const response = “Yes”;

countOccurrences(pollResponses, response); // 2  
**8. 如何等待一定时间**  
const wait = async (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));  
在您的应用程序中，您可能希望等待一段时间。例如，如果您想延迟动画或正在等待重要操作完成。

您可以为wait函数提供一定的等待时间（以毫秒为单位）。因为它使用了承诺，所以您可以使用then回调或await关键字来确保它已完成。

wait(2000).then(() => goToSignupPage());  
**9. 如何使用对象数组的 Pluck 属性**  
const pluck = (objs, key) => objs.map((obj) => obj\[key\]);  
如果您需要从对象数组中提取数据并且对获取返回的所有数据不感兴趣，请使用该pluck函数。

它需要一个对象数组和每个对象包含的属性。该函数映射此数组并返回一个仅包含我们指定的属性值的数组。

例如，如果我们有一个用户数据数组，但我们只想将其转换为一个用户名数组，pluck可以这样做。

const users = \[\{ name: “Abe”, age: 45 \}, \{ name: “Jennifer”, age: 27 \}\];

pluck(users, ‘name’); // \[‘Abe’, ‘Jennifer’\]

10.**如何在某个位置插入元素**  
const insert = (arr, index, newItem) => \[…arr.slice(0, index), newItem, …arr.slice(index)\];  
如果我们想把一个元素放在数组中的精确位置，我们可以使用这个特殊的insert函数。

要使用它，我们只需要传递给insert我们想要转换的数组，我们想要插入元素的索引，以及要插入的元素。

这是一个很好的函数而不是.splice()因为它不会改变原始数组。它借助 slice 方法创建一个新数组，方法是将数组围绕指定索引分成两部分，然后创建一个新数组。

const items = \[1, 2, 4, 5\];

// insert the number 3 at index 2:

insert(items, 2, 3); // \[1, 2, 3, 4, 5\]  
![在这里插入图片描述][653de202e0cc4036a735cc6ca53d0ffd.png_pic_center]

[653de202e0cc4036a735cc6ca53d0ffd.png_pic_center]: https://img-blog.csdnimg.cn/653de202e0cc4036a735cc6ca53d0ffd.png#pic_center