로메오의 블로그

lodash 자주 사용하는 메서드 정리 본문

Frontend/ETC

lodash 자주 사용하는 메서드 정리

romeoh 2021. 11. 16. 14:14
반응형

# Collection

_.filter(콜렉션, 조건)

콜렉션에서 검색

var users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false }
];
 
_.filter(users, function(o) { return !o.active; });
// => objects for ['fred']
 
// The `_.matches` iteratee shorthand.
_.filter(users, { 'age': 36, 'active': true });
// => objects for ['barney']
 
// The `_.matchesProperty` iteratee shorthand.
_.filter(users, ['active', false]);
// => objects for ['fred']
 
// The `_.property` iteratee shorthand.
_.filter(users, 'active');
// => objects for ['barney']

 

_.reject(콜렉션, 조건)

콜렉션에서 특정 조건을 제외한 데이터 반환 (filter와 반대)

var users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred',   'age': 40, 'active': true }
];
 
_.reject(users, function(o) { return !o.active; });
// => objects for ['fred']
 
// The `_.matches` iteratee shorthand.
_.reject(users, { 'age': 40, 'active': true });
// => objects for ['barney']
 
// The `_.matchesProperty` iteratee shorthand.
_.reject(users, ['active', false]);
// => objects for ['fred']
 
// The `_.property` iteratee shorthand.
_.reject(users, 'active');
// => objects for ['barney']

 

_.size(콜렉션)

콜렉션 사이즈 반환

_.size([1, 2, 3]);
// => 3
 
_.size({ 'a': 1, 'b': 2 });
// => 2
 
_.size('pebbles');
// => 7

 

 

_.sample(콜렉션)

콜렉션에서 랜덤으로 추출함

_.sample([1, 2, 3, 4]);
// => 2

 

_.sampleSize(콜렉션, 추출갯수)

콜렉션에서 추출갯수만큼 랜덤으로 배열로 반환

_.sampleSize([1, 2, 3], 2);
// => [3, 1]
 
_.sampleSize([1, 2, 3], 4);
// => [2, 3, 1]

_.sampleSize(_.range(1, 45), 7);
// 로또 번호 생성

 

_.every(콜렉션, 조건)

콜렉션에서 조건이 맞는지 확인한다.

// 배열안의 타입을 확인할 수 있습니다.
_.every([true, 1, null, 'yes'], Boolean);
// → false

var users = [
  { 'user': 'barney', 'active': false },
  { 'user': 'fred',   'active': false }
];

// 값을 비교할 수 있습니다.
_.every(users, { 'user': 'barney', 'active': false });
// → false

// key와 value가 있는지 확인할 수 있습니다.
_.every(users, 'active', false);
// → true

// key에 해당하는 value가 모두 true이면 true를 반환합니다.
_.every(users, 'active');
// → false

 

_.find(콜렉션, 조건)

콜렉션에서 조건에 맞는 원소를 반환한다.

var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];

// 콜백함수가 처음으로 참이되는 객체를 반환
_.find(users, function(chr) {
  return chr.age < 40;
});
// → { 'user': 'barney',  'age': 36, 'active': true }

// 객체의 키와 value가 모두 일치하는 처음의 객체 반환
_.find(users, { 'age': 1, 'active': true });
// → { 'user': 'pebbles', 'age': 1,  'active': true }

// 객체의 키와 value가 모두 일치하는 처음의 객체 반환
_.find(users, 'active', false);
// → { 'user': 'fred',    'age': 40, 'active': false }

// 해당 키가 처음으로 true가 되는 객체 반환
_.find(users, 'active');
// → { 'user': 'barney',  'age': 36, 'active': true }

 

_.forEach(콜렉션, 콜백) _.forEachRight(콜렉션, 콜백)

forEach문

// 배열은 한개의 값씩 대입하여 함수를 실행시킵니다.
_([1, 2]).forEach(function(n) {
  console.log(n);
}).value();
// 1
// 2

// object는 한개의 value와 키를 대입하여 함수를 실행시킵니다.
_.forEach({ 'a': 1, 'b': 2 }, function(n, key) {
  console.log(n, key);
});
// 1
// "a"
// 2
// "b"

 

_.include(콜렉션, 값, 시작index)

콜렉션에 값이 있는지 확인함

// 배열에 값이 있는지 찾습니다.
_.includes([1, 2, 3], 1);
// → true

// index에 해당 값이 있는지 찾습니다.
_.includes([1, 2, 3], 1, 2);
// → false

// 일치하는 값이 있는지 찾습니다.
_.includes({ 'user': 'fred', 'age': 40 }, 'fred');
// → true

// 일치하는 값이 문자열 안에 있는지 찾습니다.
_.includes('pebbles', 'eb');
// → true

 

_.map(콜렉션, 콜백)

