替代代码行的 avaScript 单行代码

我们所有人都曾在某个时候看着一堵可怕的 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 转换为对象数组

这是一个不错的小单行代码，它获取 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 操作：查询和转换多个元素

这是一个功能强大的单行代码，可让您一次性查询和转换多个 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 调用

这是另一条简洁的线路，它对 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中文网其他相关文章！