jongviet

Aug 15, 2021 - spread operator, from, includes, arguments 본문

javascript & typescript

Aug 15, 2021 - spread operator, from, includes, arguments

jongviet 2021. 8. 15. 17:59

*8월15일

 

 

*spread operator; 펼침연산자; 새로운 배열을 복사해서 반환, 참조 아님!!
let pre = ["apple", "orange", 100];
let newData = [...pre];
//console.log(newData);
//console.log(pre === newData);

 

//특정 배열을 사이에 끼워 넣을 수 있음
let pre2 = [100, 200, "hello", null];
let newData2 = [0, 1, 2, 3, ...pre2, 4];
//console.log(newData2);

function sum(a,b,c) {
    return a+b+c;
}

let pre3 = [100, 200, 300];
console.log(sum.apply(null, pre3));
console.log(sum(...pre3)); //펼쳐서 배열값을 할당, 인자값이 3개가 들어감;

 

*from 메소드(배열형 데이터 -> 배열화)

//Array.from method
function addMark() {

    //arguments는 배열과 같은 형태이지만, 실질적으로 배열이 아님, 따라서 배열로 바꾸려면 from쓰면됨
    let newArray = Array.from(arguments); //배열화
    let newData = newArray.map(function(value) {  //map활용하여 iterator 처리!
        return value + "!";
    });

  /*let newData = [];
    for(let i=0; i < arguments.length; i++) {
        newData.push(arguments[i] + "!");
    } */
    console.log(newData);
}

//자바스크립트에서는 별도로 function에 인자값을 설정안해도, arguments라는 객체 사용하여 배열형태로 받을 수 있음
//가변 파라미터 넣기에 굉장히 좋음
addMark(1, 2, 3, 4, 5);

 


*html list 중, 'e'라는 문자열을 포함한 것만 특정 배열에 넣어서 출력하기
    const array = [];

    function print() {
        let list = document.querySelectorAll("li");
        for(let i = 0; i < list.length; i++) {
            if(list[i].innerText.includes("e")) {
                array.push(list[i].innerText);
            }
        }
        console.log(array);
    }
    print();


*filter, includes, from을 사용해서 문자열 'e'가 포함된 노드로 구성된 배열을 만들어 반환하기

 function print() {
        let list = document.querySelectorAll("li");
        console.log(toString.call(list)); //typeof 느낌의 메소드 toString.call();, object nodelist
        let listArray = Array.from(list); //list 노드로 구성된 배열; nodelist array
        console.log(toString.call(listArray)); //object array

        let eArray = listArray.filter(function(v) { //listArray에 들어있는 모든 value를 iterate해서 처리
            return v.innerText.includes("e");
        });
        console.log(eArray[0].innerText, eArray[1].innerText);
    }
    print();

 

 


*object 생성


function getObj() {
    const name = "ki";
    const getName = function() {
        return name;
    }
    const setName = function(newname) {
        name = newname;
    }
    const printName = function() {
        console.log(name);
    }

    return {getName,setName, name}
}


let obj = getObj();
console.log(obj);

Comments