2023 - 05 - 17 배열, 배열 메서드 (중요)

오늘 할일

자바스크립트 1주차 공부하기

개인과제

 

오늘 배운 것

배열, 배열의 매서드

1 push ,  2 pop ,  3 shift ,  4 unshift ,  5 splice ,

6 slice,  7 forEach,  8 map,  9 filter,  10 find

 

 

배열 : 1.대괄호안에 쓴다. 2. 배열의 각 요소들은 index를 갖고 있다. 0, 1, 2,순
배열의 length는 인덱스의 숫자. for문이나 while문에서 많이 쓰임.

1 기본생성

let fruits = ['사과', '바나나', '오렌지'];
console.log (fruits.length) 

// 3

2 크기지정 (new Array(인덱스숫자))

let number = new Array(5);
console.log(number);


// [<5 empty items>]

3 요소접근 (대괄호하고 인덱스)

let fruits = ['사과', '바나나', '오렌지'];


console.log(fruits[0]) // 사과
console.log(fruits[1]) // 바나나
console.log(fruits[2]) // 오렌지

 

배열의 메서드 (1) : push , pop , shift , unshift , splice , slice

배열의 메서드 (2) : forEach, map, filter, find

 

1 .push (마지막 요소추가)

let fruits = ['사과', '바나나'];
fruits.push('오렌지');

console.log(fruits);

// ['사과', '바나나', '오렌지']

2 .pop (마지막 요소삭제)

let fruits = ['사과', '바나나', '오렌지'];
fruits.pop();
console.log(fruits);

// ['사과', '바나나']

3 .shift (첫번째 요소삭제)

let fruits = ['사과', '바나나', '키위'];
fruits.shift();
console.log(fruits);

// ['바나나', '키위']

4 .unshift (맨앞에 추가)

let fruits = ['사과', '바나나', '키위'];
fruits.unshift('딸기');
console.log(fruits);

// [ '딸기', '사과', '바나나', '키위' ]

5 .splice (시작인덱스, 지울만큼의 숫자, "지운자리에 넣을 요소이름")

splice(start, delete_count, "replace")

let fruits = ['사과', '바나나', '키위'];
fruits.splice(1, 1, "포도");
console.log(fruits);

// 1번째 인덱스부터 시작해서 1개만큼 삭제하고 "포도"를 추가해라.
// [ '사과', '포도', '키위' ]

6 .slice (시작할 인덱스, 마지막 인덱스(마지막 인덱스는 포함안함))

 

let fruits = ['사과', '바나나', '키위', '딸기', '포도'];
let slicedFruits = fruits.slice(1, 4);
console.log(slicedFruits);

// 1번째 인덱스부터 시작해서 4번째 인덱스 전 까지 출력해줘. (결국 1,2,3번째 인덱스이므로)
// [ '바나나', '키위', '딸기' ]

 

7 .forEach

forEach의 매개변수자리에 함수가 들어감. 이를 콜백함수라고 함
item에는 numbers의 요소 하나하나가 들어가면서 순서대로 돌아감. 즉 함수가 5번 실행됨

let numbers = [5, 2 ,3 ,1, 4];
numbers.forEach(function(item){
    console.log('item입니다 =>', item)
});

item입니다 => 5
item입니다 => 2
item입니다 => 3
item입니다 => 1
item입니다 => 4

8 .map
map함수는 반드시 return문을 갖는다.
map함수는 기존의 배열을 가공해서 새로운 배열을 생성한다. 그리고, 항상 원본 배열의 길이만큼이 출력된다.

 

map은 forEach문과는 달리  console.log에 item이 아닌,  재선언된 함수명인 newNumbers를 입력해야함

let numbers = [5, 2 ,3 ,1, 4];
let newNumbers = numbers.map(function(item){
    return item * 2;
})
console.log(newNumbers); 


// [ 10, 4, 6, 2, 8 ]

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10];

9 .filter 
filter함수도 마찬가지로 반드시 return문을 갖는다.
filter 이름에 걸맞게, 콜백함수에는 필터링할 조건이 들어간다. 따라서, 조건에 해당하는 것만 출력된다.

filter도 forEach문과는 달리  console.log에 item이 아닌,  재선언된 함수명인 filteredNumbers를 입력해야함

let numbers = [5, 2 ,3 ,5, 4];

let filteredNumbers = numbers.filter(function(item){
    return item !== 5;
});
console.log(filteredNumbers)


// [2, 3, 4] (조건 5에 해당하지 않는 배열 요소들)

10 .find
find함수도 마찬가지로 반드시 return문을 갖는다.
find함수도 filter함수와 마찬가지로 찾아낼 조건이 들어가지만, 조건에 해당하는 것 중 첫번째 요소값만 출력한다.

filter도 forEach문과는 달리  console.log에 item이 아닌,  재선언된 함수명인 filteredNumbers를 입력해야함

let numbers = [4, 1, 5, 4, 5];
let findedNumbers = numbers.find(function(item){
    return item > 3;
})
console.log(findedNumbers);


// 4 조건 3이상인 것은 4도있고 5도 있지만, 인덱스 순서대로 첫번째 요소인 4만 출력한다.