Berbagi teknologi

Pemrograman JavaScript Tingkat Lanjut (Edisi Keempat)--Fungsi Catatan Pembelajaran (Bagian 1)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

fungsi

Setiap fungsi merupakan turunan dari tipe Fungsi, dan Fungsi juga memiliki properti dan metode, sama seperti tipe referensi lainnya. Fungsi adalah objek, dan nama fungsi adalah penunjuk ke objek fungsi, dan tidak harus terikat erat dengan fungsi itu sendiri.

Definisi fungsi deklaratif dari definisi fungsi

  1. function sum (n1,n2){
  2. return n1+n2;
  3. }

Ekspresi fungsi definisi fungsi

  1. let sum = function(n1,n2){
  2. return n1+n2;
  3. };

fungsi panah definisi fungsi

  1. let sum = (n1,n2)=>{
  2. return n1+n2;
  3. };

konstruktor definisi fungsi

  1. let sum = new Function("n1","n2","return n1+n2");
  2. /*这个构造函数接收任意多个字符串参数,
  3. 最后一个参数始终会被当成函数体,
  4. 而之前的参数都是新函数的参数*/

fungsi panah

Fungsi panah dapat digunakan di mana pun ekspresi fungsi dapat digunakan.

  1. let sum = (a,b)=>{
  2. return a+b;
  3. };
  4. let sum1 = function(a,b){
  5. return a+b;
  6. };
  7. //箭头函数适合嵌入函数的场景
  8. let arr = [1,2,3];
  9. console.log(arr.map(function(i) {return i+1;}));
  10. console.log(arr.map((i)=>{return i+1;}));
  11. //二者结果一样,但是箭头函数更为简洁
  12. //如果只有一个参数,括号可以不用。只有没有参数,或者多个参数的情况下,才使用括号
  13. let double = (x)=>{return 2*x;};
  14. let triple = x => {return 3*x};
  15. //箭头函数也可以不使用大括号,但这样会改变函数的行为。使用大括号就说明包含函数体,可以在一
  16. //个函数中包含多条语句,跟常规函数一样。如果不使用,后面只能有一行代码。
  17. let double = (x)=>{return 2*x;};
  18. let triple = x=>3*x;

Meskipun fungsi panah memiliki sintaks yang sederhana, ada banyak situasi di mana fungsi tersebut tidak cocok. Fungsi panah tidak dapat menggunakan argumen, super, new.target, juga tidak dapat digunakan sebagai konstruktor. Selain itu, fungsi panah tidak memiliki atribut prototype.

Parameter dalam fungsi panah

Fungsi ini didefinisikan menggunakan sintaks panah, sehingga parameter yang diteruskan ke fungsi tidak dapat diakses menggunakan kata kunci argumen, tetapi hanya dapat diakses melalui parameter bernama yang ditentukan.

  1. function foo() {
  2. console.log(arguments[0]);
  3. }
  4. foo(5); // 5
  5. let bar = () => {
  6. console.log(arguments[0]);
  7. };
  8. bar(5); // ReferenceError: arguments is not defined

Nama fungsi

Suatu fungsi dapat memiliki banyak nama.

  1. function sum(num1, num2) {
  2. return num1 + num2;
  3. }
  4. console.log(sum(10, 10)); // 20
  5. let anotherSum = sum;
  6. console.log(anotherSum(10, 10)); // 20
  7. sum = null;
  8. console.log(anotherSum(10, 10)); // 20

Nilai parameter bawaan

Anda dapat menetapkan nilai default ke parameter dengan menggunakan = setelah parameter dalam definisi fungsi.

  1. function makeKing(name = 'Henry') {
  2. return `King ${name} VIII`;
  3. }
  4. console.log(makeKing('Louis')); // 'King Louis VIII'
  5. console.log(makeKing()); // 'King Henry VIII'

Nilai parameter default tidak terbatas pada nilai primitif atau tipe objek, nilai yang dikembalikan oleh fungsi pemanggil juga dapat digunakan

  1. let romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI'];
  2. let ordinality = 0;
  3. function getNumerals() {
  4. // 每次调用后递增
  5. return romanNumerals[ordinality++];
  6. }
  7. function makeKing(name = 'Henry', numerals = getNumerals()) {
  8. return `King ${name} ${numerals}`;
  9. }
  10. console.log(makeKing()); // 'King Henry I'
  11. console.log(makeKing('Louis', 'XVI')); // 'King Louis XVI'
  12. console.log(makeKing()); // 'King Henry II'
  13. console.log(makeKing()); // 'King Henry III'

Perluasan dan pengumpulan parameter

ES6 menambahkan operator ekstensi baru, yang dapat digunakan untuk mengoperasikan dan menggabungkan pengumpulan data dengan sangat ringkas. Skenario yang paling berguna untuk operator spread adalah daftar parameter dalam definisi fungsi, yang dapat memanfaatkan sepenuhnya parameter pengetikan yang lemah dan panjang variabel dalam bahasa tersebut. Operator spread dapat digunakan untuk meneruskan parameter saat memanggil suatu fungsi, atau untuk menentukan parameter fungsi.

Parameter yang diperluas

  1. let values = [1, 2, 3, 4];
  2. function getSum() {
  3. let sum = 0;
  4. for (let i = 0; i < arguments.length; ++i) {
  5. sum += arguments[i];
  6. }
  7. return sum;
  8. }
  9. //不使用扩展操作符实现累加
  10. console.log(getSum.apply(null,values));
  11. //使用扩展操作符
  12. console.log(getSum(...values));

Kumpulkan parameter

Jika ada parameter bernama di depan parameter yang dikumpulkan, hanya parameter tersisa yang akan dikumpulkan; jika tidak, array kosong akan diperoleh. Karena hasil pengumpulan parameter bersifat variabel, maka hanya dapat dijadikan parameter terakhir.

  1. function getProduct(...values,lastValue){}//不可以
  2. function ignoreFirst(firstValue,...values){console.log(values)}//可以
  3. ignoreFirst(); // []
  4. ignoreFirst(1); // []
  5. ignoreFirst(1,2); // [2]
  6. ignoreFirst(1,2,3); // [2, 3]

Deklarasi fungsi dan ekspresi fungsi

Sebelum kode apa pun dieksekusi, mesin JavaScript membaca deklarasi fungsi dan menghasilkan definisi fungsi dalam konteks eksekusi. Ekspresi fungsi harus menunggu hingga kode dieksekusi pada barisnya sebelum definisi fungsi dibuat dalam konteks eksekusi.
  1. // 没问题
  2. console.log(sum(10, 10));
  3. function sum(num1, num2) {
  4. return num1 + num2;
  5. }
  6. /*函数声明提升*/
  7. // 会出错
  8. console.log(sum(10, 10));
  9. let sum = function(num1, num2) {
  10. return num1 + num2;
  11. };