function timesThree(n) {
  return n * 3;
}

// 해당함수를 실행하고 그 결과를 배열로 반환합니다.
_.map([1, 2], timesThree);
// → [3, 6]

// 해당함수를 실행하고 그 결과를 배열로 반환합니다.
_.map({ 'a': 1, 'b': 2 }, timesThree);
// → [3, 6]

var users = [
  { 'user': 'barney' },
  { 'user': 'fred' }
];

// key값만 집어넣을 경우 해당 value값들을 배열로 반환해줍니다.
_.map(users, 'user');
// → ['barney', 'fred']

 

_.reduce(콜렉션, 콜백) _.reduceRight(콜렉션, 콜백)

// reduce는 콜백함수의 첫번째 인자로 전의 함수가 실행시킨 결과를 받습니다.
// 그리고 함수가 모두 실행된 뒤에 결과를 반환합니다.
_.reduce([1, 2], function(total, n) {
  return total + n;
});
// → 3

// reduce는 콜백함수의 첫번째 인자로 전의 함수가 실행시킨 결과를 받습니다.
// 그리고 함수가 모두 실행된 뒤에 결과를 반환합니다.
_.reduce({ 'a': 1, 'b': 2 }, function(result, n, key) {
  result[key] = n * 3;
  return result;
}, {});
// → { 'a': 3, 'b': 6 }

 

 

# Array

_.compact(배열)

배열에서 false, null, 0, “”(빈값), undefined, NaN의 값을 제외시킨 배열을 반환한다.

_.compact([0, 1, false, 2, '', 3]);
// => [1, 2, 3]

 

 

_.take(배열, 갯수) _.takeRight

_.take([1, 2, 3]);
// => [1]
 
_.take([1, 2, 3], 2);
// => [1, 2]
 
_.take([1, 2, 3], 5);
// => [1, 2, 3]
 
_.take([1, 2, 3], 0);
// => []

 

_.uniq(배열)

배열에서 중복값 제거

_.uniq([2, 1, 2]);
// => [2, 1]

 

_.shuffle(배열)

값을 썪음

_.shuffle([1,2,3])
// => [3,1,2]

 

 

_.zip(배열)

배열에서 인덱스로 다시 만듬

_.zip(['a', 'b'], [1, 2], [true, false]);
// => [['a', 1, true], ['b', 2, false]]

 

_.findIndex(배열, 조건) _.findLastIndex()

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];

// 콜백함수를 실행하여 결과가 처음 true가 나오는 index 값을 반환합니다.
_.findIndex(users, function(chr) {
  return chr.user === 'barney';
});
// -> 0

// 처음 일치하는 object의 index 값을 반환합니다.
_.findIndex(users, { 'user': 'fred', 'active': false });
// -> 1

// 처음으로 해당 key와 value를 가진 index 값을 반환합니다.
_.findIndex(users, 'active', false);
// → 0

// 처음으로 해당 key를 가지고 value가 true인 index 값을 반환합니다.
_.findIndex(users, 'active');
// → 2

 

_.flatten(배열)

다차원 배열을 1차원 배열로 반환

// 배열안의 배열 값을 순서대로 나열합니다.(1depth만)
_.flatten([1, [2, 3, [4]]]);
// → [1, 2, 3, [4]]

// 배열안의 배열 값을 깊이와 상관없이 순서대로 나열합니다.
_.flatten([1, [2, 3, [4]]], true);
// → [1, 2, 3, 4]

 

_.remove(배열, 조건)

조건 값에 맞는 원소를 반환하고, 원본에서는 제거함

var array = [1, 2, 3, 4];

// 원하는 조건에 해당되는 값은 기존 array에서 제거되어 배열로 반환됩니다.
var evens = _.remove(array, function(n) {
  return n % 2 == 0;
});

console.log(array);
// → [1, 3]

console.log(evens);
// → [2, 4]

 

_.difference(배열, 배열)

두개의 배열에서 다른 부분을 추출한다.

_.difference([2, 1], [2, 3]);
// => [1]

_.difference([1, 2, 3, 4, 5], [5, 2, 10]);
// => [1, 3, 4]

 

 

 

반응형

 

 

# Object

_.get(객체, 가져올키, 기본값)

객체에서 해당 키값을 반환

var object = { a: 1, b: 2, c: 3, e: { f: 5 } };

_.get(object, 'a');
// => 1

_.get(object, 'd');
// undefined

_.get(object, 'd', 4);
// 4

_.get(object, 'e.f');
// 5

var object2 = { 'a': [{ 'b': { 'c': 3 } }] };
 
_.get(object2, 'a[0].b.c');
// => 3
 
_.get(object2, ['a', '0', 'b', 'c']);
// => 3
 
_.get(object2, 'a.b.c', 'default');
// => 'default'

 

