Javascript melewatkan fungsi kosong sebagai parameter

Question

Pada Artikel ini kita akan membahas cara membuat fungsi kosong hanya menggunakan satu baris kode dalam JavaScript. Ini adalah cuplikan kode JavaScript satu baris yang menggunakan salah satu fitur ES6 paling populer => Arrow Function

Table of Contents Show

Bagaimana cara memberikan nilai kosong dalam JavaScript?
Bagaimana Anda melewatkan fungsi kosong?
Bagaimana cara menggunakan fungsi kosong di JavaScript?
Bisakah kita memberikan null sebagai argumen dalam JavaScript?

Mari kita definisikan fungsi singkat ini

const noop = () => {};

Ekspresi fungsi panah adalah alternatif ringkas untuk ekspresi fungsi tradisional, dengan beberapa perbedaan semantik dan batasan penggunaan yang disengaja

Fungsi panah tidak memiliki pengikatannya sendiri ke

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

6,

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

7, atau

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

8, dan tidak boleh digunakan sebagai metode

Fungsi panah tidak dapat digunakan sebagai konstruktor. Memanggil mereka dengan

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

_9 melempar

// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;

0. Mereka juga tidak memiliki akses ke kata kunci

// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;

1

Fungsi panah tidak dapat menggunakan

// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;

2 di dalam tubuhnya dan tidak dapat dibuat sebagai fungsi generator

param => expression

(param) => expression

(param1, paramN) => expression

param => {
  statements
}

(param1, paramN) => {
  statements
}

_

Parameter istirahat, parameter default, dan destrukturisasi dalam params didukung, dan selalu membutuhkan tanda kurung

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression

_

Fungsi panah dapat berupa

// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;

3 dengan mengawali ekspresi dengan kata kunci

// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;

3

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

_

Mari uraikan fungsi anonim tradisional menjadi fungsi panah paling sederhana langkah demi langkah. Setiap langkah di sepanjang jalan adalah fungsi panah yang valid

Catatan. Ekspresi fungsi tradisional dan fungsi panah memiliki lebih banyak perbedaan daripada sintaksisnya. Kami akan memperkenalkan perbedaan perilaku mereka secara lebih rinci dalam beberapa subbagian berikutnya

// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;

Dalam contoh di atas, tanda kurung di sekitar parameter dan tanda kurung di sekitar badan fungsi dapat dihilangkan. Namun, mereka hanya dapat dihilangkan dalam kasus-kasus tertentu

Tanda kurung hanya dapat dihilangkan jika fungsi memiliki satu parameter sederhana. Jika memiliki beberapa parameter, tidak ada parameter, atau default, destrukturisasi, atau parameter lainnya, tanda kurung di sekitar daftar parameter diperlukan

// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

// Arrow function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional anonymous function (no parameters)
(function () {
  return a + b + 100;
});

// Arrow function (no arguments)
() => a + b + 100;

Kurung hanya dapat dihilangkan jika fungsi mengembalikan ekspresi secara langsung. Jika badan memiliki jalur pemrosesan tambahan, kawat gigi diperlukan — demikian juga kata kunci

// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;

5. Fungsi panah tidak dapat menebak apa atau kapan Anda ingin kembali

// Traditional anonymous function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

Fungsi panah selalu tidak disebutkan namanya. Jika fungsi panah perlu memanggil dirinya sendiri, gunakan ekspresi fungsi bernama sebagai gantinya. Anda juga dapat menetapkan fungsi panah ke variabel sehingga memiliki nama

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

Fungsi panah dapat memiliki badan yang ringkas atau badan blok biasa

Dalam tubuh yang ringkas, hanya satu ekspresi yang ditentukan, yang menjadi nilai kembalian implisit. Dalam badan blok, Anda harus menggunakan pernyataan

// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;

5 yang eksplisit

const func = (x) => x * x;
// concise body syntax, implied "return"

const func2 = (x, y) => {
  return x + y;
};
// with block body, explicit "return" needed

Mengembalikan literal objek menggunakan sintaks tubuh ringkas

// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;

