Keperluan JavaScript: Bahagian 5-tutorial js-php.cn

JavaScript Essentials: Part 5

Sebelum ini dalam JavaScript Essentials: Bahagian 4, Kami membincangkan penyataan if and else, gelung untuk dan sementara. Dalam bahagian ini, kita akan melihat:

Fungsi
Panggil balik, janji, tak segerak & tunggu
Perkara besar seterusnya

Komen

Ulasan sangat bagus dan kami kini akan membincangkannya. Sudah lewat sehingga anda harus tahu apa itu komen. Bagaimanapun, ulasan dalam program kami tidak dilaksanakan. Komen bertujuan untuk mendokumentasikan kod kami. Terdapat tiga cara untuk menambah ulasan dalam Javascript. Kami mempunyai inline, multiline dan JsDoc.

Dalam talian

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

Salin selepas log masuk

Berbilang baris

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

Salin selepas log masuk

JsDoc

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

Salin selepas log masuk

Komen boleh diletakkan di mana-mana sahaja; namun, berhati-hati apabila meletakkannya selepas (atau pada penghujung) baris kod atau di bawah atau di atasnya.

Koma bertindih

Dalam javascript, semi-colon, ;, tidak diperlukan walau bagaimanapun, kadangkala ia membantu. Terdapat alat yang membantu anda dengannya. Titik koma bertitik menunjukkan penghujung pernyataan. Bagus.

Lekukan

Lekukan digunakan untuk menyusun kod untuk kejelasan dan kemudahan bacaan. Kekunci tab (pada papan kekunci) digunakan dalam inden. Lekukan kadangkala ialah "tab" atau "ruang". Ruang biasanya 2 atau 4. Jika anda menggunakan vscode, anda tidak perlu risau.

Contoh

Terdapat beberapa latihan daripada JavaScript Essentials: Bahagian 4 yang termasuk tetapi tidak terhad kepada "fizzbuzz", kata laluan dan pengesahan e-mel, dsb. Jika anda mengikuti pseudokod saya, anda akan menghadapi beberapa masalah. Saya akan memberikan coretan yang mempertimbangkan pesanan.

fizzbuzz untuk satu nombor

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

Salin selepas log masuk

fizzbuzz untuk tatasusunan

const numbers = [3, 6, 10, 15];

for (const givenNumber of numbers) {
  if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
    console.log("fizzbuzz");
  } else if (givenNumber % 3 === 0) {
    console.log("fizz");
  } else if (givenNumber % 5 === 0) {
    console.log("buzz");
  }
}

Salin selepas log masuk

pengesahan kata laluan

const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length !== 6) {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}
// - start with uppercase p, 'P'
else if (!veryWeakPassword.startsWith("P")) {
  console.log(
    `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
      "P"
    )} that "${veryWeakPassword}" starts with 'P'`
  );
}
// - end with underscore
else if (!veryWeakPassword.endsWith("_")) {
  console.log(
    `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
      "_"
    )} that "${veryWeakPassword}" ends with '_'`
  );
}
// - have uppercase q, 'Q'
else if (!veryWeakPassword.includes("Q")) {
  console.log(
    `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
      "Q"
    )} that "${veryWeakPassword}" has 'Q'`
  );
}
// - have lowercase r, 'r'
else if (!veryWeakPassword.includes("r")) {
  console.log(
    `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
      "r"
    )} that "${veryWeakPassword}" has 'r'`
  );
}
// - have its fifth character as uppercase v, 'V'
// fifth character with have index = fifth position - 1 = 4
// const fifthCharacter = veryWeakPassword[4]
else if (veryWeakPassword.charAt(4) !== "V") {
  console.log(
    `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
      4
    )}'`
  );
} else {
  console.log(`${veryWeakPassword} is a valid password`);
}

Salin selepas log masuk

Sesetengah penyelesaian lain akan menggunakan nested if and else.

// password validation
const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length === 6) {
  if (veryWeakPassword.startsWith("P")) {
    if (veryWeakPassword.endsWith("_")) {
      if (veryWeakPassword.includes("Q")) {
        if (veryWeakPassword.includes("r")) {
          if (veryWeakPassword.charAt(4) === "V") {
            console.log(`${veryWeakPassword} is a valid password`);
          } else {
            console.log(
              `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
                4
              )}'`
            );
          }
        } else {
          console.log(
            `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
              "r"
            )} that "${veryWeakPassword}" has 'r'`
          );
        }
      } else {
        console.log(
          `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
            "Q"
          )} that "${veryWeakPassword}" has 'Q'`
        );
      }
    } else {
      console.log(
        `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
          "_"
        )} that "${veryWeakPassword}" ends with '_'`
      );
    }
  } else {
    console.log(
      `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
        "P"
      )} that "${veryWeakPassword}" starts with 'P'`
    );
  }
} else {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}

