10 个 JavaScript One-Liners 让初学者看起来很专业

作者：OpenTiny社区

2024-07-10
广东
本文字数：3299 字
阅读完需：约 11 分钟

原文链接：https://pinjarirehan.medium.com/10-javascript-one-liners-for-beginner-developers-to-look-pro-b9548353330a
原文作者：Rehan Pinjari
翻译：小圆

你是不是在辛苦码字时，看到别人轻松甩出一行 JavaScript 就搞定难题？那感觉就像变魔术一样！

这就是单行代码的力量。这些简短的代码片段可以非常有效，让你感觉自己像一个 JavaScript 专家。

但是，在开始将多行代码简化成一行代码之前，我们先来分解一下。单行代码是指将复杂功能压缩到一行的简短 JavaScript 代码片段。它们可以帮助你编写更紧凑的代码，有时甚至也可以提升代码的可读性。说不定还能让其他程序员眼前一亮~

我们现在聚焦于实用且对初学者友好的“单行代码技巧”，它们将帮助你快速取得成果。

以下是一些可以添加到你的 JavaScript 工具箱中的不错选择：

Array Filtering

假设你有一个包含测试分数的数组，并且需要找到所有的 A（在这个案例中，代表偶数）。一行代码就可以帮到你！

const scores = [85, 92, 73, 98, 80];const evenScores = scores.filter(num => num % 2 === 0);
// evenScores 将是 [92, 98, 80]

复制代码

这段代码使用filter方法来创建一个新数组，该数组仅包含通过测试的元素。

箭头函数（num => num % 2 === 0）用于检查每个数字是否为偶数。

何时使用： 从数组中过滤掉不需要的元素是一种常见的操作。这种一行代码的方式对于保持数据的清洁非常有价值。

Array Mapping

如果你有一个边长数组，并想计算每个正方形的面积。这行代码可以将数组中的每个元素映射（转换）为其平方：

const sideLengths = [5, 3, 7];const areas = sideLengths.map(num => num * num);
// areas 将是 [25, 9, 49]

复制代码

map方法会通过对原始数组中的每个元素调用提供的函数来创建一个新数组，该新数组包含调用函数的结果。在这里，函数是将每个数字平方计算出来。

何时使用： 这种单行代码对于在数组的每个元素上执行数学运算非常有用。

Flattening Arrays

有时你会遇到嵌套数组，比如一个商店产品列表，每个变量都有子项。单行代码可以帮助你展平这些结构：

const nestedGroceries = [  ["Apples", ["Red", "Green"]],  ["Milk", ["Whole", "2%"]]];const flatGroceries = nestedGroceries.flat(2); 
// flatGroceries 将是 ["Apples", "Red", "Green", "Milk", "Whole", "2%"]

复制代码

flat方法（在 ES6 及更高版本中可用）会创建一个新数组，其中包含了所有子数组元素的连接。这可以简化你的数据操作任务。

何时使用： 展平嵌套数组可以更容易地在单一维度上处理数据。

Unique Elements(No Duplicates Allowed!)

如果你有一份嘉宾列表，但其中包含了一些重复条目。

单行代码可以帮助你确保每位嘉宾都收到唯一的邀请函（避免尴尬的“等等，我有两张？”的情况）。

// 具有重复条目的原始嘉宾列表const guestList = ["Alice", "Bob", "Charlie", "Alice"];
// 通过将数组转换为Set再转换回数组来删除重复项const uniqueGuestList = [...new Set(guestList)];
// 唯一的GuestList将是[“Alice”，“Bob”，“Charlie”]console.log(uniqueGuestList);

复制代码

这行代码利用了Set的方法。Set存储唯一值。

我们将原始列表中唯一嘉宾的Set元素展开（...）回一个新数组中。

何时使用： 数据清理通常意味着从数组中移除重复项。这行代码使你的数据保持干净和整洁。

Shorthand Conditionals

你是否曾经写过一个if...else语句跨多行，只是为了根据条件赋值？其实还有一种更简洁的方法：

// 定义用户的年龄const age = 18;
// 根据用户的年龄确定信息const message = age >= 18 ? "Welcome!" : "Sorry, not yet.";
// 输出信息console.log(message);

复制代码

这段代码使用了三元操作符，这是在单行中编写简短的 if-else 语句的巧妙方式。

