Kaedah Tatasusunan JavaScript, Di Bawah Hud (Bahagian )

Artikel ini menafikan kaedah tatasusunan JavaScript biasa—.map(), .includes(), .concat() dan .flat()—dengan mencipta semula fungsinya menggunakan gelung for. Walaupun gelung for mungkin kelihatan kurang cekap dan sukar dibaca, memahami mekanisme asasnya memberikan penghargaan yang lebih mendalam untuk kaedah tatasusunan terbina dalam. Jom terjun!

---

.map()

Kaedah .map() menjana tatasusunan baharu dengan menggunakan fungsi pada setiap elemen tatasusunan sedia ada. Ia hanya memproses elemen bukan kosong dan membiarkan tatasusunan asal tidak berubah.

Pertimbangkan aplikasi perbankan yang memerlukan senarai nama pelanggan daripada struktur data. Walaupun .map() ialah penyelesaian yang paling cekap, mari lihat cara untuk mencapai ini dengan gelung for:

<code class="language-javascript">const bankAccounts = [
  {
    id: 1,
    name: "Susan",
    balance: 100.32,
    deposits: [150, 30, 221],
    withdrawals: [110, 70.68, 120],
  },
  { id: 2, name: "Morgan", balance: 1100.0, deposits: [1100] },
  {
    id: 3,
    name: "Joshua",
    balance: 18456.57,
    deposits: [4000, 5000, 6000, 9200, 256.57],
    withdrawals: [1500, 1400, 1500, 1500],
  },
  { id: 4, name: "Candy", balance: 0.0 },
  { id: 5, name: "Phil", balance: 18, deposits: [100, 18], withdrawals: [100] },
];

// Using a 'for' loop:
function getAllClientNamesLoop(array) {
  const acctNames = [];
  for (const acct of array) {
    acctNames.push(acct.name);
  }
  return acctNames;
}

// Using .map():
function getAllClientNamesMap(array) {
  return array.map(acct => acct.name);
}

console.log(getAllClientNamesLoop(bankAccounts)); // Output: ['Susan', 'Morgan', 'Joshua', 'Candy', 'Phil']
console.log(getAllClientNamesMap(bankAccounts)); // Output: ['Susan', 'Morgan', 'Joshua', 'Candy', 'Phil']</code>

Pendekatan gelung for memerlukan mencipta tatasusunan kosong dan menolak nama secara berulang. Kaedah .map() adalah jauh lebih ringkas dan boleh dibaca.

.includes()

Kaedah ini menyemak sama ada tatasusunan mengandungi nilai tertentu, mengembalikan true atau false.

Mari kita bina fungsi untuk menunjukkan ini menggunakan gelung for dan .includes():

<code class="language-javascript">// Using a 'for' loop:
function doesArrayIncludeLoop(array, value) {
  let isIncluded = false;
  for (const elem of array) {
    if (elem === value) {
      isIncluded = true;
      break; // Optimization: Exit loop once value is found
    }
  }
  return isIncluded;
}

// Using .includes():
function doesArrayIncludeIncludes(array, value) {
  return array.includes(value);
}

console.log(doesArrayIncludeLoop([1, 1, 2, 3, 5], 6)); // Output: false
console.log(doesArrayIncludeIncludes([1, 1, 2, 3, 5], 3)); // Output: true</code>

Versi gelung for memulakan bendera dan berulang, manakala .includes() menyediakan penyelesaian langsung dan lebih bersih.

.concat()

Kaedah ini menggabungkan dua atau lebih tatasusunan menjadi satu tatasusunan baharu.

Berikut ialah perbandingan menggunakan for gelung dan .concat():

<code class="language-javascript">// Using 'for' loops:
function concatArraysLoop(arr1, arr2) {
  const concatenatedArray = [...arr1, ...arr2]; //Spread syntax for conciseness
  return concatenatedArray;
}

// Using .concat():
function concatArraysConcat(arr1, arr2) {
  return arr1.concat(arr2);
}

console.log(concatArraysLoop([0, 1, 2], [5, 6, 7])); // Output: [0, 1, 2, 5, 6, 7]
console.log(concatArraysConcat([0, 1, 2], [5, 6, 7])); // Output: [0, 1, 2, 5, 6, 7]</code>

Sekali lagi, .concat() menawarkan ringkasan dan kebolehbacaan yang unggul.

.flat()

Kaedah .flat() meratakan tatasusunan bersarang menjadi tatasusunan satu peringkat. Ia menerima parameter kedalaman pilihan.

Mari kita ratakan tatasusunan satu tahap dalam menggunakan kedua-dua kaedah:

<code class="language-javascript">// Using 'for' loops:
function flatArraysLoop(array) {
  const flattenedArray = [];
  for (const elem of array) {
    if (Array.isArray(elem)) {
      flattenedArray.push(...elem); //Spread syntax
    } else {
      flattenedArray.push(elem);
    }
  }
  return flattenedArray;
}

// Using .flat():
function flatArraysFlat(array) {
  return array.flat();
}

console.log(flatArraysLoop([1, 2, 3, [4, [5, 6]], 10])); // Output: [1, 2, 3, 4, [5, 6], 10]
console.log(flatArraysFlat([1, 2, 3, [4, [5, 6]], 10])); // Output: [1, 2, 3, 4, [5, 6], 10]</code>

Meratakan tatasusunan bersarang yang lebih dalam dengan gelung for menjadi semakin kompleks, menyerlahkan kuasa dan kesederhanaan .flat(depth).

---

Penjelajahan ini menunjukkan keanggunan dan kecekapan kaedah tatasusunan terbina dalam JavaScript. Bahagian kedua akan menyelidiki lebih banyak kaedah tatasusunan. Jangan ragu untuk berkongsi pendapat dan soalan anda! (Pautan ke Bahagian Kedua akan pergi ke sini)

Atas ialah kandungan terperinci Kaedah Tatasusunan JavaScript, Di Bawah Hud (Bahagian ). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!