Salin selepas log masuk

Apa pendapat anda tentang dua coretan itu? Secara praktikal, coretan kedua, walaupun ia berkesan, tidaklah begitu hebat.

Fungsi

Fungsi ialah sekeping kod yang boleh digunakan semula. Biasanya, fungsi melakukan perkara tertentu. Satu perkara. Ia boleh jadi apa sahaja.

Mari kita lihat bentuk umum (struktur) fungsi dalam JavaScript.

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

Salin selepas log masuk

function ialah kata kunci yang diperlukan semasa membuat fungsi. Kata kunci for diperlukan apabila anda ingin menggunakan gelung for.
functionName sepatutnya menjadi nama yang diberikan kepada fungsi tersebut. Idea untuk menamakan pembolehubah digunakan pada fungsi.
/* parameter */ merujuk kepada data yang anda ingin hantar ke fungsi.
// melakukan sesuatu ialah tindakan atau pengiraan yang kita ingin lakukan. Fungsi biasanya mengembalikan data selepas beberapa pemprosesan dilakukan. Ada kalanya tidak. Ia hanya mengemas kini beberapa data dan selesai.
{ // lakukan sesuatu } ialah badan atau blok fungsi

Kita boleh mempunyai fungsi yang mencetak "hello world"

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

Salin selepas log masuk

Kami melakukan kebaikan untuk menamakan fungsi kami dengan nama yang menerangkan fungsi fungsi itu.

Sekarang, apabila kita mempunyai fungsi, kita perlu "memanggil"nya untuk ia dilaksanakan. Untuk memanggil fungsi, anda memerlukan nama fungsi diikuti dengan ( dan ). Jika fungsi mengambil parameter, anda akan lulus argumen dalam ( dan ). Dalam kes kita, untuk fungsi "hello world", kita perlu lakukan, printHelloWorld();.

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

Salin selepas log masuk

Mari kita bergerak ke arah yang sedikit yang akan meluaskan senjata kita dan menjadikan fungsi mencipta menyeronokkan. Pertimbangkan fungsi ini yang menambah dua nombor dan kemudian mencetak teks yang memberitahu anda apa yang berlaku.

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

Salin selepas log masuk

Adakah ini memberi anda idea? Kita boleh menulis "fizzbuzz" dan pengesahan menggunakan fungsi. Kami boleh menjadi sangat kedekut dan halus sehingga kami akan menulis setiap keperluan pengesahan sebagai fungsi. Ia berlaku. Cuma jangan berlebihan.

Sekarang, pertimbangkan fungsi tambah. Bagaimana jika kita ingin menambah nombor yang berbeza, apa yang kita lakukan? Kita boleh mencipta satu lagi fungsi itu. Kita juga boleh mengubah nilai secara langsung. Betul ke? Ya. Anda akan kagum dengan apa yang boleh kami capai dengan fungsi.

Pertama sekali, jika kita ingin menambah nombor yang berbeza kita boleh menukar nombor.

const numbers = [3, 6, 10, 15];

for (const givenNumber of numbers) {
  if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
    console.log("fizzbuzz");
  } else if (givenNumber % 3 === 0) {
    console.log("fizz");
  } else if (givenNumber % 5 === 0) {
    console.log("buzz");
  }
}

Salin selepas log masuk

Baiklah, mari kita ubah fungsi untuk menambah 6 dan 100. Sekarang kita perlu mengubah fungsi. Terdapat penyelesaian untuk ini dan ia adalah untuk memperkenalkan parameter (data melalui pembolehubah). Kemudian kami akan menyerahkan data tersebut sebagai hujah.

Mari analisa fungsi tambah kami. Fungsi tambah beroperasi pada x dan y dan operan. Kita boleh menghantar nilai yang berbeza kepada x dan y dengan menghantar x dan y sebagai parameter.

const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length !== 6) {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}
// - start with uppercase p, 'P'
else if (!veryWeakPassword.startsWith("P")) {
  console.log(
    `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
      "P"
    )} that "${veryWeakPassword}" starts with 'P'`
  );
}
// - end with underscore
else if (!veryWeakPassword.endsWith("_")) {
  console.log(
    `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
      "_"
    )} that "${veryWeakPassword}" ends with '_'`
  );
}
// - have uppercase q, 'Q'
else if (!veryWeakPassword.includes("Q")) {
  console.log(
    `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
      "Q"
    )} that "${veryWeakPassword}" has 'Q'`
  );
}
// - have lowercase r, 'r'
else if (!veryWeakPassword.includes("r")) {
  console.log(
    `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
      "r"
    )} that "${veryWeakPassword}" has 'r'`
  );
}
// - have its fifth character as uppercase v, 'V'
// fifth character with have index = fifth position - 1 = 4
// const fifthCharacter = veryWeakPassword[4]
else if (veryWeakPassword.charAt(4) !== "V") {
  console.log(
    `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
      4
    )}'`
  );
} else {
  console.log(`${veryWeakPassword} is a valid password`);
}

Salin selepas log masuk

Daripada menambahkan nilai x dan y sebagai nilai dalaman, kami meneruskannya. Kini perbezaan antara parameter dan hujah ialah parameter diluluskan apabila mencipta (mendefinisikan) fungsi. Argumen ialah nilai yang diluluskan semasa memanggil fungsi. Jadi dalam fungsi tambah(x, y), x dan y ialah parameter (kita boleh katakan ruang letak, mewakili data yang akan dihantar ke fungsi). Dalam add(3, 30);, 3 dan 30 diluluskan sebagai argumen (nilai sebenar yang akan diproses). Harap maklum bahawa susunan hujah dan parameter mesti sepadan jika tidak, kita akan menghadapi hutang yang serius.

Adakah anda fikir cukup untuk mengambil senjata besar? Nah, saya rasa anda boleh. Anda hanya perlu bertenang dan tahu apa yang anda lakukan. Saya akan memberikan beberapa coretan.

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

Salin selepas log masuk

Lakukan perkara yang sama untuk "fizzbuzz". Balut fungsi di sekeliling coretan. Anda tidak perlu mengulas tentang pembolehubah yang digunakan. Lihat apa data yang perlu dihantar ke fungsi (input).

Kita boleh menghantar seberapa banyak parameter kepada fungsi. Walau bagaimanapun, saya akan menggalakkan anda untuk menetapkan beberapa had. Terdapat beberapa profesional yang mengatakan kira-kira tiga sudah cukup. Ada yang mengatakan kurang daripada lima. Anda perlu bijak mengenainya. Buat masa ini, katakan apabila bilangan parameter melebihi tiga, kita akan menggunakan tatasusunan atau objek. Ya. Kita boleh menghantar tatasusunan atau objek sebagai hujah.

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

Salin selepas log masuk

Tulis fungsi yang mengira purata tatasusunan nombor dengan melengkapkan fungsi ini.

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

Salin selepas log masuk

Pada ketika ini, perlu jelas bahawa fungsi boleh mengambil hujah. Secara praktikal, fungsi kami akan mengembalikan nilai atau sesuatu nilai selepas pengiraan dilakukan. Nilai yang dikira dikembalikan daripada fungsi. Fungsi yang mengembalikan nilai adalah dalam bentuk:

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

Salin selepas log masuk

// return someValue ialah satu-satunya perkara baharu di sini. return ialah kata kunci.
someValue ialah nilai yang dikembalikan daripada fungsi. Dan ia boleh menjadi apa-apa sahaja, fungsi kosong. Jangan berpeluh. Kami akan mengubah suai beberapa fungsi yang telah kami tulis sebelum ini supaya perkara menjadi lebih mudah.

Ingat fungsi tambah? Daripada mengelog nilai di dalam fungsi, kami akan mengembalikannya dan menetapkan nilai itu kepada pembolehubah kemudian menggunakan semula nilai itu kemudian.

const numbers = [3, 6, 10, 15];

for (const givenNumber of numbers) {
  if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
    console.log("fizzbuzz");
  } else if (givenNumber % 3 === 0) {
    console.log("fizz");
  } else if (givenNumber % 5 === 0) {
    console.log("buzz");
  }
}

Salin selepas log masuk

Ini semudah yang kita boleh katakan. Lakukan perkara yang sama untuk fungsi hitungInterest.

