0813 JavaScript array

onnbi·2022년 8월 23일
0

front

목록 보기
8/16
post-thumbnail

array

자바의 배열과 ArrayList가 합쳐진 상태

내부 데이터 자료형은 지정하지 않아 서로 다른 자료형이 와도 무관하다

const arr = ['latte', 100, true, [1,2,3]];

배열의 선언

  1. 대괄호 선언

    const arr1 = [1, 2, 3];
    console.log(arr1[3]); // undefined

    배열의 길이가 정해진 것이 아니기 때문에 undefined

  2. 객체로 선언

    const arr2 = new Array(1,2,3);

Array객체 메서드

a.indexOf(값)

배열에서 요소(값)가 위치한 인덱스 리턴

const arr = [1,2,3,4];
console.log(arr.indexOf(3)); // 3이 배열의 몇번 인덱스에 위치하는지
console.log(arr.indexOf(5)); // 없는 경우 -1 리턴

a1.concat(a2)

두 개 또는 세 개의 배열을 결합한다

const fruits1 = ["딸기","바나나","키위"];
const fruits2 = ["복숭아","파인애플"];
const arr1 = [100,20,15,50];
const arr2 = [true, false, [1,2,3,4]];

const data = fruits1.concat(fruits2, arr1, arr2);
// 배열을 합쳐서 리턴
console.log(data);
// 원본배열이 바뀌는 건 아님 다 형태를 유지하고 있음
console.log(fruits1, fruits2, arr1, arr2);

a.join("")

배열 내부 데이터를 매개변수로 연결하여 하나의 문자열로 리턴

아무것도 적지 않을 시, ","로 연결된다

const data = fruits1.join(",");
console.log(data);	// 딸기, 바나나, 키위
const data2 = fruits2.join(" ");
console.log(data2);	// 복숭아 파인애플

a.reverse()

배열의 순서를 반전한다

원본 배열이 변경된다

const arr = [1,3,2,7,10,9,6,5,8,4];
arr.reverse(); // 배열 순서가 반전되고 원본배열이 변경된다

a.sort()

매개변수가 없으면 문자열 오름차순이 default(사전순서)

정렬은 원본 배열이 변경된다

const arr = [100,20,15,50];
arr.sort(); // 정렬은 원본 배열이 변경된다
console.log(arr); // 100, 15, 20, 50 (유니코드 기준)

a.push()

배열 맨 뒤에 매개변수로 넘어간 값을 추가한다

a.pop()

배열 맨 뒤에 있는 객체를 제거한다

const arr = [1,2,"hi",true];

//push는 배열 맨 뒤에 추가
arr.push(100);
console.log(arr); // [1,2,"hi",true,100]

//pop 배열 맨 뒤에 있는 객체를 제거
arr.pop();
console.log(arr); // [1,2,"hi",true]

a.unshift()

배열 맨 앞에 매개변수로 넘어간 값을 추가한다

a.shift()

배열 맨 앞에 있는 객체를 제거한다

const arr = [1,2,"hi",true];

// unshift는 배열 제일 앞에 추가
arr.unshift("안녕");
console.log(arr); // ["안녕,1,2,"hi",true]

//shift : 배열 제일 앞 객체를 제거
arr.shift();
console.log(arr); // [1,2,"hi",true]

a.splice(index, 제거 수, 추가 값)

배열 중간의 값을 제거

  1. 매개변수가 2개인 경우

    첫번째 매개변수 (인덱스)부터 두번째 매개변수 수만큼 잘라서 리턴

    • 배열 중간을 오려내고 싶을 때 사용
  2. 매개변수가 3개인 경우

    첫번째 매개변수(인덱스)부터 두번째 매개변수 수만큼 잘라내고

    세번째 매개변수로 값을 채운다

    • 배열 중간을 수정하고 싶을 때 사용

a.slice()

splice와 달리 원본배열에는 변경이 없다

  1. 매개변수가 2개인 경우

    첫번째 매개변수 인덱스부터 두번째 매개변수 인덱스 앞까지 복사

  2. 매개변수가 1개인 경우

    첫번째 매개변수 인덱스부터 끝까지

const arr = [1,2,3,4];
const arr2 = arr.slice(1,3);
console.log(arr); //[1,2,3,4] 변동없음
console.log(arr2); //[2,3] 3번 인덱스는 포함하지 않음

array 심화메서드

1. foreach

foreach(function(item,index){});

for문의 변형으로 배열을 순회하는 메서드

매개변수 순서가 중요하며, 순서가 맞으면 변수명은 상관없다

매개변수 한 개만 사용하여 인덱스를 생략하고 사용할 수 있다

const arr = ["hi","hello",100,true,[1,2,3]];

// 기본 for문
for(let i=0; i<arr.length;i++){
    console.log(i, arr[i]);
}

// foreach문
arr1.forEach(function(item,index){
    console.log(index, item);
});
  • item : 반복하면서 접근하는 배열의 각 요소 > arr[i]
  • index : 인덱스 번호 > i

2. map

배열의 데이터를 가공하여 새로운 배열을 만들 때 사용

배열을 순회하고 리턴하는 값을 다시 배열로 생성

const arr1 = ["hi","hello",100,true,[1,2,3]];

const arr2 = arr1.map(function(item,index){
    const str = `${index}번째 item : ${item}`;
    return str;
})
// 순회하는 동안 return된 str을 배열로 모아 사용
console.log(arr2);

3. filter

배열에서 특정 조검에 만족하는 데이터만 필터링 할 때 사용

const arr1 = [6,3,2,5,4,1];
const arr2 = arr1.filter(function(item,index){
    console.log(index, item);
    return item>3;
})

console.log(arr4);

4. reduce

배열의 값을 이용하여 연산, 특정값을 도출할 때 사용

const sum = arr3.reduce(function(acc,curr,index){
    // 첫번째 반복회차는 생략,
    // index 1일 때> acc=0번 인덱스값, curr=현재 인덱스값
    // 이후 반복 회차부터 return 값이 acc가 되고 다음 인덱스가 curr
    return acc+curr;
});
console.log("결국 최종 배열의 합이 나오게 된다 > "+sum);
profile
aelatte coding journal

0개의 댓글