开发中常用的 JavaScript 单行代码有哪些

在JavaScript开发中，经常会用到一些简洁有效的单行代码来简化开发流程、增强代码的可读性和提高工作效率。这些单行代码可用于数组操作、字符串处理、对象操作、类型转换等多种场景。其中，使用 Array.prototype.filter() 方法来去除数组中的假值(如：false、null、0、""、undefined和NaN)是一个非常实用的例子。

这个技巧适用于需要清理数组数据时。在日常开发中，我们常常会遇到数组中掺杂了一些不需要的假值，这些假值可能会影响后续的数据处理或显示逻辑。Array.prototype.filter(Boolean) 的方法通过创建一个新数组，其包含原数组中所有转化为真值的元素，非常适合用来清理数组中的无效内容。这种方法不仅代码量少，运行效率高，而且非常易于理解和维护。

一、数组操作

去除数组中的假值

const cleanArray = arr => arr.filter(Boolean);

这段代码通过过滤器filter和Boolean构造函数快速去除数组中的所有假值元素，仅留下真值元素。

数组去重

const uniqueArray = arr => [...new Set(arr)];

利用Set对象的唯一性特性，可以将一个数组转换为Set对象，再通过展开运算符...转回数组，实现数组去重。

二、字符串处理

字符串反转

const reverseString = str => str.split('').reverse().join('');

这行代码演示了如何利用split方法将字符串分割成数组、reverse方法反转数组顺序，最后使用join方法将数组合并成字符串，从而达到字符串反转的目的。

生成随机十六进制颜色

const randomColor = () => `#${Math.floor(Math.random()*0xffffff).toString(16).padStart(6, '0')}`;

该代码通过随机生成一个介于0到0xffffff之间的数字，并将其转换为十六进制的字符串，使用padStart确保结果是有效的六位十六进制数，从而生成一个随机颜色。这个方法在需要动态生成颜色代码时非常实用。

三、对象操作

深度冻结对象

const deepFreeze = obj => {
  Object.keys(obj).forEach(prop => {
    if (typeof obj[prop] === 'object') deepFreeze(obj[prop]);
  });
  return Object.freeze(obj);
};

通过递归调用，这段代码实现了对一个对象的深度冻结。首先遍历对象的每一个属性，如果属性值是一个对象，则对该属性值递归调用deepFreeze函数，最后调用Object.freeze方法冻结对象。这个方法在需要确保对象不被修改时非常有用。

简易的深拷贝

const deepClone = obj => JSON.parse(JSON.stringify(obj));

利用JSON.stringify将对象转换为字符串，然后再用JSON.parse将字符串转回对象，从而实现一个对象的深拷贝。虽然这种方法无法复制函数等非JSON支持的数据类型，但它对于简单对象的深拷贝来说快速且高效。

四、类型转换

字符串转数字

const toNumber = str => +str;

这段代码展示了如何利用一元加法运算符+快速将字符串转换为数字。这是一个非常简洁和高效的类型转换方法。

布尔类型转换

const toBoolean = value => !!value;

利用两次逻辑非运算符!，可以将任意值转换为布尔类型。首次使用会将值转换为布尔值的反向值，第二次再次反转，从而得到原始值的布尔类型表达。

JavaScript 的单行代码技巧对于提高代码效率和简化开发过程具有重要意义。由于它们通常极其简洁，因此能大幅度提升代码的整洁度和可维护性。不过，值得注意的是，在使用这些技巧时，开发者应保证他们的代码可读性和可维护性，避免过度使用导致代码晦涩难懂。合理利用这些单行代码技巧，将有助于提升JavaScript开发的效率与质量。