_.omit(객체, 제외할 키)

객체에서 해당 키를 제외하고 반환

var object = { 'a': 1, 'b': '2', 'c': 3 };
 
_.omit(object, ['a', 'c']);
// => { 'b': '2' }

_.omit(object, 'a');
// => { 'b': '2', 'c': 3 }

 

_.values(객체)

객체에서 값만 반환

_.values({ a: 1, b: 2, c: [3, 4] });
// => [ 1, 2, [3, 4] ]

_.values('hi');
// => ['h', 'i']

function Foo() {
  this.a = 1;
  this.b = 2;
}
 
Foo.prototype.c = 3;
 
_.values(new Foo);
// => [1, 2] (iteration order is not guaranteed)

 

 

# Util

_.constant(반환값)

_.constant(0);
// => 0

_.constant({ a: 1 });
// => { a: 1 }


var objects = _.times(2, _.constant({ 'a': 1 }));
 
console.log(objects);
// => [{ 'a': 1 }, { 'a': 1 }]
 
console.log(objects[0] === objects[1]);
// => true

 

_.times(반복횟수, 콜백)

콜백조건에 맞게 반복횟수만큼 반복후 배열 반환

_.times(3, _.constant(0));
// => [0, 0, 0]

_.times(3, String);
// => ['0', '1', '2']

 

_.range([시작], 종료, [증가폭])

배열을 생성함

_.range(0, 6, 0);
// => [0, 0, 0, 0, 0, 0]

_.range(4);
// => [0, 1, 2, 3]

_.range(-4);
// => [0, -1, -2, -3]
 
_.range(1, 5);
// => [1, 2, 3, 4]
 
_.range(0, 20, 5);
// => [0, 5, 10, 15]
 
_.range(0, -4, -1);
// => [0, -1, -2, -3]
 
_.range(1, 4, 0);
// => [1, 1, 1]
 
_.range(0);
// => []

 

 

# String

_.pad(string, 길이, 문자) _.padEnd() _.padStart()

_.pad('abc', 8);
// => '  abc   '
 
_.pad('abc', 8, '_-');
// => '_-abc_-_'
 
_.pad('abc', 3);
// => 'abc'

_.padEnd('abc', 6);
// => 'abc   '
 
_.padEnd('abc', 6, '_-');
// => 'abc_-_'
 
_.padEnd('abc', 3);
// => 'abc'

_.padStart('abc', 6);
// => '   abc'
 
_.padStart('abc', 6, '_-');
// => '_-_abc'
 
_.padStart('abc', 3);
// => 'abc'

 

_trim(string, 제거문자) _trimEnd() _trimStart()

_.trim('  abc  ');
// => 'abc'
 
_.trim('-_-abc-_-', '_-');
// => 'abc'
 
_.map(['  foo  ', '  bar  '], _.trim);
// => ['foo', 'bar']

_.trimEnd('  abc  ');
// => '  abc'
 
_.trimEnd('-_-abc-_-', '_-');
// => '-_-abc'

_.trimStart('  abc  ');
// => 'abc  '
 
_.trimStart('-_-abc-_-', '_-');
// => 'abc-_-

 

 

# Math

_.add()

더하기

_.add(6, 4);
// => 10

 

_.subtract()

빼기

_.subtract(6, 4);
// => 2

 

_.multiply()

곱하기

_.multiply(6, 4);
// => 24

 

_.divide()

나누기

_.divide(6, 4);
// => 1.5

 

 

_.round()

반올림

_.round(4.006);
// => 4
 
_.round(4.006, 2);
// => 4.01
 
_.round(4060, -2);
// => 4100

 

_.floor()

내림

_.floor(4.006);
// => 4
 
_.floor(0.046, 2);
// => 0.04
 
_.floor(4060, -2);
// => 4000

 

_.ceil()

올림

_.ceil(4.006);
// => 5
 
_.ceil(6.004, 2);
// => 6.01
 
_.ceil(6040, -2);
// => 6100

 

_.max() _.min()

최대값

_.max([4, 2, 8, 6]);
// => 8
 
_.max([]);
// => undefined

_.min([4, 2, 8, 6]);
// => 2
 
_.min([]);
// => undefined

 

_.mean(배열)

평균값을 구함

_.mean([4, 2, 8, 6]);
// => 5

 

_.sum()

합계

_.sum([4, 2, 8, 6]);
// => 20

 

 

 

 

 

 

# Number

_.random(최저, 최고)

_.random(0, 5);
// => an integer between 0 and 5
 
_.random(5);
// => also an integer between 0 and 5
 
_.random(5, true);
// => a floating-point number between 0 and 5
 
_.random(1.2, 5.2);
// => a floating-point number between 1.2 and 5.2

 

 

https://lodash.com/docs

반응형
Comments