JavaScript: 7 hal kecil yang bermanfaat

Penulis catatan tersebut, terjemahan yang kami terbitkan hari ini, mengatakan bahwa dalam JavaScript, seperti dalam bahasa pemrograman lainnya, Anda dapat menemukan banyak trik kecil yang dirancang untuk menyelesaikan berbagai masalah, baik yang sederhana maupun yang cukup kompleks. Beberapa teknik ini diketahui secara luas, sementara yang lain, tidak begitu umum, mungkin akan mengejutkan mereka yang tidak tahu tentang mereka. Sekarang kita akan melihat 7 teknik pemrograman JavaScript yang berguna.

1. Mendapatkan nilai array unik

Dalam JavaScript, menghasilkan array yang hanya berisi nilai unik dari array lain mungkin lebih mudah daripada yang Anda pikirkan:

var j = [...new Set([1, 2, 3, 3])] // [1, 2, 3] 

Saya suka cara masalah ini dapat diselesaikan dengan menggunakan operator ... dan tipe data Set .

2. Array dan nilai-nilai logis

Pernahkah Anda perlu menghapus nilai-nilai dari array yang konversi ke jenis logis memberikan false ? Misalnya, ini adalah nilai-nilai seperti 0 , undefined , null , false . Anda mungkin tidak tahu bahwa untuk melakukan ini, Anda bisa melakukan ini:

 myArray   .map(item => {       // ...   })   //       .filter(Boolean); 

Seperti yang Anda lihat, untuk menghilangkan semua nilai tersebut, cukup lewati Boolean ke metode array .filter() .

3. Membuat objek yang benar-benar kosong

Saya yakin Anda dapat membuat objek yang tampaknya kosong menggunakan sintaks dari objek literal: {} . Tetapi prototipe ( __proto__ ) akan ditugaskan untuk objek seperti itu, ia akan memiliki metode hasOwnProperty() dan metode objek lainnya. Untuk membuat objek yang benar - benar kosong , yang, misalnya, dapat digunakan sebagai "kamus", Anda dapat melakukan ini:

 let dict = Object.create(null); // dict.__proto__ === "undefined" //        ,           

Objek yang dibuat dengan cara ini tidak memiliki properti dan metode yang tidak ditambahkan oleh programmer.

4. Menggabungkan objek

Mereka yang menulis dalam JavaScript, selalu diperlukan untuk membuat objek seperti itu yang akan mencakup konten dari objek lain. Tugas ini menjadi sangat mendesak ketika kelas muncul dalam JavaScript, lalu ketika programmer harus bekerja dengan sesuatu seperti representasi perangkat lunak widget. Berikut cara membuat objek baru berdasarkan beberapa objek lain:

 const person = { name: 'David Walsh', gender: 'Male' }; const tools = { computer: 'Mac', editor: 'Atom' }; const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' }; const summary = {...person, ...tools, ...attributes}; /* Object { "computer": "Mac", "editor": "Atom", "eyes": "Blue", "gender": "Male", "hair": "Brown", "handsomeness": "Extreme", "name": "David Walsh", } */ 

Operator ... sangat menyederhanakan solusi tugas menggabungkan objek.

5. Parameter fungsi yang diperlukan

Menetapkan nilai argumen fungsi default adalah ekstensi yang bagus untuk JavaScript. Tapi di sini adalah bagaimana membuatnya sehingga tanpa melewati beberapa parameter yang diperlukan, fungsi - fungsi tersebut hanya akan menolak untuk bekerja:

 const isRequired = () => { throw new Error('param is required'); }; const hello = (name = isRequired()) => { console.log(`hello ${name}`) }; //    ,     name hello(); //     hello(undefined); //        hello(null); hello('David'); 

Di depan kami ada tingkat verifikasi tambahan tentang apa yang diteruskan ke fungsi.

6. Penugasan destruktif dan nama baru properti yang diekstraksi dari objek

Destrukturisasi adalah fitur JavaScript baru yang bermanfaat, tetapi terkadang properti yang diambil dari objek perlu diberi nama yang berbeda dari yang ada di objek tersebut. Inilah cara melakukannya:

 const obj = { x: 1 }; //      obj.x   x const { x } = obj; //   obj.x     otherName const { x: otherName } = obj; 

Teknik ini berguna dalam kasus di mana Anda perlu menghindari konflik nama variabel atau konstanta.

7. Memilah string kueri

Selama bertahun-tahun, kami telah menulis ekspresi reguler ke string kueri parse, tetapi waktu ini telah berlalu. Sekarang, untuk mengatasi masalah ini, Anda dapat menggunakan API URLSearchParams yang luar biasa :

 // ,     "?post=1234&action=edit" var urlParams = new URLSearchParams(window.location.search); console.log(urlParams.has('post')); // true console.log(urlParams.get('action')); // "edit" console.log(urlParams.getAll('action')); // ["edit"] console.log(urlParams.toString()); // "?post=1234&action=edit" console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1" 

Menggunakan API URLSearchParams jauh lebih mudah daripada menyelesaikan tugas yang sama menggunakan ekspresi reguler.

Ringkasan

JavaScript modern berkembang sangat cepat, dengan berbagai peningkatan bermanfaat yang terus muncul di dalamnya. Tetapi meningkatkan bahasa tidak berarti bahwa programmer tidak perlu memikirkan kode dan mencari solusi yang efektif untuk berbagai masalah yang menghadang mereka. Kami harap sedikit trik JavaScript yang kita bicarakan hari ini bermanfaat.

Pembaca yang budiman! Apakah Anda tahu ada trik pemrograman JS berguna? Jika demikian, silakan bagikan.