Fungsi boleh mengembalikan apa sahaja yang boleh dikembalikan.

Fungsi anak panah

Fungsi anak panah ialah cara lain untuk menulis fungsi. Biasanya, saya menggunakan fungsi anak panah apabila saya mempunyai fungsi mudah yang melakukan "perkara" yang sangat kecil atau dalam kaedah tatasusunan atau rentetan untuk gelung. Anda boleh menggunakannya sebagai ganti pengisytiharan fungsi (fungsi bernama). Kami katakan, fungsi, untuk menunjukkan kami ingin mencipta fungsi. Fungsi anak panah mempunyai ciri yang sama seperti fungsi deklaratif.

Fungsi anak panah dipanggil sedemikian kerana =>, pengendali anak panah gemuk. Ia dalam bentuk, mungkin anda pernah lihat:

const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length !== 6) {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}
// - start with uppercase p, 'P'
else if (!veryWeakPassword.startsWith("P")) {
  console.log(
    `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
      "P"
    )} that "${veryWeakPassword}" starts with 'P'`
  );
}
// - end with underscore
else if (!veryWeakPassword.endsWith("_")) {
  console.log(
    `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
      "_"
    )} that "${veryWeakPassword}" ends with '_'`
  );
}
// - have uppercase q, 'Q'
else if (!veryWeakPassword.includes("Q")) {
  console.log(
    `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
      "Q"
    )} that "${veryWeakPassword}" has 'Q'`
  );
}
// - have lowercase r, 'r'
else if (!veryWeakPassword.includes("r")) {
  console.log(
    `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
      "r"
    )} that "${veryWeakPassword}" has 'r'`
  );
}
// - have its fifth character as uppercase v, 'V'
// fifth character with have index = fifth position - 1 = 4
// const fifthCharacter = veryWeakPassword[4]
else if (veryWeakPassword.charAt(4) !== "V") {
  console.log(
    `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
      4
    )}'`
  );
} else {
  console.log(`${veryWeakPassword} is a valid password`);
}

Salin selepas log masuk

atau

// password validation
const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length === 6) {
  if (veryWeakPassword.startsWith("P")) {
    if (veryWeakPassword.endsWith("_")) {
      if (veryWeakPassword.includes("Q")) {
        if (veryWeakPassword.includes("r")) {
          if (veryWeakPassword.charAt(4) === "V") {
            console.log(`${veryWeakPassword} is a valid password`);
          } else {
            console.log(
              `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
                4
              )}'`
            );
          }
        } else {
          console.log(
            `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
              "r"
            )} that "${veryWeakPassword}" has 'r'`
          );
        }
      } else {
        console.log(
          `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
            "Q"
          )} that "${veryWeakPassword}" has 'Q'`
        );
      }
    } else {
      console.log(
        `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
          "_"
        )} that "${veryWeakPassword}" ends with '_'`
      );
    }
  } else {
    console.log(
      `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
        "P"
      )} that "${veryWeakPassword}" starts with 'P'`
    );
  }
} else {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}

Salin selepas log masuk

Mari kita tulis semula fungsi tambah menggunakan fungsi anak panah.

function functionName(/* parameters */) {
  // do something
}

Salin selepas log masuk

=>, menunjukkan pengembalian nilai daripada ekspres x y. Jadi kata kunci pulangan digunakan secara tersirat. Sekali lagi kita boleh secara eksplisit mengembalikan nilai daripada fungsi menggunakan kata kunci pulangan namun, kita perlu menambah blok fungsi.

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

Salin selepas log masuk

Perbezaan antara keduanya ialah pada yang kedua, kami menambah blok, { dan } dan kata kunci pulangan yang mengembalikan nilai daripada fungsi. Sekali lagi, anda boleh memilih untuk mengembalikan nilai atau tidak.

Berfungsi sebagai hujah

Kita boleh menghantar fungsi sebagai hujah kepada fungsi lain. Pada asasnya, kami menganggap fungsi sebagai nilai. Mari kita pertimbangkan contoh remeh ini.

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

Salin selepas log masuk

Satu lagi tempat yang boleh kita lakukan adalah dengan kaedah tatasusunan atau kaedah rentetan. Pertimbangkan fungsi ini

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

Salin selepas log masuk

Kita dapat melihat bahawa kita boleh mengeluarkan fungsi panggil balik, (jumlah, elemen) => jumlah elemen, 0. Malah, ia adalah jumlah elemen yang boleh kita gantikan.

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

