티스토리 뷰

HTML&CSS&Javscript&Jquery

190812 foreach 예제

猫猫 2019. 8. 23. 17:31
반응형
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <!-- <script>
    //배열 생성  []
    //배열에 값 추가 .push
    //배열 값 읽기 .shift
    
    // var a = [ "hi", "test", 3];
    // a.push("4");
    // a.push(9);
    // a.push(10);


    // console.log(a.length);
    
    // for(var i=0; i<a.length; i++){
    //     console.log(a[i]);
    // }
    // var result =0; 
    // for(var j =0; j<5; j++){
    //     result= a.pop();//FILO //먼저들어간것이 나중에 나옴
    //     alert(result);
    // }
    // var result =0; 
    // for(var j =0; j<5; j++){
    //     result= a.shift();//FIFO = buffer = queue//첫번째 요소 제거하면서 리턴 이러면 출력할떄 문제생기니까 j=a.length로, j--해가면서 마지막부터 삭제하자
                            //
    //     alert(result);
    // }
    
    // console.log(result);

    // for(var i=0; i<a.length; i++){
    //     console.log(a[i]); //그래서 확인해보면 없어져있다
    // }

    </script> -->


</head>
<body>
    <p> 배열요소 결합 click</p>
    <p id=demo></p> <!--여기에 배열의 요소를 문자열로 결합해서 추가-->
    <p id=test></p>
    <script>
         var fruits = ["banana", "orange","peach","apple","grape","durian"];

        
        // fruits.forEach(myFunction); //for each 는 자동으로 증가하면서 요소 적용
        // //jquery의 each와 비슷
        // //자바의 advanced for와 비슷(for(int i : fruits))
        // function myFunction(item, index){ //함수호출이 배열의 갯수(3)번 일어남
        //     console.log("love"); //몇번일어나는지 확인할라구여
        //     document.getElementById("demo").innerHTML += index+":"+item+"<br>"; //ID는 기본적으로 배열관리 안함. 하나밖에 없어서. 
        //                                                                        //tagname은 할 수 있다. tagname("p").[0] 이런식
        //                                                                        //class도 가능 byclass("").[0]으로 가능
        //     //jquery의 each 는 index였는데 여기는 순서가 바뀌었음
        //     // var y = document.getElementById("test");
        //     // x.innerHTML = fruits.join(":");//원소들의 구분은 콤마(,)로 합니다. 원소들의 구분을 다른 문자로 하려면 () 안에 원하는 문자를 넣습니다.
        //     //                             //reverse() 함수는 단어에서 의미하는 것과 같이 요소 값들의 순서를 반대로 바꿉니다
        //     // y.innerHTML = fruits.reverse();
            

        // }

        ///////////////////arrays map

        // var numbers = [4,9,144,121];
        // var x = numbers.map(Math.sqrt);//숫자의 제곱근(루트) 반환 스태틱이라 () 안쓰고도(인스턴스) 사용가능하다. 
        //                              //map(함수명)
        // document.getElementById("demo").innerHTML = x;
    
        ///////ramda!!!!!!!!!!!
        function a (v)
            {//map의 파라미터 함수 (람다식)
                console.log(v*v); //제곱출력
                return v;
            }
        
        var arr = [1,4,10,50,100];
        // var result = arr.map(a); //익명함수 쓰기 싫을떄 (배열의 map은 jquery의 each문과 동일)
        //     // (v)=> { //map의 파라미터 함수 (람다식)
        //     //     console.log(v*v); //제곱출력
        //     //     return v;
        //     // }
            
        var result = arr.map((i)=>{
            return i*i;           
        });

        // result.foreach(function(i){
        //     alert(i);
        // } //foreach 익명함수로
        
        result.forEach((i)=>{ //foreach 는 item, index 를 리턴하는 콜백함수 (순서가 item, index임)
            console.log(i);
            document.getElementById("demo").innerHTML += i+":"+"<br>";
        }); //람다로 

        

    </script>
</body>
</html>
반응형
저작자표시 비영리 변경금지

'HTML&CSS&Javscript&Jquery' 카테고리의 다른 글

190826 키보드 이벤트  (0) 2019.08.26
190826 마우스 이벤트  (0) 2019.08.26
190819 reduce,map 예제  (0) 2019.08.23
190819 reduce  (0) 2019.08.23
190819 map 예제  (0) 2019.08.23