Panduan Komprehensif untuk Fungsi Anak Panah ESnd

Pengenalan kepada ES6

ECMAScript 2015, juga dikenali sebagai ES6 (ECMAScript 6), ialah kemas kini penting kepada JavaScript, memperkenalkan sintaks dan ciri baharu yang menjadikan pengekodan lebih cekap dan lebih mudah untuk diurus. JavaScript ialah salah satu bahasa pengaturcaraan paling popular yang digunakan untuk pembangunan web dan penambahbaikan dalam ES6 meningkatkan keupayaannya.

Panduan ini akan merangkumi ciri-ciri penting yang diperkenalkan dalam ES6, dengan tumpuan khas pada Fungsi Anak Panah, satu cara baru untuk menulis fungsi.

Ciri-ciri Utama ES6

1. biar dan const

ES6 memperkenalkan dua cara baharu untuk mengisytiharkan pembolehubah: let dan const.

• biar: Mengisytiharkan pembolehubah berskop blok, bermakna pembolehubah hanya tersedia dalam blok yang diisytiharkan.
  

   let x = 10;
   if (true) {
     let x = 2;
     console.log(x); // 2 (inside block)
   }
   console.log(x); // 10 (outside block)
  

  Salin selepas log masuk

• const: Mengisytiharkan pembolehubah malar yang tidak boleh ditugaskan semula. Walau bagaimanapun, ini tidak menjadikan pembolehubah tidak berubah—objek yang diisytiharkan dengan const masih boleh menukar sifatnya.
  

   const y = 10;
   y = 5; // Error: Assignment to constant variable.
  
   const person = { name: "John", age: 30 };
   person.age = 31; // This is allowed.
  

  Salin selepas log masuk

2. Fungsi Anak Panah

Salah satu ciri ES6 yang paling banyak diperkatakan ialah Fungsi Anak Panah. Ia menyediakan sintaks yang lebih pendek dan ringkas untuk fungsi penulisan.

#### Perbandingan Sintaks:

Fungsi Tradisional (ES5):

   var add = function(x, y) {
     return x + y;
   };

Fungsi Anak Panah (ES6):

   const add = (x, y) => x + y;

Inilah yang menjadikan Fungsi Anak Panah berbeza:

• Sintaks yang lebih pendek: Anda tidak perlu menulis kata kunci fungsi dan anda boleh menghilangkan kurungan kerinting {} jika fungsi itu mempunyai satu pernyataan.
• Pulangan tersirat: Jika fungsi mengandungi hanya satu ungkapan, hasil ungkapan itu dikembalikan secara automatik.
• Tiada pengikatan ini: Fungsi anak panah tidak mempunyai ini sendiri, menjadikannya tidak sesuai untuk kaedah objek.

Contoh fungsi anak panah satu baris:

   const multiply = (a, b) => a * b;
   console.log(multiply(4, 5)); // 20

Fungsi anak panah juga boleh digunakan tanpa parameter:

   const greet = () => "Hello, World!";
   console.log(greet()); // "Hello, World!"

Untuk fungsi dengan lebih daripada satu baris, pendakap kerinting {} diperlukan dan pernyataan pulangan mestilah eksplisit:

   const sum = (a, b) => {
     let result = a + b;
     return result;
   };

Fungsi Anak Panah dan ini
Satu perbezaan penting ialah cara ini berkelakuan dalam Fungsi Anak Panah. Tidak seperti fungsi tradisional, Fungsi Anak Panah tidak mengikat ini sendiri—mereka mewarisi ini daripada konteks sekelilingnya.

   const person = {
     name: "John",
     sayName: function() {
       setTimeout(() => {
         console.log(this.name);
       }, 1000);
     }
   };
   person.sayName(); // "John"

Dalam contoh di atas, Fungsi Anak Panah di dalam setTimeout mewarisi ini daripada kaedah sayName, yang merujuk kepada objek orang dengan betul.

3. Memusnahkan Tugasan

Pemusnahan membolehkan kami mengekstrak nilai daripada tatasusunan atau objek dan menetapkannya kepada pembolehubah dengan cara yang lebih ringkas.

Pemusnahan Objek:

   const person = { name: "John", age: 30 };
   const { name, age } = person;
   console.log(name); // "John"
   console.log(age);  // 30

Pemusnahan Tatasusunan:

   const fruits = ["Apple", "Banana", "Orange"];
   const [first, second] = fruits;
   console.log(first);  // "Apple"
   console.log(second); // "Banana"

