Apa yang dilakukan kurung kurawal di dalam daftar parameter fungsi di es6?

121

Saya terus melihat fungsi yang terlihat seperti ini dalam basis kode yang saya kerjakan:

const func = ({ param1, param2 }) => {
  //do stuff
}

Apa sebenarnya yang dilakukannya ini? Saya kesulitan menemukannya di google, karena saya bahkan tidak yakin apa namanya, atau bagaimana menjelaskannya dalam pencarian google.

javascript ecmascript-6 Nathan
sumber
kemungkinan duplikat sintaks parameter objek untuk fungsi javascript?
Bergi

Jawaban:

116

Ini merusak , tetapi terkandung di dalam parameter. Persamaannya tanpa destrukturisasi adalah:

const func = o => {
    var param1 = o.param1;
    var param2 = o.param2;
    //do stuff
}
James Thorpe
sumber
11
Hanya untuk memastikan bahwa saya memahaminya dengan benar, pada dasarnya ini berarti bahwa objek yang berisi properti tersebut akan diteruskan ke dalam fungsi, dan kemudian di dalam fungsi tersebut, properti secara otomatis dapat diakses hanya dengan menggunakan namanya?
Nathan
7
@ Nathan Ya, lihat secara khusus bagian tentang Penghancuran objek . Namun perlu diperhatikan bahwa pembaruan pada variabel tidak akan memperbarui properti objek asli - ini tidak seperti membuat referensi ke nilai asli.
James Thorpe
@JamesThorpe akan lebih baik untuk menautkan ke developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
lsborg
11

Ini melewatkan objek sebagai properti.

Ini pada dasarnya adalah singkatan dari

let param1 = someObject.param1
let param2 = someObject.param2

Cara lain untuk menggunakan teknik ini tanpa parameter adalah sebagai berikut, mari pertimbangkan sejenak bahwa someObject memang berisi properti tersebut.

let {param1, param2} = someObject;
Oz Lodriguez
sumber
3

Ini adalah tugas yang merusak objek. Seperti saya, Anda mungkin merasa terkejut karena objek ES6 yang merusak sintaks terlihat seperti, tetapi TIDAK berperilaku seperti konstruksi literal objek.

Ini mendukung formulir yang sangat singkat yang Anda temui, serta mengganti nama bidang dan argumen default:

Pada dasarnya, ini adalah {oldkeyname: newkeyname = defaultvalue, ...}. ':' BUKAN pemisah kunci / nilai; '=' adalah.

Beberapa dampak dari keputusan desain bahasa ini adalah Anda mungkin harus melakukan hal-hal seperti itu

; ({a, b} = some_object);

Tanda kurung ekstra mencegah kurung kurawal buka parsing sebagai blok, dan tanda titik koma mencegah tanda kurung diurai sebagai panggilan fungsi ke fungsi pada baris sebelumnya.

Untuk info lebih lanjut lihat: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Hati-hati, kesalahan kunci selama tugas penghancuran objek JANGAN dilempar; Anda hanya akan mendapatkan nilai "tidak ditentukan", apakah itu kesalahan kunci atau kesalahan lain yang secara diam-diam disebarkan sebagai 'tidak ditentukan'.

> var {rsienstr: foo, q: bar} = {p:1, q:undefined};
undefined
> foo
undefined
> bar
undefined
>
Andrew Wagner
sumber