Underscore.JS-퀵 가이드
Underscore.JS는 웹 개발을 용이하게하는 100 개 이상의 기능을 제공하는 인기있는 자바 스크립트 기반 라이브러리입니다. 맵, 필터, 호출 및 함수 바인딩, 자바 스크립트 템플릿, 심층 동등성 검사, 색인 생성 등과 같은 도우미 기능을 제공합니다. Underscore.JS는 브라우저 내에서 직접 사용할 수 있으며 Node.js에서도 사용할 수 있습니다.
JavaScript를 사용하여 개체를 작업하는 것은 매우 어려울 수 있습니다. 특히 개체로 수행 할 조작이 많은 경우 더욱 그렇습니다. Underscore에는 개체 작업을 쉽게하는 많은 기능이 있습니다.
Underscore.JS는 오픈 소스 프로젝트이며 라이브러리에 쉽게 기여하고 플러그인 형태로 기능을 추가하고 GitHub 및 Node.js에서 사용할 수 있도록 할 수 있습니다.
풍모
Underscore에서 사용할 수있는 모든 중요한 기능을 자세히 이해하겠습니다.
컬렉션
Underscore.JS는 컬렉션의 각 항목에 대한 작업을 적용하는 데 사용되는 각각, map, reduce와 같은 컬렉션에 대한 다양한 기능을 제공합니다. 컬렉션을 처리하고 많은 작업을 쉽게하는 groupBy, countBy, max, min과 같은 메소드를 제공합니다.
배열
Underscore.JS는 first, initial, lastIndexOf, 교차점, 차이 등과 같은 배열을 반복하고 처리하는 것과 같은 배열에 대한 다양한 기능을 제공합니다.
기능
Underscore.JS는 bind, delay, before, after 등과 같은 기능을 제공합니다.
사물
Underscore.JS는 객체 조작, 객체 매핑 및 객체 비교 기능을 제공합니다. 예를 들어 키, 값, extends, extendsOwn, 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/.
사용 가능한 최신 underscore-min.js 파일 UMD (Production) 를 제공하는 다운로드 옵션이 있는지 확인하십시오 . 링크를 마우스 오른쪽 버튼으로 클릭하고 다른 이름으로 저장을 선택하십시오. 파일은 축소를 포함하거나 포함하지 않고 사용할 수 있습니다.
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 underscoreUnderscore.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 4Underscore.JS에는 컬렉션을 반복하는 데 도움이되는 사용하기 쉬운 메서드가 많이 있습니다. 이 장에서는 이에 대해 자세히 설명합니다.
Underscore.JS는 아래 나열된 컬렉션을 반복하는 다양한 방법을 제공합니다.
| Sr. 아니. | 방법 및 구문 |
|---|---|
| 1 | 마다 _.each (목록, 반복, [컨텍스트]) |
| 2 | 지도 _.map (list, iteratee, [context]) |
| 삼 | 줄이다 _.reduce (목록, 반복, [메모], [컨텍스트]) |
| 4 | reduceRight _.reduceRight (list, iteratee, [memo], [context]) |
| 5 | 찾기 _.find (목록, 술어, [컨텍스트]) |
| 6 | 필터 _.filter (목록, 술어, [컨텍스트]) |
| 7 | 어디 _.where (목록, 속성) |
| 8 | findWhere _.findWhere (목록, 속성) |
| 9 | 받지 않다 _.reject (목록, 술어, [컨텍스트]) |
| 10 | ...마다 _.every (list, [predicate], [context]) |
| 11 | 약간 _.some (list, [predicate], [context]) |
Underscore.JS에는 컬렉션 처리에 도움이되는 사용하기 쉬운 메서드가 많이 있습니다. 이 장에서는 이에 대해 자세히 설명합니다.
Underscore.JS는 다음과 같이 컬렉션을 처리하는 다양한 방법을 제공합니다.
| Sr. 아니. | 방법 및 구문 |
|---|---|
| 1 | 포함 _.contains (목록, 값, [fromIndex]) |
| 2 | 호출 _.invoke (list, methodName, * arguments) |
| 삼 | 당기기 _.pluck (목록, 속성 이름) |
| 4 | 최대 _.max (목록, [반복], [컨텍스트]) |
| 5 | 분 _.min (목록, [반복], [컨텍스트]) |
| 6 | 정렬 기준 _.sortBy (목록, 반복, [컨텍스트]) |
| 7 | groupBy _.groupBy (list, iteratee, [context]) |
| 8 | indexBy _.indexBy (목록, 반복, [컨텍스트]) |
| 9 | countBy _.countBy (list, iteratee, [context]) |
| 10 | 혼합 _.shuffle (목록) |
| 11 | 견본 _.sample (목록, [n]) |
| 12 | toArray _.toArray (목록) |
| 13 | 크기 _.size (목록) |
| 14 | 분할 _.partition (목록, 술어) |
| 15 | 콤팩트 _.compact (목록) |
Underscore.JS에는 배열을 반복하는 데 도움이되는 사용하기 쉬운 메서드가 많이 있습니다. 이 장에서는 이에 대해 자세히 설명합니다.
Underscore.JS는 아래 나열된 배열을 반복하는 다양한 방법을 제공합니다.
| Sr. 아니. | 방법 및 구문 |
|---|---|
| 1 | 먼저 _.first (배열, [n]) |
| 2 | 머리 글자 _.initial (배열, [n]) |
| 삼 | 마지막 _.last (배열, [n]) |
| 4 | 쉬다 _.rest (배열, [인덱스]) |
| 5 | indexOf _.indexOf (배열, 값, [정렬 됨]) |
| 6 | lastIndexOf _.lastIndexOf (배열, 값, [fromIndex]) |
| 7 | sortedIndex _.sortedIndex (배열, 값, [반복], [컨텍스트]) |
| 8 | findIndex _.findIndex (배열, 술어, [컨텍스트]) |
| 9 | findLastIndex _.findLastIndex (array, predicate, [context]) |
Underscore.JS에는 배열 처리에 도움이되는 사용하기 쉬운 메서드가 많이 있습니다. 이 장에서는 이에 대해 자세히 설명합니다.
Underscore.JS는 아래 나열된 배열을 처리하는 다양한 방법을 제공합니다-
| Sr. 아니. | 방법 및 구문 |
|---|---|
| 1 | 단조롭게 하다 _.flatten (배열, [얕은]) |
| 2 | 없이 _.without (배열, * 값) |
| 삼 | 노동 조합 _.union (* 배열) |
| 4 | 교차로 _.intersection (* arrays) |
| 5 | 차 _.difference (array, * others) |
| 6 | 유니크 _.uniq (배열, [정렬 됨], [반복]) |
| 7 | 지퍼 _.zip (* 배열) |
| 8 | 압축을 풀다 _.unzip (배열) |
| 9 | 목적 _.object (목록, [값]) |
| 10 | 큰 덩어리 _.chunk (배열, 길이) |
| 11 | 범위 _.range ([시작], 중지, [단계]) |
Underscore.JS에는 함수 처리에 도움이되는 사용하기 쉬운 메서드가 많이 있습니다. 이 장에서는 이에 대해 자세히 설명합니다.
Underscore.JS는 아래 나열된 기능을 처리하는 다양한 방법을 제공합니다-
| Sr. 아니. | 방법 및 구문 |
|---|---|
| 1 | 묶다 _.bind (함수, 객체, * 인수) |
| 2 | 부분적인 _.partial (함수, * 인수) |
| 삼 | 메모하다 _.memoize (함수, [hashFunction]) |
| 4 | 지연 _.delay (함수, 대기, * 인수) |
| 5 | 한번 _.once (함수) |
| 6 | 전에 _.before (개수, 함수) |
| 7 | 싸다 _.wrap (함수, 래퍼) |
| 8 | 부정하다 _.negate (술어) |
| 9 | 짓다 _.compose (* 함수) |
Underscore.JS에는 개체 매핑에 도움이되는 사용하기 쉬운 메서드가 많이 있습니다. 이 장에서는 이에 대해 자세히 설명합니다.
Underscore.JS는 아래와 같이 객체 매핑을 처리하는 다양한 방법을 제공합니다.
| Sr. 아니. | 방법 및 구문 |
|---|---|
| 1 | 열쇠 _.keys (객체) |
| 2 | allKeys _.allKeys (객체) |
| 삼 | 가치 _.values (객체) |
| 4 | mapObject _.mapObject (object, iteratee, [context]) |
| 5 | 한 쌍 _.pairs (객체) |
| 6 | 거꾸로 하다 _.invert (객체) |
| 7 | 창조하다 _.create (프로토 타입, 소품) |
| 8 | 기능 _.functions (객체) |
| 9 | findKey _.findKey (object, predicate, [context]) |
Underscore.JS에는 개체 업데이트에 도움이되는 사용하기 쉬운 메서드가 많이 있습니다. 이 장에서는 이에 대해 자세히 설명합니다.
Underscore.JS는 아래와 같이 객체 업데이트를 처리하는 다양한 방법을 제공합니다.
| Sr. 아니. | 방법 및 구문 |
|---|---|
| 1 | 넓히다 _.extend (대상, * 소스) |
| 2 | 선택 _.pick (객체, * 키) |
| 삼 | 생략하다 _.omit (객체, * 키) |
| 4 | 기본값 _.defaults (객체, * 기본값) |
| 5 | 복제하다 _.clone (객체) |
| 6 | 꼭지 _.tap (객체, 인터셉터) |
| 7 | 있다 _.has (객체, 키) |
| 8 | 특성 _.property (경로) |
| 9 | 의 재산 _.propertyOf (객체) |
Underscore.JS에는 객체를 비교하는 데 도움이되는 사용하기 쉬운 메서드가 많이 있습니다. 이 장에서는 이에 대해 자세히 설명합니다.
Underscore.JS는 아래와 같이 객체 비교를 처리하는 다양한 방법을 제공합니다.
| Sr. 아니. | 방법 및 구문 |
|---|---|
| 1 | 매처 _.matcher (attrs) |
| 2 | 는 같다 _.isEqual (객체, 기타) |
| 삼 | 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는 아래와 같이 다양한 유틸리티 방법을 제공합니다.
| Sr. 아니. | 방법 및 구문 |
|---|---|
| 1 | 정체 _.identity (값) |
| 2 | 일정한 _.constant (값) |
| 삼 | 누프 _.noop () |
| 4 | 타임스 _.times (n, iteratee, [context]) |
| 5 | 무작위 _.random (최소, 최대) |
| 6 | 믹스 인 _.mixin (객체) |
| 7 | iteratee _.iteratee (값, [컨텍스트]) |
| 8 | uniqueId _.uniqueId ([접두사]) |
| 9 | 탈출 _.escape (문자열) |
| 10 | Unscape _.unescape (문자열) |
| 11 | 결과 _.result (객체, 속성, [defaultValue]) |
| 12 | 지금 _.지금() |
| 13 | 주형 _.template (templateString, [설정]) |
Underscore.JS에는 메소드 체인을 생성 한 다음 효과적인 결과를 검색하는 메소드가 있습니다. 이 장에서는 이에 대해 자세히 설명합니다.
Underscore.JS는 아래와 같이 다양한 유틸리티 방법을 제공합니다.
| Sr. 아니. | 방법 및 구문 |
|---|---|
| 1 | 체인 _.chain (객체) |
| 2 | 값 _.chain (obj) .value () |