[Vue.js/라이브러리] lodash 사용해보기(1) - Array

출처

Lodash Documentation

 

---

 

◽ _.chunk(array, [size=1])

배열을 요소들을 지정한 개수에 맞춰 분할한다.

let array = ['a', 'b', 'c', 'd'];
_.chunk(array, 2);

// 결과 => [['a', 'b'], ['c', 'd']];

 

 

◽ _.compact(array)

*거짓인 값을 제거한 배열을 만든다.

* 거짓 값: false, null, 0, "", undefined, NaN 등

let array = ['a', 'b', false, 'c', 'd', null, ''];
_.compact(array);

// 결과 => ['a', 'b', 'c', 'd'];

 

 

◽ _.concat(array, [values])

배열과 배열을 연결한다. 단, 원래의 값은 바뀌지 않는다.

let array1 = ['a', 'b'];
let array2 = ['c'];
_.concat(array1, array2);

// 결과 => ['a', 'b', 'c'];

 

 

◽ _.difference(array, [values])

배열을 비교하여, 첫번째 배열에서 두번째 배열과 같지 않은 값의 배열을 만든다.

두번째 배열은 제외할 값들이라고 볼 수 있다.

let array1 = ['a', 'b'];
let array2 = ['b', 'c'];
_.difference(array1, array2);

// 결과 => ['a'];

 

 

◽ _.differenceBy(array, [values], [iteratee=_.identity])

difference가 허용하는 것을 제외하고 비교하고 있는 기준을 생성한다.

// 각각의 프로퍼티로 구성된 array를 비교하여 key 'x'의 value를 비교한다. 
_.differenceBy([{'x': 2}, {'x': 1}], [{'x': 1}], 'x');
// => [{'x': 2}]

 

 

◽ _.differenceWith(array, [values], [comparator])

difference가 허용하는 것을 허용하고 비교하고 있는 기준을 생성한다.

비교기(예를 들어 _.isEqual)를 통해 값을 필터링하고 새 배열을 반환한다.

let array = [{'x': 1, 'y': 2}, {'x': 2, 'y': 1}];
_.differenceWith(array, [{'x': 1, 'y': 2}], _.isEqual)

 

 

◽ _.drop(array, [n=1])

배열 중 원하는 인덱스부터 자른다.

// 기본값은 1이다.
_.drop([1, 2, 3]);
// => [2, 3]

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

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

 

 

◽ _.dropRight(array, [n=1])

drop과 반대. 끝에서부터 자른다.

// 기본값은 1이다.
_.dropRight([1, 2, 3]);
// => [1, 2]

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

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

 

 

◽ _.dropRightWhile(array, [predicate=_.identity])

배열의 끝에서부터 시작하여 삭제된 요소를 반환한다.

== 뭔 소린지 모르겠음

let array = [
	{'user': 'one', 'active': true},
	{'user': 'two', 'active': false},
	{'user': 'three', 'active': false}
];

// function(o) { return !o.active }는 false가 리턴되는 '조건'이다.
// while문이 돌아가면서 해당 조건에 맞을 때 까지 도는 로직인 듯.

_.dropRightWhile(array, function(o) { return !o.active });
// => Object for ['one']

 

 

◽ _.dropWhile(array, [predicate=_.indentity])

== 뭔 소린지 모르겠음

 

 

◽ _.fill(array, value, [start=0], [end=array.length])

배열에 value를 채운다. 시작과 끝을 정할 수 있다.

let array = [1, 2, 3];

// array 전체에 'a'를 채운다.
_.fill(array, 'a');
console.log(array);
// => ['a', 'a', 'a']

// 3 크기 만큼의 Array에 2를 채운다.
_.fill(Array(3), 2);
// => 2, 2, 2

// index 1~3까지 '*'를 채운다.
// _.fill([4, 6, 7, 8], '*', 1, 3)
// => [4, '*', '*', 8]

 

 

◽ _.findIndex(array, [predicate=_.identity], [fromIndex=0])

두번째 파라미터에 작성된 해당 조건의 값을 찾는다.

let array = [
	{'user': 'one', 'active': false},
    {'user': 'two', 'active': false},
    {'user': 'three', 'active': true}
];


// 배열 중 user값이 'one'인 값의 위치를 반환
_.findIndex(array, function(o) { return o.user == 'one'; });
// => 0

// 두번째 값에 맞는 값의 위치를 반환
_.findIndex(array, {'user': 'two', 'active': false});
// => 1

// active 값이 false인 index 반환
_.findIndex(array, ['active', false]);
// => 0

 

 

◽ _.findLastIndex(array, [predicate=_.identity], [fromIndex=array.length-1])

findIndex와 달리 끝에서부터 조건에 맞는 인덱스를 찾는다.

 

 

◽ _.flatten(array)

가장 상단의 depth에서부터 시작하여 한 단계 depth를 제거한다.

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

 

 

◽ _.flattenDeep(array)

모든 단계의 depth를 제거한다.

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

 

 

◽ _.flattenDepth(array, [depth=1])

원하는 단계까지의 depth를 제거한다.

let array = [1, [2, [3, [4]], 5]];

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

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

 

 

◽ _.fromPairs(pairs)

배열을 키+값의 형태를 가진 프로퍼티로 반환한다.

let array = [['a', 1], ['b', 2]];
_.fromPairs(array);
// => { 'a': 1, 'b': 2 }

 

 

◽ _.head(array)

배열의 첫번째값을 반환한다.

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

_.head([]);
// => undefined

 

 

◽ _.indexOf(array, value, [fromIndex=0])

배열에서 해당 값이 있는 index를 반환한다.

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

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

 

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.