Underscore.JS - คู่มือฉบับย่อ

Underscore.JS เป็นไลบรารีที่ใช้จาวาสคริปต์ยอดนิยมซึ่งมีฟังก์ชันมากกว่า 100 ฟังก์ชันเพื่ออำนวยความสะดวกในการพัฒนาเว็บ มันมีฟังก์ชั่นตัวช่วยเช่นแผนที่ตัวกรองเรียกใช้รวมถึงการผูกฟังก์ชันการสร้างเทมเพลตจาวาสคริปต์การตรวจสอบความเท่าเทียมกันอย่างลึกซึ้งการสร้างดัชนีและอื่น ๆ สามารถใช้ Underscore.JS ได้โดยตรงภายในเบราว์เซอร์และกับ Node.js

การทำงานกับออบเจ็กต์โดยใช้ JavaScript อาจเป็นเรื่องที่ค่อนข้างท้าทายโดยเฉพาะอย่างยิ่งหากคุณมีการปรับแต่งมากมายที่ต้องทำ ขีดล่างมาพร้อมกับคุณสมบัติมากมายที่ช่วยให้งานของคุณง่ายขึ้น

Underscore.JS เป็นโครงการโอเพ่นซอร์สและคุณสามารถมีส่วนร่วมในไลบรารีและเพิ่มคุณสมบัติในรูปแบบของปลั๊กอินได้อย่างง่ายดายและทำให้พร้อมใช้งานบน GitHub และใน Node.js

คุณสมบัติ

แจ้งให้เราเข้าใจโดยละเอียดเกี่ยวกับคุณสมบัติที่สำคัญทั้งหมดที่มีให้กับขีดล่าง -

คอลเลกชัน

Underscore.JS มีฟังก์ชันต่างๆสำหรับคอลเลกชันเช่นแต่ละรายการแผนที่ลดซึ่งใช้เพื่อใช้การดำเนินการกับแต่ละรายการของคอลเลกชัน มีวิธีการเช่น groupBy, countBy, max, min ซึ่งประมวลผลคอลเลกชันและทำให้งานง่ายขึ้น

อาร์เรย์

Underscore.JS มีฟังก์ชันต่างๆสำหรับอาร์เรย์ที่ต้องการทำซ้ำและประมวลผลอาร์เรย์เช่น first, initial, lastIndexOf, จุดตัด, ความแตกต่าง ฯลฯ

ฟังก์ชั่น

Underscore.JS มีฟังก์ชันต่างๆเช่นการผูกการหน่วงเวลาก่อนหลังเป็นต้น

วัตถุ

Underscore.JS มีฟังก์ชันในการจัดการกับวัตถุเพื่อแมปวัตถุและเปรียบเทียบวัตถุ ตัวอย่างเช่นคีย์ค่าขยายขยายขอบเขต isEqual isEmpty เป็นต้น

ยูทิลิตี้

Underscore.JS มีวิธีการยูทิลิตี้ต่างๆเช่น noConflict, random, iteratee, escape เป็นต้น

โซ่

Underscore.JS มีวิธีการผูกมัดเช่นเดียวกับห่วงโซ่มูลค่า

ในบทต่อ ๆ ไปเราจะกล่าวถึงฟังก์ชันที่สำคัญของ Underscore.JS

ในบทนี้คุณจะได้เรียนรู้รายละเอียดเกี่ยวกับการตั้งค่าสภาพแวดล้อมการทำงานของ Underscore.JS บนเครื่องคอมพิวเตอร์ของคุณ ก่อนที่คุณจะเริ่มทำงานกับ Underscore.JS คุณต้องมีสิทธิ์เข้าถึงไลบรารี คุณสามารถเข้าถึงไฟล์ได้ด้วยวิธีการใด ๆ ต่อไปนี้ -

วิธีที่ 1: การใช้ไฟล์ Underscore.JS ในเบราว์เซอร์

ในวิธีนี้เราจะต้องใช้ไฟล์ Underscore.JS จากเว็บไซต์ทางการและจะใช้โดยตรงในเบราว์เซอร์

ขั้นตอนที่ 1

ขั้นแรกให้ไปที่เว็บไซต์ทางการของ Underscore.JS https://underscorejs.org/.

สังเกตว่ามีตัวเลือกให้ดาวน์โหลดซึ่งจะช่วยให้คุณล่าสุดขีด-min.js ไฟล์UMD (การผลิต)ที่มีอยู่ คลิกขวาที่ลิงค์แล้วเลือกบันทึกเป็น โปรดทราบว่าไฟล์สามารถใช้ได้ทั้งแบบและไม่มีการย่อขนาด

