Underscore.JS - Panduan Cepat
Underscore.JS adalah pustaka berbasis javascript populer yang menyediakan 100+ fungsi untuk memfasilitasi pengembangan web. Ini menyediakan fungsi pembantu seperti peta, filter, pemanggilan serta pengikatan fungsi, javascript templating, pemeriksaan kesetaraan mendalam, membuat indeks dan sebagainya. Underscore.JS dapat digunakan langsung di dalam browser dan juga dengan Node.js.
Bekerja dengan objek menggunakan JavaScript bisa sangat menantang, khususnya jika Anda memiliki banyak manipulasi yang harus dilakukan dengannya. Garis bawah hadir dengan banyak fitur yang memudahkan pekerjaan Anda dengan objek.
Underscore.JS adalah proyek open source dan Anda dapat dengan mudah berkontribusi ke perpustakaan dan menambahkan fitur dalam bentuk plugin dan membuatnya tersedia di GitHub dan di Node.js.
fitur
Mari kita pahami secara rinci semua fitur penting yang tersedia dengan Underscore -
Koleksi
Underscore.JS menyediakan berbagai fungsi untuk koleksi seperti masing-masing, peta, pengurangan yang digunakan untuk menerapkan operasi pada setiap item koleksi. Ini menyediakan metode seperti groupBy, countBy, max, min yang memproses koleksi dan memudahkan banyak tugas.
Array
Underscore.JS menyediakan berbagai fungsi untuk array seperti iterasi dan proses array seperti first, initial, lastIndexOf, intersection, difference, dll.
Fungsi
Underscore.JS menyediakan fungsi seperti bind, delay, before, after dll.
Objek
Underscore.JS menyediakan fungsi untuk memanipulasi objek, untuk memetakan objek dan membandingkan objek. Misalnya, key, values, extends, extendsOwn, isEqual, isEmpty dll.
Keperluan
Underscore.JS menyediakan berbagai metode utilitas seperti noConflict, random, iteratee, escape dll.
Merantai
Underscore.JS menyediakan metode perangkaian seperti halnya rantai, nilai.
Di bab-bab selanjutnya, kita akan membahas fungsi-fungsi penting dari Underscore.JS
Di bab ini, Anda akan mempelajari secara detail tentang cara menyetel lingkungan kerja Underscore.JS di komputer lokal Anda. Sebelum Anda mulai mengerjakan Underscore.JS, Anda harus memiliki akses ke perpustakaan. Anda dapat mengakses file-nya dengan salah satu metode berikut -
Metode 1: Menggunakan File Underscore.JS di Browser
Dalam metode ini, kita membutuhkan file Underscore.JS dari situs resminya dan akan menggunakannya langsung di browser.
Langkah 1
Sebagai langkah pertama, buka situs resmi Underscore.JS https://underscorejs.org/.
Perhatikan bahwa ada opsi unduhan yang tersedia yang memberi Anda UMD (Produksi) file underscore-min.js terbaru yang tersedia. Klik kanan pada tautan dan pilih simpan sebagai. Perhatikan bahwa file tersedia dengan dan tanpa minifikasi.
Langkah 2
Sekarang, sertakan underscore-min.js di dalam scriptberi tag dan mulai bekerja dengan Underscore.JS. Untuk ini, Anda dapat menggunakan kode yang diberikan di bawah ini -
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>Diberikan di sini adalah contoh kerja dan hasilnya untuk pemahaman yang lebih baik -
Contoh
<html>
<head>
<title>Underscore.JS - Working Example</title>
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>
<style>
div {
border: solid 1px #ccc;
padding:10px;
font-family: "Segoe UI",Arial,sans-serif;
width: 50%;
}
</style>
</head>
<body>
<div style = "font-size:25px" id = "list">
</div>
<script type = "text/JavaScript">
var numbers = [1, 2, 3, 4];
var listOfNumbers = '';
_.each(numbers, function(x) { listOfNumbers += x + ' ' });
document.getElementById("list").innerHTML = listOfNumbers;
</script>
</body>
</html>Keluaran
Metode 2: Menggunakan Node.js
Jika Anda memilih metode ini, pastikan Anda memilikinya Node.js dan npmdiinstal di sistem Anda. Anda dapat menggunakan perintah berikut untuk menginstal Underscore.JS -
npm install underscoreAnda dapat mengamati output berikut setelah Underscore.JS berhasil diinstal -
+ [email protected]
added 1 package from 1 contributor and audited 1 package in 6.331s
found 0 vulnerabilitiesSekarang, untuk menguji apakah Underscore.JS berfungsi dengan baik dengan Node.js, buat file tester.js dan tambahkan kode berikut ke dalamnya -
var _ = require('underscore');
var numbers = [1, 2, 3, 4];
var listOfNumbers = '';
_.each(numbers, function(x) { listOfNumbers += x + ' ' });
console.log(listOfNumbers);Simpan program di atas dalam tester.js. Perintah berikut digunakan untuk mengkompilasi dan menjalankan program ini.
Perintah
\>node tester.jsKeluaran
1 2 3 4Underscore.JS memiliki banyak metode yang mudah digunakan yang membantu dalam mengulang Koleksi. Bab ini membahasnya secara rinci.
Underscore.JS menyediakan berbagai metode untuk mengulang Koleksi seperti yang tercantum di bawah ini -
| Sr.No. | Metode & Sintaks |
|---|---|
| 1 | setiap _.each (daftar, iteratee, [konteks]) |
| 2 | peta _.map (daftar, iteratee, [konteks]) |
| 3 | mengurangi _.reduce (daftar, iteratee, [memo], [konteks]) |
| 4 | mengurangi _.reduceRight (daftar, iteratee, [memo], [konteks]) |
| 5 | Temukan _.find (daftar, predikat, [konteks]) |
| 6 | Saring _.filter (daftar, predikat, [konteks]) |
| 7 | dimana _.where (daftar, properti) |
| 8 | findWhere _.findWhere (daftar, properti) |
| 9 | menolak _.reject (daftar, predikat, [konteks]) |
| 10 | setiap _.every (daftar, [predikat], [konteks]) |
| 11 | beberapa _.some (daftar, [predikat], [konteks]) |
Underscore.JS memiliki banyak metode yang mudah digunakan yang membantu dalam memproses Koleksi. Bab ini membahasnya secara rinci.
Underscore.JS menyediakan berbagai metode untuk memproses Koleksi seperti yang tercantum di bawah ini -
| Sr.No. | Metode & Sintaks |
|---|---|
| 1 | mengandung _.contains (daftar, nilai, [fromIndex]) |
| 2 | memohon _.invoke (list, methodName, * argumen) |
| 3 | memetik _.pluck (daftar, propertyName) |
| 4 | maks _.max (daftar, [iteratee], [konteks]) |
| 5 | min _.min (daftar, [iteratee], [konteks]) |
| 6 | Sortir dengan _.sortBy (daftar, iteratee, [konteks]) |
| 7 | groupBy _.groupBy (daftar, iterasi, [konteks]) |
| 8 | indexBy _.indexBy (daftar, iteratee, [konteks]) |
| 9 | countBy _.countBy (daftar, iteratee, [konteks]) |
| 10 | mengocok _.shuffle (daftar) |
| 11 | Sampel _.sampel (daftar, [n]) |
| 12 | toArray _.toArray (daftar) |
| 13 | ukuran _.size (daftar) |
| 14 | partisi _.partition (daftar, predikat) |
| 15 | kompak _.compact (daftar) |
Underscore.JS memiliki banyak metode yang mudah digunakan yang membantu dalam iterasi Array. Bab ini membahasnya secara rinci.
Underscore.JS menyediakan berbagai metode untuk mengulang Array seperti yang tercantum di bawah ini -
| Sr.No. | Metode & Sintaks |
|---|---|
| 1 | pertama _.first (larik, [n]) |
| 2 | awal _.initial (array, [n]) |
| 3 | terakhir _. terakhir (larik, [n]) |
| 4 | beristirahat _.rest (larik, [indeks]) |
| 5 | Indeks _.indexOf (larik, nilai, [disortir]) |
| 6 | lastIndexOf _.lastIndexOf (larik, nilai, [fromIndex]) |
| 7 | sortIndex _.sortedIndex (larik, nilai, [iteratee], [konteks]) |
| 8 | findIndex _.findIndex (larik, predikat, [konteks]) |
| 9 | findLastIndex _.findLastIndex (larik, predikat, [konteks]) |
Underscore.JS memiliki banyak metode yang mudah digunakan yang membantu dalam memproses Array. Bab ini membahasnya secara rinci.
Underscore.JS menyediakan berbagai metode untuk memproses Array seperti yang tercantum di bawah ini -
| Sr.No. | Metode & Sintaks |
|---|---|
| 1 | meratakan _.flatten (larik, [dangkal]) |
| 2 | tanpa _. tanpa (array, * nilai) |
| 3 | Persatuan _.union (* array) |
| 4 | persimpangan _.intersection (* array) |
| 5 | perbedaan _.difference (array, * lainnya) |
| 6 | uniq _.uniq (array, [isSorted], [iteratee]) |
| 7 | zip _.zip (* array) |
| 8 | buka zip _.unzip (larik) |
| 9 | obyek _.object (daftar, [nilai]) |
| 10 | bingkah _.chunk (larik, panjang) |
| 11 | jarak _.range ([start], stop, [step]) |
Underscore.JS memiliki banyak metode yang mudah digunakan yang membantu dalam menangani fungsi. Bab ini membahasnya secara rinci.
Underscore.JS menyediakan berbagai metode untuk menangani fungsi seperti yang tercantum di bawah ini -
| Sr.No. | Metode & Sintaks |
|---|---|
| 1 | mengikat _.bind (fungsi, objek, * argumen) |
| 2 | sebagian _.pihak (fungsi, * argumen) |
| 3 | memoize _.memoize (fungsi, [fungsi hash]) |
| 4 | menunda _.delay (fungsi, tunggu, * argumen) |
| 5 | sekali _.once (function) |
| 6 | sebelum _.before (hitungan, fungsi) |
| 7 | membungkus _.wrap (fungsi, pembungkus) |
| 8 | meniadakan _.negate (predikat) |
| 9 | menyusun _.compose (* fungsi) |
Underscore.JS memiliki banyak metode yang mudah digunakan yang membantu dalam memetakan objek. Bab ini membahasnya secara rinci.
Underscore.JS menyediakan berbagai metode untuk menangani pemetaan objek seperti yang tercantum di bawah ini -
| Sr.No. | Metode & Sintaks |
|---|---|
| 1 | kunci _.keys (objek) |
| 2 | allKeys _.allKeys (objek) |
| 3 | nilai-nilai _.values (objek) |
| 4 | mapObject _.mapObject (objek, iteratee, [konteks]) |
| 5 | pasangan _.pairs (objek) |
| 6 | membalikkan _.invert (objek) |
| 7 | membuat _.create (prototipe, props) |
| 8 | fungsi _.functions (objek) |
| 9 | findKey _.findKey (objek, predikat, [konteks]) |
Underscore.JS memiliki banyak metode yang mudah digunakan yang membantu dalam memperbarui objek. Bab ini membahasnya secara rinci.
Underscore.JS menyediakan berbagai metode untuk menangani pembaruan objek seperti yang tercantum di bawah ini -
| Sr.No. | Metode & Sintaks |
|---|---|
| 1 | memperpanjang _.extend (tujuan, * sumber) |
| 2 | memilih _.pick (objek, * kunci) |
| 3 | menghilangkan _.omit (objek, * kunci) |
| 4 | default _.defaults (objek, * defaults) |
| 5 | klon _.clone (objek) |
| 6 | keran _.tap (objek, interseptor) |
| 7 | memiliki _.has (objek, kunci) |
| 8 | Properti _.property (jalur) |
| 9 | propertyOf _.propertyOf (objek) |
Underscore.JS memiliki banyak metode yang mudah digunakan yang membantu dalam membandingkan objek. Bab ini membahasnya secara rinci.
Underscore.JS menyediakan berbagai metode untuk menangani perbandingan objek seperti yang tercantum di bawah ini -
| Sr.No. | Metode & Sintaks |
|---|---|
| 1 | matcher _.matcher (attrs) |
| 2 | isEqual _.isEqual (objek, lainnya) |
| 3 | isMatch _.isMatch (objek, properti) |
| 4 | kosong _.isEmpty (objek) |
| 5 | isArray _.isArray (objek) |
| 6 | isObject _.isObject (nilai) |
| 7 | isArguments _.isArguments (objek) |
| 8 | isFunction _.isFunction (objek) |
| 9 | isString _.isString (objek) |
| 10 | isNumber _.isNumber (objek) |
| 11 | isFinite _.isFinite (objek) |
| 12 | isBoolean _.isBoolean (objek) |
| 13 | isDate _.isDate (objek) |
| 14 | isRegExp _.isRegExp (objek) |
| 15 | isError _.isError (objek) |
| 16 | isSymbol _.isSymbol (objek) |
| 17 | isMap _.isMap (objek) |
| 18 | isWeakMap _.isWeakMap (objek) |
| 19 | isSet _.isSet (objek) |
| 20 | isWeakSet _.isWeakSet (objek) |
| 21 | isNaN _.isNaN (objek) |
| 22 | isNull _.isNull (objek) |
| 23 | isUndefined _.isUndefined (nilai) |
Underscore.JS memiliki banyak metode utilitas yang mudah digunakan. Bab ini membahasnya secara rinci.
Underscore.JS menyediakan berbagai metode utilitas seperti yang tercantum di bawah ini -
| Sr.No. | Metode & Sintaks |
|---|---|
| 1 | identitas _.identity (nilai) |
| 2 | konstan _.nilai konstan) |
| 3 | noop _.noop () |
| 4 | waktu _.times (n, iteratee, [konteks]) |
| 5 | acak _.random (min, max) |
| 6 | mixin _.mixin (objek) |
| 7 | iteratee _.iteratee (nilai, [konteks]) |
| 8 | identitas unik _.uniqueId ([awalan]) |
| 9 | melarikan diri _.escape (string) |
| 10 | membuka diri _.unescape (string) |
| 11 | hasil _.result (objek, properti, [defaultValue]) |
| 12 | sekarang _.sekarang() |
| 13 | template _.template (templateString, [pengaturan]) |
Underscore.JS memiliki metode untuk membuat rangkaian metode dan kemudian mendapatkan hasil yang efektif. Bab ini membahasnya secara rinci.
Underscore.JS menyediakan berbagai metode utilitas seperti yang tercantum di bawah ini -
| Sr.No. | Metode & Sintaks |
|---|---|
| 1 | rantai _.chain (objek) |
| 2 | nilai _.chain (obj) .value () |