[javascript]Array 객체

728x90

배열 : 인덱스를 이용해 값을 식별할 수 있는 자료 구조

인덱스 : 배열내에서 순서를 나타냄

배열 선언!!!!

let arr = [];

let arr = new Array();

let arr = [a , b, c];

배열 접근

arr[0];

배열에 담긴 요소의 개수

arr.length

1. toString()

메소드는 배열안의 모든 문자를 쉼표( , )를 이용해 모두 결합 하나의 문자열

예시)

let fruits = ["Banana", "Orange"]

let str = fruits.toString();

console.log(str);
//Banana,Orange

2. join()

메소드는 배열안의 모든 문자를 파라미터로 지정한 문자를 이용해서 모두 결합해서 하나의 문자열로 반환

(요약하면 배열을 문자열로 반환)

예시)

let fruits = ["Banana", "Orange", "Apple", "Mango"]

let str = fruits.join(" * ");

console.log(str);
//Banana * Orange * Apple * Mango

3. pop

메소드는 배열에서 마지막 요소 제거하고 마지막 요소 반환

예시)

let fruits = ["Banana", "Orange", "Apple", "Mango"]

let str = fruits.pop();

console.log(str);
//Mango

4. push()

메소드는 배열에서 새로운 요소(데이터 객체 등)를 추가

예시)

let fruits = ["Banana", "Orange", "Apple", "Mango"]

let str = fruits.push("Kiwi");

console.log(fruits);
//["Banana", "Orange", "Apple", "Mango", "Kiwi"]

5. shift()

메소드는 배열에서 첫 번째 요소를 제거하고, 첫 번째 요소를 반환합니다.(맨앞 요소 제거)

예시)

let fruits = ["Banana", "Orange", "Apple", "Mango"]

let str = fruits.shift();

console.log(str);
//Banana

6. unshift()

메소드는 배열의 맨 앞에 요소를 추가하고, 배열의 길이를 반환함.(맨 앞 요소 추가)

예시)

let fruits = ["Banana", "Orange", "Apple", "Mango"]

let str = fruits.unshift("Lemon");

console.log(fruits);
//["Lemon", "Banana", "Orange", "Apple", "Mango"]

console.log(str);
//5

7. 배열 요소 변경

배열의 요소를 변경 할 때는 변경해야하는 배열 인덱스로 접근

예시)

let fruits = ["Banana", "Orange", "Apple", "Mango"]

fruits[0] = "Kiwi";

console.log(fruits);
//["Kiwi", "Orange", "Apple", "Mango"]

8. splice()

메소드는 새로운 요소를 특정 위치에 추가, 추가시에는 기존 요소에서 삭제 가능

splice(3, 1, "f", "g") 위치, 제거 갯수, 추가~

예시)

let fruits = ["Banana", "Orange", "Apple", "Mango"]

fruits.splice(2, 0, "Lemon", "Kiwi");

console.log(fruits);
//["Kiwi", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

첫 번째 파라미터 - 새로운 요소 추가(인덱스 번호)
두 번째 파라미터 - 삭제할 요소 수
나머지 파라미터 - 추가할 요소

9. concat()

메소드는 2개 이상의 배열을 하나의 배열로 결합

예시)

let arr1 = ["Lemon", "Kiwi"];
let arr2 = ["Banana", "Orange", "Apple"]

let addArr = arr1.concat(arr2)

console.log(addArr)
//["Lemon", "Kiwi", "Banana", "Orange", "Apple"]

10. slice()

메소드는 정해진 시작 인덱스에서 정해진 끝 인덱스 까지 잘라냄

예시)

let fruits = ["Banana", "Orange", "Apple", "Mango", "Lemon", "Kiwi"]

let result1 = fruits.slice(1, 3);
// 결과값 보면 알겠지만 종료 인덱스는 3번째꺼가 아닌 2번째꺼임(주의)

console.log(result1);
//["Orange", "Apple"]

let result2 = fruits.slice(2);

console.log(result2);
//["Apple", "Mango", "Lemon", "Kiwi"]

첫 번째 파라미터는 시작 인덱스
두 번째 파라미터는 종료 인덱스 (두 번째 파라미터는 생략 가능, 생략하면 마지막 배열 요소까지 잘라낸다는 말)

11. sort()

메소드는 배열에서 문자형 데이터가 있는 경우 오름차순으로 정렬합니다.

예시)

let fruits = ["Banana", "Orange", "Apple", "Mango"]

fruits.sort();

console.log(fruits)
//["Apple", "Banana", "Mango", "Orange"]

숫자일 경우!!!!!!!!!!!!!

예시)

let num = [40, 100, 1, 5, 25, 10];

num.sort(function(a,b) {
	//a와 b를 서로 비교함 
	return a-b
})

console.log(num)
//[1, 5, 10, 25, 40, 100]



//서로 비교하지않고 sort만 사용했을 경우
//[1, 10, 100, 25, 40, 5]
//앞자리 기준으로 정렬됨

12. reverse()

메소드는 배열을 역순으로 정렬하고 싶을 때 사용

예시)

let num = [40, 100, 1, 5, 25, 10];

num.sort(function(a,b) {
	//a와 b를 서로 비교함 
	return a-b
})

num.reverse()

console.log(num)
//[100, 40, 25, 10, 5, 1]

13. filter()

조건에 해당하는 값의 배열 요소를 새로운 배열로 반환

arr.filter(function(element, index, array) {
		return 조건
})

element - 처리할 현재 요소
index - 처리할 현재 요소의 인덱스
array - 배열 전체

예시)

let scores = [85, 65, 75, 80, 90, 95];

let result1 = scores.filter(function(i) {
		return i > 80
})
        
// 화살표 함수 -> let result1 = scores.filter(i=>i>80);

console.log(result1);
//[85, 90 , 95] 80이상만 filter해줌

14. map()

배열에서 배열 요소의 값을 변형해서 새로운 배열로 반환

arr.map(function(element, index, array) {
		return 조건
})

element - 처리할 현재 요소
index - 처리할 현재 요소의 인덱스
array - 배열 전체

예시)

let scores = [85, 65, 75, 80, 90, 95];

let result3 = scores.map(function(i) {
		return i + 10
})

//화살표 함수 -> let result3 = scores.map((i)=> i + 10{
})

console.log(result3)
//[95, 75, 85, 90, 100, 105]

15. find()

배열에서 해당하는 하나의 값을 찾을 시 반환하고 종료

arr.find(function(element, index, array) {
		return 조건
})

element - 처리할 현재 요소
index - 처리할 현재 요소의 인덱스
array - 배열 전체

예시)

let scores = [85, 65, 75, 80, 90, 95];

let result = scores.find(function(i) {
		return i > 80
})

//화살표 함수 -> let result = scores.find((i)=> i > 80{
})

console.log(result)
//85  하나의 값만 찾고 리턴 종료

16. reduce()

메소드는 배열에 담긴 데이터를 하나씩 순회하며 callback 함수의 실행 값을 누적하여 결과값을 반환

(현재 배열 요소 하나씩 서로 연산해서 누적한 값으로 출력가능)

score.reduce(function(누적값, 배열 요소, 인덱스 번호, 배열) {

}, 시작 값(변수?))

첫 번째 매개변수 - accumulator (누적값)
두 번째 매개변수 - currentValue(현재 배열의 요소)
세 번째 매개변수 - currentIndex(인덱스 번호)
네 번째 매개변수 - arr(배열)

예시)

let scores = [85, 65, 75, 80, 90, 95];

let result = scores.reduce(function(total, current) {

	return total + current
    
}, 0)//*

console.log(result)
//490

계산 순서
return 0(위에 *부분 0부터 누적시작(숫자 변경 가능 ex ,10) + 85
return 85 + 65
return 150 + 75
return 225 + 80
return 305 + 90
return 395 + 95
return 490

16. findIndex()

메소드배열에서 원하는 조건 값을 검색 & 찾기 하여 첫번째로 발견된 값을 인덱스 값으로 돌려줌. 배열 내에 조건 값이 없을 경우 -1로 반환(프로그래머스문제에 사용) ex) 배열에서 첫번째로 나오는 음수는 인덱스로 아니면 -1로 반환

const solution = num_list => num_list.findIndex(v => v < 0)

17. Array.from()

Array.from(a, b)

a = 유사배열을 만들어주는 메소드,

b = 유사배열에 전달할 함수

Array.from('Tei');
//["T", "e", "i"]

Array.from([1, 2, 3], x => x + x);
//[2, 4, 6]

첫번째 인자에 {length: 20} 넣으면 배열 길이를 지정해 줄 수있다

let number =  Array.from({length: 26}, (_, i) => i)

[
   0,  1,  2,  3,  4,  5,  6,  7,
   8,  9, 10, 11, 12, 13, 14, 15,
  16, 17, 18, 19, 20, 21, 22, 23,
  24, 25
]

알파벳 배열 만들기(아스키 코드 참고)

let smallLetter =  Array.from({length: 26}, (_, i) => String.fromCharCode(i+65))
let bigLetter =  Array.from({length: 26}, (_, i) => String.fromCharCode(i+97))


[
  'A', 'B', 'C', 'D', 'E', 'F',
  'G', 'H', 'I', 'J', 'K', 'L',
  'M', 'N', 'O', 'P', 'Q', 'R',
  'S', 'T', 'U', 'V', 'W', 'X',
  'Y', 'Z'
]
[
  'a', 'b', 'c', 'd', 'e', 'f',
  'g', 'h', 'i', 'j', 'k', 'l',
  'm', 'n', 'o', 'p', 'q', 'r',
  's', 't', 'u', 'v', 'w', 'x',
  'y', 'z'
]