언더스코어 Js
UnderScore (_)
Install
npm i underscore
npm i @types/underscore --save-dev
Import
별도의 선언없이 컴포넌트에서 바로 사용한달.
import * as _ from 'underscore';
Collections
_.each
전체데이타를 처리할 때 유용하다.
_.each(this.boxesByColor, (color, i) => {
if (color) {
_.each(color, (sprite, j) => {
console.log(sprite);
})
}
});
See the Pen underscore - each by younghyeong ryu (@wangta69) on CodePen.
_.groupBy
_.groupBy([1.3, 2.1, 2.4], (num) => { return Math.floor(num); });
=> {1: [1.3], 2: [2.1, 2.4]}
_.groupBy(['one', 'two', 'three'], 'length');
=> {3: ["one", "two"], 5: ["three"]}
See the Pen underscore - each\\ by younghyeong ryu (@wangta69) on CodePen.
_.map
데이타를 재가공할 때 유용하다.
return 을 통하여 제 가공된 데이타를 Array형태로 받는다.
_.map([1, 2, 3], (num) => { return num * 3; });
=> [3, 6, 9]
_.map({one: 1, two: 2, three: 3}, function(num, key){ return num * 3; });
=> [3, 6, 9]
_.map([[1, 2], [3, 4]], _.first);
=> [1, 3]
_.map([{lv: 1, unlocks: 1}, {lv: 2}, {lv: 3, unlocks: 1}], (map, i) => {
return map.unlocks !== undefined ? true : false;
});
=> [true, false, true]
See the Pen underscore - map by younghyeong ryu (@wangta69) on CodePen.
_.find
조건에 맞는 데이타를 찾을 때 유용합니다.
조건에 맞는 첫번째 값만을 리턴한다.
조건에 맞는 값이 없을 경우 undefind 리턴
const positions = [{x:3, y: 1}, {x:5, y: 2}, {x:7, y: 2}, {x:8, y: 3}]
const position = _.find(positions, (p) =>{
return p.x === 7 && p.y === 2;
});
=> {x:7, y: 2}
const even = _.find([1, 2, 3, 4, 5, 6], (num) => { return num % 2 == 0; });
=> 2
See the Pen underscore - map by younghyeong ryu (@wangta69) on CodePen.
_.filter
조건에 맞는 모든 데이타를 리턴한다.
const evens = _.filter([1, 2, 3, 4, 5, 6], (num: number) => { return num % 2 == 0; });
=> [2, 4, 6]
const numbers = [10, 5, 100, 2, 1000];
_.min(numbers);
=> 2
const obj = [{x: 0, y: 1}, {x: 1, y: 3}, {x: 2, y: 2}]
const max = _.max(obj, (o: any) => {return o.y;});
=> {x:1, y:3}
_.max
최대값을 구한다. object를 넘길경우 조건을 주어 처리할 수도 있다.(min도 동일)
const stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
_.max(stooges, (stooge) => { return stooge.age; });
=> {name: 'curly', age: 60};
_.min
최소값을 구할때 사용
var numbers = [10, 5, 100, 2, 1000];
_.min(numbers);
=> 2
_.sortBy
오름차순 혹은 내림차순으로 정렬
_.sortBy([150, 50, 30, 250, 350, 450, 70]); // 오름차순 정렬
=> [30, 50, 70, 150, 250, 350, 450]
_.sortBy([150, 50, 30, 250, 350, 450, 70]).reverse(); // 내림차순 정렬
=> [450, 350, 250, 150, 70, 50, 30]
const obj = [{id: 2, age: 30}, {id: 1, age: 25}, {id: 3, age: 40}, {id: 4, age: 35}];
_.sortBy(obj, (o) => {return o.age});
_.sortBy(obj, (o) => {return o.age}).reverse();
See the Pen underscore - map by younghyeong ryu (@wangta69) on CodePen.
_.shuffle
배열을 랜덤하게 섞을때
const position = _.shuffle([50, 150, 250, 350, 450, 550]);
_.sample
주어진 list로 부터 랜덤값을 가져올때 사용된다.
_.sample([1, 2, 3, 4, 5, 6]);
=> 4 // 주어진 6까지의 수 중에서 랜덤한 특정수를 가져온다.
_.sample([1, 2, 3, 4, 5, 6], 3);
=> [1, 6, 2] // 주어진 6까지의 수중에서 랜덤한 3개의 숫자를 가져온다.
Arrays
_.compact
배열에서 false, null, 0, '', undefined and NaN 등을 모두 없앤다.
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
_.uniq
배열에서 unique 한 값만을 리턴한다.
_.uniq([1, 2, 1, 4, 1, 3]);
=> [1, 2, 4, 3]
// object 인 경우 아래와 같이 고유값을 가져올 수 있다.
const obj = [{x:1, y:1}, {x:2, y:2}, {x:3, y:3}, {x:2, y:2}, {x:4, y:5}];
_.uniq(obj, (o)=>{
return o.x + ',' + o.y;
});
=> [{x:1, y:1}, {x:2, y:2}, {x:3, y:3}, {x:4, y:5}]
See the Pen underscore - each\\ by younghyeong ryu (@wangta69) on CodePen.
Chaining
여러가지 사용하여 특정값을 도출할때 chain을 걸어준다.
체인을 호출하면 이후의 모든 메서드 호출이 래핑된 개체를 반환하게 됩니다. 계산이 끝나면 value를 호출하여 최종 값을 검색합니다.
chain
chain은 value 와 함께 사용된다.
const stooges = [{name: 'curly', age: 25}, {name: 'moe', age: 21}, {name: 'larry', age: 23}];
const youngest = _.chain(stooges)
.sortBy((stooge) => { return stooge.age; }) // age 순으로 정렬한 후
.map((stooge) => { return stooge.name + ' is ' + stooge.age; })
.first() // 첫번째 배열을 리턴후
.value(); // 그 값을 가져온다.
=> "moe is 21"
const callee = _.chain(connectionList)
.shuffle()
.find((user) => { return this.user.id !== user.id && user.status === 'waiting'; })
.value();
value
_.chain([1, 2, 3]).reverse().value();
=> [3, 2, 1]
See the Pen underscore - unique by younghyeong ryu (@wangta69) on CodePen.