Internet adalah tempat yang tepat untuk mencari informasi, tetapi ada satu masalah kecil. Anda berada di perahu di tengah laut biru yang dalam. Meskipun sebagian besar dari kita tidak menjelajah jauh ke dalam kegelapan, kita tetap ingin mendapatkan apa yang kita inginkan. (Oh. Internet adalah laut biru yang saya bicarakan)
Sebagai pengembang frontend, sebagian besar waktu kami tidak mengandalkan javascript vanilla untuk semua yang kami inginkan. Sebagian besar waktu kami berjanji kesetiaan kami kepada tuan kami (kerangka kerja) dan perpustakaan dan mengikuti mereka secara membabi buta karena kami berpikir bahwa mereka mampu melakukan segalanya, kadang-kadang kehilangan praktik terbaik javascript
Baru-baru ini, saya mendapat kesempatan untuk bekerja pada aplikasi backbone di mana saya memahami pentingnya penggunaan objek built-in javascript secara selektif untuk operasi kami terlepas dari kerangka kerjanya.
Katakanlah misalnya kita memiliki array n-objek [{id. 1, nama. “satu”}, {id. 2, nama. “dua”} …. ], ketika seseorang meminta Anda untuk menemukan objek berdasarkan 'id', idealnya pendekatan pertama Anda adalah menggunakan metode iteratif bawaan array untuk menemukan elemen pertama yang cocok?
Tapi katakanlah ketika orang yang sama memberitahu Anda untuk melakukan operasi yang sama n-kali untuk id acak dalam array Anda, apa yang akan Anda lakukan?
dengan kehilangan iterasi O(n) ekstra untuk mengulang melalui array dan menghasilkan id {. {}, Indo. {} }, Anda akan mendapatkan akses ke Objek. id untuk secara langsung dan efisien mengakses objek yang Anda inginkan. Dan untuk n-jumlah operasi, Anda akan menghemat banyak waktu, daripada mencari di seluruh array
Jadi dengan pengantar itu mari kita langsung menggunakan memilih objek bawaan javascript (Array, Object, Set dan Map) berdasarkan operasi yang ingin kita gunakan untuk
1. Cari/Temukan
Mari kita lihat bagaimana kita dapat menemukan elemen tertentu di keempat objek javascript bawaan untuk kasus penggunaan yang berbeda
Himpunan
// array of objects
array.find(object => object.id === 2); // returns object with id 2//array of numbers starting from "zero"
array.indexOf("one"); // returns 1 as index
Obyek
// array of Objects
// eg: [{id: 1, name: "one"},...] can be converted to {1: {name: "one"}, .. }
object[2] // returns the value of key 2 (i.e {name: "two"}
_
Catatan. Saat menggunakan n-operasi untuk menemukan objek, yang terbaik adalah selalu menggunakan kunci objek untuk mengambil item daripada menemukan array
Mengatur
Set tidak memiliki fungsi bawaan untuk mengambil atau menemukan indeks itemnya meskipun itu dapat diulang, jadi idealnya kita harus mengubahnya menjadi array sebelum operasi indexOf/find
const mySet = new Set(['1', '2', '3']);
[...mySet].indexOf('2') // returns 1const mySet = new Set([{1: 'one'}, {2: 'two'}, {3: 'three'}]);
[...mySet].find(object => object[2] === 'two'); // returns {2: 'two'}
Peta
Peta adalah objek khusus, mereka dapat diubah dengan konstruktor pasangan nilai kunci yang terlihat seperti larik 2D tetapi bertindak seperti objek. Mereka menawarkan fleksibilitas yang lebih baik dalam hal memilih nilai kunci kami. Peta dapat memiliki nilai kunci yang dapat berupa string, angka, objek, atau bahkan NaN
var map = new Map([[ 1, 'one' ],[ 2, 'two' ]]);
map.get(1) // returns 'one'
Catatan. Peta bisa sangat fleksibel di tempat-tempat di mana objek bisa sedikit mengganggu, dan ini sangat sesuai dengan tujuan dalam beberapa skenario tertentu, seperti sering menambah dan menghapus pasangan kunci.
2. Menyortir
Operasi pengurutan bisa menarik, dan sebagian besar waktu kami berasumsi bahwa penyortiran pada entitas yang dapat diulang bekerja di luar kotak. Yah, itu tidak selalu
Himpunan
Jenis array sering disalahpahami oleh pengembang pemula dan menengah. Karena pengurutan default array mengurutkan array berdasarkan
const mySet = new Set(['1', '2', '3']);
[...mySet].indexOf('2') // returns 1const mySet = new Set([{1: 'one'}, {2: 'two'}, {3: 'three'}]);
[...mySet].find(object => object[2] === 'two'); // returns {2: 'two'}
1 , kita tidak dapat mengharapkan untuk mendapatkan perilaku pengurutan yang sama untuk semua tipe data. Oleh karena itu, kita sering perlu melewatkan fungsi pembanding ke dalam pengurutan
// array of strings in a uniform case without special characters
const arr = [ "sex", "age", "job"];
arr.sort(); //returns ["age", "job", "sex"]// array of numbers
const arr = [ 30, 4, 29 , 19];
arr.sort((a, b) => a-b); // returns [4, 19, 29, 30]// array of number strings
const arr = [ "30", "4", "29" , "19" ];
arr.sort((a, b) => a-b); // returns ["4", "19", "29", "30"]// array of mixed numerics
const arr = [ 30, "4", 29 , "19" ];
arr.sort((a, b) => a-b); // returns ["4", "19", 29, 30]// array of non-ASCII strings and also strings
const arr = ['réservé', 'cliché', 'adieu'];
arr.sort((a, b) => a.localeCompare(b)); // returns is ['adieu', 'cliché','réservé']// array of objects
const arr = [
{ name: 'Sharpe', value: 37 },
{ name: 'And', value: 45 },
{ name: 'The', value: -12 }
];
// sort by name string
arr.sort((a,b) => a['name'].localeCompare(b['name']));// sort by value number
arr.sort((a,b) => a['value']-b['value']);
Catatan. Saya biasanya lebih suka menggunakan localeCompare untuk mengurutkan string saya karena menawarkan lebih banyak fleksibilitas dalam mengontrol sensitivitas huruf besar-kecil, aksen, dan juga memberi kita keuntungan untuk mempertimbangkan bahasa selama pengurutan.
Obyek
Tidak ada metode bawaan untuk menyortir objek, tetapi ES6 menawarkan beberapa penyortiran kunci bawaan yang menarik selama pembuatan objek. Kunci objek diurutkan hanya berdasarkan numerik/numeric-string, semua kunci lainnya didorong tepat setelah tombol numerik tidak disortir
// object with numeric/numeric-string keys are sorted
const obj = { 30: 'dad', '4': 'kid', 19: 'teen', '100': 'grams'};
console.log(obj) // returns {4: "kid", 19: "teen", 30: "dad", 100: "grams"} with sorted keys// object with key-values as alpha-strings are not sorted
const obj = { "b": "two", "a": "one", "c": "three" };
console.log(obj) // returns {b: "two", a: "one", c: "three"}// object with numeric, numeric-string and alpha keys are partially sorted. (i.e only numeric keys are sorted)
const obj = { b: "one", 4: "kid", "30": "dad", 9: "son", a: "two" };
console.log(obj) // returns {4: "kid", 9: "son", 30: "dad", b: "one", a: "two"}
_
Mengatur
Set tidak memiliki fungsi pengurutan bawaan, namun cara termudah untuk mengurutkan set adalah dengan mengubahnya menjadi array dan mengimplementasikan metode pengurutan array. Karena, set adalah objek yang dapat diubah, kita dapat membuat algoritme pengurutan sendiri sesuai pilihan kita
// set to array and array sort
const set = new Set(['b', 'a', 'c']);
[...set].sort(); // returns ['a', 'b', 'c'] which is an array// alternatively we can use entries to sort a set and create a new sorted set. The iterator gives us the ['a', 'a'] when spread over an array.
const set = new Set(['b', 'a', 'c']);
const sortedSet = new Set([...set.entries()].map((entry) => entry[0]).sort());
Catatan. Perlu diingat bahwa metode pengurutan adalah dari array dan Anda harus menggunakan komparator dengan tepat untuk mendapatkan pengurutan yang Anda inginkan
Peta
Mirip dengan set, peta tidak memiliki metode bawaan sendiri, tetapi kami masih dapat menyebarkan entri mereka di atas larik dan membuat peta baru yang diurutkan
// entries spread over an array can be sorted like an array
const map = new Map([["c", 'three'],["a", 'one'], ["b", 'two']]);
const sortedMap = new Map([...map.entries()].sort()) // returns sorted Map(3) {"a" => "one", "b" => "three", "c" => "two"}
_
Catatan. Dalam penyortiran peta, penting untuk diketahui bahwa larik dua dimensi dari peta diurutkan berdasarkan elemen pertama di setiap sub-array. Di sini penyortiran didasarkan pada string "a", "b" dan "c". Jika ini adalah angka, Anda harus menggunakan pembanding
3. Termasuk atau Memiliki
Salah satu fitur terpenting dari objek iterable adalah memeriksa keberadaan item yang diinginkan. Hampir, semua objek javascript standar dan iterable built-in memiliki implementasinya sendiri untuk mencapai hal ini. Mari kita lihat di bawah ini
Himpunan
// we are considering a linear array only
const arr = [1, 2, 3];
arr.includes(1); // returns true
arr.includes('1'); // returns false as types do not match
_
Obyek
// we are going to consider only the keys
const obj = { a: 1, b: 2, c: 3, 1: 'one' };
obj.hasOwnProperty('a'); // returns true
obj.hasOwnProperty('1'); // returns true because no type check
obj.hasOwnProperty(1); // returns true
Mengatur
Set memiliki fungsi 'has' yang berguna yang dapat lebih efisien dalam mengakses nilai dibandingkan dengan array
// array of Objects
// eg: [{id: 1, name: "one"},...] can be converted to {1: {name: "one"}, .. }
object[2] // returns the value of key 2 (i.e {name: "two"}
_0
Peta
Map juga memiliki fungsi 'has' bawaan
// array of Objects
// eg: [{id: 1, name: "one"},...] can be converted to {1: {name: "one"}, .. }
object[2] // returns the value of key 2 (i.e {name: "two"}
_1
Catatan. Dibandingkan dengan fungsi include array, hasOwnProperty Object dan fungsi Set/Map has tampaknya berkinerja dekat dengan O(1) dalam pengujian yang berbeda, jelas lebih efisien dalam hal set data yang lebih besar
4. Menghapus Duplikat
Tidak ada cara langsung untuk menghapus duplikat dalam koleksi, mengingat array atau objek itu linier, kita dapat menggunakan beberapa metode bawaan untuk menghapus duplikat
Himpunan
Ada banyak metode online untuk menghapus duplikat dari array. Yang dicakup oleh thread stackoverflow ini. Namun di ES6 mari kita lihat cara termudah untuk menghapus duplikat dari sebuah array
// array of Objects
// eg: [{id: 1, name: "one"},...] can be converted to {1: {name: "one"}, .. }
object[2] // returns the value of key 2 (i.e {name: "two"}
_2
Catatan. Set akan menghapus objek duplikat jika dirangkai dan stringnya cocok, tetapi kita masih harus mengurai lalu kembali ke objek setelah set diubah kembali menjadi array. Seluruh proses mungkin tidak berkinerja baik
Obyek
Objek tidak mengizinkan duplikat nilai kunci, nilai lama ditimpa oleh nilai baru
// array of Objects
// eg: [{id: 1, name: "one"},...] can be converted to {1: {name: "one"}, .. }
object[2] // returns the value of key 2 (i.e {name: "two"}
_3
Mengatur
Set secara inheren tidak mengizinkan nilai duplikat ketika mereka melewati objek iterable linier seperti array, tetapi ketika mereka melewati array objek, mereka mengizinkan objek duplikat
// array of Objects
// eg: [{id: 1, name: "one"},...] can be converted to {1: {name: "one"}, .. }
object[2] // returns the value of key 2 (i.e {name: "two"}
_4
Peta
Peta juga tidak mengizinkan kunci duplikat selama pembuatan
// array of Objects
// eg: [{id: 1, name: "one"},...] can be converted to {1: {name: "one"}, .. }
object[2] // returns the value of key 2 (i.e {name: "two"}
_55. Menghapus
Himpunan
Array tidak memiliki metode bawaan untuk menghapus itemnya. Namun kita dapat menggunakan beberapa metode untuk melakukannya. Splice, indexOf atau filter
// array of Objects
// eg: [{id: 1, name: "one"},...] can be converted to {1: {name: "one"}, .. }
object[2] // returns the value of key 2 (i.e {name: "two"}
_6
Obyek
Objek tidak memiliki metode hapus bawaan, tetapi menurut dokumen kita dapat menggunakan kata kunci
const mySet = new Set(['1', '2', '3']);
[...mySet].indexOf('2') // returns 1const mySet = new Set([{1: 'one'}, {2: 'two'}, {3: 'three'}]);
[...mySet].find(object => object[2] === 'two'); // returns {2: 'two'}
2 untuk menghapus kunci. Namun, ini sangat tidak dianjurkan dalam komunitas javascript dan bahkan perpustakaan seperti garis bawah dan lodash menggunakan metode yang berbeda
// array of Objects
// eg: [{id: 1, name: "one"},...] can be converted to {1: {name: "one"}, .. }
object[2] // returns the value of key 2 (i.e {name: "two"}
_7
Mengatur
Set menawarkan metode hapus bawaan yang membuat hidup kita lebih mudah
// array of Objects
// eg: [{id: 1, name: "one"},...] can be converted to {1: {name: "one"}, .. }
object[2] // returns the value of key 2 (i.e {name: "two"}
_8
Peta
Peta memiliki metode hapus bawaannya sendiri untuk menghapus kunci dari objek peta yang diberikan
// array of Objects
// eg: [{id: 1, name: "one"},...] can be converted to {1: {name: "one"}, .. }
object[2] // returns the value of key 2 (i.e {name: "two"}
_96. Panjang dan Ukuran
const mySet = new Set(['1', '2', '3']);
[...mySet].indexOf('2') // returns 1const mySet = new Set([{1: 'one'}, {2: 'two'}, {3: 'three'}]);
[...mySet].find(object => object[2] === 'two'); // returns {2: 'two'}
0Kesimpulan
Ini adalah beberapa petunjuk utama yang perlu diingat saat memilih objek bawaan standar pilihan Anda. Meskipun javascript memberi kita fleksibilitas untuk menggunakan lebih dari satu objek bawaan, selalu lebih baik untuk memilih salah satu yang paling sesuai. Silahkan mengisi komentar di bawah ini
![]()
✉️ Berlangganan ke Email Blast sekali seminggu dari CodeBurst, 🐦 Ikuti CodeBurst di Twitter, lihat 🗺️ Peta Jalan Pengembang Web 2018, dan 🕸️ Pelajari Pengembangan Web Stack Lengkap
