👩🏽‍🤝‍👨🏾 👃🏽 🏪 7 trik dengan operator Istirahat dan Sebarkan ketika bekerja dengan objek JS 🧑🏾 📅 🦓

Halo, Habr! Saya mempersembahkan kepada Anda terjemahan artikel "7 Trik dengan Beristirahat dan Menyebar Obyek JavaScript" oleh Joel Thoms.

Halo semuanya, beberapa hari yang lalu seorang rekan kerja melemparkan saya sebuah tautan ke sebuah artikel dalam bahasa Inggris yang berisi daftar berbagai metode kerja dengan operator lain dan yang menyebar. Dia berguna bagi saya dan saya memutuskan untuk menerjemahkannya. Jadi, mari kita mulai.

gambar

Operator Istirahat dan Spread dapat digunakan tidak hanya untuk menggabungkan argumen ke dalam array dan menggabungkan array.

Pada artikel ini Anda akan menemukan 7 trik yang paling tidak diketahui dalam menggunakan operator lainnya dan sebarkan.

1. Menambahkan properti

Mengkloning objek sambil menambahkan objek baru ke objek yang dikloning.
Pada contoh di bawah ini, kami mengkloning objek pengguna dan menambahkan properti kata sandi ke objek userWithPass yang dikloning .

const user = { id: 100, name: 'Howard Moon'}
const userWithPass = { ...user, password: 'Password!' }

user //=> { id: 100, name: 'Howard Moon' }
userWithPass //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

2. Menggabungkan objek

Menganalisa proses part1 dan part2 merzhatsya objek pengguna1

const part1 = { id: 100, name: 'Howard Moon' }
const part2 = { id: 100, password: 'Password!' }

const user1 = { ...part1, ...part2 }
//=> { id: 100, name: 'Howard Moon', password: 'Password!' }

Jadi objek yang sama dapat bersebelahan menggunakan sintaks ini.

const partial = { id: 100, name: 'Howard Moon' }
const user = { ...partial, id: 100, password: 'Password!' }

user //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

3. Menghapus properti dari objek

Properti dari suatu objek dapat dihilangkan menggunakan kombinasi dari pernyataan restrukturisasi dan sisanya. Pada contoh di bawah ini, kami merusak objek sisanya dan menghapus properti kata sandi dari itu .

const noPassword = ({ password, ...rest }) => rest
const user = {
  id: 100,
  name: 'Howard Moon',
  password: 'Password!'
}

noPassword(user) //=> { id: 100, name: 'Howard moon' }

4. Penghapusan dinamis properti

Pada contoh di bawah ini, fungsi removeProperty mengambil prop sebagai argumen. Menggunakan nama properti yang diteruskan dalam argumen, kami secara dinamis mengecualikan properti dari objek yang dikloning.

const user1 = {
  id: 100,
  name: 'Howard Moon',
  password: 'Password!'
}
const removeProperty = prop => ({ [prop]: _, ...rest }) => rest
//                     ----       ------
//                          \   /
//                dynamic destructuring

const removePassword = removeProperty('password')
const removeId = removeProperty('id')

removePassword(user1) //=> { id: 100, name: 'Howard Moon' }
removeId(user1) //=> { name: 'Howard Moon', password: 'Password!' }

5. Organisasi atau pemilahan properti berdasarkan nama

Terkadang properti dalam objek tidak dalam urutan yang kita butuhkan. Dengan menggunakan beberapa trik, kita dapat mendorong properti ke atas daftar, atau ke tengah, misalnya.

const user3 = {
  password: 'Password!',
  name: 'Naboo',
  id: 300
}

const organize = object => ({ id: undefined, ...object })
//                            -------------
//                          /
//  move id to the first property

organize(user3)
//=> { id: 300, password: 'Password!', name: 'Naboo' }

Untuk memasukkan kata sandi di akhir, pertama-tama Anda harus merusak objek dan menghapus kata sandi , dan kemudian menggunakan operator spread untuk menambahkannya.

6. Properti Default

Properti default adalah properti yang akan ditetapkan jika mereka tidak ada di objek yang dikloning.

Dalam contoh di bawah ini, bidang kutipan tidak ada di objek user2 . Fungsi setDefaults, dengan tidak adanya bidang tanda kutip , menetapkannya secara default dengan nilai [] . Setelah memanggil fungsi setDefaults (user2) , ia mengembalikan properti dengan tanda kutip nilai : [] Ketika memanggil setDefaults (user4), fungsi mengembalikan nilai yang tidak dimodifikasi karena objek user4 sudah memiliki properti tanda kutip

const user2 = {
  id: 200,
  name: 'Vince Noir'
}

const user4 = {
  id: 400,
  name: 'Bollo',
  quotes: ["I've got a bad feeling about this..."]
}

const setDefaults = ({ quotes = [], ...object}) =>
  ({ ...object, quotes })

setDefaults(user2)
//=> { id: 200, name: 'Vince Noir', quotes: [] }

setDefaults(user4)
//=> {
//=>   id: 400,
//=>   name: 'Bollo',
//=>   quotes: ["I've got a bad feeling about this..."]
//=> }

Anda juga dapat menulisnya seperti ini jika Anda ingin nilai default ditampilkan terlebih dahulu:

const setDefaults = ({ ...object}) => ({ quotes: [], ...object })

7. Mengganti nama properti

Dengan menggunakan trik-trik dari atas, kita juga dapat membuat fungsi yang mengubah nama properti objek menjadi kita.

Bayangkan bahwa kita memiliki objek dengan ID properti yang ditulis dalam huruf besar, dan kita perlu mengganti namanya menjadi huruf kecil. Kami mulai dengan menghapus properti ID dari objek. Kemudian tambahkan kembali dengan nama id saat objek sedang dikloning.

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })

const user = {
  ID: 500,
  name: "Bob Fossil"
}

renamed(user) //=> { id: 500, name: 'Bob Fossil' }

8. Bonus. Menambahkan Properti Berdasarkan Kondisi

Terima kasih kepada @vinialbano karena menunjukkan metode seperti itu. Dalam contoh ini, kami menambahkan bidang kata sandi hanya jika kata sandi == benar !

const user = { id: 100, name: 'Howard Moon' }
const password = 'Password!'
const userWithPassword = {
  ...user,
  id: 100,
  ...(password && { password })
}

userWithPassword //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

Kesimpulan

Saya mencoba membuat daftar beberapa metode yang kurang terkenal untuk menggunakan operator lain dan menyebar. Jika Anda mengetahui metode lain yang tidak tercantum dalam daftar ini, silakan tulis tentang mereka di komentar. Jika artikel ini bermanfaat bagi Anda, silakan posting ulang untuk teman dan kenalan Anda.

7 trik dengan operator Istirahat dan Sebarkan ketika bekerja dengan objek JS