7 tidak berfungsi seperti yang diharapkan

const func = () => { foo: 1 };
// Calling func() returns undefined!

const func2 = () => { foo: function () {} };
// SyntaxError: function statement requires a name

const func3 = () => { foo() {} };
// SyntaxError: Unexpected token '{'

Ini karena JavaScript hanya melihat fungsi panah memiliki badan yang ringkas jika token yang mengikuti panah bukan kurung kurawal, jadi kode di dalam kurung kurawal ({}) diurai sebagai urutan pernyataan, di mana

// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;

8 adalah label, bukan

Untuk memperbaikinya, bungkus literal objek dalam tanda kurung

const func = () => ({ foo: 1 });

Ekspresi fungsi panah hanya boleh digunakan untuk fungsi non-metode karena mereka tidak memiliki

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

6 sendiri. Mari kita lihat apa yang terjadi ketika kita mencoba menggunakannya sebagai metode

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression

_0

Contoh lain yang melibatkan

// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

// Arrow function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional anonymous function (no parameters)
(function () {
  return a + b + 100;
});

// Arrow function (no arguments)
() => a + b + 100;

0

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression

_1

Karena badan kelas memiliki konteks

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

_6, panah berfungsi sebagai bidang kelas yang menutup konteks

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

6 kelas, dan

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

6 di dalam badan fungsi panah akan menunjuk dengan benar ke instance (atau kelas itu sendiri, untuk bidang statis). Namun, karena ini adalah penutupan, bukan pengikatan fungsi itu sendiri, nilai

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

6 tidak akan berubah berdasarkan konteks eksekusi

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression

_2

Properti fungsi panah sering dikatakan sebagai "metode terikat otomatis", karena setara dengan metode normal

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression

_3

Catatan. Bidang kelas ditentukan pada instans, bukan pada prototipe, jadi setiap pembuatan instans akan membuat referensi fungsi baru dan mengalokasikan penutupan baru, yang berpotensi menyebabkan lebih banyak penggunaan memori daripada metode tidak terikat normal

Untuk alasan serupa, metode

// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

// Arrow function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional anonymous function (no parameters)
(function () {
  return a + b + 100;
});

// Arrow function (no arguments)
() => a + b + 100;

5,

// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

// Arrow function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional anonymous function (no parameters)
(function () {
  return a + b + 100;
});

// Arrow function (no arguments)
() => a + b + 100;

6, dan

// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

// Arrow function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional anonymous function (no parameters)
(function () {
  return a + b + 100;
});

// Arrow function (no arguments)
() => a + b + 100;

7 tidak berguna saat dipanggil pada fungsi panah, karena fungsi panah dibuat

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

6 berdasarkan cakupan fungsi panah didefinisikan di dalamnya, dan nilai

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

6 tidak berubah berdasarkan bagaimana fungsinya

Fungsi panah tidak memiliki objek

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

_7 mereka sendiri. Jadi, dalam contoh ini,

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

_7 adalah referensi untuk argumen dari cakupan terlampir

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression

_4

Catatan. Anda tidak dapat mendeklarasikan variabel bernama

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

_7 di , jadi kode di atas akan menjadi kesalahan sintaksis. Ini membuat efek pelingkupan

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

_7 jauh lebih mudah untuk dipahami

Dalam kebanyakan kasus, menggunakan parameter istirahat adalah alternatif yang baik untuk menggunakan objek

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

7

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression

_5

Fungsi panah tidak dapat digunakan sebagai konstruktor dan akan memunculkan kesalahan saat dipanggil dengan

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

9. Mereka juga tidak memiliki properti

// Traditional anonymous function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

_6

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression

_6

Kata kunci

// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;

_2 tidak dapat digunakan dalam badan fungsi panah (kecuali jika digunakan dalam fungsi generator yang bersarang lebih lanjut dalam fungsi panah). Akibatnya, fungsi panah tidak dapat digunakan sebagai generator

Fungsi panah tidak boleh berisi jeda baris antara parameternya dan panahnya

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression

_7