Salin selepas log masuk

Anda tahu kami lulus fungsi lain yang mengambil 2 hujah nombor dan mengembalikan nombor. Kita tidak perlu mencipta fungsi pun.

Kami telah melakukan beberapa matematik sebelum ini tetapi kali ini kami akan menggunakan fungsi untuk mengabstraksikan operator.

const numbers = [3, 6, 10, 15];

for (const givenNumber of numbers) {
  if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
    console.log("fizzbuzz");
  } else if (givenNumber % 3 === 0) {
    console.log("fizz");
  } else if (givenNumber % 5 === 0) {
    console.log("buzz");
  }
}

Salin selepas log masuk

Parameter terakhir dipanggil parameter lalai dan biasanya, ia diletakkan sebagai
hujah terakhir. Ini adalah sesuatu yang anda perlu lakukan jika anda ingin
gunakan nilai lalai. Coretan ini tidak jauh berbeza daripada yang sebelumnya
satu kecuali untuk pengenalan parameter lalai yang bermaksud untuk ketiga
hujah, kita boleh memilih untuk menghantar nilai untuknya atau tidak.

const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length !== 6) {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}
// - start with uppercase p, 'P'
else if (!veryWeakPassword.startsWith("P")) {
  console.log(
    `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
      "P"
    )} that "${veryWeakPassword}" starts with 'P'`
  );
}
// - end with underscore
else if (!veryWeakPassword.endsWith("_")) {
  console.log(
    `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
      "_"
    )} that "${veryWeakPassword}" ends with '_'`
  );
}
// - have uppercase q, 'Q'
else if (!veryWeakPassword.includes("Q")) {
  console.log(
    `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
      "Q"
    )} that "${veryWeakPassword}" has 'Q'`
  );
}
// - have lowercase r, 'r'
else if (!veryWeakPassword.includes("r")) {
  console.log(
    `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
      "r"
    )} that "${veryWeakPassword}" has 'r'`
  );
}
// - have its fifth character as uppercase v, 'V'
// fifth character with have index = fifth position - 1 = 4
// const fifthCharacter = veryWeakPassword[4]
else if (veryWeakPassword.charAt(4) !== "V") {
  console.log(
    `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
      4
    )}'`
  );
} else {
  console.log(`${veryWeakPassword} is a valid password`);
}

Salin selepas log masuk

Dalam jumlah const = performActionOnArray(numArray, add); kita boleh lulus fungsi secara langsung

// password validation
const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length === 6) {
  if (veryWeakPassword.startsWith("P")) {
    if (veryWeakPassword.endsWith("_")) {
      if (veryWeakPassword.includes("Q")) {
        if (veryWeakPassword.includes("r")) {
          if (veryWeakPassword.charAt(4) === "V") {
            console.log(`${veryWeakPassword} is a valid password`);
          } else {
            console.log(
              `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
                4
              )}'`
            );
          }
        } else {
          console.log(
            `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
              "r"
            )} that "${veryWeakPassword}" has 'r'`
          );
        }
      } else {
        console.log(
          `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
            "Q"
          )} that "${veryWeakPassword}" has 'Q'`
        );
      }
    } else {
      console.log(
        `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
          "_"
        )} that "${veryWeakPassword}" ends with '_'`
      );
    }
  } else {
    console.log(
      `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
        "P"
      )} that "${veryWeakPassword}" starts with 'P'`
    );
  }
} else {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}

Salin selepas log masuk

Janji

Sebelum apa-apa, mari kita tentukan beberapa istilah. Janji penting dalam niche kita.

Kendalian segerak: Ini ialah operasi yang dilaksanakan secara berurutan, dari atas ke bawah, satu demi satu. Untuk beberapa operasi A1 dan A2, A1 perlu dilengkapkan sebelum A2 akan dilaksanakan. Dengan cara ini, A2 tidak akan dilaksanakan sehingga A1. Pada satu masa satu operasi dilaksanakan. Kelemahan ini dipanggil menyekat.

function functionName(/* parameters */) {
  // do something
}

Salin selepas log masuk

Output untuk perkara di atas adalah dalam susunan linear seperti yang ditulis di atas.

// function to print "hello world"
function printHelloWorld() {
  console.log("Hello world");
}

Salin selepas log masuk

