배열 관련 기능
- splice(n, m, k)
- slice(n, m)
- concat(arr1, arr2, … )
- forEach(fn)
- indexOf(item, start)
- lastIndexOf(item)
- includes(item)
- find(fn)
- findIndex(fn)
- reverse()
- filter(fn)
- map(fn)
- join(sep)
- split(sep)
- isArray(obj)
- sort(fn), Lodash 라이브러리
- reduce(fn)
splice(n, m, k)
[n, m) 인덱스의 요소를 원본으로부터 제거하여 반환한다. 여러개의 k로 제거 후 요소를 추가할 수 있다.
// 제거
let arr = [1, 2, 3, 4, 5];
let result = arr.splice(1, 3, 100, 200);
console.log(arr); // [ 1, 100, 200, 5 ]
console.log(result); // [ 2, 3 ]
// 제거하고 추가
arr = ["나는", "철수", "입니다"];
arr.splice(1, 0, "대한민국", "소방관");
console.log(arr); // [ '나는', '대한민국', '소방관', '철수', '입니다' ]
slice(n, m)
[n, m)까지 반환한다. 원본 배열은 바뀌지 않는다.
let arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 4)); // [ 2, 3, 4 ]
// 배열 복사
let arr2 = arr.slice();
console.log(arr2); // [ 1, 2, 3, 4, 5 ]
concat(arr1, arr2, … )
합쳐서 새 배열을 반환한다.
let arr = [1, 2];
console.log(arr.concat([3, 4])); // [ 1, 2, 3, 4 ]
console.log(arr.concat(1, 4)); // [ 1, 2, 1, 4 ]
console.log(arr.concat([3, 4], 5, 6)); // [ 1, 2, 3, 4, 5, 6 ]
forEach(fn)
배열을 반복한다. 각 아이템에 대해 value, index, arr(원본 배열)을 받을 수 있다.
let users = ['Mike', 'Tom', 'Jane'];
users.forEach((name, index) => {
console.log(`${index + 1}. ${name}`);
})
/*
1. Mike
2. Tom
3. Jane
*/indexOf(item, start) / lastIndexOf(item)
start부터 item을 탐색하고 인덱스를 반환한다. start의 디폴트 값은 0이다. lastIndexOf는 끝에서부터 값을 찾아 인덱스를 반환한다.
let arr = [1, 2, 3, 4, 5, 1, 2, 3];
arr.indexOf(3); // 2
arr.indexOf(3, 3); // 7
arr.lastIndexOf(3); // 7
includes(item)
아이템을 포함하는지 확인한다. 주로 기본 자료형을 찾을 때 사용한다.
let arr = [1, 2, 3];
arr.includes(2); // true
arr.includes(6); // false
find(fn)
함수의 조건식을 만족하는 첫번째 아이템에 대해 true를 반환한다. 없으면 undefinded을 반환한다. 배열에 객체가 들어있을 때 사용할 수 있다.
let arr = [1, 2, 3, 4, 5];
const result = arr.find((item) => {
return item % 2 === 0;
});
console.log(result);findIndex(fn)
// find, findIndex
let userList = [
{name: "Mike", age: 30},
{name: "Jane", age: 27},
{name: "Tom", age: 10},
]
const teen = userList.find((user) => {
if (user.age < 19) {
return true;
}
return false;
})
console.log(teen); // { name: 'Tom', age: 10 }
const teen_index = userList.findIndex((user) => {
if (user.age < 19) {
return true;
}
return false;
})
console.log(teen_index); // 2reverse()
let arr = [1, 2, 3, 4, 5];
arr.reverse(); // [5, 4, 3, 2, 1]
filter(fn)
만족하는 모든 요소를 배열로 반환한다.
arr = [1, 2, 3, 4, 5, 6];
filtered_array = arr.filter((item) => {
return item % 2 === 0;
})
console.log(filtered_array); // [ 2, 4, 6 ]map(fn)
아이템에 대해 함수를 실행하여 새로운 배열을 반환한다.
userList = [
{name: "Mike", age: 30},
{name: "Jane", age: 27},
{name: "Tom", age: 10},
];
let newUserList = userList.map((user, index) => {
return Object.assign({}, user, {
id: index + 1,
isAdult: user.age > 19,
})
});
console.log(newUserList);
/*
[
{ name: 'Mike', age: 30, id: 1, isAdult: true },
{ name: 'Jane', age: 27, id: 2, isAdult: true },
{ name: 'Tom', age: 10, id: 3, isAdult: false }
]
*/join(sep)
arr = ["안녕", "나는", "철수야"];
const join_arr = arr.join('-');
console.log(join_arr); // 안녕-나는-철수야split(sep)
arr = "안녕,나는,철수야";
const split_arr = arr.split(',');
console.log(split_arr); // [ '안녕', '나는', '철수야' ]isArray(obj)
typeof를 사용하면 객체든 배열이든 object를 반환한다. 이럴 때는 isArray()를 사용하여 배열 여부를 판단할 수 있다.
// isArray()
let user = {
name: "Mike",
age: 30,
};
let users = ["Mike", "Tom", "Jane"];
console.log(typeof user); // object
console.log(typeof users); // object
console.log(Array.isArray(user)); // false
console.log(Array.isArray(users)); // truesort(fn)
배열 값을 정렬할 수 있다.
/*
arr.sort()
배열 재정렬
주의! 배열 자체가 변경됨
인수로 정렬 로직을 담은 함수를 받음
*/
let arr1 = [4, 6, 2, 3, 1];
let arr2 = ["a", "c", "d", "e", "b"];
arr1.sort();
arr2.sort();
console.log(arr1); // [ 1, 2, 3, 4, 6 ]
console.log(arr2); // [ 'a', 'b', 'c', 'd', 'e' ]
sort()는 별도의 함수를 전달하지 않으면 배열 아이템을 문자열로 취급한다. 정수를 크기 순으로 정렬하려면 정렬 로직을 따로 전달해야 한다.
// 정렬 로직 전달
let arr3 = [27, 8, 5, 13];
// 8 27 5 13
// 5 8 27 13
// 5 8 13 27
function fn(a, b) {
return a - b;
}
arr3.sort(fn);
console.log(arr3); // [ 5, 8, 13, 27 ]귀찮으면 [Lodash 라이브러리](https://lodash.com/docs/4.17.15) 써도 된다.
reduce(fn)
배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환한다.
// 배열 값 모두 더하기
arr = [1, 2, 3, 4, 5];
sum = arr.reduce((prev, cur) => {
return prev + cur;
}, 100)
console.log(sum); // 115초기값을 빈 배열로 넘겨줘서 filter처럼 사용할 수도 있다.
// 성인만 골라내기
userList = [
{name: "Mike", age: 30},
{name: "Jane", age: 27},
{name: "Tom", age: 10},
];
let adultList = userList.reduce((prev, cur) => {
if (cur.age > 19) {
prev.push(cur);
}
return prev;
}, []);
console.log(adultList); // [ { name: 'Mike', age: 30 }, { name: 'Jane', age: 27 } ]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent