// 배열 심화
// Array.isArray(변수명);
배열이면 true
객체를 생성하지 않고 사용할 수 있는 메서드 : 정적 메서드 (Static Method)
// Array.isArray()
// 배열이면 true
const arr = [1, 2, 3, 4, 5];
Array.isArray(arr); // true
// 배열 생성
// Array.from(배열, 맵핑함수);
const arr = [1, 2, 3];
function plus_two(num) {
return num + 2;
}
const new_arr = Array.from(arr, plus_two);
console.log(new_arr); // [3, 4, 5]
// 3개의 빈요소를 가진 배열
const arr = Array(3); // [empty × 3]
// 3을 요소로 가진 배열
const arr = Array.of(3); // [3]
const arr = Array.of(); // []
// 배열 조작
pop() : 배열 끝에서 하나의 요소를 제거 > 해당 요소를 반환
// push()
const arr = [1, 2, 3, 4, 5];
arr.push(6, 7); // 7(length)
console.log(arr); // [1, 2, 3, 4, 5, 6, 7]
// pop()
arr.pop(); // 7 (제거된 요소)
arr.pop(); // 6
console.log(arr); // [1, 2, 3, 4, 5]
// unshift()
const arr = [1, 2, 3, 4, 5];
arr.unshift(6, 7); // 7(length)
console.log(arr); // [6, 7, 1, 2, 3, 4, 5]
// shift()
arr.shift(); // 6 (제거된 요소)
arr.shift(); // 7
console.log(arr); // [1, 2, 3, 4, 5]
// 배열과 반복
원본 배열을 값을 변경하거나 값을 리턴하지 않는다.
실행할 콜백함수(해당 함수)는 필수 인자로 현재 요소(값)을 가진다. 선택적으로 현재 요소의 인덱스와 forEach()를 호출한 배열을 가질 수 있다.
// forEach()
const array = [1, 2, 3];
array.forEach((number, idx) => {
console.log(number, idx);
// 1 0 [0] == 1
// 2 1 [1] == 2
// 3 2 [2] == 3
console.log(`${idx + 1}번째 요소: ${number}`);
});
// 1번째 요소: 1 // 2번째 요소: 2 // 3번째 요소: 3
// 배열 요소 검색과 정렬
// const array = [1, 2, 3];
array.includes(1); // true
array.includes('h'); // false
const find_array = ['hello', 'world', 'hi', 'friend'];
// 판별함수를 화살표함수로 작성
const key = find_array.find((value) =>
value.length < 3);
console.log(key); // hi
// const array = [1, 2, 3];
console.log(array.findIndex((number) =>
number > 2)); // 2보다 큰 수 3이 위치한 인덱스값 2가 출력된다.
// 숫자 정렬
array = [10, 3, 50, 23, 11, 1, 2, 3];
array.sort(); // [1, 10, 11, 2, 23, 3, 3, 50]
array = ['a', 'z', 'b', 'g'];
array.sort(); // ['a', 'b', 'g', 'z']
// 배열 요소 수정
// arr.fill(채울값, 시작인덱스)
const arr = [1, 2, 3, 4, 5]
arr.fill(10); // [10, 10, 10, 10, 10]
arr.fill(1, 3);
// 1로채운다. 3번째 인덱스부터 끝까지
// [10, 10, 10, 1, 1]
arr.fill(0, 1, 3); // 0으로 채운다 1 ~ 2
// [10, 0, 0, 1, 1]
const arr = [10, 0, 0, 1, 1];
arr.slice(1, 3); // [0, 0], 1~2까지 자르고 반환
const arr = [10, 0, 0, 1, 1];
arr.splice(2); // [0, 1, 1] 삭제됨
arr // [10, 0]
// splice(시작인덱스, 제거할 갯수);
arr = [10, 0, 0, 1, 1];
arr.splice(2, 2); // [0, 1] 삭제
arr // [10, 0, 1]
// splice(시작인덱스, 제거할 갯수, 추가할 요소);
arr // [10, 0, 1]
arr.splice(1, 0, 10);
// 인덱스 1자리에 0개 제거후 10 추가
arr // [10, 10, 0, 1]
// 기타 배열 메서드
2. concat()
3. map() : 배열의 모든 요소에 함수 실행 그 결과를 모아 새로운 배열로 반환한다.
const arr = [10, 10, 0, 1];
arr.join('/');
arr // "10/10/0/1"
arr.concat('a'); // [10, 10, 0, 1, 'a']
// map()
// forEach()와 동일한 종류의 인자를 가지고
// 거의 동일하게 동작하는데 map()은 반환값이 있다.
const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((value) => value * 5);
// [5, 10, 15, 20, 25]
const array = [4, 9, 16];
const sqrt = array.map((value) => Math.sqrt(value));
const arr = [10, 20, 100, 40, 2, 33, 235, 11];
const newArr = arr.filter((number) => number > 99);
const arr = [1, 2, 3, 4, 5];
const reducer = (acc, value) => acc + value;
// acc 리듀서함수의 반환 값들을 누적하는 대상
// value 현재 처리할 요소
arr.reduce(reducer); // 15
arr.reduce(reducer, 10); // 15 + 10 = 25
// acc의 초기값이 10이다.
*연습 문제* reduce()를 사용해 객체배열내에 point항목의 값들을 합산 결과 출력
const user = [
{
name: "John",
point: 35
},
{
name: "Jane",
point: 40
},
{
name: "Jack",
point: 100
}
];
const reducer = (acc, obj) => acc + obj.point;
user.reduce(reducer, 0); // 175
// 객체배열에 reduce()를 사용할 때는 반드시 초기값을 지정해야한다.
※ 자바스크립트 독학백서 정리
'Web > Java Script' 카테고리의 다른 글
[js 독학백서] 따라하는 걸음마 문제 #1 할 일 등록하기 (TodoList) (0) | 2022.01.12 |
---|---|
[js 독학백서] 5. 객체 심화 (0) | 2021.12.30 |
[js 독학백서] 3. 문자열 심화 (0) | 2021.12.23 |
[js 독학백서] 기초 문법 part. 2 ( 조건문, 반복문, 함수) (0) | 2021.12.23 |
[js 독학백서] 기초 문법 part. 1 ( 변수, 타입, 연산자 ) (0) | 2021.12.22 |