[ 자바스크립트 ] 배열에서의 every() 사용법

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

[ 자바스크립트 ] 배열에서의 every() 사용법 🕔 2016. 10. 30. 02:44

최종 수정일 : 2017. 6. 2.

Use the Google Translate, if you want to read this page in your language.
But its translation is probably inaccurate.
☞ Go to the Google Translate.

[ Javascript ] every() of the array

Polyfill

 
<script type="text/javascript">
/* 
 * source : 
 * https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/every#Polyfill 
*/ 

if ( ! Array.prototype.every ){ 
     Array.prototype.every = function every ( func , toBeThis ){ 

          if ( this == null || typeof func !== "function" ){ 
               var message = ( this == null ) ? "Array.prototype.every called on null or undefined" : 
                                      "First argument must be a function."; 
               throw new TypeError( message );
          } 

          var thisArg = arguments.length > 1 ? arguments[ 1 ] : undefined; 

          var obj = Object( this ); 
          var length = obj.length >>> 0; 
          var key = 0; 

          while ( key < length ){ 
               if ( key in obj ){ 
                    var result = func.call( thisArg, obj[ key ], key, obj ); 
                    if (  ! result ){     return false;     } 
               } 

               key++;
          } 

          return true; 
     }; 
} 
</script>

또는, (Another way is below.)

 
<script type="text/javascript">
// source : https://tonks.tistory.com/169#_javascript_array_every 

if ( ! Array.prototype.every ){ 
     Array.prototype.every = function every ( func , toBeThis ){ 

          if ( this == null || typeof func !== "function" ){ 
               var message = ( this == null ) ? "Array.prototype.every called on null or undefined." : 
                                      "First argument must be a function."; 

               try {  throw new Error( message );  } 
               catch( error ) { 
                         error.name = "TypeError"; 
                         throw error; 
               } 
          } 

          var thisArg = arguments.length > 1 ? toBeThis : undefined; 

          var obj = Object( this ); 
          var length = obj.length >>> 0; 
          var x; 

          // IE 8 이하에서, 문자열을 Object 형태로 변환하기 위해서 추가한 내용. 
          // For IE 8 and lower, to convert rightly string to the object format. 
          if ( length > 0 && obj[ 0 ] === undefined && Object.prototype.toString.call( obj ) == "[object String]" ){ 
               for ( x = 0; x < length; x++ ){  obj[ x ] = this.charAt( x );  } 
          } 

          for ( x = 0; x < length; x++ ){ 
               if ( x in obj && ! func.call( thisArg, obj[x], x, obj ) ){  return false;  } 
          } 

          return true; 
     }; 
} 
</script>

every() :
내가 설정한 조건에 대해서,
배열 안에 들어있는 것들이 전부 다 맞아떨어지는지를 확인할 수 있다.
On the conditions that you have set in a function,
you can check whether all items in an array matches the conditions.

Example 1

