コード行を置き換える 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 への並列呼び出しを実行し、非常にクリーンなエラー処理で実行する、もう 1 つのクリーンなライン、ワンライナーです。

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 がここの主人公です。 1 つのリクエストが失敗しても失敗せず、呼び出しごとにクリーンなステータス情報が返されます。

日付/時刻の書式設定: ライブラリを使用しないクリーンな日付文字列

これは、外部依存関係を持たずに日付をクリーンで読みやすい文字列に変換する素晴らしいワンライナーです:

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 の一般的な課題を解決します。これらのスニペットは強力ですが、読みやすさを常に最優先する必要があることに注意してください。コードが 1 行だけだと理解しにくくなる場合は、コードを複数行に分割してください。

プロジェクト内でこれらのパターンを自由に組み合わせて使用​​してください。古いブラウザをサポートしている場合は、 flat() や Intl.DateTimeFormat などの新しい JavaScript 機能に対するブラウザの互換性を忘れずに確認してください。

独自の強力な JavaScript ワンライナーを持っていますか?ぜひ見てみたいです！

X でフォローして、JavaScript のヒント、コツ、Web 開発に関するディスカッションをさらにご覧ください。私は、開発作業を容易にするコード スニペットとベスト プラクティスを定期的に共有しています。

好奇心を持ち続け、コーディングを続けてください。優れたコードとは、どれだけ書く量が少ないかではなく、どれだけ明確に意図を表現できるかが重要であるということを覚えておいてください。

以上がコード行を置き換える avaScript ワンライナーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。