Ringkasnya, kod yang telah kami tulis setakat ini semuanya dilaksanakan dalam susunan segerak dan kami boleh mengetahui bila satu baris akan dilaksanakan.

Operasi tak segerak: Ini ialah operasi yang tidak dilaksanakan secara berurutan. Operasi ini berjalan serentak. Ini boleh menjadi beberapa operasi yang berjalan pada masa yang sama, secara praktikal, sedikit demi sedikit. Memandangkan kejayaan atau pelaksanaan satu operasi adalah bebas daripada perintah dan tidak menghalang pelaksanaan baris lain, kami memanggil tingkah laku ini bukan sekatan. Kami tidak dapat mengetahui bila talian tak segerak akan dilaksanakan.

printHelloWorld();

// the output of this function will be on the console/terminal

Salin selepas log masuk

Dan ini adalah outputnya.

function add() {
  const x = 3;
  const y = 20;

  const sum = x + y;

  console.log(`${x} + ${y} = ${sum}`);
}

add(); // 3 + 20 = 23

Salin selepas log masuk

Bolehkah anda mengenal pasti operasi tak segerak berdasarkan output?

Ia ialah fungsi setTimeout. Katakan ia berjalan di latar belakang. Ia tidak menyekat, jadi console.log terakhir telah dilaksanakan.

Beberapa Operasi Async

Permintaan rangkaian (Cth: panggilan API)
Pertanyaan pangkalan data
Operasi I/O Fail
API Web Javascript (setTimeout, setInterval, fetch, dll)

A Promise menyediakan cara untuk mengurus atau mengendalikan operasi tak segerak. Ia adalah satu cara untuk mengetahui keadaan operasi async, apabila ia dilaksanakan dan sama ada ia "dipenuhi" atau ia gagal.

Jom cipta Janji

Janji mempunyai bentuk:

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

Salin selepas log masuk

baharu dan Janji ialah kata kunci. selesaikan dan tolak ialah fungsi panggil balik. Kita boleh menggantikannya dengan nama lain. Dengan penukaran, kami menggunakan azam dan tolak.

Pegang janji

Promise mempunyai kaedah yang memberikan nilai yang telah diselesaikan, kaedah tangkapan yang memberikan ralat yang ditolak dan terdapat kaedah terakhir yang merupakan cara untuk membersihkan selepas keseluruhan proses. akhirnya adalah pilihan walaupun. Berikut ialah contoh mudah yang boleh anda mainkan.

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

Salin selepas log masuk

Lihat output dan lihat bagaimana kod itu dilaksanakan. console.log("Bye"); bukan yang terakhir dihukum bunuh. Kami mencipta operasi async kami menggunakan janji dan mengendalikannya menggunakan then and catch. Jika kita berfikir untuk melaksanakan operasi ini dengan teratur, maka kita boleh atau perlu meletakkan logik yang tinggal di dalam blok kemudian.

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

Salin selepas log masuk

Apa yang berlaku?

Isu dengan pendekatan menangani janji ini ialah kami cenderung untuk menyarang atau merantai operasi ini, kemudian menyekat lemak dan ia tidak begitu mesra. Jadi mari lihat async dan tunggu.

async dan tunggu

Dalam aliran data biasa, kami tidak mahu operasi async dijalankan di latar belakang. Kami mahu mendengarnya dan menggunakan hasilnya untuk melakukan sesuatu yang lain (seperti yang kami lakukan pada masa itu dan menangkapnya).

Mari kita buat operasi async dan kendalikannya menggunakan async dan tunggu.

Kami tahu cara mencipta fungsi bernama dan fungsi anak panah.

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

Salin selepas log masuk

Untuk menjadikan fungsi tak segerak, kami menggunakan kata kunci async.

const numbers = [3, 6, 10, 15];

for (const givenNumber of numbers) {
  if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
    console.log("fizzbuzz");
  } else if (givenNumber % 3 === 0) {
    console.log("fizz");
  } else if (givenNumber % 5 === 0) {
    console.log("buzz");
  }
}

Salin selepas log masuk

Sekarang apa sahaja operasi yang masuk ke dalam blok fungsi dan katakan dalam fungsi async yang ingin kita buat, kita perlu berurusan dengan operasi async yang lain, kemudian kita boleh menggunakan tunggu.

