9 个简洁的 JavaScript 代码片段，适用于算法及其他用途

了解某些 JavaScript 单行代码可以节省你在开发或面试时的宝贵时间。以下是我在编程过程中实际使用过的一些我最喜欢的“一学就会”的代码片段。其中只有一个有点像代码高尔夫，而且不出所料，它使用了 reduce。

环绕列表

旋转是个巧妙的技巧，回绕也一样。在算法中，很多时候你需要对列表进行回绕。这意味着移动一定数量的空格，如果到达列表末尾，则返回到第一个索引。因此，如果一个列表有 8 个值，但你需要移动 10 个，那么你需要移动到第二个索引。你可以使用一堆复杂的 if 语句，或者……

const wrap = (arr, steps) => arr[steps % arr.length];
wrap(['a','b','c'], 0) // a 
wrap(['a','b','c'], 1) // b
wrap(['a','b','c'], 2) // c
wrap(['a','b','c'], 3) // a 
// etc ...

你可以根据不同的步骤实现不同的方法，但关键在于理解模运算。它是一个方便的小运算符，在处理类似“溢出”类型的问题时，请记住它。

记录变量及其名称

这在调试时真是个好技巧。多亏了对象简写符号，我们可以默认输出带有名称的变量。

const someVar = 1;
console.log({ someVar });
// logs out { someVar: 1 }

如果你输入了一堆日志（调试时你肯定会这么做），那么在各种异步、获取和循环的包围下，很难区分哪个是哪个。与其花时间输入多个参数console.log('some var', someVar)，不如直接加上几个花括号就完事了。

对象中的可选属性

如果您不希望属性指向 undefined 或 null ，您可以使用一些 if 语句来选择性地添加属性：

//...
const obj = {
  a: 'whatever',
};
if (b) {
  obj.c = 'ok';
}
return obj;
//...

然而，它很冗长，我一直很讨厌它。它可能很清晰，但很笨重。不过，多亏了对象扩展，这已经成为过去了：

return {
  a: 'Whatever',
  ...(b && { c: 'ok'}),
};

我们可以使用展开和&& 逻辑短路来动态检查是否通过展开来添加属性。当你只想返回一个对象，而不想创建临时变量时，这种方法非常方便。

JavaScript 中的睡眠

有几次我不得不处理一个糟糕的 API，它很慢，而且没有钩子来通知它何时完成。所以，我们只能等待一秒钟来确保它加载完成。我们还想使用 Promise 而不是 setTimeout 回调，所以使用 sleep 函数是理想的选择。我们只需等待一秒钟，然后继续执行即可。不需要回调！

const sleep = (ms) => new Promise(r => setTimeout(r, ms));

这也是承诺 setInterval 的方法。

交换变量值

在现代 JS 出现之前，如果要切换两个变量的值，必须引入第三个 temp 值。现在有了数组解构和赋值，我们可以在一行代码中完成：

a = 10;
b = 5;
[a,b] = [b,a];
// a is 5, b is 10

四舍五入到最接近的 10、100、1000…

如果你需要将数字粗略地划分成不同的等级，这个方法在算法中很有用。基本上，你要做的是先除法，把小数点往上移。“无用”的数字变成了小数，你就可以把它们四舍五入。为了使数字恢复到所需的大小，你需要乘以它。被忽略的数字现在变成了零。这是一个处理金钱或类似对数的尺度的巧妙技巧，在某个点之后，小的数字可以被四舍五入。

const rounder = (val, place) => Math.round(val / place) * place;
rounder(1549, 100); // 1500
rounder(15590, 1000); // 16000

使用 Set 删除重复项

我刚刚写了关于Set 的内容，显然这算是它们唯一的用途了。如果你有一个数组，并且想要删除重复项，那么可以使用 Set 来实现。

const val = [...new Set([1,2,1,3,1,4])];
// [ 1, 2, 3, 4 ]

别忘了将新的 Set 展开回常规数组。注意：处理大型列表时要小心，因为这可能不是最高效的解决方案。

统计字符实例

如果您有一个数组（或来自字符串的数组）并想知道字符出现了多少次，那么有一个非常巧妙的方法可以使用 reduce 来实现。

const charTotals = (arr) => arr.reduce((totals, char) => ({ 
  ...totals, [char]: (totals[char] || 0) + 1, 
}), {});
charTotals('Hi there!'.split(''));
// { H: 1, i: 1, ' ': 1, t: 1, h: 1, e: 2, r: 1, '!': 1 }

这个可能没那么有用，但我想确保你知道两种技巧：动态对象属性和使用对象隐式返回。这两点都是至关重要的知识，如果你不了解reduce，可以阅读这个。

ID 打印机/计数器

我认为我需要为 React 组件动态创建非数据库临时 ID，并将一个经典的计数器压缩到一行代码中。每次调用该函数时，计数器都会增加，并且其他任何函数都无法更改其内部状态。它使用闭包、立即调用函数表达式和一个默认值来保持代码的严谨性。

const counter = ((num = 1) => () => num++)();
counter() // 1
counter() // 2
counter() // 3

另外还有一个小技巧，在函数参数中使用默认值可以避免需要换行。如果你真的想让起始数字动态变化，可以不再使用 IIFE 函数：

const startCounter = (num = 1) => () => num++);
const counter100 = startCounter(100)
counter100() // 100
counter100() // 101
counter100() // 102

关于可读性

听着，我非常注重代码的可读性，而且我敢说这些代码片段有些不太直观。简洁带来的是可读性上的损失。我个人认为这些代码片段并不算太夸张，但其他人可能不这么认为。这就是为什么你应该尝试使用简短的命名函数和描述性变量。这些代码片段可以成为帮助你的代码更容易被别人理解的关键技巧。但最终还是取决于你和你的团队的喜好，所以请随意修改或扩展这里的任何内容。如果你有什么喜欢的巧妙的单行代码，请在评论区分享！

祝大家编码愉快，

麦克风