我们所有人都曾在某个时候看着一堵可怕的 JavaScript 代码墙，它们在我们内心默默咒骂，但我们很清楚应该有一种更好的方法。
经过一段时间的学习，我发现了一些简洁的俏皮话，可以消除许多行冗长的代码。
这些是真正有用、可读的技巧，它们利用现代 JavaScript 功能来解决常见问题。
因此，无论您是在清理代码还是刚刚开始一个新项目，这些技巧都可以帮助您编写更优雅且可维护的代码。
这里有 9 种你今天就可以使用的漂亮单线。
曾经尝试过展平如此深的数组吗？在过去，这意味着大量复杂的多重循环、临时数组以及太多的代码。
但现在它在强大的单行代码中执行得非常好：
const flattenArray = arr => arr.flat(Infinity); const nestedArray = [1, [2, 3, [4, 5, [6, 7]]], 8, [9, 10]]; const cleanArray = flattenArray(nestedArray); // Result: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
如果你以更传统的方式做到这一点，你会得到这样的结果：
function flattenTheHardWay(arr) {
let result = [];
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
result = result.concat(flattenTheHardWay(arr[i]));
} else {
result.push(arr[i]);
}
}
return result;
}
所有艰苦的工作都由 flat() 处理，添加 Infinity 会告诉它下降到任何可能的级别。简单，干净，而且有效。
如果您需要一个对象的真正深度克隆而不拉入 lodash？这是一个处理嵌套对象、数组甚至日期的零依赖解决方案：
const deepClone = obj => JSON.parse(JSON.stringify(obj));
const complexObj = {
user: { name: 'Alex', date: new Date() },
scores: [1, 2, [3, 4]],
active: true
};
const cloned = deepClone(complexObj);
老方法？您必须输入如下内容：
function manualDeepClone(obj) {
if (obj === null || typeof obj !== 'object') return obj;
if (obj instanceof Date) return new Date(obj);
const clone = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
clone[key] = manualDeepClone(obj[key]);
}
}
return clone;
}
快速提示： 这个单行代码确实有一些限制 - 它不会处理函数、符号或循环引用。但对于 90% 的用例来说，它几乎是正确的。
这是一个不错的小单行代码，它获取 CSV 数据并吐出一组可操作的对象，非常适合用于 API 响应或读取数据：
const csvToObjects = csv => csv.split('\n').map(row => Object.fromEntries(row.split(',').map((value, i, arr) => [arr[0].split(',')[i], value])));
const csvData = `name,age,city
Peboy,30,New York
Peace,25,San Francisco
Lara,35,Chicago`;
const parsed = csvToObjects(csvData);
// Result:
// [
// { name: 'Peboy', age: '30', city: 'New York' },
// { name: 'Peace', age: '25', city: 'San Francisco' },
// { name: 'Lara', age: '35', city: 'Chicago' }
// ]
老式的？哦，你可能会写这样的东西：
function convertCSVTheHardWay(csv) {
const lines = csv.split('\n');
const headers = lines[0].split(',');
const result = [];
for (let i = 1; i < lines.length; i++) {
const obj = {};
const currentLine = lines[i].split(',');
for (let j = 0; j < headers.length; j++) {
obj[headers[j]] = currentLine[j];
}
result.push(obj);
}
return result;
}
这是一种使用单行进行数据转换的有效方法，但在投入生产之前添加一些错误处理。
这是一个缩短的单行代码，可以同时删除重复项并对数组进行排序，非常适合清理数据集：
const uniqueSorted = arr => [...new Set(arr)].sort((a, b) => a - b); // Example of its use: const messyArray = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]; const cleaned = uniqueSorted(messyArray); // Result: [1, 2, 3, 4, 5, 6, 9] // For string sorting const messyStrings = ['banana', 'apple', 'apple', 'cherry', 'banana']; const cleanedStrings = [...new Set(messyStrings)].sort(); // Result: ['apple', 'banana', 'cherry']
这就是旧方法的样子：
function cleanArrayManually(arr) {
const unique = [];
for (let i = 0; i < arr.length; i++) {
if (unique.indexOf(arr[i]) === -1) {
unique.push(arr[i]);
}
}
return unique.sort((a, b) => a - b);
}
Set 完美地处理了重复项，然后展开运算符将其返回到数组。然后你只需调用 sort() 即可！
这是一个功能强大的单行代码，可让您一次性查询和转换多个 DOM 元素：
const flattenArray = arr => arr.flat(Infinity); const nestedArray = [1, [2, 3, [4, 5, [6, 7]]], 8, [9, 10]]; const cleanArray = flattenArray(nestedArray); // Result: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
传统方法是：
function flattenTheHardWay(arr) {
let result = [];
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
result = result.concat(flattenTheHardWay(arr[i]));
} else {
result.push(arr[i]);
}
}
return result;
}
这适用于所有现代浏览器，使您无需编写重复的 DOM 操作代码。
这是另一条简洁的线路，它对 API 进行并行调用，并以非常干净的错误处理方式进行。
const deepClone = obj => JSON.parse(JSON.stringify(obj));
const complexObj = {
user: { name: 'Alex', date: new Date() },
scores: [1, 2, [3, 4]],
active: true
};
const cloned = deepClone(complexObj);
更详细的是：
function manualDeepClone(obj) {
if (obj === null || typeof obj !== 'object') return obj;
if (obj instanceof Date) return new Date(obj);
const clone = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
clone[key] = manualDeepClone(obj[key]);
}
}
return clone;
}
Promise.allSettled 是这里的英雄；如果一个请求失败，它也不会失败，并且它会为每个调用返回干净的状态信息。
这是一个甜蜜的单行代码，可以将日期转换为干净、可读的字符串，而无需任何外部依赖：
const csvToObjects = csv => csv.split('\n').map(row => Object.fromEntries(row.split(',').map((value, i, arr) => [arr[0].split(',')[i], value])));
const csvData = `name,age,city
Peboy,30,New York
Peace,25,San Francisco
Lara,35,Chicago`;
const parsed = csvToObjects(csvData);
// Result:
// [
// { name: 'Peboy', age: '30', city: 'New York' },
// { name: 'Peace', age: '25', city: 'San Francisco' },
// { name: 'Lara', age: '35', city: 'Chicago' }
// ]
老式的方式看起来像这样：
function convertCSVTheHardWay(csv) {
const lines = csv.split('\n');
const headers = lines[0].split(',');
const result = [];
for (let i = 1; i < lines.length; i++) {
const obj = {};
const currentLine = lines[i].split(',');
for (let j = 0; j < headers.length; j++) {
obj[headers[j]] = currentLine[j];
}
result.push(obj);
}
return result;
}
Intl.DateTimeFormat 处理所有繁重的工作，包括本地化。不再需要手动构建日期字符串！
这是一个干净的单行代码，可以创建任何函数的去抖版本 - 非常适合搜索输入或窗口调整大小处理程序：
const uniqueSorted = arr => [...new Set(arr)].sort((a, b) => a - b); // Example of its use: const messyArray = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]; const cleaned = uniqueSorted(messyArray); // Result: [1, 2, 3, 4, 5, 6, 9] // For string sorting const messyStrings = ['banana', 'apple', 'apple', 'cherry', 'banana']; const cleanedStrings = [...new Set(messyStrings)].sort(); // Result: ['apple', 'banana', 'cherry']
传统的方式是这样的：
function cleanArrayManually(arr) {
const unique = [];
for (let i = 0; i < arr.length; i++) {
if (unique.indexOf(arr[i]) === -1) {
unique.push(arr[i]);
}
}
return unique.sort((a, b) => a - b);
}
这一行涵盖了所有基本的去抖动用例，并使您免于不必要地调用函数，特别是当快速连续生成输入（例如键入或调整大小）时。
这是另一个干净的单行代码，它通过内置验证和错误处理来处理 localStorage 中的对象存储：
const modifyElements = selector => Array.from(document.querySelectorAll(selector)).forEach(el => el.style);
// Use it like this:
const updateButtons = modifyElements('.btn')
.map(style => Object.assign(style, {
backgroundColor: '#007bff',
color: 'white',
padding: '10px 20px'
}));
// Or even simpler for class updates:
const toggleAll = selector => document.querySelectorAll(selector).forEach(el => el.classList.toggle('active'));
旧方法需要这样的东西：
function updateElementsManually(selector) {
const elements = document.querySelectorAll(selector);
for (let i = 0; i < elements.length; i++) {
const el = elements[i];
el.style.backgroundColor = '#007bff';
el.style.color = 'white';
el.style.padding = '10px 20px';
}
}
包装器为您提供了用于 localStorage 操作的干净 API，并自动处理所有 JSON 解析/字符串化。
这些俏皮话不仅仅是为了编写更少的代码，而是为了编写更智能的代码。每一个都以一种干净、可维护的方式解决了常见的 JavaScript 挑战。虽然这些片段很强大，但请记住，可读性应该始终是第一位的。如果单行代码使您的代码更难理解，请将其分解为多行。
请随意在您的项目中混合和匹配这些模式，如果您支持旧版浏览器，请不要忘记检查浏览器兼容性以获取较新的 JavaScript 功能，例如 flat() 或 Intl.DateTimeFormat。
你有自己强大的 JavaScript 俏皮话吗？我很想见他们！
在 X 上关注我，了解更多关于 Web 开发的 JavaScript 提示、技巧和讨论。我定期分享代码片段和最佳实践，让我们的开发生活更轻松。
保持好奇心，继续编码，并记住：好的代码并不在于你写得有多少，而是在于你如何清楚地表达你的意图。
以上是替代代码行的 avaScript 单行代码的详细内容。更多信息请关注PHP中文网其他相关文章！