4. Operator Hamparan dan Rehat (...)

Pengendali ... boleh digunakan untuk mengembangkan tatasusunan menjadi elemen individu atau untuk mengumpulkan berbilang elemen ke dalam tatasusunan.

• Sebarkan: Kembangkan tatasusunan kepada elemen individu.
  

   const numbers = [1, 2, 3];
   const newNumbers = [...numbers, 4, 5];
   console.log(newNumbers); // [1, 2, 3, 4, 5]
  

  Salin selepas log masuk

• Rehat: Mengumpul berbilang argumen ke dalam tatasusunan.
  

   function sum(...args) {
     return args.reduce((acc, curr) => acc + curr);
   }
   console.log(sum(1, 2, 3, 4)); // 10
  

  Salin selepas log masuk

5. Janji

Janji digunakan untuk mengendalikan operasi tak segerak dalam JavaScript. Janji mewakili nilai yang mungkin tersedia sekarang, pada masa hadapan, atau tidak sama sekali.

Contoh:

   const myPromise = new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve("Success!");
     }, 1000);
   });

   myPromise.then(result => {
     console.log(result); // "Success!" after 1 second
   });

Dalam contoh ini, promise diselesaikan selepas 1 saat dan kaedah then() mengendalikan nilai yang diselesaikan.

6. Parameter Lalai

Dalam ES6, anda boleh menetapkan nilai lalai untuk parameter fungsi. Ini berguna apabila parameter tidak disediakan atau tidak ditentukan.

Contoh:

   function greet(name = "Guest") {
     return `Hello, ${name}!`;
   }
   console.log(greet());       // "Hello, Guest!"
   console.log(greet("John")); // "Hello, John!"

7. Kaedah Rentetan (termasuk(), startsWith(), endsWith())

Kaedah baharu telah ditambahkan pada rentetan untuk memudahkan tugasan biasa:

• termasuk(): Menyemak sama ada rentetan mengandungi nilai yang ditentukan.
  

   let str = "Hello world!";
   console.log(str.includes("world")); // true
  

  Salin selepas log masuk

• startsWith(): Menyemak sama ada rentetan bermula dengan nilai yang ditentukan.
  

   console.log(str.startsWith("Hello")); // true
  

  Salin selepas log masuk

• endsWith(): Menyemak sama ada rentetan berakhir dengan nilai yang ditentukan.
  

   console.log(str.endsWith("!")); // true
  

  Salin selepas log masuk

8. Kaedah Tatasusunan (cari(), findIndex(), daripada())

ES6 memperkenalkan kaedah baharu untuk bekerja dengan tatasusunan:

• find(): Mengembalikan elemen pertama yang memenuhi syarat.
  

   const numbers = [5, 12, 8, 130, 44];
   const found = numbers.find(num => num > 10);
   console.log(found); // 12
  

  Salin selepas log masuk

• findIndex(): Mengembalikan indeks elemen pertama yang memenuhi syarat.
  

   const index = numbers.findIndex(num => num > 10);
   console.log(index); // 1 (position of 12 in the array)
  

  Salin selepas log masuk

9. Classes

ES6 introduced classes to JavaScript, which are syntactical sugar over JavaScript’s existing prototype-based inheritance. Classes allow for cleaner and more understandable object-oriented programming.

Example:

   class Car {
     constructor(brand, year) {
       this.brand = brand;
       this.year = year;
     }

     displayInfo() {
       return `${this.brand} from ${this.year}`;
     }
   }

   const myCar = new Car("Toyota", 2020);
   console.log(myCar.displayInfo()); // "Toyota from 2020"

Conclusion

ES6 has transformed JavaScript, making it more efficient and easier to use. The introduction of Arrow Functions simplifies function syntax, while new features like destructuring, promises, classes, and the spread operator allow developers to write cleaner, more expressive code. Whether you are a beginner or an advanced developer, understanding these ES6 features is essential for writing modern JavaScript.

By mastering these concepts, you’ll be better equipped to handle real-world coding challenges and build efficient, scalable web applications.

Follow up with Arrow Functions project on GitHub

References

• https://www.w3schools.com/js/js_es6.asp
• https://towardsdatascience.com/javascript-es6-iterables-and-iterators-de18b54f4d4
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements

Atas ialah kandungan terperinci Panduan Komprehensif untuk Fungsi Anak Panah ESnd. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!