const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length !== 6) {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}
// - start with uppercase p, 'P'
else if (!veryWeakPassword.startsWith("P")) {
  console.log(
    `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
      "P"
    )} that "${veryWeakPassword}" starts with 'P'`
  );
}
// - end with underscore
else if (!veryWeakPassword.endsWith("_")) {
  console.log(
    `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
      "_"
    )} that "${veryWeakPassword}" ends with '_'`
  );
}
// - have uppercase q, 'Q'
else if (!veryWeakPassword.includes("Q")) {
  console.log(
    `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
      "Q"
    )} that "${veryWeakPassword}" has 'Q'`
  );
}
// - have lowercase r, 'r'
else if (!veryWeakPassword.includes("r")) {
  console.log(
    `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
      "r"
    )} that "${veryWeakPassword}" has 'r'`
  );
}
// - have its fifth character as uppercase v, 'V'
// fifth character with have index = fifth position - 1 = 4
// const fifthCharacter = veryWeakPassword[4]
else if (veryWeakPassword.charAt(4) !== "V") {
  console.log(
    `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
      4
    )}'`
  );
} else {
  console.log(`${veryWeakPassword} is a valid password`);
}

Salin selepas log masuk

Penantian memberitahu javascript untuk "menunggu" dan menerima nilai yang diselesaikan atau dipenuhi daripada janji.

// password validation
const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length === 6) {
  if (veryWeakPassword.startsWith("P")) {
    if (veryWeakPassword.endsWith("_")) {
      if (veryWeakPassword.includes("Q")) {
        if (veryWeakPassword.includes("r")) {
          if (veryWeakPassword.charAt(4) === "V") {
            console.log(`${veryWeakPassword} is a valid password`);
          } else {
            console.log(
              `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
                4
              )}'`
            );
          }
        } else {
          console.log(
            `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
              "r"
            )} that "${veryWeakPassword}" has 'r'`
          );
        }
      } else {
        console.log(
          `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
            "Q"
          )} that "${veryWeakPassword}" has 'Q'`
        );
      }
    } else {
      console.log(
        `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
          "_"
        )} that "${veryWeakPassword}" ends with '_'`
      );
    }
  } else {
    console.log(
      `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
        "P"
      )} that "${veryWeakPassword}" starts with 'P'`
    );
  }
} else {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}

Salin selepas log masuk

Apabila kami melaksanakan coretan di atas, kami mendapat ralat yang serupa dengan, Amaran: Untuk memuatkan modul ES, tetapkan "type": "module" dalam package.json atau gunakan sambungan .mjs..

Kami boleh membetulkan isu ini dengan mudah. Jalankan arahan, npm init -y. Pergi ke fail package.json dan tambah baris, "type": "module". Package.json sepatutnya kelihatan seperti

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

Salin selepas log masuk

Sekarang, jalankan semula coretan dan anda akan mendapat output yang serupa dengan

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

Salin selepas log masuk

Sekarang, katakan kita mahu menangani ralat penolakan janji, sekiranya tiada, kita perlu menggunakan klausa cuba dan tangkap di sekitar panggilan async.

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

Salin selepas log masuk

Tidak akan ada sebarang penolakan janji kerana kami tetapkan, const result = true. Tetapkannya kepada palsu. Dan output kami sepatutnya serupa dengan

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

Salin selepas log masuk

Jadi tujuan bercakap tentang janji dan async dan menunggu adalah untuk memberitahu anda bahawa kami akan banyak melakukan perkara itu. Rujuk kepada contoh operasi tak segerak yang disenaraikan di atas.

async dan tunggu, cuba dan tangkap dan akhirnya adalah kata kunci.

Kesimpulan

Pada ketika ini di mana kita telah membincangkan fungsi dan janji serta cara mengendalikannya, saya rasa kita sudah 50% dilengkapi dengan "pengetahuan" untuk memanipulasi data (aliran). Apa yang tinggal ialah membiasakan diri menulis kod javascript dan menjadi pengaturcara javascript yang cekap. Kotorkan tangan anda dengan JavaScript. Itulah satu-satunya cara anda akan mengodkan API bahagian belakang dan tidak berasa terhalang kerana anda mempunyai idea tetapi tidak tahu apa yang perlu dilakukan.

Seterusnya ialah menulis beberapa kod dan menyelesaikan beberapa masalah kemudian mula membina API. Itulah yang akan kami lakukan seterusnya, namun, saya akan menggalakkan anda untuk menyemak sumber di bawah.