자바스크립트 JS 공부 #4 배열 내장 함수 - for each, map, indexof, find, findIndex, filter, etc

사공 오·2022년 4월 7일
0

JS 공부

목록 보기
4/11
post-thumbnail

for each

배열안에 있는 모든 요소에 같은 함수 적용가능

const superheros = ['아이언맨', '캡아', '토르', '블위', '스파이더맨'];


function print(hero) {
    console.log(hero);
}

superheros.forEach(
    function print(hero) {
        console.log(hero);
    }
)
superheros.forEach(hero => {
    console.log(hero);
})
superheros.forEach(print())


let num1 = [1, 3, 5, 7, 9];

num1.forEach(function (item, index, self) {
    self[index] = item * 2;
})
// item은 배열 요소, index는 index, self는 배열 그 자체
// foreach에 인자로 주어지는 함수는 매개변수를 통해 위 세가지를 제공받는다

console.log(num1);
// [2, 6, 10, 14, 18]
// 출처 - https://sgcomputer.tistory.com/199



map

맵을 이용하여 모든 값에 적용 가능

const array = [1,2,3,4,5,6,7,8];

const square = n => n*n; //n을 받아서 제곱해주는 함수!
const squared = array.map(square); //맵을 이용하여 어레인 안 모든 값에 함수 적용

const squared2 = array.map(n => n*n); //위의 두문장을 합칠 수도 있다

console.log(squared);

const items  = [
    {
        id: 1,
        text: 'hello'
    },
    {
        id: 2,
        text: 'bye'
    },
];

const texts = items.map(item => item.text); //아이탬즈의 아이탬들의 텍스트값만 배열로 출력해줌!
console.log(texts)



indexof

인덱스값이 나온다

superheros = ['아이언맨', '캡아', '토르', '블위', '스파이더맨'];

const index = superheros.indexOf('블위'); //블위의 인덱스값이 나온다
console.log(index);



findIndex, find

조건에 맡는 항목의 인덱스값 반환, 그 항목 자체를 반환

const todos =[
    {
        id: 1,
        text: '자바스크립트 입문',
        done: true
    },
    {
        id: 2,
        text: '함수 배우기',
        done: true
    },
    {
        id: 3,
        text: '객체와 배열 배우기',
        done: true
    },
    {
        id: 4,
        text: '배열 내장함수 배우기',
        done: false
    },
]

const index1 = todos.findIndex(todo => todo.id === 3); //아이디가 3인 항목의 인덱스값을 반환
const todo = todos.find(todo => todo.id === 3); //아이디가 3인 객채 항목을 반환
const todo2 = todos.find(todo => todo.done === true); // 둘다 조건에 맞는 애들 중에 첫번째꺼를 반환한다
console.log(index);



filter - 특정조건만족 항목을 찾아서 새로운 배열을 형성

const tasksNotDone = todos.filter(todo => todo.done === false); // 객체의 던값이  false인 값만 받아서 담는다
const tasksNotDone1 = todos.filter(todo => !todo.done); //위랑 같은기능
const tasksNotDone2 = todos.filter(todo => todo.done); //위랑 반대의 기능
console.log(tasksNotDone);

splice - 잘라내서 반환 + 기존의 배열이 잘림

const nums = [10,20,30,40,50];
const ind = nums.indexOf(30);
const spliced = nums.splice(ind,2); //ind값(1번째파라) 부터 2개(2번째 파라)를 지우갰다 + 그 지운 인자를 반환한다
console.log(nums); //10,20,50
console.log(spliced); //30,40

slice - 잘라내서 반환 + 기존의 배열을 자르지않는다

const sliced = nums.sliced(0,2); //인덱스가 0인거부터 2앞까지 잘라서 반환 (기존의 배열에는 변화가 없다 ! ! )
console.log(sliced); //10,20
console.log(nums); //10,20,30,40,50

shift - 맨 앞에 있는 요소를 기존의 배열에서 하나씩 빼서 반환
unshift - 맨앞에 인자를 삽입

const value1 = nums.shift();
console.log(value1);
console.log(nums);

const value2 = nums.unshift(5);
console.log(value2);
console.log(nums);

pop - 맨 뒤에 있는 요소를 기존의 배열에서 하나씩 빼서 반환
push - 맨 뒤에 인자 삽입

const valueA = nums.pop();
console.log(valueA);
console.log(nums);

const valueB = nums.push();
console.log(valueB);
console.log(nums);



concat - 기존의 배열은 건드리지않고 합치기

const arr1 =[1,2,3];
const arr2 =[4,5,6];

const concated = arr1.concat(arr2); //arr1안에 arr2삽입해서 새로운 배열concated에 담는다 
const concated1 = [...arr1, ...arr2] //위랑 같은방법 스프레드연산자 (다음에 알아보기)
console(concated);



join - 배열 인자를 스트링으로 바꿔서 합쳐줌

const arr3 = [1,2,3,4,5];
console.log(arr3.join()); // ,를 기준으로 나눠저있음
console.log(arr3.join(' ')); //파라미터는 사이사이 구분해주는것 - 이렇게 하면 한번씩 띄어줌
console.log(arr3.join(', ')); //파라미터는 사이사이 구분해주는것 - 이렇게 하면 ,넣고 한번씩 띄어줌




이때까지 배운방법으로 합구하기

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


let sum1 = 0;
numbers.forEach(n =>{
    sum += n;
});
console.log(sum1);




reduce

배열.reduce((accumulator - 누적된 값을 의미, current - 각 원소들을 의미하는데 맨처음에는 numbers의 첫 항목1 ) ==> (1-시행될 함수, 2- 초기 accumulator값)
accumulator + current 라는 실행되는 명령어의 결과가 그다음의 accumulator가 된다

배열의 합을 구하기

const sum = numbers.reduce((accumulator, current) => accumulator + current, 0); 
//(accumulator - 누적된 값을 의미, current - 각 원소들을 의미하는데 맨처음에는 numbers의 첫 항목1 ) ==> (1-시행될 함수, 2- 초기 accumulator값) 
//accumulator + current 라는 실행되는 명령어의 결과가 그다음의 accumulator가 된다

배열의 평균 구하기

const average = numbers.reduce((accumulator, current,index, array) => {
    if( index === array.length -1){ //마지막항목이면
        return(accumulator + current) / array.length; // 평균을 반환해라
    }
    return accumulator + current; // 아니면 앞의 누적값에 현재의 항목을 더해라 
}, 0);
//index - 각원소의 index값을 의미 / array - 함수가 실행하고있는 자기 자신을 의미함
console.log(average);

배열 안에 같은 요소가 몇개 있는지 확인하기

const alphabets =['a','a','a','b','b','c','c','d','e'];
const counts = alphabets.reduce((acc,current) =>{  //맨처음 acc가 빈 객체임
    if( acc[current]){ //해당항목이 acc안에 있다면
    // if( acc['a']){ - 맨처음엔 이거랑 똑같은의미 
     acc[current] += 1; //값에 1을 더한다
    } else {
        acc[current] = 1; // 아니면 값을 1로 설정 -맨처음에 객체안에 a를 넣고 벨류를 1로 설정
    }
    return acc; //마지막에 이렇게 할거임

},{}) //객체를 의미함

console.log(counts); // 이라는  결괴 {a:3, b:2, c:2,d:1,e:1}

0개의 댓글