이전에 배열의 제어에 대해서 공부했었다. 이 기존 Array 객체에서 ES6 버전에서 추가된 함수들에 대해 다뤄보고자 한다.
| 함수 | 설명 |
| filter(함수) | 주어진 필터링 값이 참인 경우의 배열 요소들만으로 새로운 배열을 생성한다. |
| find(함수) | 주어진 요구조건을 만족하는 첫 번째 요소를 반환한다. 없으면 undefined |
| findIndex(함수) | 주어진 요구조건을 만족하는 배열의 첫번째 요소에 대한 인덱스를 반환한다. 없으면 -1 |
| forEach(함수) | 배열의 각각 요소를 순회하며 함수를 호출한다. |
| keys() | length의 속성을 읽은 다음 0 ~ length-1의 정수를 Array Iterator 을 반환한다. |
| map(함수) | 배열 내의 모든 요소 각각에 대하여 함수를 호출하고, 그 결과를 모아서 새로운 배열을 반환한다. |
| reduce(함수) | 배열의 각 값에 대해 왼쪽에서 오른쪽으로 함수를 적용하여 단일 값으로 줄인다. |
| reduceRight(함수) | 배열의 각 값에 대해 오른쪽에서 왼쪽으로 함수를 적용하여 단일 값으로 줄인다. |
| some(함수) | 배열 중의 적어도 한 요소가 테스트 함수를 만족시키면 true를 반환한다. |
| values() | 배열의 요소 값들에 대한 객체를 반환한다. |
| from() | 유사 배열 또는 반복 가능한 객체로 Array 인스턴스 생성한다. |
| of() | 전달인자의 개수나 데이터 타입에 상관없이 새 Array 인스턴스를 생성한다. |
| copyWithin() | 배열 내의 지정된 요소들을 동일한 배열 내에서 복사한다. |
| fill() | 배열 안의 시작 인덱스부터 끝 인덱스까지 요소 값을 지정된 값으로 채운다. |
| unShift() | 배열의 앞에 하나 이상의 요소를 추가하고 새로운 길이를 반환한다. |
| includes() | 배열에 특정 요소가 포함되어있는지 알아내어 true / false 반환한다. |
| indexOf() | 배열에서 지정한 값과 같은 요소의 첫 인덱스를 반환한다. 없으면 -1 |
| lastIndexOf() | 배열에서 지정한 값과 같은 요소의 마지막 인덱스를 반환한다. 없으면 -1 |
| toString() | 배열과 요소를 반환하는 문자열을 반환한다. |
| entries() | 배열의 각 인덱스에 대한 키/값 쌍을 포함하는 새로운 객체를 반환한다. |
| every(함수) | 배열의 모든 요소가 테스트 함수를 만족하면 true를 반환한다. |
<<예제>>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// filter()
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const result1 = numbers.filter((number) => number % 2 === 0);
console.log(result1); // [2,4,6,8]
// find()
const result2 = numbers.find((number) => number % 3 === 0);
console.log(result2); //3
//findIndex()
const result3 = numbers.findIndex((number) => number % 3 === 0);
console.log(result3); //2 ==> 3의 인덱스 번호 반환
//keys()
const result4 = numbers.keys();
result4.forEach(element => {
console.log(element); // 0 1 2 3 4 5 6 7 8
});
console.dir(result4) // Array Iterator
//map()
const result5 = numbers.map((number) => number * 2);
console.log(result5); // [2, 4, 6, 8, 10, 12, 14, 16, 18]
//reduce()
const result6 = numbers.reduce((subnum, number) => subnum - number);
console.log(result6); // -43
//reduceRight()
const result7 = numbers.reduceRight((subnum, number) => subnum - number);
console.log(result7); //-27
//some()
const result8 = numbers.some(number => number === 5);
console.log(result8); //true
//values()
const result9 = numbers.values();
result9.forEach(element => {
console.log(element); // 1 2 3 4 5 6 7 8 9
})
//from()
console.log(Array.from("안녕하세요")); // ['안', '녕', '하', '세', '요']
// Array.from("안녕", 1, "하세요", true) // TypeError: number 1 is not a function
//of()
console.log(Array.of("안녕", 1, "하세요", true)); //['안녕', 1, '하세요', true]
//copyWith() : 인덱스 0번째부터, numbers.lenght-3부터 numbers.length에 해당하는 값을 복사하여 변경
numbers.copyWithin(0, numbers.length - 3);
console.log(numbers) // [7, 8, 9, 4, 5, 6, 7, 8, 9]
// fill() : 인덱스 3부터 5로 숫자 변경
numbers.fill(5, 3);
console.log(numbers); // [7, 8, 9, 5, 5, 5, 5, 5, 5]
//unShift()
numbers.unshift("배열에 추가");
console.log(numbers); //['배열에 추가', 7, 8, 9, 5, 5, 5, 5, 5, 5]
//includes()
console.log(numbers.includes(3)); //false
//indexOf() : 해당하는 값의 첫 인덱스 반환
console.log(numbers.indexOf("배열에 추가")); // 0
console.log(numbers.indexOf(5)); //4
//lastIndexOf() : 해당하는 값의 마지막 인덱스 반환
console.log(numbers.lastIndexOf(5))//9
//toString()
console.log(numbers.toString()) //배열에 추가,7,8,9,5,5,5,5,5,5 (string)
//entries()
const strings = ["가", "나", "다"]
const result10 = strings.entries();
result10.forEach(element => {
console.log(element); // [0, '가'], [1, '나'], [2, '다']
})
//every()
console.log(strings.every(string => string === "가")); //false
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript 내장함수 : Object관련 내장함수 (0) | 2024.08.10 |
|---|---|
| JavaScript : Symbol에 대해서 알아보자 (0) | 2024.08.06 |
| JavaScript : 사용자 지정 데이터 특성(dataset)을 이용해보자 (0) | 2024.08.05 |
| JavaScript : 구조분해할당(Distructuring)에 대해 알아보자 (1) | 2024.08.05 |
| JavaScript 내장함수 : String관련 내장함수 (0) | 2024.08.04 |
| JavaScript 내장함수 : 숫자 관련 내장함수 (0) | 2024.08.04 |
| JavaScript 내장함수 : 인코딩 / 디코딩 함수 (0) | 2024.08.04 |
| JavaScript의 내장함수 : 타이머함수 (0) | 2024.08.04 |