10 个 JavaScript 单行代码

一行代码： 其实就是将多个功能压缩到一行 JavaScript 代码中。

它们可以帮助你写出更紧凑的代码，有时甚至能提升代码可读性。

好处多多： 节省时间、写出更简洁的代码，甚至还能让其他开发者刮目相看（仅仅一点点而已）。

1. 数组过滤

假设你有一组测试分数，需要找出所有 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) 用于检查每个数字是否为偶数。

什么时候使用： 过滤掉数组中不需要的元素是一项常见的操作。这个一行代码技巧可以帮助你保持数据干净整洁。

2. 数组映射

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

const sideLengths = [5, 3, 7];
const areas = sideLengths.map(num => num * num);

// areas 将是 [25, 9, 49]

map 方法会创建一个新数组，其中包含对原始数组中每个元素调用指定函数后的结果。

在本例中，函数用于对每个数字进行平方运算。

什么时候使用： 这个一行代码技巧可以用于对数组中的每个元素进行数学运算。

3. 展平数组

有时你会遇到嵌套数组，例如一个包含多个变体的商品列表。一行代码可以帮助你将这些结构展平：

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

// flatGroceries 将是 ["Apples", "Red", "Green", "Milk", "Whole", "2%"]

flat 方法（ES6 及更高版本提供）会创建一个新数组，其中包含所有子数组元素，它们被连接在一起。

这可以简化你的数据操作任务。

什么时候使用： 展平嵌套数组可以让你更容易地在一个维度上操作数据。

4. 唯一元素（不允许重复！）

假设你有一个包含重复条目的宾客名单。

一行代码可以帮助你确保每个人都能收到独一无二的邀请函（避免出现尴尬的“等等，我收到两个？”情况）。

// 原始宾客名单，包含重复条目
const guestList = ["Alice", "Bob", "Charlie", "Alice"];

// 通过将数组转换为 Set 然后再转换回数组来删除重复项
const uniqueGuestList = [...new Set(guestList)];

// uniqueGuestList 将是 ["Alice", "Bob", "Charlie"]
console.log(uniqueGuestList);

这个一行代码技巧利用了 Set 的神奇之处。Set 存储的是唯一的值。

我们使用展开运算符 (...) 将包含原始列表中唯一宾客的 Set 的元素重新展开到一个新数组中。

什么时候使用： 数据清理通常意味着从数组中删除重复项。这个一行代码技巧可以帮助你保持数据干净整洁。

5. 简写条件语句

你是否曾经写过跨越多行的 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 变量。

什么时候使用： 简写条件语句非常适合根据情况执行简单的分配操作，同时保持代码整洁高效。

6. 字符串反转

一行代码甚至可以用于处理文本！如何反转一个字符串，看看它是否是回文（一个正着读和倒着读都一样的单词，例如 "racecar"）？

const str = "Hello, world!";
const reversedStr = str.split('').reverse().join('');

// reversedStr 将是 "!dlrow ,olleH"

这个一行代码技巧将字符串拆分为字符数组，反转元素顺序，然后将它们重新连接成一个新字符串——所有操作都包含在一行代码中！

什么时候使用： 字符串操作任务，例如反转字符串或提取子字符串，可以使用一行代码来简化。

7. 对象属性是否存在

想象一下，你正在创建一个用户配置文件系统，需要确定用户对象中是否存在特定属性（例如 "email"）。这个一行代码技巧可能会有所帮助：

const user = { name: "Alice", age: 30 };

// 检查用户对象是否具有 'email' 属性
const hasEmail = "email" in user;

// hasEmail 将是 false，因为用户对象中不存在 'email' 属性

in 运算符用于检查对象中是否存在某个属性。在本例中，我们检查用户对象中是否存在 "email" 属性。

什么时候使用： 根据对象中指定属性的可用性验证数据是日常工作。这个一行代码技巧提供了一个简单的解决方案。

8. 默认参数值

如何创建一个向用户问好的操作，但在没有提供姓名时提供一个备用值？一行代码可以处理这种情况：

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

// 输出：Hello, Guest!

console.log(greet("Bob"));
// 输出：Hello, Bob!

这个一行代码技巧使用了 ES6 默认参数。在本例中，如果在调用 greet 函数时没有提供姓名，则使用默认值 "Guest"。

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

9. 紧凑数组

有时你会遇到包含空值或 null 元素的数组。一行代码可以帮助你删除这些不需要的元素：

const numbers = [1, 0, null, 3]; // 原始数组
const compactNumbers = numbers.filter(Boolean); // 使用 Boolean 作为回调函数来使用 filter 方法

// compactNumbers 将是 [1, 3]，因为 Boolean(1) 是 true，Boolean(0) 是 false，Boolean(null) 是 false，Boolean(3) 是 true

这个一行代码技巧再次使用了 filter 方法。但是，这次，过滤器使用 Boolean 构造函数检查“假值”（例如 null、undefined、0、"" 和 NaN）。

任何评估为 false 的元素都将从新数组中排除。

什么时候使用： 清理数组以删除不需要的元素可以确保你处理的是重要的数据。

10. 动态对象键

一行代码甚至可以用来构建键在操作后才确定的对象。不可思议吧？

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

// person 将是 {score: 90}

这个一行代码技巧使用了计算属性名。在创建对象时，使用 prop 变量的值作为花括号内的键名。

这允许根据变量或表达式动态创建键。

什么时候使用： 动态对象键对于创建结构没有预先设定的东西非常有用。

请记住

虽然很酷，但用于动态键生成的更高级的一行代码可能会影响可读性。请谨慎使用！