ขั้นตอนที่ 2

ตอนนี้รวม underscore-min.js ข้างใน scriptแท็กและเริ่มทำงานกับ Underscore.JS สำหรับสิ่งนี้คุณสามารถใช้รหัสที่ระบุด้านล่าง -

<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>

ให้นี่คือตัวอย่างการทำงานและผลลัพธ์เพื่อความเข้าใจที่ดีขึ้น -

ตัวอย่าง

<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>

เอาต์พุต

วิธีที่ 2: การใช้ Node.js

หากคุณเลือกใช้วิธีนี้ตรวจสอบให้แน่ใจว่าคุณมี Node.js และ npmติดตั้งในระบบของคุณ คุณสามารถใช้คำสั่งต่อไปนี้เพื่อติดตั้ง Underscore.JS -

npm install underscore

คุณสามารถสังเกตผลลัพธ์ต่อไปนี้เมื่อติดตั้ง Underscore.JS สำเร็จ -

+ [email protected]
added 1 package from 1 contributor and audited 1 package in 6.331s
found 0 vulnerabilities

ตอนนี้เพื่อทดสอบว่า Underscore.JS ทำงานได้ดีกับ Node.js หรือไม่ให้สร้างไฟล์ tester.js และเพิ่มรหัสต่อไปนี้ -

var _ = require('underscore');
var numbers = [1, 2, 3, 4];
var listOfNumbers = '';
_.each(numbers, function(x) { listOfNumbers += x + ' ' });
console.log(listOfNumbers);

บันทึกโปรแกรมข้างต้นใน tester.js. คำสั่งต่อไปนี้ใช้เพื่อคอมไพล์และรันโปรแกรมนี้

คำสั่ง

\>node tester.js

เอาต์พุต

1 2 3 4

Underscore.JS มีวิธีการใช้งานที่ง่ายมากมายซึ่งช่วยในการทำซ้ำ Collections บทนี้จะกล่าวถึงรายละเอียด

Underscore.JS มีวิธีการต่างๆในการวนซ้ำ Collections ตามรายการด้านล่าง -

ซีเนียร์ วิธีการและไวยากรณ์
1 แต่ละ

_.each (รายการ iteratee [บริบท])

2 แผนที่

_.map (รายการ iteratee [บริบท])

3 ลด

_.reduce (รายการ, iteratee, [บันทึก], [บริบท])

4 ลดขวา

_.reduceRight (รายการ iteratee [บันทึก] [บริบท])

5 หา

_.find (รายการเพรดิเคต [บริบท])

6 กรอง

_.filter (รายการเพรดิเคต [บริบท])

7 ที่ไหน

_.where (รายการคุณสมบัติ)

8 findWhere

_.findWhere (รายการคุณสมบัติ)

9 ปฏิเสธ

_.reject (รายการเพรดิเคต [บริบท])

10 ทุก

_.every (รายการ [เพรดิเคต] [บริบท])

11 บาง

_.some (รายการ, [เพรดิเคต], [บริบท])

Underscore.JS มีวิธีการใช้งานง่ายมากมายที่ช่วยในการประมวลผลคอลเล็กชัน บทนี้จะกล่าวถึงรายละเอียด

Underscore.JS มีวิธีการต่างๆในการประมวลผลคอลเล็กชันตามรายการด้านล่าง

ซีเนียร์ วิธีการและไวยากรณ์
1 ประกอบด้วย

_.contains (รายการค่า [fromIndex])

2 เรียก

_.invoke (รายการ methodName, * อาร์กิวเมนต์)

3 ถอนขน

_.pluck (รายการ propertyName)

4 สูงสุด

_.max (รายการ [iteratee] [บริบท])

5 นาที

_.min (รายการ [iteratee], [บริบท])

6 sortBy

_.sortBy (รายการ iteratee [บริบท])

7 groupBy

_.groupBy (รายการ iteratee [บริบท])

8 ดัชนีโดย

_.indexBy (รายการ iteratee [บริบท])

9 countBy

_.countBy (รายการ iteratee [บริบท])

10 สับเปลี่ยน

_.shuffle (รายการ)

11 ตัวอย่าง

_.sample (รายการ [n])

12 toArray

_.toArray (รายการ)

13 ขนาด

_.size (รายการ)

14 พาร์ติชัน

