avaScript Satu Pelapis Yang Menggantikan Baris Kod

Kita semua, pada satu masa atau yang lain, melihat beberapa dinding mengerikan kod JavaScript yang mengutuk secara senyap dalam diri kita, mengetahui dengan baik bahawa mesti ada cara yang lebih baik.

Selepas beberapa lama meluangkan masa untuk belajar, saya telah menjumpai beberapa baris satu baris yang kemas yang akan menghapuskan banyak baris kod verbose.

Ini adalah petua yang benar-benar berguna dan boleh dibaca yang memanfaatkan ciri JavaScript moden untuk menangani masalah biasa.

Jadi, sama ada anda sedang membersihkan kod atau baru memulakan projek baharu, helah ini boleh membantu dengan kod yang lebih elegan dan boleh diselenggara.

Berikut ialah 9 pelapik satu yang bagus yang boleh anda gunakan hari ini.

Meratakan Tatasusunan Bersarang

Pernah cuba meratakan tatasusunan yang begitu dalam? Pada masa itu, ini bermakna banyak gelung berbilang rumit, tatasusunan sementara dan terlalu banyak kod.

Tetapi kini ia dilaksanakan dengan sangat baik dalam satu pelapik yang berkuasa:

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]

Jika anda melakukan ini dengan cara yang lebih tradisional, anda akan mempunyai sesuatu seperti ini:

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;
}

Semua kerja keras diuruskan oleh flat(), dan menambahkan Infinity memberitahunya untuk turun ke mana-mana tahap yang mungkin. Mudah, bersih dan berkesan.

Transformasi Objek: Klon Dalam Tanpa Ketergantungan

Jika anda memerlukan klon dalam sebenar objek tanpa menarik lodash? Berikut ialah penyelesaian kebergantungan sifar yang mengendalikan objek bersarang, tatasusunan dan juga tarikh:

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);

Cara lama? Anda perlu menaip sesuatu seperti ini:

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;
}

Pemakluman cepat: Satu pelapik ini mempunyai beberapa had - ia tidak akan mengendalikan fungsi, simbol atau rujukan bulat. Tetapi untuk 90% kes penggunaan, ia agak sesuai.

Pemprosesan Rentetan: Tukar CSV kepada Tatasusunan Objek

Ini adalah satu pelapik kecil yang bagus yang mengambil data CSV dan mengeluarkan pelbagai objek yang boleh dimanipulasi, sesuai untuk digunakan dalam respons API atau membaca dalam data:

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' }
// ]

Kopi lama? Oh, anda mungkin akan menulis sesuatu seperti ini:

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;
}

Ini adalah cara yang berkesan untuk melakukan transformasi data dengan satu pelapik, tetapi tambahkan beberapa pengendalian ralat sebelum memasukkannya ke dalam pengeluaran.

Operasi Tatasusunan: Alih Keluar Pendua dan Isih

Berikut ialah satu pelapik yang dipendekkan yang mengalih keluar pendua dan mengisih tatasusunan anda pada masa yang sama, sesuai untuk membersihkan set data:

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']

Beginilah rupa cara lama dahulu:

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 menjaga pendua dengan sempurna, dan kemudian pengendali hamparan mengubahnya semula menjadi tatasusunan. Dan anda hanya memanggil sort() selepas itu!

Manipulasi DOM: Pertanyaan dan Transformasikan Pelbagai Elemen

Berikut ialah satu pelapis berkuasa yang membolehkan anda membuat pertanyaan dan mengubah berbilang elemen DOM sekali gus:

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]

Pendekatan tradisional ialah:

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;
}

Ini berfungsi dalam semua penyemak imbas moden dan menjimatkan anda daripada menulis kod manipulasi DOM yang berulang.

Panggilan API Selari dengan Pengendalian Ralat Bersih

Ini adalah satu lagi talian bersih, satu baris yang melakukan panggilan selari ke API dan melakukannya dalam pengendalian ralat yang sangat bersih.

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);

Lebih banyak kata-kata ialah:

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 adalah wira di sini; ia tidak gagal jika satu permintaan gagal dan ia memberikan kembali maklumat status bersih untuk setiap panggilan.

Pemformatan Tarikh/Masa: Bersihkan Rentetan Tarikh Tanpa Perpustakaan

Berikut ialah satu pelapik manis yang menukarkan kurma menjadi rentetan yang bersih dan boleh dibaca tanpa sebarang kebergantungan luaran:

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' }
// ]

Cara lama akan kelihatan seperti ini:

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 mengendalikan semua pengangkatan berat, termasuk penyetempatan. Tiada lagi pembinaan rentetan tarikh manual!

Pengendalian Acara: Debounce Tanpa Kembung

Berikut ialah satu pelapik bersih yang mencipta versi nyahlantun mana-mana fungsi - sesuai untuk input carian atau pengendali ubah saiz tetingkap:

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']

Cara tradisional akan kelihatan seperti ini:

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);
}

Satu pelapik ini merangkumi semua kes penggunaan nyahlantun asas dan menjimatkan anda daripada memanggil fungsi yang tidak perlu, terutamanya apabila input dijana secara berturut-turut seperti menaip atau mengubah saiz.

Storan Tempatan: Storan Objek dengan Pengesahan

Ini hanya satu lagi pelapik bersih yang mengendalikan storan objek dalam localStorage dengan pengesahan terbina dalam dan pengendalian ralat:

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'));

Cara lama memerlukan sesuatu seperti ini:

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';
  }
}

Pembungkus memberikan anda API yang bersih untuk operasi LocalStorage dan mengendalikan semua penghuraian/stringifikasi JSON secara automatik.

Membungkus

Pelapik satu ini bukan sekadar menulis kurang kod – ia mengenai menulis kod yang lebih pintar. Setiap satu menyelesaikan cabaran JavaScript biasa dengan cara yang bersih dan boleh diselenggara. Walaupun coretan ini hebat, ingat bahawa kebolehbacaan harus sentiasa diutamakan. Jika satu baris menjadikan kod anda lebih sukar untuk difahami, pecahkannya kepada berbilang baris.

Jangan ragu untuk mencampur dan memadankan corak ini dalam projek anda dan jangan lupa untuk menyemak keserasian penyemak imbas untuk ciri JavaScript yang lebih baharu seperti flat() atau Intl.DateTimeFormat jika anda menyokong penyemak imbas yang lebih lama.

Ada pelapis JavaScript anda sendiri yang berkuasa? Saya suka melihat mereka!

Ikuti saya di X untuk mendapatkan lebih banyak petua JavaScript, helah dan perbincangan tentang pembangunan web. Saya kerap berkongsi coretan kod dan amalan terbaik yang menjadikan kehidupan pembangun kami lebih mudah.

Kekal ingin tahu, teruskan pengekodan dan ingat: kod yang baik bukan tentang seberapa sedikit anda menulis, tetapi seberapa jelas anda menyatakan niat anda.

Atas ialah kandungan terperinci avaScript Satu Pelapis Yang Menggantikan Baris Kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!