본문 바로가기
Fiori/UI5

[JavaScript] 배열 Array 2

by clode 2023. 3. 6.
728x90
반응형

map

Map 메소드는 각 배열 요소에 대해 함수를 수행하여 새 배열을 생성한다. 제공된 함수를 배열의 각 요소에 대해 한번 호출하고 원본데이터는 변경되지 않는다.

문법: 변수.map(function(){});

배열의 map을 실행시키면 인자로 사용한 펑션이 배열의 length만큼 반복되어 실행된다.

<script>
   var aNumbers = [1, 2, 3, 4, 5];       //length: 5
   var aNumbersMap = aNumbers.map(function(item) {   //item이 aNumbers의 index로 접근해 값 가져온다
    return item ** 2;             //익명함수, return값이 aNumbersMap에 담김
   });
   document.write(aNumbersMap+"<br/>");          //1,4,9,16,25
   document.write(aNumbers+"<br/>");             //1,2,3,4,5
</script>

filter

테스트 통과한 item만으로 새배열을 생성한다.

<script>
  var aOver3 = aNumbers.filter(function(item) {
    return item > 3;        //item이 3보다 클때만
  });
  document.write(aOver3);             //4,5
</script>

every와 some은 boolean값으로 return한다.

every

every는 모든 return값이 true인경우에만 최종 return값이 true가 반환된다. 하나라도 false이면 false값을 반환하고 and로 묶인다고 생각하면 된다.

<script>
        var bAllOver3 = aNumbers.every(function (item) {
          return item > 3;       
        });                         
        document.write(bAllOver3+"<br/>");          //false값 두개니까 false, false값 반환
</script>

1>3 : false
2>3 : false
3>3 : false
4>3 : true
5>3 : true
false값이 있기때문에 이때 최종return값은 false가 된다.

<script>
        var bAllOver0 = aNumbers.every(function (item) {
          return item > 0;
        });
        document.write(bAllOver0+"<br/>");            //true
</script>

이땐 다 true기 때문에 true가 반환된다.

some

some은 return값이 하나라도 true이면 true값을 반환한다. or로 묶인다고 생각하면 된다.

<script>
      var bSomeOver3 = aNumbers.some(function (aNumbersValue, index, array) {
        return aNumbersValue > 3;
      })            
     document.write(bSomeOver3+"<br/>");    //true값 반환
</script>

1>3 : false
2>3 : false
3>3 : false
4>3 : true
5>3 : true
true값이 하나라도 있으면 true값이 반환되는데 있으니까 true값이 출력된다.

find

테스트를 만족하는 첫번째 데이터를 return한다. _find는 ie에서 지원하지 않는다. (edge부터 지원) _

<script>
     var iFirstItem = aNumbers.find(function (item) {
       return item > 3;
     })
    document.write(iFirstItem+"<br/>");   //4
</script>
728x90
반응형

'Fiori > UI5' 카테고리의 다른 글

[JavaScript] 문서 객체 모델(DOM) 접근  (0) 2023.03.06
[JavaScript] Date  (0) 2023.03.06
[JavaScript] 배열 Array  (0) 2023.03.06
[JavaScript] 원시값과 참조값  (0) 2023.03.06
[JavaScript] 함수와 매개변수  (2) 2023.03.06

댓글