전화번호가 맞는가? ( It's a phone number? )

 
<button onclick="testing()"> Click me </button>

<p id="demo"> </p>

<script type="text/javascript">

var regExp_phone = /\(?\d{2,4}[-\)]?\d{3,4}[-]?\d{4}/; 

function isPhoneNumber ( value ){ 

     var string = ( "" + value ).replace( /\s/g, "" ); 

     return regExp_phone.test( string ); 
} 

function testing (){ 

     var array = [ "02-456-7890", "(02) 456 - 7890", "024567890" ]; 

     var check = array.every( isPhoneNumber ); 

     demo.innerHTML = check; 
} 
</script>

또는 ( Or, )

 
<button onclick="testing()"> Click me </button>

<p id="demo"> </p>

<script type="text/javascript">

var regExp_phone = /\(?\d{2,4}[-\)]?\d{3,4}[-]?\d{4}/; 

function isPhoneNumber ( value ){ 

     var string = ( "" + value ).replace( /\s/g, "" ); 

     return this.test( string ); 
} 

function testing (){ 

     var array = [ "02-456-7890", "(02) 456 - 7890", "024567890" ]; 

     var check = array.every( isPhoneNumber, regExp_phone ); 

     demo.innerHTML = check; 
} 
</script>

Example 2

숫자가 모두 짝수인가? ( Numbers are all even numbers? )

아래의 세 예문은, 숫자들이 모두 짝수인지 아닌지를 확인하는 방법이다.
In three examples below, it checks whether all numbers are an even or not.

 
<button onclick="testing()"> Click me </button>

<p id="demo"> </p>

<script type="text/javascript">

function testing (){ 

     var array = [ 2, 4, 5, 6, 8 ]; 

     var check = array.every( function( value ){ return !isNaN( value ) && value % 2 == 0 ? true : false; } ); 

     demo.innerHTML = check; 
} 
</script>

 
<button onclick="testing()"> Click me </button>

<p id="demo"> </p>

<script type="text/javascript">

function isEven ( value ){  return !isNaN( value ) && value % 2 == 0 ? true : false;  } 

function testing (){ 

     var array = [ 2, 4, 5, 6, 8 ]; 

     var check = array.every( isEven ); 

     demo.innerHTML = check; 
} 
</script>

 
<button onclick="testing()"> Click me </button>

<p id="demo"> </p>

<script type="text/javascript">

function testing (){ 

     var array = [ 2, 4, 5, 6, 8 ]; 

     var check = true; 

     for ( var x = 0; x < array.length; x++ ){ 

          var value = array[ x ]; 

          check = !isNaN( value ) && value % 2 == 0; 

          if ( ! check ){  break;  } 
     } 

     demo.innerHTML = check; 
} 
</script>

Example 3

최소값과 최대값 사이에 있는 숫자인가?
It's a number inside the min and max range?

 
<button onclick="testing1()"> Click me </button>

<p>100 이하인 양수입니까? 
( It's a positive number below 100? ) </p>

<p id="demo1"> </p>

<script type="text/javascript">

var range = { minimum: 0, maximum: 100 }; 

function isSuitable ( value ){ 
    return !isNaN( value ) && this.minimum <= value && value <= this.maximum;
} 

function testing1 (){ 

     var array = [ 10, 15, 19 ]; 

     var check = array.every( isSuitable, range ); 

     var text = ""

     if ( check ){ text = "Yes, it is."; } 

     else { text = "No, it contains a greater than 100, or negative."; } 

     demo1.innerHTML = text; 
} 
</script>

 
<button onclick="testing2()"> Click me </button>

<p>100 이하인 양수입니까? 
( It's a positive number below 100? ) </p>

<p id="demo2"> </p>

<script type="text/javascript">

var range = { minimum: 0, maximum: 100 }; 

function isSuitable ( value ){ 
    return !isNaN( value ) && this.minimum <= value && value <= this.maximum;
} 

function testing2 (){ 

     var array = [ 101, 15, 19 ]; 

     var check = array.every( isSuitable, range ); 

     var text = ""

     if ( check ){ text = "Yes, it is."; } 

     else { text = "No, it contains a greater than 100, or negative."; } 

     demo2.innerHTML = text; 
} 
</script>

Example 4

every() 함수가 return시키는 값은 언제나 true 아니면 false.
"every()" function always returns true or false.

 
<button onclick="testing1()"> Click me </button>

<p>100 이하인 양수입니까? 
( It's a positive number below 100? ) </p>

<p id="demo1"> </p>

<script type="text/javascript">

var array = [ 10, 15, 19 ]; 

var range = { minimum: 0, maximum: 100 }; 

function isSuitable ( value ){ 

   var check = !isNaN( value ) && 
                    this.minimum <= value && 
                    value <= this.maximum; 

   var text = ""

   if ( check ){ text = "Yes, it is."; } 

   else { text="No, it contains a greater than 100, or negative";}

   return text; 
} 

function testing1 (){ 

     demo1.innerHTML = array.every( isSuitable, range ); 
} 
</script>

 
<button onclick="testing2()"> Click me </button>

<p>100 이하인 양수입니까? 
( It's a positive number below 100? ) </p>

<p id="demo2"> </p>

<script type="text/javascript">

var array = [ 101, 15, 19 ]; 

var range = { minimum: 0, maximum: 100 }; 

function isSuitable ( value ){ 

   var check = !isNaN( value ) && 
                    this.minimum <= value && 
                    value <= this.maximum; 

   var text = ""

   if ( check ){ text = "Yes, it is."; } 

   else { text="No, it contains a greater than 100, or negative";}

   return text; 
} 

function testing2 (){ 

     demo2.innerHTML = array.every( isSuitable, range ); 
} 
</script>

Example 5

빈 배열을 이용하여, 원하는 값만 골라내기.
Using an empty array, pick out desired values.

 
<button onclick="testing()"> Click me </button>

<p id="demo"> </p>

<script type="text/javascript">

var allTypes = [ "it's string", 915, NaN, Infinity, [ "it's array" ], undefined, null, true, false, { }, function abc () { } ];

function pickOut ( value ){ 

     if ( value ){  this.push( value );  } 

     return true; // ← 이 부분이 반드시 들어가야 함( Required input line. ) 
} 

function testing (){ 

     var emptyArray = [ ];

     allTypes.every( pickOut, emptyArray );

     demo.innerHTML = emptyArray.join( " , " ); 
} 
</script>

return시킬 값을 설정하지 않으면, every()의 괄호 안에 넣어준 함수는 딱 한번만 실행된다.
If the return value is not defined,
a function for inputting in brackets of "every()" method, is run only once.

 
<button onclick="testing()"> Click me </button>

<p id="demo"> </p>

<script type="text/javascript">

var allTypes = [ "it's string", 915, NaN, Infinity, [ "it's array" ], undefined, null, true, false, { }, function abc () { } ];

function pickOut ( value ){ // ← 이 함수에는 리턴값이 없음!! ( This function has no return value!! )

     if ( value ){  this.push( value );  } 
} 

function testing (){ 

     var emptyArray = [ ];

     allTypes.every( pickOut, emptyArray );

     demo.innerHTML = emptyArray.join( " , " ); 
} 
</script>

Example 6

순서대로 정렬되었는가?
Is it arranged in order by size or alphabetically?

 
<button onclick="testing1()"> Click me </button>

<p id="demo1"> </p>
<p id="demo2"> </p>

<script type="text/javascript">

var texts = [ "Apple", "Mango", "Orange", "Banana" ]; 

texts.sort(); 

function testing1 (){ 

     demo1.innerHTML = texts.every( isArranged1 ); 
     demo2.innerHTML = texts.join( " , " ); 
} 

function isArranged1 ( value, index, array ){ 

     var next = array[ index + 1 ] || value; 

     return value <= next; 
} 
</script>

 
<button onclick="testing2()"> Click me </button>

<p id="demo3"> </p>
<p id="demo4"> </p>

<script type="text/javascript">

var texts = [ "Apple", "Mango", "Orange", "Banana" ]; 

texts.sort(); 

function testing2 (){ 

     demo3.innerHTML = isArranged2( texts );
     demo4.innerHTML = texts.join( " , " ); 
} 

function isArranged2 ( array ){ 

     for ( var index = 0; index < array.length; index++ ){ 

          var value = array[ index ]; 

          var next = array[ index + 1 ] || value; 

          var check = ( value <= next ); 

          if ( ! check ){  return false;  } 
     } 

     return true; 
} 
</script>

 
<button onclick="testing1()"> Click me </button>

<p id="demo1"> </p>
<p id="demo2"> </p>

<script type="text/javascript">

var numbers = [ 40, 100, 1, 5, 25, 10 ]; 

numbers.sort(); 

function testing1 (){ 

     demo1.innerHTML = numbers.every( isArranged1 ); 
     demo2.innerHTML = numbers.join( " , " ); 
} 

function isArranged1 ( value, index, array ){ 

     var next = array[ index + 1 ] || value; 

     return value <= next; 
} 
</script>

 
<button onclick="testing2()"> Click me </button>

<p id="demo3"> </p>
<p id="demo4"> </p>

<script type="text/javascript">

var numbers = [ 40, 100, 1, 5, 25, 10 ]; 

numbers.sort(); 

function testing2 (){ 

     demo3.innerHTML = isArranged2( numbers );
     demo4.innerHTML = numbers.join( " , " ); 
} 

function isArranged2 ( array ){ 

     for ( var index = 0; index < array.length; index++ ){ 

          var value = array[ index ]; 

          var next = array[ index + 1 ] || value; 

          var check = ( value <= next ); 

          if ( ! check ){  return false;  } 
     } 

     return true; 
} 
</script>

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*
If this article is helpful to you, please click the heart button below. *^^*

저작자표시

'JAVASCRIPT > Array' 카테고리의 다른 글

[ 자바스크립트 ] Array.isArray() (0)	2017.05.01
[ 자바스크립트 ] 배열에서의 some() 사용법 (0)	2016.11.05
[ 자바스크립트 ] 배열의 sort()에 대해 알아보기 (3)	2016.01.20
[ 자바스크립트 ] 배열에서 lastIndexOf() 사용하기 (0)	2016.01.08
[ 자바스크립트 ] 배열에서 indexOf() 사용하기 (0)	2016.01.08

Notice

Category

Tags

Recent posts

Recent comments

Archive

Calender

웹마스터를 향하여