Rumah >hujung hadapan web >tutorial js >Petua JavaScript Mesti Tahu untuk Pembangun

Petua JavaScript Mesti Tahu untuk Pembangun

王林
王林asal
2024-08-21 06:13:411054semak imbas

Must-Know JavaScript Tips for Developers

1. Menggelung Melalui Objek

Gunakan Object.entry() untuk menggelung melalui pasangan nilai kunci.

const person = {
  name: 'Tony Stark',
  age: 53,
  city: 'NewYork'
};

/*
name: Tony Stark
age: 53
city: NewYork
*/
for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}

Penjelasan:

  • Object.entry() menukarkan sifat objek kepada tatasusunan pasangan nilai kunci, menjadikannya mudah untuk mengulanginya.

 

2. Mengalih keluar Nilai Palsu daripada Tatasusunan

Gunakan penapis(Boolean) untuk menapis nilai palsu.
(Nilai palsu termasuk false, 0, '', null, undefined dan NaN)

const arr = [1, 2, 0, '', undefined, null, 3, NaN, false];

const filteredArr = arr.filter(Boolean);

console.log(filteredArr); // [1, 2, 3]

Penjelasan:

  • Dalam kod ini, Boolean diserahkan sebagai fungsi panggil balik untuk filter().
  • Fungsi Boolean()  ialah fungsi terbina dalam JavaScript yang mengembalikan benar untuk nilai kebenaran dan salah untuk nilai palsu.
  • Dengan menghantar Boolean sebagai fungsi panggil balik, filter() akan mengalih keluar semua nilai palsu daripada array arr dan mengembalikan tatasusunan baharu filteredArr dengan hanya nilai yang benar.

 

3. Meratakan Tatasusunan Berbilang Dimensi

Gunakan kaedah rata() untuk meratakan tatasusunan.

const multiDimensionalArray = [[1, 2], [3, 4, [5, 6]]];
const flattenedArray = multiDimensionalArray.flat(2);

// Output: [1, 2, 3, 4, 5, 6]
console.log(flattenedArray); 

Penjelasan:

  • Dalam kod ini, multiDimensionalArray ialah tatasusunan dua dimensi dengan dua tatasusunan bersarang.
  • Dengan memanggil kaedah flat() dengan kedalaman 2, semua elemen sub-tatasusunan digabungkan menjadi satu tatasusunan rata.
  • Array leper yang terhasil mengandungi semua elemen tatasusunan berbilang dimensi asal dalam satu dimensi.

 

4. Buat Array daripada Iterables

Gunakan Array.from() untuk mencipta tatasusunan daripada iterables.

// Converting String to an array
const str = "TonyStark";
const arr = Array.from(str);

// ['T', 'o', 'n', 'y', 'S', 't', 'a', 'r', 'k']
console.log(arr);
// Converting Set to an array
const set = new Set([1, 2, 3, 3, 4, 5]);
const arr = Array.from(set);
console.log(arr); // Output: [1, 2, 3, 4, 5]

Penjelasan:

  • Array.from() menukarkan objek boleh lelar atau seperti tatasusunan seperti rentetan, Set, Peta kepada tatasusunan.

 

5. Mengekstrak Nilai daripada Tatasusunan

Gunakan penstrukturan untuk mengekstrak nilai daripada tatasusunan.

const numbers = [1, 2, 3, 4, 5];
const [first, second, , fourth] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(fourth); // 4

Penjelasan:

  • Penstrukturan membolehkan anda menetapkan elemen tatasusunan kepada pembolehubah secara langsung dan melangkau nilai yang tidak diingini.

 

6. Mengekstrak Nilai daripada Objek

Gunakan pemusnah objek untuk mengekstrak sifat.

const person = {
  name: 'Tony Stark',
  age: 53,
  email: 'tonystark@starkindustries.com'
};

const {name, age, email} = person;

console.log(name); // Tony Stark
console.log(age); // 53
console.log(email); // tonystark@starkindustries.com

Penjelasan:

  • Menyahstruktur mengekstrak sifat objek dengan memadankannya dengan pembolehubah.

 

7. Melaksanakan Pelbagai Janji Selari

Promise.all() membolehkan berbilang janji dilaksanakan secara selari.

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');

Promise.all([promise1, promise2])
  .then(responses => {
    // handle responses from both requests here
    const [response1, response2] = responses;
    // do something with the responses
  })
  .catch(error => {
    // handle errors from either request here
    console.error(error);
  });

Penjelasan:

  • Dalam kod ini, kami membuat dua janji menggunakan kaedah fetch() untuk mengambil data daripada dua titik akhir yang berbeza.
  • Kami kemudiannya menghantar pelbagai janji kepada Promise.all() yang mengembalikan janji baharu yang diselesaikan apabila semua janji dalam tatasusunan telah diselesaikan.
  • Kami kemudiannya boleh menggunakan tatasusunan respons dalam blok then() untuk mengendalikan respons daripada kedua-dua permintaan. Jika salah satu janji ditolak, blok catch() akan mengendalikan ralat.

 

8. Mencari Nombor Terbesar dan Terkecil dalam Tatasusunan

Gunakan Math.max() dan Math.min() dengan sintaks spread.

const nums = [10, 12, 29, 60, 22];
console.log(Math.max(...nums)); // 60
console.log(Math.min(...nums)); // 10

Penjelasan:

  • Sintaks spread (...) mengembangkan elemen tatasusunan, membolehkan Math.max() dan Math.min() menilainya.

 

9. Menukar Sebarang Nilai kepada Boolean

Gunakan penolakan berganda !! untuk menukar nilai.

!!2; // true
!!''; // false
!!NaN; // false
!!'word'; // true
!!undefined; // false

Penjelasan:

  • Penolakan berganda (!!) dalam JavaScript ialah helah untuk menukar sebarang nilai kepada setara booleannya.
  • Pertama ! menukar nilai kebenaran kepada salah dan nilai palsu kepada benar dan yang kedua ! membalikkan boolean ini, menghasilkan dalam benar untuk nilai kebenaran dan salah untuk nilai palsu.

 

10. Pertukaran Nilai Pembolehubah

Gunakan penstrukturan tatasusunan untuk menukar nilai.

let a = 5;
let b = 10;

// Swap values using array destructuring
[a, b] = [b, a];

console.log(a); // 10
console.log(b); // 5

Penjelasan:

  • Dalam contoh ini, nilai a dan b ditukar tanpa menggunakan pembolehubah sementara.
  • [b, a] di sebelah kanan mencipta tatasusunan baharu dengan nilai b dan a, dan kemudian tugasan memusnahkan [a, b] di sebelah kiri memberikan nilai tersebut kembali kepada a dan b, dengan berkesan menukar nilai mereka.

Atas ialah kandungan terperinci Petua JavaScript Mesti Tahu untuk Pembangun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn