Underscore.js_Others의 일반적인 메소드 요약

개요

Underscore.js는 압축률이 4KB에 불과한 매우 간결한 라이브러리입니다. 이는 Javascript 프로그래밍을 크게 촉진하는 수십 가지 기능적 프로그래밍 방법을 제공합니다. MVC 프레임워크 backbone.js는 이 라이브러리를 기반으로 합니다.

밑줄(_) 객체를 정의하며, 함수 라이브러리의 모든 메소드가 이 객체에 속합니다. 이러한 방법은 대략 수집, 배열, 기능, 개체 및 유틸리티의 다섯 가지 범주로 나눌 수 있습니다.

node.js에 설치

Underscore.js는 브라우저 환경뿐만 아니라 node.js에서도 사용할 수 있습니다. 설치 명령은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

npm 설치 밑줄

단, node.js에서는 _를 변수명으로 직접 사용할 수 없으므로 다음 방법에서는 underscore.js를 사용합니다.

코드 복사 코드는 다음과 같습니다.

var u = require("밑줄");

컬렉션 관련 방법

Javascript 언어 데이터 수집에는 배열과 객체라는 두 가지 구조가 포함됩니다. 다음 방법은 두 구조 모두에 적용됩니다.

지도

이 메서드는 컬렉션의 각 멤버에 대해 차례로 일부 작업을 수행하고 반환된 값을 새 배열에 저장합니다.

코드 복사 코드는 다음과 같습니다.

_.map([1, 2, 3], function(num){ return num * 3; }) // [3, 6, 9] _.map({one:1, two:2, three:3 }, function(num, key){ return num * 3 }) // [3, 6, 9]

각

이 메서드는 컬렉션의 각 구성원에 대해 차례로 일부 작업을 수행하지만 값을 반환하지 않는 map과 유사합니다.

코드 복사 코드는 다음과 같습니다.

_.each([1, 2, 3], 경고); _.each({1:1, 2:2, 3:3}, 경고);

감소

이 메서드는 집합의 각 구성원에 대해 일종의 작업을 차례로 수행한 다음 특정 초기 값에 대한 작업 결과를 누적하고 모든 작업이 완료된 후 누적된 값을 반환합니다.

이 방법은 세 가지 매개변수를 허용합니다. 첫 번째 매개변수는 처리 중인 컬렉션, 두 번째 매개변수는 각 멤버에 대해 동작하는 함수, 세 번째 매개변수는 누적에 사용되는 변수이다.

_.reduce([1, 2, 3], function(memo, num){ return memo num; }, 0) // 6
축소 메소드의 두 번째 매개변수는 자체적으로 두 개의 매개변수를 허용하는 연산 함수입니다. 첫 번째는 누적에 사용되는 변수이고 두 번째는 집합의 각 구성원 값입니다.

필터링 및 거부

필터 메소드는 컬렉션의 각 멤버에 대해 차례로 일부 작업을 수행하고 작업 결과가 true인 멤버만 반환합니다.

코드 복사 코드는 다음과 같습니다.

_.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }) // [2, 4, 6]

Reject 메소드는 연산 결과가 false인 멤버만 반환합니다.

코드 복사 코드는 다음과 같습니다.

_.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }) // [1, 3, 5]

모든 것

every 메소드는 컬렉션의 각 멤버에 대해 차례로 일부 작업을 수행합니다. 모든 멤버의 작업 결과가 true이면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

코드 복사 코드는 다음과 같습니다.

_.every([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }) // false

일부 메서드는 한 멤버의 연산 결과가 true이면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

코드 복사 코드는 다음과 같습니다.

_.some([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }) // true

찾기

이 메서드는 컬렉션의 각 멤버에 대해 차례로 일부 작업을 수행하고 작업 결과가 true인 첫 번째 멤버를 반환합니다. 모든 멤버의 연산 결과가 false인 경우 undefound가 반환됩니다.

코드 복사 코드는 다음과 같습니다.

_.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }) // 2

포함

컬렉션에 값이 있으면 이 메서드는 true를 반환하고, 그렇지 않으면 false를 반환합니다.

코드 복사 코드는 다음과 같습니다.

_.contains([1, 2, 3], 3) // true

countBy

이 메소드는 집합의 각 구성원에 대해 일종의 연산을 차례로 수행하고, 동일한 연산 결과를 갖는 구성원을 하나의 범주로 계산하고, 마지막으로 각 연산 결과에 해당하는 구성원의 수를 나타내는 객체를 반환합니다.

코드 복사 코드는 다음과 같습니다.

_.countBy([1, 2, 3, 4, 5], function(num) { return num % 2 == 0 ? 'even' : 'odd'; }) // {홀수: 3, 짝수: 2 }

셔플

이 메서드는 섞인 컬렉션을 반환합니다.

코드 복사 코드는 다음과 같습니다.

_.shuffle([1, 2, 3, 4, 5, 6]) // [4, 1, 6, 3, 5, 2]

사이즈

이 메소드는 컬렉션의 구성원 수를 반환합니다.

코드 복사 코드는 다음과 같습니다.

_.size({하나:1, 둘:2, 셋:3}) // 3

객체 관련 메서드

배열로

이 메서드는 개체를 배열로 변환합니다.

코드 복사 코드는 다음과 같습니다.

_.toArray({a:0,b:1,c:2}) // [0, 1, 2]

뽑기

여러 개체의 특정 속성 값을 배열로 추출하는 방법입니다.

코드 복사 코드는 다음과 같습니다.

var Stooges = [{이름 : 'moe', 나이 : 40}, {이름 : 'larry', 나이 : 50}, {이름 : 'curly', 나이 : 60}] _.pluck(stooges, 'name' ); // ["모에", "래리", "곱슬머리"]

기능 관련 메소드

바인딩

이 메서드는 함수 런타임 컨텍스트를 바인딩하고 이를 새 함수로 반환합니다.

코드 복사 코드는 다음과 같습니다.

_.bind(함수, 객체, [*인수])

아래 예를 참조하세요.

코드 복사 코드는 다음과 같습니다.

