IT/CS

[JavaScript] 배열 및 함수

Terriermon 2021. 8. 20. 16:04

배열

여러 개의 값을 순차적으로 저장할 때 사용

- Array 생성자로 생성된 Array 타입의 객체

 

🌈 배열의 생성: [] 또는 Array()로 생성

const ar = [];
const ar = new Array();

 

🌈  배열의 추가, 삭제, 길이

//추가
const arr = [];
arr[0] = 1, arr[2] = 4;

//arr[0] = 1, arr[1] = null, arr[2] = 4
console.log(arr.length); //3 출력


//삭제
// splice 함수 사용
// Array.prototype.splic( start, deleteCount, items);
// 배열 시작 위치(start)부터 제거할 요수의 개수(deleteCount)
// items: 삭제 위치에 추가될 요소
const ar = [0, 1, 2, 3];
ar.splice(2,1); // [0, 1, 3]


//길이
arr.length;

 

🌈  배열의 메서드

- Array.isArray: 주어진 인수가 배열이면 true 반환

- Array.of: 주어진 인수를 요소로 갖는 배열 생성

- Array.prototype.indexOf: 인수를 검색해서 인덱스 반환, 없을 때 -1 반환

- Array.prototype.push: 인수로 전달받은 값을 배열에 추가

- Array.prototype.pop: 마지막 요소 제거

- Array.prototype.sort: 배열의 요소 정렬 (default: 오름차순)

const ar = [5, 4, 3, 10];

ar.sort(); // [3, 4, 5, 10];
ar.sort((a,b) => b-a); //[10, 5, 4, 3];


- Array.prototype.forEach: 배열을 순회하며 함수 수행

const ar = [1, 2, 3];

ar.forEach((item,index,arr) => {
  console.log(`요소값: ${item} 인덱스: ${index} this:${arr}`);
})
// 요소값: 1, 인덱스: 0, this: 1, 2, 3 출력 (반복)


- Array.prototype.map: 배열을 순회하며 함수 수행, 새로운 배열 반환

const ar = [1, 2, 3];

const newAr = ar.map((item.index.arr) => {
	console.log(`요소값: ${item} 인덱스: ${index} this:${arr}`); //forEach와 같은 출력
    return item * 2; //새로운 배열 반환
})
console.log(newAr); //[2, 4, 6];


- Array.prototype.filter: 반환값이 true인 요소로만 구성된 새로운 배열 반환 (map과 같은 형식)


- Array.prototype.reduce: 반환값을 다음 함수 호출 시 전달하여 누적 결과값 반환

const ar= [1, 2, 3, 4, 5];

// ac= 누적값, cur = 현재값, index = 현재 위치, arr = 배열
const sum = ar.reduce((ac, cur, index, arr) =>{
	return ac + cur;
}, 0)

console.log(sum); //누적값

 

유용한 함수

- Rest 파라미터: 매개변수 이름 앞에 세개의 점을 붙여 정의한 매개변수

인수들이 모두 배열에 담겨 할당

function fuc(...rest){
	console.log(Arrays.isArray(rest)); //true
    // rest = [1, 2, 3];
}

fuc(1, 2, 3);

 

- Spread 연산자: 뭉쳐있는 여러 값들을 펼쳐서 개별적인 값으로 만듦

console.log(...[1, 2, 3]); // 1 2 3 개별 요소로 분리되어서 출력

'IT > CS' 카테고리의 다른 글

[Java] Lambda expression  (0) 2021.09.28
[JavaScript] jQuery  (0) 2021.08.22
[JavaScript] ES6 자바스크립트 특징  (0) 2021.08.20
[DB] 절차형 SQL  (0) 2021.08.13
[DB] SQL 정리  (0) 2021.08.12