8. 미리 정의된 객체
이 장에서는 코어 JavaScript에서 정의 된 객체 인 Array , Boolean , Date , Function , Math , Number , RegExp , String 에 대해 설명합니다.
Array 객체
JavaScript는 배열을 나타내는 명확한 데이터 형식이 없습니다. 그러나 미리 정의 된 Array 객체와 메소드를 사용하여 응용 프로그램에서 배열을 처리 할 수 있습니다. Array 개체에는 다양한 방법으로 배열을 조작하는 방법이 있습니다. 예를 들어, 배열의 요소를 합치거나 순서를 뒤집거나 정렬 할 수 있습니다. 또한, 배열의 길이를 결정하는 속성과 정규 표현식과 함께 사용하는 속성이 있습니다.
배열 은 그 각각의 값을 이름이나 인덱스로 참조하는 순서 집합입니다. 예를 들어, 직원 번호로 인덱싱 한 직원의 이름으로 이루어진 emp라는 배열을 만들 수 있습니다. 그러자 emp[1] 는 직원 번호 1, emp[2] 는 직원 번호 2를 차례대로 말합니다.
배열 만들기
Array 개체는 다음과 같이 작성합니다. 3 개의 문장은 동일합니다 :
var arr = new Array (element0, element1, ..., elementN); var arr = Array (element0, element1, ..., elementN); var arr = [element0, element1, ..., elementN];
element0, element1, ..., elementN 는 배열 요소의 값들의 리스트입니다. 이 형식을 사용하여 배열의 요소는 지정된 값으로 초기화됩니다. 또한, 배열의 length 속성에 요소의 개수가 정의됩니다.
대괄호를 사용 구문은 "배열 리터럴"또는 "배열 이니셜 라이저"라고합니다. 이것은 단축 표기이며, 일반적으로 사용되고 있습니다. 배열 리터럴에 대한 자세한 내용은 배열 리터럴<<링크>> 을 참조하십시오.
아이템을 가지지 않지만 길이가 0이 아닌 배열은 다음 중 하나의 방법으로 만들 수 있습니다 :
var arr = new Array (arrayLength); var arr = Array (arrayLength); // 아래도 동일한 동작입니다. var arr = []; arr.length = arrayLength;
참고 : 위의 코드에서 arrayLength 는 정수 타입이어야 합니다. 그렇지 않으면, 요소가 하나 (주어진 값)의 배열이 만들어집니다. arr.length 를 호출하면 arrayLength 가 반환되지만 실제로는 배열에 빈 (undefined)의 요소가 포함되어 있습니다. 배열에서 for ... in 루프를 실행하면 배열의 요소는 아무것도 반환되지 않습니다.
지금까지 설명한 것과 같이 새롭게 정의 된 변수 이외에 신규 또는 기존 개체의 속성으로 배열을 할당 할 수 있습니다 :
var obj = {}; // ... obj.prop = element0, element1, ..., elementN]; // 또는 var obj = {prop : element0, element1, ..., elementN]}
요소가 하나이며, 또한 그 요소가 Number 인 배열을 초기화하려면 괄호 구문을 사용해야 합니다. Array () 생성자 또는 함수에 Number 의 값이 하나 전달되면 그 값은 단일 요소가 아닌 arrayLength 로 해석됩니다.
var arr = [42]; var arr = Array (42); / / 요소는 아니지만, arr.length 42 인 배열을 생성 // 위의 코드는 다음과 같다 var arr = []; arr.length = 42;
또한 요소가 하나이며, 또한 그 요소의 값이 정수가 아닌 Number (무시할 수 없는 소수를 가지는 수치) 인 배열을 만들려면, RangeError 가 발생합니다. 요소가 하나이며, 데이터 형식이 정해져 있지 않은 배열을 코드에서 생성 해야 하는 경우는 배열 리터럴을 사용하여 처음에 빈 배열을 만들고 값을 채우는 방법이 안전합니다.
var arr = Array (9.3) // RangeError : Invalid array length
배열 요소의 포함
값을 요소에 할당하면 배열 요소를 포함 할 수 있습니다. 예를 들어,
var EMP = []; emp [0] = "Casey Jones" ; emp [1] = "Phil Lesh" ; emp [2] = "August West" ;
주의 : 위의 코드에서 배열 연산자에 정수가 아닌 값을 주면 배열의 요소가 아닌 배열을 나타내는 개체 속성이 만들어집니다.
var arr = []; arr [3.4] = "Oranges"; console.log (arr.length) // 0 console.log (arr.hasOwnProperty [3.4]); // true
배열 만들 때 요소를 포함 할 수 있습니다 :
var myArray = new Array ( "Hello" , myVar, 3.14159); var myArray = [ "Mango" , "Apple" , "Orange" ]
배열 요소의 참조
요소의 순서를 나타내는 수치로, 배열의 요소를 참조 할 수 있습니다. 예를 들어, 다음 배열을 정의했다고 가정 합니다 :
var myArray = [ "Wind" , "Rain" , "Fire" ];
배열의 첫 번째 요소는 myArray[0] 으로 제 2의 요소는 myArray[1] 로 볼 수 있습니다. 배열의 인덱스는 0부터 시작합니다.
주의 : 배열 연산자 (대괄호)는 배열의 속성에 액세스하는 데 사용할 수 있습니다 (배열은 JavaScript의 객체이기도 합니다). 예를 들어,
var arr = ["one", "two", "three"]; arr [2] // three arr ["length"]; // 3
길이 파악
length 속성은 항상 마지막 요소의 인덱스를 반환하는 특별한 속성입니다. JavaScript 배열의 인덱스는 0부터 시작함을 잊지 않도록 하십시오. 1이 아닌 0부터 시작합니다. 따라서 length 속성은 배열에 저장되는 최대의 인덱스보다 1 큰 값이 됩니다.
var cats = []; cats [30] = 'Dusty']; print (cats.length); // 31
length 속성에 할당 할 수 있습니다. 저장되어있는 아이템의 수보다 작은 값을 기록하면 배열이 잘립니다. 0을 쓰면 완전히 비우게 됩니다.:
var cats = ['Dusty' , 'Misty' , 'Twiggy']; console.log (cats.length); // 3 cats.length = 2; console.log (cats); // "Dusty, Misty"표시. Twiggy는 삭제 된 cats.length = 0; console.log (cats); // 아무것도 표시되지 않는다. 배열 cats는 빈 배열 cats.length = 3; console.log (cats); // [undefined, undefined, undefined]
배열 전체에 반복
배열의 각 값에 대한 작업을 하고, 전체 반복하는 것은 일반적인 작업입니다. 가장 간단한 방법은 다음과 같습니다 :
var colors = 'red' , 'green' , 'blue' ]; for ( var I = 0; i < colors.length; i + +) { console.log (colors[i]); }
배열에 bool 컨텍스트에서 false 로 평가되는 요소가 없다면 (예를 들어, 배열이 DOM 노드로 구성되는) 경우, 보다 효율적인 방법을 사용할 수 있습니다 :
var divs = document.getElementsByTagName( 'div' ); for ( var I = 0, div; div = divs[i]; i++) { /* div에 어떤 작업을 수행 */ }
이 방법은 배열의 length를 확인하는 오버 헤드를 줄이고, 또한 편리 성을 높이기 위해 div 변수에 루프 내에서 현재 항목이 할당되어 있는 것을 보장합니다.
JavaScript 1.6 에 도입
JavaScript 1.6에 도입 된 forEach () 메서드는
배열 전체에 반복하는 또 다른 방법입니다 :
var colors = ['red' , 'green' , 'blue' ]; colors.forEach ( function (color) { console.log (color); });
forEach 에 전달 된 함수는 배열의 모든 항목을 대상으로 함수의 인수로 전달 된 배열 항목마다 한 번씩 실행됩니다. 미 할당 상태 값은 forEach 루프 반복되지 않습니다.
JavaScript 배열 요소는 표준 개체 속성으로 저장되기 때문에, JavaScript의 배열은 for ... in 루프의 반복하지 않는 것이 좋습니다. 이것은 일반적 요소와 모든 열거 가능한 속성이 모두 목록 화되기 때문입니다.
Array의 메소드
Array 개체는 다음과 같은 방법이 있습니다 :
concat () 는 2 개의 배열을 합쳐서 새로운 배열을 돌려줍니다.
var myArray = new Array ( "1" , "2" , "3" ); myArray = myArray.concat ( "a" , "b" , "c" ); // myArray는 [ "1", "2", "3", "a", "b", "c"]
join (deliminator = ",") 는 배열의 모든 요소를 결합하여 문자열로 만듭니다.
var myArray = new Array ( "Wind" , "Rain" , "Fire" ); var List = myArray.join ( "-" ); // list는 "Wind - Rain - Fire"
push () 는 하나 이상의 요소를 배열의 마지막에 추가하고 추가 된 배열의 길이를 반환합니다.
var myArray = new Array ( "1" , "2" ); myArray.push ( "3" ); // MyArray는 [ "1", "2", "3"]
pop () 은 배열에서 마지막 요소를 제거하고 해당 요소를 반환합니다.
var myArray = new Array ( "1" , "2" , "3" ); var Last = myArray.pop(); // MyArray는 [ "1", "2"], last = "3"이된다.
shift () 는 배열에서 첫 번째 요소를 제거하고 해당 요소를 반환합니다.
var myArray = new Array ( "1" , "2" , "3" ); var first = myArray.shift (); // MyArray는 [ "2", "3"], first는 "1"이된다
unshift () 는 하나 이상의 요소를 배열 앞에 추가하고 배열의 새 길이를 반환합니다.
var myArray = new Array ( "1" , "2" , "3" ); myArray.unshift ( "4" , "5" ); // myArray는 [ "4", "5", "1", "2", "3"]
slice (start_index, upto_index) 는 배열의 일부분을 추출하여 새로운 배열로 반환합니다.
var myArray = new Array ( "a" , "b" , "c" , "d" , "e" ); myArray = myArray.slice (1, 4); / * 인덱스 1에서 시작하여 인덱스 3까지 모든 요소를 추출한다. [ "b", "c", "d"]를 반환 * /
splice (index, count_to_remove, addelement1, addelement2, ...) 는 배열에서 요소를 제거하고 (선택) 그들을 대체합니다.
var myArray = new Array ( "1" , "2" , "3" , "4" , "5" ); myArray.splice (1, 3, "a" , "b" , "c" , "d" ); // MyArray는 [ "1", "a", "b", "c", "d" "5"]가 //이 코드는 인덱스 1 ( "2"가있는 곳)에서 시작해서 3개의 요소를 제거, // 제거한 위치에 다음 요소들을 삽입
reverse() 는 배열의 요소를 역순으로 정렬합니다. 첫 번째 배열 요소는 마지막으로, 마지막 것은 처음 수 있습니다.
var myArray = new Array ( "1" , "2" , "3" ); myArray.reverse(); // 배열을 정렬, myArray = [ "3", "2", "1"]
sort() 는 배열의 요소를 정렬합니다.
var myArray = new Array ( "Wind" , "Rain" , "Fire" ); myArray.sort(); // 배열을 정렬하고 myArrray = [ "Fire", "Rain", "Wind"]
sort() 는 배열의 요소를 어떻게 정렬할지 결정 콜백 함수를 인자로 취할 수 있습니다. 함수는 두 값을 비교하고, 3 개의 값 중 하나의 값을 반환합니다 :
정렬 시스템에 a 가 b 보다 작으면 -1 (또는 음수)를 리턴합니다.
정렬 시스템에 a 가 b 보다 크면 1 (또는 양수)를 리턴합니다.
a
와 b 가 등가라고 보여지는 경우 0을 리턴합니다.
예를 들어, 다음 코드는 배열의 마지막 문자에 의해 정렬합니다 :
var sortFn = function (a, b) { if (a [a.length - 1 < b [b.length - 1]) return -1; if (a [a.length - 1 > b [b.length - 1) return 1; if (a [a.length - 1] == b [b.length - 1]) return 0; } myArray.sort (sortFn); // 배열을 정렬하고 myArray = [ "Wind", "Fire", "Rain"]
indexOf (searchElement [, fromIndex]) 는 배열 searchElement 을 검색하여 처음 매치 한 요소의 인덱스를 돌려줍니다.
var a = [ 'a' , 'b' , 'a' , 'b' , 'a' ]; alert (a.indexOf ( 'b' )); / / 1이 alert 표시 // 전회 매치 한 위치의 뒤에 다시 검색 alert (a.indexOf ( 'b' , 2)); // 3이 alert 표시 alert (a.indexOf ( 'z' )); // 'z'는 없기 때문에 -1이 alert 표시된다.
lastIndexOf (searchElement [, fromIndex) 는 indexOf 와 마찬가지로 작동하지만, 배열의 마지막에서 앞 방향으로 찾습니다.
var a = [ 'a' , 'b' , 'c' , 'd' , 'a' , 'b' ]; alert (a.lastIndexOf ( 'b' )); // 5이 alert 표시 / / 전회 매치 한 위치 전에서 다시 검색 alert (a.lastIndexOf ( 'b' , 4)); // 1이 alert 표시 alert (a.lastIndexOf ( 'z' )); // -1 alert 표시
forEach (callback [, thisObject) 는 callback 함수를 배열의 모든 요소에 대해 수행합니다.
var a = [ 'a' , 'b' , 'c' ]; a.forEach (alert); // 순서에 alert 표시를 실행
map (callback [, thisObject) 모든 배열 항목에 callback 를 실행하고 반환 값에 의한 새로운 배열을 돌려줍니다.
var a1 = [ 'a' , 'b' , 'c' ]; var a2 = a1.map ( function (item) { return item.toUpperCase ();}); alert (a2); // A, B, C를 alert 표시
filter (callback [, thisObject) 는 callback 이 true를 돌려주는 아이템을 포함한 새로운 배열을 돌려줍니다.
var a1 = [ 'a' , 10, 'b' , 20, 'c' , 30]; var a2 = a1.filter ( function (item) { return typeof Item == 'number' ;}); alert (a2); // 10,20,30를 경고 표시
every (callback [, thisObject) 는 배열의 모든 항목에 대한 callback 이 true를 돌려주는 경우, true를 리턴합니다.
function ISNUMBER (value) { return typeof value == 'number' ; } var a1 = [1, 2, 3]; alert (a1.every (isNumber)); // true가 경고 표시 var a2 = [1, '2 ' , 3]; alert (a2.every (isNumber)); // false가 경고 표시
some (callback [, thisObject) 은 배열에서 하나의 아이템에 callback 이 true를 돌려주는 경우, true를 돌려줍니다.
function isNumber (value) { return typeof value == 'number' ; } var A1 = [1, 2, 3]; alert (a1.some (isNumber)); // true가 경고 표시 var A2 = [1, '2 ' , 3]; alert (a2.some (isNumber)); // true가 경고 표시 var A3 = ['1 ' , '2 ' , '3 ' ]; alert (a3.some (isNumber)); // false가 경고 표시
콜백 함수를 인수에 있는 위 메서드는 배열에 걸쳐 다양한 방법으로 반복하는 것으로, iterative methods 로 알려져 있습니다. 각 메소드는 thisObject 라는 선택적 제 2 인수를 취합니다. 이것이 주어지면 thisObject 는 콜백 함수의 본체 내에서 this 키워드가 가리키는 값이됩니다. 이것이 주어지지 않는 경우는, this 는 전역 객체 ( window )를 참조하십시오. 다른 예로 명시 적 개체 컨텍스트 외부에서 호출 된 경우도 마찬가지입니다.
콜백 함수는 실제로 3 개의 인수로 호출합니다. 첫 번째는 현재 항목의 값, 두 번째는 현재 항목의 배열 인덱스, 3 번째는 배열 자체에 대한 참조입니다. JavaScript 함수는 매개 변수 목록에서 이름이 붙어 있지 않은 인수를 무시하기 때문에 alert 처럼 인수가 하나의 콜백 함수를 주어서 안전합니다.
reduce (callback [, initialValue]) 항목의 목록을 하나의 값으로 줄이기 위해 callback (firstValue, secondValue) 을 적용합니다. (자바스크립트 1.8 이상)
var a = [10, 20, 30]; var total = a.reduce ( function (first, second) { return first + second;}, 0); alert (total) // 60
reduceRight (callback [, initialValue]) 는 reduce() 와 비슷한 동작을 하지만 마지막 요소에서 처리를 시작합니다.(자바스크립트 1.8 이상) reduce 및 reduceRight 는 배열의 반복 메서드는 이해하기 어려운 것입니다. 이러한 일련의 값을 하나의 값으로 줄이기 위해 두 값을 재귀 적으로 결합하는 알고리즘 사용해야 합니다.
다차원 배열
배열은 중첩 될 수 있고 이것은 배열을 다른 배열의 요소로 포함 할 수 있습니다. JavaScript 배열이 같은 특징을 이용하면 다차원 배열을 만들 수 있습니다.
다음 코드는 2 차원 배열을 만듭니다.
var a = new Array (4); for (i = 0; i < 4; i + +) { a [i] = new Array (4); for (j = 0; j < 4; j + +) { a [i] [j] = "[" + i + "," + j + "]" ; } }
이 예에서는 다음 줄을 가지는 배열이 만들어집니다 :
Row 0 : [0,0] [0,1] [0,2] [0,3] Row 1 : [1,0] [1,1] [1,2] [1,3] Row 2 : [2,0] [2,1] [2,2] [2,3] Row 3 : 3,0] [3,1] [3,2] [3,3]
배열과 정규 표현식
배열이 정규 표현식과 문자열 사이의 매칭 결과 일 때, 그 배열은 매치 내용에 대한 정보를 가진 속성과 요소를 돌려줍니다. 배열은 RegExp.exec() , String.match() , String.split() 의 반환 값입니다. 정규식 함께 배열을 사용하는 방법에 대한 정보는 정규식 을 참조하십시오.
배열 형태의 오브젝트 다루기
JavaScript 1.6 에 도입
document.getElementsByTagName () 가 반환
NodeList 나 함수의 본체 내에서 사용할 수 있는 arguments 개체 등 일부
JavaScript 개체는 겉으로는 배열처럼 동작하지만, 모든 메소드를 공유하고
있지는 않습니다. 예를들어 arguments 객체는 length 속성을 가지고 있지만,
forEach() 메서드는 존재하지 않습니다.
JavaScript 1.6에 도입 된 배열 제네릭은 다른 배열 형태의 오브젝트에 Array 의 메소드를 실행하는 방법을 제공합니다. 표준 배열 방법은 각각 Array 개체에 해당하는 방법이 있습니다. 예를 들면 :
Function alertArguments () { Array.forEach (arguments, function (item) { alert (item); }); }
이러한 일반적인 메소드는 JavaScript 함수 개체에서 제공하는 call 메소드를 사용하여 이전 버전의 JavaScript에서보다 긴 형태로 사용 할 수 있습니다 :
Array.prototype.forEach.call (arguments, function (item) { alert (item); });
배열의 일반적인 방법은 문자열에서도 마찬가지로 이용할 수 있습니다. 이 방법이 배열에 액세스하는 방법과 마찬가지로 문자열의 각 문자에 차례로 액세스 할 수 있습니다 :
Array.forEach ( "a string" , function (chr) { alert (chr); });
다음은 배열의 메소드를 문자열에 적용하는 방법이며 클로저를 사용하고 있습니다 :
var str = 'abcdef' ; var consonantsOnlyStr = Array.filter (str, function (c)! (/ [aeiou] / i) test (c)). join ( '' ); / / 'bcdf' var vowelsPresent = Array.some (str, function (c) (/ [aeiou] / i) test (c)); / / true var allVowels = Array.every (str, function (c) (/ [aeiou] / i) test (c)); / / false var interpolatedZeros = Array.map (str, function (c) c + '0 ' ). join ( '' ); / / 'a0b0c0d0e0f0' var numerologicalValue = Array.reduce (str, function (c, c2) c + c2.toLowerCase () charCodeAt () -96, 0); // 21 (reduce ()는 JS v1.8 이상에서 사용 가능)
filter 및 map 은 반환 값으로 자동으로 문자열에 다시 문자 집합을 반환하지 않음을 유의 하십시오. 배열이 반환되므로 문자열에 되돌리기 위해 join 을 사용 해야 합니다.
배열 내포
JavaScript 1.7 에 도입
JavaScript 1.7에 도입 된 배열 내포 다른
콘텐츠를 바탕으로 새로운 배열을 구축하는 유용한 지름길을 제공합니다. 배열
내포은 일반적으로 map () 과 filter () 를 호출하는 대신로, 혹은 그 두
가지를 결합하는 수단으로 이용할 수 있습니다.
다음 배열 내포은 숫자 배열을 가져와 그 각 숫자를 2 배 값으로 새 배열을 만듭니다.
var Numbers = [1, 2, 3, 4]; var doubled = [i * 2 for Each (I in Numbers); alert (doubled); / / 2,4,6,8가 경고 표시
이것은 다음의 map () 에 의한 조작과 같습니다 :
var doubled = numbers.map ( function (i) { return I * 2;});
배열 내포 특정 식에 매치하는 아이템의 선택에 사용 할 수 있습니다. 다음은 짝수 만 선택 내포합니다 :
var Numbers = [1, 2, 3, 21, 22, 30]; var evens = [I for Each (I in Numbers) if (i % 2 == 0); alert (evens); / / 2,22,30을 경고 표시
동일한 목적 filter () 를 이용할 수 있습니다 :
var evens = numbers.filter ( function (i) { return I % 2 == 0;});
map () 과 filter () 방식의 작업을 하나의 배열 내포에 통합 할 수 있습니다. 다음은 짝수만을 필터링하여 그들을 두배 값을 포함하는 배열을 만듭니다.
var Numbers = [1, 2, 3, 21, 22, 30]; var doubledEvens = [i * 2 for Each (I in Numbers) if (i % 2 == 0); alert (doubledEvens); / / 4,44,60이 경고 표시
배열 내포 대괄호는 범위 목적의 암시 적 블록을 제공합니다. 새로운 변수 (위의 예제에서 i)는 let 을 사용하여 선언 된 것처럼 처리됩니다. 즉, 그 변수는 배열 내포 외부에서 사용할 수 없습니다.
배열 내포 입력 자체가 배열 일 필요는 없습니다. 반복자 및 생성기 도 사용할 수 있습니다.
문자열을 입력 할 수 있습니다. (배열 형태의 오브젝트에서) 앞의 filter와 map 동작을 수행하려면 다음과 같이합니다 :
var str = 'abcdef' ; var consonantsOnlyStr = C for Each (C in str) if (! (/ [aeiouAEIOU] /) test (c)). join ( '' ); / / 'bcdf' var interpolatedZeros = [c + '0 ' for Each (C in str). join ( '' ); / / 'a0b0c0d0e0f0'
반복되지만 입력 데이터의 형식은 유지되지 않으므로 문자열에 돌려 보내기 위하여 join () 을 사용하여야합니다.
Boolean 객체
Boolean 객체는 원시적 인 부울 타입의 나팔입니다. Boolean 객체를 만들려면 다음 구문을 사용합니다 :
var booleanObjectName = new Boolean (value);
원시적 인 부울 타입의 true 와 false 를 Boolean 개체 true 나 false 값을 혼동하지 마십시오. false 값을 가진 Boolean 객체를 포함한 값이 undefined , null , 0 , NaN , 빈 문자열 중 하나가 아닌 모든 오브젝트는 조건문에 통과되면 true로 평가됩니다. 자세한 내용은 if ... else 문 을 참조하십시오.
Date 객체
JavaScript는 날짜를 나타내는 데이터 형식이 없습니다. 그러나 Date 객체와 메소드를 사용하여 응용 프로그램에서 날짜와 시간을 처리 할 수 있습니다. Date 객체는 날짜를 설정, 검색, 조작하는 방법이 많이 있습니다. 속성은 일절 없습니다.
JavaScript는 Java와 같이 날짜를 처리합니다. 두 언어에 공통되는 날짜에 대한 방법이 많이 있습니다. 또한 두 언어 모두 날짜를 1970 년 1 월 1 일 00:00:00부터의 밀리 세컨드 수로 유지합니다.
Date 객체의 범위는 1970 년 1 월 1 일 (UTC)을 기준으로 -100,000,000 일부터 100,000,000 날입니다.
Date 객체는 다음과 같이 작성합니다 :
var dateObjectName = new Date (parameters);
여기서 dateObjectName 는 만들 Date 개체의 이름입니다. 즉, 새 개체의 이름 또는 기존 개체의 속성 이름입니다.
new 키워드를 수반하지 않고 Date를 호출하면 주어진 날짜 문자열 표현으로 변환합니다.
위의 구문에서 parameters 는 다음 어떤 형식으로 지정해도 괜찮습니다 :
인수 없음 : 오늘의 날짜와 시간을 만듭니다. 예를 들어, today = new Date ();
.
다음 형식 "월 일 년시 : 분 : 초"에서 날짜를 나타내는 문자열. 예를
들어, var Xmas95 = new Date ( "December 25, 1995 13:30:00") . 시, 분 또는
초를 생략하면 그 값은 0으로 설정됩니다.
년, 월, 일을 나타내는 정수
값 세트. 예를 들어, var Xmas95 = new Date (1995, 11, 25) .
년, 월,
일,시, 분, 초를 나타내는 정수 값 세트. 예를 들어, var Xmas95 = new Date
(1995, 11, 25, 9, 30, 0); .
JavaScript 1.2 이전
Date 객체는
다음과 같이 동작합니다 :
1970 년 이전의 날짜는 허용되지 않습니다.
JavaScript는 플랫폼 특유의
날짜 기능이나 거동에 따라 달라집니다. 즉, Date 개체의 행동은 플랫폼마다
다릅니다.
Date 객체의 메소드
Date 객체의 날짜와 시간을 처리 방법은 대략 다음의 범주로 나눌 수 있습니다 :
"set"메서드 : 날짜와 시간 값을 Date 객체로 설정합니다.
"get"메서드 : Date 객체에서 날짜 및 시간 값을 가져옵니다.
"to"방법 : Date 개체에서 문자열 값을 반환합니다.
parse 및 UTC
방법 : Date 문자열을 해석합니다.
"get"및 "set"메소드를 이용하여 초,
분, 시간, 날짜, 요일, 월, 년을 별도로 검색하거나 설정 할 수 있습니다.
요일을 반환 getDay 메서드는 있지만, 이것에 대응하는 setDay 방법은
없습니다. 왜냐하면, 요일은 자동으로 설정되기 때문입니다. 이러한 방법은 그
값의 표현에 정수를 사용합니다 :
초와 분 : 0-59
시 : 0 ~ 23
요일 : 0 (일요일)부터 6 (토요일)
날짜 : 1에서 31
월 : 0 (1 월)에서 11 (12 월)
년 : 1900
년부터 시작했다 년
예를 들어 다음의 날짜를 정의했다고합니다 :
var Xmas95 = new Date ( "December 25, 1995" );
그러자 Xmas95.getMonth () 는 11을 반환 Xmas95.getFullYear () 는 1995를 반환합니다.
getTime 메소드 나 setTime 메서드는 날짜의 비교에 유용합니다. getTime 메서드는 Date 개체, 1970 년 1 월 1 일 00:00:00부터의 밀리 세컨드 수를 돌려줍니다.
예를 들어, 다음 코드는 올해 나머지 기간을 표시합니다 :
var today = new Date (); var endYear = new Date (1995, 11, 31, 23, 59, 59, 999); / / 해와 달을 세트 endYear.setFullYear (today.getFullYear ()); / / 올해가 몇 년을 세트 var msPerDay = 24 * 60 * 60 * 1000; / / 1 일의 밀리 초를 세트 var daysLeft = (endYear.getTime () - today.getTime ()) / msPerDay; var daysLeft = Math.round (daysLeft); / / 올해 남은 일수를 반환
이 예제에서는 오늘 날짜를 유지하는 today 라는 Date 객체를 만듭니다. 그리고 endYear 라는 Date 객체를 만들고 올해가 몇 년이라는 값을 설정합니다. 또한 1 일 밀리 초를 사용하여 today 와 endYear 사이의 일을 산출합니다.
parse 메서드는 날짜를 나타내는 문자열에서 기존 Date 객체에 값을 할당하는 데 유용합니다. 예를 들어 다음의 코드는 parse 와 setTime 을 이용해 날짜 값을 IPOdate 개체에 할당합니다 :
var IPOdate = new Date (); IPOdate.setTime (Date.parse ( "Aug 9, 1995" ));
Date 객체의 사용 예
다음 예제에서는 함수 JSClock () 는 디지털 시계와 같은 형식으로 시간을 돌려줍니다.
Function JSClock () { var time = new Date (); var hour = time.getHours (); var minute = time.getMinutes (); var Second = time.getSeconds (); var temp = "" + ((hour> 12)? hour - 12 : hour); if (hour == 0) temp = "12" ; temp + = ((minute <10)? ": 0" : ":" ) + minute; temp + = ((second <10)? ": 0" : ":" ) + second; temp + = (hour> = 12)? "PM" : "AM" ; return temp; }
JSClock 함수는 먼저 time 이라는 새로운 Date 객체를 만듭니다. 인수는 주어지지 않기 때문에, 현재 날짜 및 시간 time이 만들어집니다. 그리고 getHours , getMinutes 및 getSeconds 메소드를 호출 해, 현재의시, 분, 초 값을 hour , minute , second 에 각각 할당합니다.
그 다음 4 개의 문장은, 시간을 바탕으로 문자열 값을 구축합니다. 첫 번째 문장은 변수 temp 를 만들고이 조건식을 사용하여 값을 할당합니다. hour 가 12보다 큰 경우 ( hour - 12 )을, 그렇지 않으면 단순히 hour를 각각 할당합니다. 그러나 hour가 0 인 경우는 12합니다.
그 다음 문장은 minute 값을 temp 에 추가합니다. minute 값이 10보다 작은 경우는 조건식이 구분 콜론 분 선두의 제로를 추가하고 그렇지 않은 경우는 구분 콜론 만 추가합니다. 그리고 같은 해 second 값을 temp 에 추가합니다.
마지막으로, 조건은 hour 가 12 이상의 경우는 "PM"를, 그렇지 않은 경우는 "AM"을 각각 temp 에 추가합니다.
Function 객체
정의 된 Function 객체는 함수로 컴파일하려는 JavaScript 코드 문자열을 지정합니다.
Function 개체를 만들려면 다음과 같이합니다 :
var functionObjectName = new Function (arg1, arg2, ... argn] functionBody);
functionObjectName 변수 이름 또는 기존 개체의 속성 이름입니다. 객체에 문자 이벤트 처리기 이름을 계속하여 window.onerror 을 지정 할 수 있습니다.
arg1 , arg2 , ... argn 함수가 가인 이름으로 사용하는 인수입니다. 각각 JavaScript 식별자로 적절한 문자열이어야합니다. 예를 들어, "x"나"theForm"등입니다.
functionBody 함수의 본체로 컴파일하려는 JavaScript 코드를 나타내는 문자열입니다.
Function 객체는 사용 때마다 평가됩니다. 이것은 함수를 선언하고 그것을 코드에서 호출하는 방법보다 비효율적입니다. 선언 된 함수는 컴파일되기 때문입니다.
여기에서 설명한 함수의 정의 방법 이외에, function 문 및 함수 식을 사용 할 수 있습니다. 자세한 내용은 JavaScript 참조 를 참조하십시오.
다음 코드는 함수를 변수 setBGColor 에 할당합니다. 이 함수는 열려있는 문서의 배경색을 설정합니다.
var setBGColor = new Function ( "document.bgColor = 'antiquewhite'" );
Function 개체를 호출, 그것은 마치 함수 인 것처럼 변수 이름을 지정하면 좋습니다. 다음 코드는 setBGColor 변수에 지정된 함수를 실행합니다 :
var colorChoice = "antiquewhite" ; if (colorChoice == "antiquewhite" ) {setBGColor ()}
다음 중 하나의 방법을 사용하여 이벤트 핸들러에 함수를 할당 할 수 있습니다 :
document.form1.colorButton.onclick = setBGColor; < INPUT NAME = "colorButton" TYPE = "button" VALUE = "Change background color" onClick = "setBGColor ()" >
위의 변수 setBGColor 를 만들 다음 함수의 선언과 같은 것입니다 :
Function setBGColor () { document.bgColor = 'antiquewhite' ; }
함수를 변수에 할당하는 것은 함수를 선언하는 것과 비슷하지만 다른 점도 있습니다 :
var setBGColor = new Function ( "...") 과 같이 함수를 변수에 할당하면
setBGColor 은 new Function () 를 사용하여 만든 함수에 대한 참조를 값으로
가지는 변수입니다.
function setBGColor () {...} 과 같이 함수를 만들면 setBGColor 은
변수가 아닌 함수의 이름입니다. 함수를 함수 안에 중첩 될 수 있습니다. 내부
함수는 외부 함수의 사설입니다 :
내부 함수는 외부 함수의 글에서만 액세스 할 수 없습니다.
내부 함수는
외부 함수의 인수와 변수를 사용할 수 있습니다. 외부 함수는 내부 함수의
인수와 변수를 사용할 수 없습니다.
Math 객체
정의 된 Math 객체는 수학 상수 및 함수를 제공하는 속성과 메소드가 있습니다. 예를 들어, Math 객체의 PI 속성은 원주율 값 (3.141 ...)을 나타냅니다. 이것은 응용 프로그램에서 다음과 같이 사용합니다.
Math.PI
마찬가지로 표준 수학 함수가 Math 방법이 있습니다. 이것은 삼각 함수, 로그 함수, 지수 함수 등이 있습니다. 예를 들어 삼각 함수의 사인을 사용하려면 다음과 같이 씁니다.
Math.sin (1.56)
Math 의 삼각 함수의 메서드는 모든 인수를 라디안으로 잡는 것에주의하십시오.
다음 표에서 Math 객체의 메소드를 간단하게 설명합니다.
Table 7.1 : Math 방법
메소드 | 설명 |
---|---|
abs | 절대 값입니다. |
sin , cos , tan | 표준 삼각 함수입니다. 인수는 라디안입니다. |
acos , asin , atan , atan2 | 역 삼각 함수입니다. 라디안 값을 반환합니다. |
exp , log | 지수 함수와 자연 로그입니다. 바닥은 e 입니다. |
ceil | 인수 이상의 정수 중 최소의 것을 돌려줍니다. |
floor | 인수 다음 정수 중 최대의 것을 돌려줍니다. |
min , max | 두 인수 중 작은 것, 큰 것을 각각 반환합니다. |
pow | 제곱입니다. 제 1 인수는 바닥, 두번째는 지수입니다. |
random | 0에서 1까지의 난수를 반환합니다. |
round | 인수를 가장 가까운 정수로 반올림합니다. |
sqrt | 제곱근입니다. |
다른 많은 개체와 달리, 결코 자신의 Math 객체를 생성하지 마십시오. 항상 정의 된 Math 개체를 사용하십시오.
Number 객체
Number 객체는 최대 값, 비수, 무한 등 숫자 상수를 나타내는 속성이 있습니다. 이러한 속성 값을 변경할 수 없습니다. 이들은 다음과 같이 사용합니다 :
var biggestNum = Number.MAX_VALUE; var smallestNum = Number.MIN_VALUE; var infiniteNum = Number.POSITIVE_INFINITY; var negInfiniteNum = Number.NEGATIVE_INFINITY; var notANum = Number.NaN;
항상 위와 같이하여 정의 된 Number 객체의 속성을 참조합니다. 스스로 만든 Number 객체의 속성으로 참조하는 것이 아닙니다.
다음 표는 Number 객체의 속성에 대해 간략히 설명합니다.
Table 7.2 : Number 속성
속성 | 설명 |
---|---|
MAX_VALUE | 최대 표현 가능한 값입니다. |
MIN_VALUE | 최소의 표현 가능한 값입니다. |
NaN | "not a number"(비수)를 나타내는 특수한 값입니다. |
NEGATIVE_INFINITY | 음의 무한대를 나타내는 특수한 값입니다. 오버플로 반환됩니다. |
POSITIVE_INFINITY | 양의 무한대를 나타내는 특수한 값입니다. 오버플로 반환됩니다. |
Number의 프로토 타입은 Number 개체로부터 정보를 다양한 형태로 추출 방법을 제공합니다. 다음 표에서는 Number.prototype 방법에 대해 간략하게 설명합니다.
Table 7.3 : Number.prototype 방법
메소드 | 설명 |
---|---|
toExponential | 숫자를 지수 표기법으로 표현한 문자열을 반환합니다. |
toFixed | 숫자를 고정 소수점 표기법으로 표현한 문자열을 반환합니다. |
toPrecision | 숫자를 지정한 정확한 고정 소수점 표기법으로 표현한 문자열을 반환합니다. |
toSource | 지정된 Number 객체를 표현하는 객체 리터럴을 반환합니다. 이 값을 이용하여 새로운 개체를 만들 수 있습니다. Object.toSource 메서드를 재정의합니다. |
toString | 지정된 개체를 표현하는 캐릭터 라인을 돌려줍니다. Object.toString 메서드를 재정의합니다. |
valueof | 지정된 객체의 프리미티브 값을 반환합니다. Object.valueOf 메서드를 재정의합니다. |
RegExp 객체
RegExp 객체를 이용하여 정규 표현식을 사용 할 수 있습니다. 이것은 정규 표현 으로 설명하고 있습니다.
String 객체
String 개체는 문자열 원시 데이터 유형의 래퍼입니다. 문자열 리터럴과 String 객체를 혼동해서는 안됩니다. 예를 들어, 다음 코드는 문자열 리터럴 s1 과 String 개체 s2 를 만듭니다 :
var S1 = "foo" ; / / 문자열 리터럴 값을 생성 var S2 = new String ( "foo" ); / / String 객체를 생성
문자열 리터럴에서 String 개체의 모든 메소드를 호출 할 수 있습니다. JavaScript가 자동으로 문자열 리터럴을 임시 String 객체로 변환하고 메서드를 호출하고 임시 String 개체를 제거하는 것입니다. String.length 속성을 문자열 리터럴에서 사용할 수 있습니다.
특히 String 객체를 사용할 필요가없는 경우에는 문자열 리터럴을 사용하도록하십시오. String 객체는 직관적이지 행동을 취할 수 있기 때문입니다. 예를 들면 :
var S1 = "2 + 2" ; / / 문자열 리터럴 값을 생성 var S2 = new String ( "2 + 2" ); / / String 객체를 생성 eval (s1); / / 숫자 4를 반환 eval (s2); / / 문자열 "2 + 2"를 반환
String 개체에 속성이 하나 있습니다. 그것은 length 에서 문자열의 문자 수를 나타냅니다. 예를 들어, 다음 코드는 x 에 13이라는 값을 할당합니다. "Hello, World!"는 13 문자이기 때문입니다 :
var MyString = "Hello, World!" ; var x = mystring.length;
String 객체에는 두 가지 방법이 있습니다. 이것은 substring 및 toUpperCase 처럼 문자열 자체를 변형시킨 것을 돌려주는 메소드와, bold 와 link 처럼 문자열을 HTML로 성형 한 것을 반환하는 방법입니다.
예를 들어 앞의 예를 유용하면 mystring.toUpperCase () 도 "hello, world!"toUpperCase () 도, "HELLO, WORLD"라는 문자열을 반환합니다.
substring 메서드는 두 개의 인수를 취하고 그 두 인자 사이의 문자열의 일부를 반환합니다. 앞의 예를 유용하면 mystring.substring (4, 9) 는 "o, Wo"라는 문자열을 반환합니다. 자세한 내용은 JavaScript 레퍼런스에서 String 객체의 substring 메서드를 참조하십시오.
String 객체는 자동으로 HTML로 성형하는 방법도 많이 있습니다. 이것은 굵은 텍스트를 생성하는 bold 와 하이퍼 링크를 생성하는 link 등이 있습니다. 예를 들어, link 메소드를 사용하여 가상의 URL에 하이퍼 링크를 생성하려면 다음과 같이합니다 :
mystring.link ( " http://www.helloworld.com " )
다음 표에서 String 개체 메서드를 쉽게 설명합니다.
Table 7.4 : String 인스턴스의 메소드
메소드 | 설명 |
---|---|
anchor | HTML의 명명 된 앵커를 만듭니다. |
big , blink , bold , fixed , italics , small , strike , sub , sup | HTML의 포맷 된 문자열을 만듭니다. |
charAt , charCodeAt | 문자열의 지정된 위치의 문자 나 문자 코드를 반환합니다. |
indexOf , lastIndexOf | 문자열의 지정된 부분 문자열의 위치 나 지정한 부분 문자열의 마지막 위치를 각각 돌려줍니다. |
link | HTML의 하이퍼 링크를 만듭니다. |
concat | 두 문자열을 연결하여 새로운 문자열을 반환합니다. |
fromCharCode | 지정된 Unicode 값의 연속에서 문자열을 구축합니다. 이것은 String 클래스의 메소드이며, String 인스턴스 메서드가 없습니다. |
split | 문자열을 부분 문자열로 분할하여 String 객체를 문자열 배열에 분배합니다. |
slice | 문자열에서 부분을 추출하여 새로운 문자열을 반환합니다. |
substring , substr | 시작과 끝 인덱스 또는 시작 인덱스 및 길이 중 하나를 지정하여 문자열의 지정된 집합을 반환합니다. |
match , replace , search | 정규식을 취급합니다. |
toLowerCase , toUpperCase | 문자열을 모두 소문자로 또는 모두 대문자로 각각 돌려줍니다. |
저작권 공지
이 문서의 모든 저작권은 Mozilla.org에 있습니다. 이 문서는 "모질라
기여자"들에 의해 작성 되었습니다.
원문 보기
저희가 한글로 번역한 2차적저작물에 대한 저작권 역시 Mozilla.org에
있습니다.