var o = { p: 2, m: function (){console.log(p);} o.m() // 2 _.bind(o.m,{p:1})() // 1

모두 바인딩

이 방법은 (특별히 명시하지 않는 한) 개체의 모든 메서드를 개체에 바인딩합니다.

코드 복사 코드는 다음과 같습니다.

var ButtonView = { label : 'underscore', onClick : function(){ Alert('clicked: ' this.label) }, onHover : function(){ console.log('hovering: ' this.label) } ; _.bindAll(buttonView);

일부

이 메소드 바인딩은 함수를 매개변수에 바인딩한 다음 이를 새 함수로 반환합니다.

코드 복사 코드는 다음과 같습니다.

var add = function(a, b) { return a b }; add5 = _.partial(add, 5); // 15

메모하기

이 방법은 특정 매개변수에 대한 함수의 실행 결과를 캐시합니다.

코드 복사 코드는 다음과 같습니다.

var fibonacci = _.memoize(function(n) { return n

함수에 여러 매개변수가 있는 경우 캐시를 식별하는 해시 값을 생성하려면 hashFunction을 제공해야 합니다.

지연

이 방법을 사용하면 특정 시간 동안 기능 실행을 연기할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var log = _.bind(console.log, console); _.delay(log, 1000, '나중에 기록됨') // '나중에 기록됨'

연기

이 메서드는 setTimeout이 0초 동안 실행을 지연시키는 효과와 유사하게 실행할 작업 수가 0이 될 때까지 함수 실행을 연기할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

_.defer(function(){ 경고('지연'); });

스로틀

이 메서드는 함수의 새 버전을 반환합니다. 이 새 버전의 함수를 계속해서 호출하는 경우 다음 실행을 트리거하기 전에 일정 시간 동안 기다려야 합니다.

코드 복사 코드는 다음과 같습니다.

// updatePosition 함수의 새 버전을 반환합니다. var throttled = _.throttle(updatePosition, 100); // 함수의 새 버전은 100밀리초마다 트리거됩니다. $(window).scroll(throttled);

디바운스

이 메서드는 함수의 새 버전도 반환합니다. 이 새 버전의 함수가 호출될 때마다 이전 호출 사이에 일정한 시간이 있어야 합니다. 그렇지 않으면 유효하지 않습니다. 일반적인 응용 프로그램은 사용자가 버튼을 두 번 클릭하여 양식이 두 번 제출되는 것을 방지하는 것입니다.

코드 복사 코드는 다음과 같습니다.

$("button").on("click", _.debounce(submitForm, 1000));

한 번

이 메소드는 이 함수가 한 번만 실행될 수 있도록 새 버전의 함수를 반환합니다. 주로 객체 초기화에 사용됩니다.

코드 복사 코드는 다음과 같습니다.

var 초기화 = _.once(createApplication); 초기화(); 초기화(); // 애플리케이션은 한 번만 생성됩니다

이후

이 메서드는 새로운 버전의 함수를 반환합니다. 이 함수는 특정 횟수만큼 호출된 후에만 실행됩니다. 주로 일련의 작업이 반응하기 전에 완료되었는지 확인하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

var renderNotes = _.after(notes.length, render); _.each(notes, function(note) { note.asyncSave({success: renderNotes}); }) // 모든 노트가 저장된 후 renderNote 한 번만 실행

포장

이 메소드는 함수를 매개변수로 사용하여 이를 다른 함수에 전달한 후 마지막으로 이전 버전의 새 버전을 반환합니다.

코드 복사 코드는 다음과 같습니다.

var hello = function(name) { return "hello: " name; }; hello = _.wrap(hello, function(func) { return "before, " func("moe") ", after"; }); (); // '전, 안녕하세요: 모에, 후'

작곡

이 방법은 일련의 함수를 매개변수로 받아 뒤에서 앞으로 순서대로 실행합니다. 이전 함수의 실행 결과는 다음 함수의 실행 매개변수로 사용됩니다. 즉, f(g(),h()) 형식을 f(g(h()))로 변환합니다.

코드 복사 코드는 다음과 같습니다.

var Greeting = function(name){ return "hi: " name; var exclaim = function(statement){ return 문 "!" }; ); // '안녕하세요: 모에!'

도구 방법

템플릿

이 방법은 HTML 템플릿을 컴파일하는 데 사용됩니다. 세 가지 매개변수를 허용합니다.

코드 복사 코드는 다음과 같습니다.

_.template(templateString, [데이터], [설정])

세 가지 매개변수의 의미는 다음과 같습니다.

templateString: 템플릿 문자열
데이터: 입력 템플릿 데이터
설정: 설정

templateString

템플릿 문자열 templateString은 변수가 <%= ... %>; 형식으로 삽입되는 일반 HTML 언어입니다. 변수의 값을 제공하는 역할을 하는 데이터 개체입니다.

코드 복사 코드는 다음과 같습니다.

var txt = "

<%= 단어 %>

코드 복사 코드는 다음과 같습니다.

"; _.template(txt, {word : "Hello World"}) // "

안녕하세요

코드 복사 코드는 다음과 같습니다.

"

변수 값에 5개의 특수 문자(& < > " ' /)가 포함된 경우 <%- … %>로 이스케이프 처리해야 합니다.

코드 복사 코드는 다음과 같습니다.

var txt = "

<%- 단어 %>

코드 복사 코드는 다음과 같습니다.

"; _.template(txt, {word : "H & W"}) //

H&W

JavaScript 명령은 <% … %> 형식으로 삽입할 수 있습니다. 다음은 판결문의 예시입니다.

코드 복사 코드는 다음과 같습니다.

var txt = "<% var i = 0; if (i<1){ %>" "<% } %>"; word : "Hello World"}) // Hello World

일반적인 사용법에는 루프 문이 포함됩니다.

코드 복사 코드는 다음과 같습니다.

var list = "<% _.each(사람, 함수(이름) { %>

<%= 이름 %> <% }); %>" _.template(list, {people: ['moe', 'curly', 'larry']}); 모에
곱슬
래리”
템플릿 메소드에 첫 번째 매개변수인 templateString만 있고 두 번째 매개변수가 생략된 경우 함수가 반환되며 나중에 이 함수에 데이터를 입력할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var t1 = _.template("안녕하세요 <%=user%>!") t1({ user: "" }) // '안녕하세요!'

데이터

templateString의 모든 변수는 내부적으로 obj 객체의 속성이며, obj 객체는 두 번째 매개변수 데이터 객체를 참조합니다. 다음 두 명령문은 동일합니다.

코드 복사 코드는 다음과 같습니다.

_.template("안녕하세요 <%=user%>!", { 사용자: "" }) _.template("안녕하세요 <%=obj.user%>!", { 사용자: "" })

obj 객체의 이름을 변경하려면 세 번째 매개변수에 설정해야 합니다.

코드 복사 코드는 다음과 같습니다.

_.template("<%if (data.title) { %>Title: <%= title %><% } %>", null,        { 변수: "data" });

템플릿은 변수를 교체할 때 내부적으로 with 문을 사용하기 때문에 위의 접근 방식이 더 빠르게 실행됩니다.