Javascript 배열, 배열 함수 정리

- 내가 매번 헷갈려서 나중에 찾아보려고 정리..

- 배열 선언 : 두가지

let arr = new Array();
let arr = [];

 

- for of, forEach : 배열의 값 하나씩 꺼내기

let items = [1, 2, 3]
for(let item of items){
	console.log(item);
}
// 1
// 2
// 3

items.forEach(function(item, index, array)){   // = items.forEach((item, index, array) => {});
	console.log(item, index);
});
// 1 0
// 2 1 
// 3 2

 

- push : 배열 젤 뒤에 값 추가

- pop : 배열 젤 뒤에 값 삭제

- unshift : 배열 젤 앞에 값 추가(배열 전체 순서를 새로 줘야해서 느림)

- shift : 배열 젤 앞에 값 삭제(배열 전체 순서를 새로 줘야해서 느림)

- splice : 배열 자르기( 기존 배열에서 특정 부분을 삭제함. 삭제된 부분은 리턴함)

let item = ['사과', '딸기', '바나나']
item.splice(1, 1);  //(시작 index, 갯수) 딸기 하나 지움.
console.log(item)
//['사과', '바나나']
----------------------------------
//자른 자리에 더하기도 된다. 
let item = ['사과', '딸기', '바나나']
item.splice(1, 1, '수박');  //'딸기' 지우고 그 자리에 '수박' 추가
console.log(item)
//['사과', '수박', '바나나']

 

- concat : 배열 더하기  

- indexOf : 배열에서 원하는 값의  위치 찾기

-lastIndexOf : 배열에서 원하는 값의 가장 마지막 위치 찾기(원하는 값이 여러개 들어있는 경우)

- includes : 배열에 원하는 값 있는지 찾기.

- join : 배열을 스트링으로 바꾸기.

const test = ['사과', '바나나', '딸기']
const result = test.join();
console.log(result);
// 사과,바나나,딸기
const result2 = test.join('/');
console.log(result2);
// 사과/바나나/딸기

 

- split : 주어진 스트링을 배열로 바꾸기.

const str = '사과,딸기,바나나';
const result = str.split(",", 2);
console.log(result);
// ['사과','딸기']
const resul2t = str.split();
console.log(result2);
// ['사과,딸기,바나나']

 

- reverse : 배열을 역순으로 바꿈.

- slice : 배열의 특정한 부분을 잘라서 새 배열로. (splice랑 비교잘하기)

- find : 콜백함수를 넘겨주고 그 함수에 첫 true 인 값을 리턴.

const students = {
	new Student('A', 29, true, 45),
    new Student('B', 20, false, 80),
    new Student('C', 24, true, 90),
    new Student('D', 22, false, 55),
    new Student('E', 22, true, 96),
}

const result = students.find((student) => student.score === 90);
console.log(reuslt);
// Student C object가 출력.

 

-filter : 콜백함수를 넘겨주고 true인 모든 값을 배열로 리턴.

const students = {
	new Student('A', 29, true, 45),
    new Student('B', 20, false, 80),
    new Student('C', 24, true, 90),
    new Student('D', 22, false, 55),
    new Student('E', 22, true, 96),
}

const result = students.find((student) => student.enrolled);
console.log(reuslt);
// Student A, C, E object가 배열로 출력.

 

- map : 넘겨준 콜백함수를 이용해서 배열에 있는 요소 한가지 한가지를 다른 것으로 변환해줌.

const result = students.map((student) => student.score);
console.log(result);
//[45, 80, 90, 55, 96]

 

- some : 배열의 요소중에 콜백함수의 결과가 true 인 애가 있느지 없는지 확인해줌

const result = student.some((student) => student.score < 50);
console.log(result);
//true

 

- every : 배열의 모든 요소가 콜백함수의 결과가 true 이면 true, 하나라도 아니면 false.

- reduce : 배열의 모든 요소를 반복하면서 콜백함수의 결과를 누적하여 리턴.

const result = students.reduce((prev, curr) => {
	console.log("-----");
    console.log(prev);
    console.log(curr);
});
// -----
// A
// B
// -----
// undefined
// C
-> return 이 없으면 prev 값이 undefined 된다.

const result = students.reduce((prev, curr) => {
	console.log("-----");
    console.log(prev);
    console.log(curr);
    return curr;
});
// -----
// A
// B
// -----
// B
// C

/* 학생들의 점수 합 구하기 */
const result = students.reduce((prev, curr) => {
	console.log("-----");
    console.log(prev);
    console.log(curr);
    return prev + curr;
}, 0); //0부터 시작.
// -----
// 0
// 45
// -----
// 45
// 80
// ----
// 125
// 90
... 생략

 

- sort : 배열을 정렬. 콜백함수에  이전값과 현재값이 전달되는데, - 값을 리턴하면 첫번째가 두번째보다 작다고 간주되고 정렬.

const arr = [70, 80, 33, 44]
const result = arr.sort((a, b) => a -b).join();
console.log(result);
// 33,44,70,80

const result 2 = arr.sort((a,b) => b-1).join();
console.log(result2);
// 80,70,44,33

 

 

드림코딩 엘리 님의 유튜브 강의를 보고 정리했음!

나중에 내가 찾아볼 목적으로 적어만 둔거라.. 이해가 필요하신 분들은 아래 링크로 가서 들으시길..!

https://youtu.be/FN_D4Ihs3LE