[Javascript] 배열 객체 메소드와 활용 예시
2021. 8. 25. 18:17ㆍWeb/Javascirpt
728x90
array 객체가 갖고 있는 내장 메소드에 대해 간단한 설명과 예시를 알아보겠습니다.
concat()
2개의 배열 객체를 하나로 합치거나 인자로 주어진 배열이나 값들을 기존 배열에 합쳐 새 배열을 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const arr_1 = ["딸기", "사과", "포도", "바나나"];
const arr_2 = ["오렌지", "수박", "참외"];
result = arr_1.concat(arr_2);
document.write(result);
</script>
</html>
|
cs |
copyWithin()
배열의 일부를 복사한 뒤 다른 위치에 덮어씀
copyWithin(붙여넣기할 위치, 복사 시작 위치, 복자 종료 위치)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const arr_1 = ["딸기", "사과", "포도", "바나나"];
arr_1.copyWithin(2, 0, 2);
document.write(arr_1);
</script>
</html>
|
cs |
entries()
객체가 가지고 있는 프로퍼티를 키와 값 쌍을 이룬 형태의 배열로 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const arr_1 = {appple : 'red', banana : 'yellow'};
console.log("entries 예제: ", Object.entries(arr_1));
</script>
</html>
|
cs |
every()
배열 내부의 객체를 순회해 검사를 진행
배열의 객체가 판별 함수에 모두 만족하면 true를 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = [
{name: "kim", age: 20},
{name: "lee", age: 19},
{name: "park", age: 27},
{name: "choi", age: 18}
]
const result = data.every( i => {
return i.age >= 20 // age >= 20 검사
});
console.log(result);
</script>
</html>
|
cs |
some()
배열 내부의 객체를 순회해 검사를 진행
배열의 객체가 판별 함수 중 하나라도 만족하면 true를 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = [
{name: "kim", age: 20},
{name: "lee", age: 19},
{name: "park", age: 27},
{name: "choi", age: 18}
]
const result = data.some( i => {
return i.age >= 20 // age >= 20 검사
});
console.log(result);
</script>
</html>
|
cs |
fill()
특정 값으로 배열을 채움
하나의 값으로 전체를 채우거나 파라미터를 지정해 특정 index값부터 채울 수도 있음
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data1 = [1, 2, 3, 4, 5];
const data2 = [1, 2, 3, 4, 5];
data1.fill(0);
data2.fill(0, 1, 3);
console.log(data1);
console.log(data2);
</script>
</html>
|
cs |
filter()
주어진 함수 조건을 통과하는(결과값이 참인 경우) 요소들로 새로운 배열을 생성
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = ["apple", "banana", "orange", "grape", "watermelon"];
const dataFilter = data.filter(word => word.length > 5);
console.log(dataFilter);
</script>
</html>
|
cs |
find()
주어진 함수 조건에 통과한 배열의 첫 번째 요소의 값을 반환
통과한 요소가 없다면 undefined를 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = [1, 2, 3, 4, 5];
const dataFind1 = data.find(element => element > 3);
const dataFind2 = data.find(element => element > 5);
console.log(dataFind1);
console.log(dataFind2);
</script>
</html>
|
cs |
findIndex()
주어진 함수 조건에 통과한 배열의 첫 번째 요소의 인덱스를 반환
통과한 요소가 없다면 -1을 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = [1, 2, 3, 4, 5];
const dataFind1 = data.find(element => element > 3);
const dataFind2 = data.find(element => element > 5);
console.log(dataFind1);
console.log(dataFind2);
</script>
</html>
|
cs |
forEach()
주어진 함수를 배열 요소 각각에 대해 실행
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = [1, 2, 3, 4, 5];
data.forEach((e) => console.log(e));
</script>
</html>
|
cs |
includes()
배열에 특정 요소가 포함돼 있는지 검사 후 true 또는 false를 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = ["apple", "banana", "orange"];
const result = data.includes("apple");
console.log(result);
</script>
</html>
|
cs |
indexOf()
배열에서 지정한 값과 같은 요소의 첫 인덱스를 반환
없으면 -1을 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = ["apple", "banana", "orange"];
const result1 = data.indexOf("orange");
const result2 = data.indexOf("watermelon");
console.log(result1);
console.log(result2);
</script>
</html>
|
cs |
lastIndexOf()
배열에서 찾을 수 있는 마지막 인덱스를 반환하고 없다면 -1을 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = [7, 3, 12, 9, 7, 13];
const result1 = data.lastIndexOf(7);
const result2 = data.lastIndexOf(14);
console.log(result1);
console.log(result2);
</script>
</html>
|
cs |
join()
배열의 모든 원소를 연결해 하나의 문자열로 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = ["apple", "banana", "orange"];
const result = data.join(",");
console.log(result);
</script>
</html>
|
cs |
keys()
배열의 각 인덱스를 키(Key) 값으로 가지는 새로운 객체를 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang="ko">
<headcharset="UTF-8">
<title>배열객체</title>
</>
<meta
<body>
</body>
<script>
const data1 = ["apple", "banana", "orange"];
console.log(Object.keys(data1));
const data2 = {12: "apple", 99: "banana", 5: "orange"};
console.log(Object.keys(data2));
</script>
</html>
|
cs |
map()
배열 내의 요소 각각에 대하여 주어진 함수를 호출하고, 그 결과를 모아서 만든 새로운 배열을 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = [1, 2, 3, 4, 5];
const dataMap = data.map(val => val * 2);
console.log(dataMap);
</script>
</html>
|
cs |
pop()
배열의 마지막 요소를 제거한 뒤 그 요소를 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = [7, 3, 12, 9, 7, 13];
data.pop();
console.log(data);
</script>
</html>
|
cs |
push()
배열의 마지막에 하나 이상의 요소를 추가한 뒤 새로운 배열을 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = [1, 2, 3, 4, 5];
data.push(6, 7);
console.log(data);
</script>
</html>
|
cs |
reduce()
배열의 요소에 대해 주어진 함수(reducer 함수)를 적용하여 하나의 값으로 줄임
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = [1, 2, 3, 4, 5];
const dataReduce = data.reduce((acc, cur) => {
console.log(acc, cur);
return acc + cur;
});
console.log(dataReduce);
</script>
</html>
|
cs |
reverse()
배열 요소 순서를 반전
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = [1, 2, 3, 4, 5];
data.reverse();
console.log(data);
</script>
</html>
|
cs |
shift()
배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = ["apple", "banana", "orange", "grape"];
data.shift();
console.log(data);
</script>
</html>
|
cs |
unshift()
새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = ["apple", "banana", "orange", "grape"];
data.unshift("watermelon");
console.log(data);
</script>
</html>
|
cs |
slice()
원본 배열은 수정하지 않은 채 배열의 일부를 추출해 새로운 배열로 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = ["apple", "banana", "orange", "grape"];
const result = data.slice(1, 3);
console.log(result);
</script>
</html>
|
cs |
sort()
배열 객체 데이터를 오름차순으로 정렬
기본 정렬 순서는 유니코드 코드 포인트를 따름
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = ["apple", "banana", "orange", "grape", "mango"];
data.sort();
console.log(data);
</script>
</html>
|
cs |
splice()
배열 객체 지정 데이터를 삭제 후 그 구간에 새 데이터를 삽입
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = ["apple", "banana", "orange", "grape", "mango"];
data.splice(2, 1, "watermelon", "melon"); // 2번 인덱스(orange)부터 1개의 데이터를 삭제 후 데이터 추가
console.log(data);
</script>
</html>
|
cs |
toLocaleString()
사용자의 문화권에 맞는 시간표기법으로 년, 월, 일, 시간을 리턴
toLocaleDateString(), toLocaleTimeString() 등으로 응용
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = new Date (2021, 7, 25, 17, 57, 35);
const day = data.toLocaleString();
const date = data.toLocaleDateString();
const time = data.toLocaleTimeString();
console.log(day);
console.log(date);
console.log(time);
</script>
</html>
|
cs |
toString()
객체의 시간을 문자열로 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = new Date (2021, 7, 25, 17, 57, 35);
data.toString();
console.log(data);
</script>
</html>
|
cs |
values()
배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열객체</title>
</head>
<body>
</body>
<script>
const data = ["apple", "banana", "orange", "grape"]
const result = data.values();
for (const val of result) {
console.log(val);
}
</script>
</html>
|
cs |
'Web > Javascirpt' 카테고리의 다른 글
| [Javascript] var, const, let 변수 선언 차이 (0) | 2021.08.18 |
|---|---|
| [Javascript] 중첩 for문, 이중 for문을 이용해 구구단 출력하기 (0) | 2021.08.10 |
| [Javascript] checkbox checked 갯수 제한두기 (0) | 2021.07.29 |
| [Javascirpt] for문 continue (0) | 2021.07.27 |
| [Javascript] for문 break (0) | 2021.07.27 |