[인프런] 배열 내장 함수

1. forEach(), map()

///////////////////////////////////////////////////////
//배열 요소 출력하기
//1. for 이용
const arr1 = [1, 2, 3, 4];

for(let i=0; i<arr.length; i++) {
    console.log(arr[i]);
}

//2. forEach 이용
const arr2 = [1, 2, 3, 4];
arr2.forEach(function (elm) { 
    console.log(elm) 
});
//화살표 함수
arr2.forEach((elm) => console.log(elm));


///////////////////////////////////////////////////////
//배열 요소에 *2씩 해보자
const arr3 = [1, 2, 3, 4];
const newArr1 = [];  //*2 한 값을 넣을 새로운 배열

//forEach 이용
arr3.forEach(function(elm) {
    newArr1.push(elm*2);     //arr3 배열 내 요소 하나하나(elm)에 *2를 곱한 후 newArr 배열에 넣기(push)
})

console.log(newArr1);

//map 이용
const arr4 = [1, 2, 3, 4];
const newArr2 = arr4.map((elm) => {
    return elm*2;
})

console.log(newArr2);

 

2. includes()

//////////////////////////////////////////////////////////
//배열에 주어진 값이 존재하는지 찾기
//1. forEach() 이용
const arr = [1, 2, 3, 4];

let number = 3;
arr.forEach(elm => {
    if (elm === number) {       //배열에 요소가 number=3과 같으면
        console.log(true);          //true
    }
})

//2. includes() 이용
console.log(arr.includes(number));  //true

 

3. indexOf(), findIndex(), find()

//////////////////////////////////////////////////////////
//배열에 주어진 값이 존재하면 index를 출력
//1. indexOf() 이용
const arr = [1, 2, 3, 4];

let number = 3;

console.log(arr.indexOf(number));   //2 출력 (해당 값이 없을 경우 -1 출력)

//2. 객체 배열에서 findIndex() 이용
const arr = [
    { color: "red"},
    { color: "black"},
    { color: "blue"},
    { color: "green"}
];

console.log(arr.findIndex(function (elm) {
    return elm.color === "green";       //3 출력
}));

//화살표 함수로 변경 (function 대신 => 넣고 {return}; 생략 가능) -> 제네릭!
console.log(arr.findIndex((elm) => elm.color === "green"));     //3 출력

//3. 객체 배열에서 find() 이용 -> index가 아니라 그 요소 자체를 출력
const element = arr.find((elm) => elm.color === "blue");
console.log(element);       //{color: 'blue'} 출력

4. filter()

//////////////////////////////////////////////////////////
//배열 필터링
const arr = [
    { num: 1, color: "red"},
    { num: 2, color: "black"},
    { num: 3, color: "blue"},
    { num: 4, color: "green"},
    { num: 5, color: "blue"}
];

//1. filter() 이용 -> color가 blue인 애들만 가져오기
console.log(arr.filter((elm) => elm.color === "blue"));    //{ num: 3, color: "blue"}, { num: 5, color: "blue"} 출력

 

5. slice(), concat()

//////////////////////////////////////////////////////////
//배열 자르고 붙이기
const arr1 = [
    { num: 1, color: "red"},
    { num: 2, color: "black"},
    { num: 3, color: "blue"},
];

const arr2 = [
    { num: 4, color: "green"},
    { num: 5, color: "blue"}
];

//1. slice() 이용 - 자르기
console.log(arr1.slice(1, 3));   //{ num: 2, color: "black"}, { num: 3, color: "blue"} 출력 : 1번 배열부터 3번 전(2번) 배열까지만 출력

//2. concat() 이용 - arr2에 arr1을 붙이기
console.log(arr2.concat(arr1));

 

6. sort()

//////////////////////////////////////////////////////////
//문자 배열 정렬하기
let chars = ["나", "다", "가"];

//1. sort() 사용 -> 원본 배열을 사전 순서대로 정렬
chars.sort();
console.log(chars);

//숫자 배열 오름차순으로 정렬하기 -> sort()는 사전순으로 정렬되므로 if 조건문을 걸어주는 비교함수를 생성해야 함
//1. sort() 사용
let nums = [0, 1, 6, 4, 10, 8, 7, 4];

const compare = (a, b) => {
    if (a>b) {          //크다
        return 1;
    } else if (a<b) {   //작다
        return -1;
    } else {            //같다
        return  0;
    }
};
nums.sort(compare);
console.log(nums);      //[0, 1, 4, 4, 6, 7, 8, 10]

 

7. join()

//////////////////////////////////////////////////////////
//배열을 문자열로 합쳐서 출력하기
const arr = ["전유진", "님", "안녕하세요", "반갑습니다"];

console.log(arr.join(" "));     //전유진 님 안녕하세요 반갑습니다