Untuk tujuan pemformatan, Anda dapat meletakkan jeda baris setelah tanda panah atau menggunakan tanda kurung/kurung kurung di sekitar badan fungsi, seperti yang ditunjukkan di bawah ini. Anda juga dapat menempatkan jeda baris di antara parameter

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression

_8

Meskipun panah dalam fungsi panah bukanlah operator, fungsi panah memiliki aturan penguraian khusus yang berinteraksi secara berbeda dengan prioritas operator dibandingkan dengan fungsi biasa

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression

_9

Karena

// Traditional anonymous function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

_8 memiliki prioritas lebih rendah daripada kebanyakan operator, tanda kurung diperlukan untuk menghindari

// Traditional anonymous function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

9 diuraikan sebagai daftar argumen dari fungsi panah

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

_0

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

_1

Metode

// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

// Arrow function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional anonymous function (no parameters)
(function () {
  return a + b + 100;
});

// Arrow function (no arguments)
() => a + b + 100;

5,

// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

// Arrow function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional anonymous function (no parameters)
(function () {
  return a + b + 100;
});

// Arrow function (no arguments)
() => a + b + 100;

6, dan

// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

// Arrow function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional anonymous function (no parameters)
(function () {
  return a + b + 100;
});

// Arrow function (no arguments)
() => a + b + 100;

7 berfungsi seperti yang diharapkan dengan fungsi tradisional, karena kami menetapkan ruang lingkup untuk setiap metode

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

_2

Dengan fungsi panah, karena fungsi

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

_3 kita pada dasarnya dibuat pada cakupan

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

4 (global), fungsi ini akan menganggap

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

6 adalah

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

4

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

_3

Mungkin manfaat terbesar menggunakan fungsi panah adalah dengan metode seperti

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

7 dan

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

8 yang biasanya memerlukan semacam penutupan,

// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

// Arrow function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional anonymous function (no parameters)
(function () {
  return a + b + 100;
});

// Arrow function (no arguments)
() => a + b + 100;

5,

// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

// Arrow function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional anonymous function (no parameters)
(function () {
  return a + b + 100;
});

// Arrow function (no arguments)
() => a + b + 100;

6, atau

// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

// Arrow function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional anonymous function (no parameters)
(function () {
  return a + b + 100;
});

// Arrow function (no arguments)
() => a + b + 100;

7 untuk memastikan bahwa fungsi dijalankan dalam lingkup yang tepat

Bagaimana cara memberikan nilai kosong dalam JavaScript?

Gunakan kondisi dengan “” dan NULL untuk memeriksa apakah nilainya kosong . Lemparkan pesan setiap kali ua ser tidak mengisi nilai kotak teks.

Bagaimana Anda melewatkan fungsi kosong?

Dengan Python, untuk menulis fungsi kosong, kita menggunakan pernyataan pass . pass adalah pernyataan khusus dalam Python yang tidak melakukan apa-apa. Ini hanya berfungsi sebagai pernyataan tiruan. Kita juga bisa menggunakan pernyataan pass in while kosong.

Bagaimana cara menggunakan fungsi kosong di JavaScript?

Pernyataan kosong adalah titik koma ( ; ) yang menunjukkan bahwa tidak ada pernyataan yang akan dieksekusi, bahkan jika sintaks JavaScript memerlukannya . Perilaku sebaliknya, di mana Anda menginginkan banyak pernyataan, tetapi JavaScript hanya mengizinkan satu pernyataan, dimungkinkan menggunakan pernyataan blok, yang menggabungkan beberapa pernyataan menjadi satu pernyataan tunggal.

Bisakah kita memberikan null sebagai argumen dalam JavaScript?

Nilai null dalam JavaScript digunakan untuk merujuk ketiadaan nilai objek apa pun dan jika ada fungsi atau variabel yang mengembalikan null, maka kita dapat menyimpulkan bahwa objek tersebut tidak dapat dibuat. Jika kita memberikan null sebagai parameter default ke jenis fungsi apa pun, ini akan menggunakan 'null' sebagai nilai yang diteruskan padanya .

kode javascript