会检查条件（age >= 18），并将对应的值（"Welcome!" 或 "Sorry, not yet."）赋给message变量。

何时使用： 速记条件语句非常适合根据情况执行简单的赋值，同时保持代码的整洁和高效。

可读性考虑：虽然三元运算符很方便，但复杂的情况可能会使代码难以理解。请谨慎使用！

String Reversal

单行代码也可以用于文本处理！比如，反转一个字符串，来看看它是否是回文（正读和反读都相同的单词，如“racecar”）？

const str = "Hello, world!";const reversedStr = str.split('').reverse().join('');
// reversedStr will be "!dlrow ,olleH"

复制代码

这行代码将字符串拆分成字符数组，反转数组元素的顺序，然后再将它们重新连接成一个新字符串——所有这些都在一行内完成！

何时使用： 像反转或提取子串这样的字符串处理任务可以通过单行代码简化。

记住：对于复杂的字符串操作，为了可读性，可能更适合使用更长的代码。

Object Property Existence

如果想创建一个问候用户的操作，但在未提供姓名时提供一个备用值怎么办？一行代码就可以处理这个问题：

const user = { name: "Alice", age: 30 };
// 检查用户对象是否具有“email”属性const hasEmail = "email" in user;
// hasEmail将为false，因为user对象中不存在“email”属性

复制代码

这行代码使用了 ES6 的默认参数。在这里，如果在调用greet函数时没有提供name，就会使用默认值“Guest”。

何时使用：默认参数可以避免在函数调用时没有提供正确参数时发生的错误，从而使你的代码更健壮。

Default Parameter Values

如何创建一个操作来问候用户，但在没有提供名称的情况下给出一个备份值？单行代码可以管理这一点：

const greet = (name = "Guest") => `Hello, ${name}!`;console.log(greet());
// 输出: Hello, Guest!
console.log(greet("Bob"));// 输出: Hello, Bob!

复制代码

这行代码使用 ES6 默认参数。这里，如果在调用greet函数时没有提供名称，则使用默认值“Guest”。

何时使用： 默认参数可以避免在没有正确参数的情况下调用函数时出错，从而使你的代码更易管理。

Compact Arrays

有时你可能会遇到包含空值或null元素的数组。单行代码可以帮助你解决：

const numbers = [1, 0, null, 3]; // 原始数组const compactNumbers = numbers.filter(Boolean); // 使用带布尔值的过滤器作为回调函数
// compactNumbers将为【1,3】，因为Boolean(1)为true，布尔值(0)为false，布尔值(null)为false，并且布尔值(3)为true

复制代码

这行代码再次使用了filter方法。不过，这次filter使用Boolean构造函数来检查“假值”（如null、undefined、0、空字符串""和NaN）。

任何计算结果为false的元素都将被排除在新数组之外。

何时使用：清理数组以移除不必要的元素可以确保你正在处理的是重要的数据。

Dynamic Obiect Keys

单行代码甚至可以用来构建操作后确定键的对象。

const prop = "score";const person = { [prop]: 90 };
// person will be {score: 90}

复制代码

这行代码使用了计算属性名。在创建对象时，prop变量的值被用作花括号内的键名。这里允许基于变量或表达式动态创建键。

何时使用：动态对象键对于创建结构未预设的对象很有用。

记住：虽然这些用于动态键生成的高级一行代码令人印象深刻，但它们可能会影响可读性。请谨慎使用！

最后

希望这些单行代码技巧，可以帮助你提升你的 JavaScript 技能。

虽然，单行代码是不错的技巧，但也需要谨慎使用，以确保在实际应用中代码的清晰性和可维护性。

请持续关注后续内容，我们将更深入地探讨 JavaScript 概念

（如有侵权，请联系删除）

关于 OpenTiny

OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库，包含基于 Angular+TypeScript 的 TinyNG 组件库，拥有灵活扩展的低代码引擎 TinyEngine，具备主题配置系统 TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具，可帮助开发者高效开发 Web 应用。

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～

OpenTiny 官网：https://opentiny.design/

OpenTiny 代码仓库：https://github.com/opentiny/

TinyVue 源码：https://github.com/opentiny/tiny-vue

TinyEngine 源码： https://github.com/opentiny/tiny-engine

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献~

发布于: 刚刚阅读数: 5