_.partition (รายการเพรดิเคต)

15 กะทัดรัด

_.compact (รายการ)

Underscore.JS มีวิธีการใช้งานง่ายมากมายที่ช่วยในการทำซ้ำ Arrays บทนี้จะกล่าวถึงรายละเอียด

Underscore.JS มีวิธีการต่างๆในการทำซ้ำ Arrays ตามรายการด้านล่าง -

ซีเนียร์ วิธีการและไวยากรณ์
1 อันดับแรก

_.first (อาร์เรย์ [n])

2 เริ่มต้น

_.initial (อาร์เรย์ [n])

3 ล่าสุด

_.last (อาร์เรย์ [n])

4 พักผ่อน

_.rest (อาร์เรย์ [ดัชนี])

5 ดัชนีของ

_.indexOf (อาร์เรย์, ค่า, [isSorted])

6 lastIndexOf

_.lastIndexOf (อาร์เรย์ค่า [fromIndex])

7 sortedIndex

_.sortedIndex (อาร์เรย์, ค่า, [iteratee], [บริบท])

8 findIndex

_.findIndex (อาร์เรย์เพรดิเคต [บริบท])

9 findLastIndex

_.findLastIndex (อาร์เรย์เพรดิเคต [บริบท])

Underscore.JS มีวิธีการใช้งานง่ายมากมายที่ช่วยในการประมวลผล Arrays บทนี้จะกล่าวถึงรายละเอียด

Underscore.JS มีวิธีการต่างๆในการประมวลผล Arrays ตามรายการด้านล่าง -

ซีเนียร์ วิธีการและไวยากรณ์
1 เรียบ

_.flatten (อาร์เรย์ [ตื้น])

2 ไม่มี

_.without (อาร์เรย์ * ค่า)

3 สหภาพแรงงาน

_.union (* อาร์เรย์)

4 สี่แยก

_. จุดตัด (* อาร์เรย์)

5 ความแตกต่าง

_.difference (อาร์เรย์ * อื่น ๆ )

6 uniq

_.uniq (อาร์เรย์, [isSorted], [iteratee])

7 ซิป

_.zip (* อาร์เรย์)

8 เปิดเครื่องรูด

_.unzip (อาร์เรย์)

9 วัตถุ

_.object (รายการ [ค่า])

10 ก้อน

_.chunk (อาร์เรย์ความยาว)

11 พิสัย

_.range ([เริ่ม], หยุด, [ขั้นตอน])

Underscore.JS มีวิธีการใช้งานง่ายมากมายที่ช่วยในการจัดการฟังก์ชั่น บทนี้จะกล่าวถึงรายละเอียด

Underscore.JS มีวิธีการต่างๆในการจัดการฟังก์ชั่นตามรายการด้านล่าง

ซีเนียร์ วิธีการและไวยากรณ์
1 ผูก

_.bind (ฟังก์ชันวัตถุ * อาร์กิวเมนต์)

2 บางส่วน

_.partial (ฟังก์ชัน * อาร์กิวเมนต์)

3 บันทึก

_.memoize (ฟังก์ชัน [hashFunction])

4 ล่าช้า

_.delay (ฟังก์ชันรอ * อาร์กิวเมนต์)

5 ครั้งเดียว

_.once (ฟังก์ชัน)

6 ก่อน

_.before (นับฟังก์ชัน)

7 ห่อ

_.wrap (ฟังก์ชันกระดาษห่อหุ้ม)

8 ลบล้าง

_.negate (เพรดิเคต)

9 เขียน

_.compose (* ฟังก์ชัน)

Underscore.JS มีวิธีการใช้งานง่ายมากมายที่ช่วยในการทำแผนที่วัตถุ บทนี้จะกล่าวถึงรายละเอียด

Underscore.JS มีวิธีการต่างๆในการจัดการกับการแมปวัตถุตามรายการด้านล่าง -

ซีเนียร์ วิธีการและไวยากรณ์
1 คีย์

_.keys (วัตถุ)

2 allKeys

_.allKeys (วัตถุ)

3 ค่า

_.values ​​(วัตถุ)

4 mapObject

_.mapObject (วัตถุ iteratee [บริบท])

5 คู่

_.pairs (วัตถุ)

6 กลับด้าน

_.invert (วัตถุ)

7 สร้าง

_.create (ต้นแบบอุปกรณ์ประกอบฉาก)

8 ฟังก์ชั่น

_.functions (วัตถุ)

9 findKey

_.findKey (วัตถุเพรดิเคต [บริบท])

Underscore.JS มีวิธีการใช้งานง่ายมากมายที่ช่วยในการอัปเดตวัตถุ บทนี้จะกล่าวถึงรายละเอียด

Underscore.JS มีวิธีการต่างๆในการจัดการการอัปเดตออบเจ็กต์ตามรายการด้านล่าง -

ซีเนียร์ วิธีการและไวยากรณ์
1 ขยาย

_.extend (ปลายทาง * แหล่งที่มา)

2 เลือก

_.pick (วัตถุ * คีย์)

3 ละเว้น

_.omit (วัตถุ * คีย์)

4 ค่าเริ่มต้น

_.defaults (วัตถุ * ค่าเริ่มต้น)

5 โคลน

_.clone (วัตถุ)

6 แตะ

_.tap (วัตถุตัวสกัดกั้น)

7 มี

_.has (วัตถุคีย์)

8 ทรัพย์สิน

_.property (เส้นทาง)

9 คุณสมบัติของ

_.propertyOf (วัตถุ)

Underscore.JS มีวิธีการใช้งานง่ายมากมายที่ช่วยในการเปรียบเทียบวัตถุ บทนี้จะกล่าวถึงรายละเอียด

Underscore.JS มีวิธีการต่างๆในการจัดการการเปรียบเทียบวัตถุตามรายการด้านล่าง -

ซีเนียร์ วิธีการและไวยากรณ์
1 ผู้จับคู่

_.matcher (ผู้เข้าร่วม)

2 isEqual

_.isEqual (วัตถุอื่น ๆ )

3 isMatch

_.isMatch (วัตถุคุณสมบัติ)

4 มันว่างเปล่า

_.isEmpty (วัตถุ)

5 isArray

_.isArray (วัตถุ)

6 isObject

_.isObject (ค่า)

7 isArguments

_.isArguments (วัตถุ)

8 isFunction

_.isFunction (วัตถุ)

9 isString

_.isString (วัตถุ)

10 isNumber

_.isNumber (วัตถุ)

11 isFinite

_.isFinite (วัตถุ)

12 isBoolean

_.isBoolean (วัตถุ)

13 isDate

_.isDate (วัตถุ)

14 isRegExp

_.isRegExp (วัตถุ)

15 isError

_.isError (วัตถุ)

16 isSymbol

_.isSymbol (วัตถุ)

17 isMap

_.isMap (วัตถุ)

18 isWeakMap

_.isWeakMap (วัตถุ)

19 isSet

_.isSet (วัตถุ)

20 isWeakSet

_.isWeakSet (วัตถุ)

21 isNaN

_.isNaN (วัตถุ)

22 isNull

_.isNull (วัตถุ)

23 isUndefined

_.isUndefined (ค่า)

Underscore.JS มีวิธียูทิลิตี้ที่ใช้งานง่ายมากมาย บทนี้จะกล่าวถึงรายละเอียด

Underscore.JS มีวิธีการยูทิลิตี้ต่างๆตามรายการด้านล่าง -

ซีเนียร์ วิธีการและไวยากรณ์
1 เอกลักษณ์

_.identity (มูลค่า)

2 คงที่

_.constant (ค่า)

3 noop

_.noop ()

4 ครั้ง

_.times (n, iteratee, [บริบท])

5 สุ่ม

_.random (ต่ำสุดสูงสุด)

6 มิกซ์อิน

_.mixin (วัตถุ)

7 iteratee

_.iteratee (ค่า, [บริบท])

8 ID ไม่ซ้ำกัน

_.uniqueId ([คำนำหน้า])

9 หนี

_.escape (สตริง)

10 unescape

_.unescape (สตริง)

11 ผลลัพธ์

_.result (วัตถุคุณสมบัติ [defaultValue])

12 ตอนนี้

_. ตอนนี้ ()

13 แม่แบบ

_.template (templateString, [การตั้งค่า])

Underscore.JS มีวิธีการสร้างห่วงโซ่ของวิธีการจากนั้นเรียกคืนผลลัพธ์ที่มีประสิทธิภาพ บทนี้จะกล่าวถึงรายละเอียด

Underscore.JS มีวิธีการยูทิลิตี้ต่างๆตามรายการด้านล่าง -

ซีเนียร์ วิธีการและไวยากรณ์
1 เชื่อมต่อ

_.chain (วัตถุ)

2 มูลค่า

_.chain (obj) .value ()