JavaScript 참조 유형 소개_기본 지식

객체 유형
객체 유형은 JavaScript에서 가장 일반적으로 사용되는 유형입니다. Object 인스턴스에는 많은 기능이 없지만 애플리케이션 내에서 데이터를 저장하고 전송하는 데 이상적입니다.

Object 인스턴스를 만드는 방법에는 두 가지가 있습니다. 첫 번째는 new 연산자와 Object 생성자를 사용하는 것입니다.

코드 복사 코드는 다음과 같습니다.

var person = new Object()
person .name = "tt";
person.age = 12;

또 다른 방법은 객체 리터럴 표기법을 사용하는 것입니다.

코드 복사 코드는 다음과 같습니다.

var person = {
name : 'tt' ,
age : 12
}

또한 객체 리터럴 구문을 사용할 때 중괄호를 비워두면 값에 기본 속성이 포함된 객체를 정의할 수 있습니다. 및 방법.

var person = {}; //new Object()와 동일
person.name = "tt";
person.age = 12; 이전 객체를 정의하기 위해 도입된 방법 중 하나이지만 개발자는 이 구문이 코드가 덜 필요하고 데이터를 캡슐화하는 느낌을 주기 때문에 두 번째 방법(객체 리터럴 구문)을 선호합니다. 실제로 객체 리터럴은 다수의 선택적 매개변수를 함수에 전달하는 데 선호되는 방법이기도 합니다. 예를 들면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

function showInfo(args)

{
if(args.name != undefine)
{
alert(args.name);
}
if(args.age != 정의되지 않음)
{
alert(args.age)
}
}

showInfo({
name:'name',
age:12
})

showInfo({name:'name'})


일반적으로 점을 사용합니다. 객체 속성에 액세스할 때 이는 많은 객체 지향 언어에서도 일반적인 구문입니다. 그러나 대괄호 표기법을 사용하여 JavaScript에서 개체의 속성에 액세스할 수도 있습니다. 예:

코드 복사 코드는 다음과 같습니다.

alert(person.name) ;

Alert(person['name']);


기능적 관점에서 개체 속성에 액세스하는 두 가지 방법에는 차이가 없습니다. 그러나 대괄호 구문의 주요 장점은 변수를 통해 속성에 액세스할 수 있다는 것입니다.

코드 복사 코드는 다음과 같습니다.

var propertyName = 'name'; >alert( person[propertyName]);

일반적으로 속성에 액세스하기 위해 변수를 사용해야 하는 경우가 아니면 점 표기법을 사용하는 것이 좋습니다.

배열 유형

JavaScript의 배열은 대부분의 다른 언어의 배열과 상당히 다릅니다. 다른 언어의 배열과 마찬가지로 JavaScript 배열은 순서가 지정된 데이터 목록이지만 다른 언어와 달리 JavaScript 배열의 각 항목은 모든 유형의 데이터를 보유할 수 있습니다. 즉, 배열의 첫 번째 위치에 문자열을 저장하고, 두 번째 위치에 값을 저장하고, 세 번째 위치에 객체를 저장할 수 있습니다. 또한 JavaScript 배열의 크기는 동적으로 조정될 수 있습니다. 즉, 새 데이터를 수용하기 위해 데이터가 추가됨에 따라 자동으로 커질 수 있습니다. 배열을 만드는 기본 방법에는 두 가지가 있습니다. 첫 번째는 Array 생성자를 사용하는 것입니다.

코드 복사 코드는 다음과 같습니다. var colors1 = new Array()

var colors2 = new Array(20);

var colors3 = new Array('red','blue','yellow')


배열을 만드는 두 번째 기본 방법 배열 리터럴 표현을 사용하는 것입니다.

코드 복사 코드는 다음과 같습니다. var colors1 = []; var colors2 = ['red','blue','yellow'];

배열 값을 읽고 설정할 때 대괄호를 사용하고 해당 값의 0부터 시작하는 숫자 인덱스를 제공합니다.

코드 복사

코드는 다음과 같습니다.

var colors = ['red','blue','yellow']; //문자열 배열 정의
alert(colors[0]) //첫 번째 항목 표시
colors [2] = 'green'; //세 번째 항목 수정
colors[3] = 'black'; //네 번째 항목 추가

배열의 길이는 해당 항목에 저장됩니다. length 속성의 경우 이 속성은 항상 0 이상의 값을 반환합니다.

코드 복사 코드는 다음과 같습니다.

var colors = ['red',' 파란색', '노란색'];
var names = [];
alert(colors.length); //3
alert(names.length); 🎜> 배열 길이 속성은 매우 특별합니다. 읽기 전용이 아닙니다. 따라서 이 속성을 설정하면 배열 끝에서 항목을 제거하거나 배열에 새 항목을 추가할 수 있습니다.

코드 복사 코드는 다음과 같습니다. var colors = ['red',' blue', 'yellow'];

colors.length = 2;

alert(colors[2]); //정의되지 않음


　 이 예의 배열 색상에는 처음에 3개의 값이 있습니다. . length 속성을 2로 설정하면 마지막 항목이 제거되고 결과적으로 colors[2]에 액세스하면 정의되지 않음이 표시됩니다.

length 속성을 사용하면 배열 끝에 새 항목을 쉽게 추가할 수도 있습니다.

코드 복사 코드는 다음과 같습니다. var colors = ['red',' blue', 'yellow'];

colors[colors.length] = 'green'; //3번 위치에 색상 추가

colors[colors.length] = 'black'; position 4 Color


배열의 마지막 항목 인덱스는 항상 length-1이므로 다음 새 항목의 위치는 length입니다.

변환 방법

모든 객체에는 toLocaleString(), toString() 및 valueOf() 메서드가 있습니다. 그 중 배열의 toString(), valueOf() 메소드를 호출하면 동일한 값, 즉 배열의 각 값의 문자열을 연결하여 형성된 쉼표로 구분된 문자열이 반환됩니다. 실제로 이 문자열을 생성하려면 배열에 있는 각 항목의 toString() 메서드가 호출됩니다.

코드 복사 코드는 다음과 같습니다. var colors = ['red',' blue', 'yellow'];

alert(colors.toString()); //red,blue,yellow

alert(colors.valueOf()); //red,blue,yellow
alert (colors) ; //red, blue, yellow


먼저 명시적으로 toString() 및 valueOf() 메서드를 호출하여 배열의 문자열 표현을 반환하고 각 값의 문자열 표현은 다음과 같습니다. 쉼표로 구분된 A 문자열로 연결됩니다. 코드의 마지막 줄은 배열을 Alert()에 직접 전달합니다. Alert()는 문자열 매개변수를 수신하므로 백그라운드에서 toString() 메소드를 호출합니다. 이는 toString() 메소드를 직접 호출하는 것과 동일한 결과를 얻습니다.

또한 toLocaleString() 메서드는 toString() 및 valueOf() 메서드와 동일한 값을 반환하는 경우가 많지만 항상 그런 것은 아닙니다. 배열의 toLocaleString() 메서드가 호출되면 배열 값의 쉼표로 구분된 문자열도 생성됩니다. 처음 두 메서드와의 유일한 차이점은 이번에는 각 항목의 값을 얻기 위해 toString() 메서드 대신 각 항목의 toLocaleString() 메서드를 호출한다는 것입니다. 예:

코드 복사 코드는 다음과 같습니다. var person1 = {

toLocaleString: function (){

return "person1 : toLocaleString";
},
toString : function(){
return "person1 : toString"
}
};
var person2 = {
toLocaleString : function(){
return "person2 : toLocaleString"
},
toString : function(){
return "person2 : toString";
}
};
var people = [person1,person2];
alert(people); //person1 : toString,person2 : toString
alert(people.toString()); //person1 : toString,person2: toString
alert(people.toLocaleString()); //person1: toLocaleString,person2: toLocaleString


배열 상속 toLocaleString(), toString() 및 valueOf() 메서드는 기본적으로 배열 항목을 쉼표로 구분된 문자열로 반환합니다. 그리고 Join() 메서드를 사용하는 경우 다양한 구분 기호를 사용하여 이 문자열을 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var colors = ['red','blue','yellow'];
alert(colors.join(',')) //red,blue,yellow
alert( colors.join('||')); //red||blue||yellow

참고: 배열의 항목 값이 null이거나 정의되지 않은 경우 값이 추가됩니다. in Join (), toString(), toLocaleString() 및 valueOf() 메서드에서 반환된 결과는 빈 문자열로 표시됩니다.

스택 방법


JavScript 배열은 배열이 다른 데이터 구조처럼 작동하도록 만드는 방법도 제공합니다. 특히 배열은 항목의 삽입과 삭제를 제한할 수 있는 데이터 구조인 스택처럼 동작할 수 있습니다. 스택은 후입선출(Last In First Out) 방식의 데이터 구조입니다. 스택에 있는 항목의 삽입(푸시라고 함) 및 제거(팝이라고 함)는 스택의 맨 위 위치에서만 발생합니다. JavaScript는 유사한 스택 동작을 달성하기 위해 push() 및 pop() 메서드를 제공합니다.

push() 메서드는 여러 개의 매개변수를 수신하고 이를 배열의 끝에 하나씩 추가하고 수정된 배열의 길이를 반환할 수 있습니다. pop() 메서드는 배열 끝에서 마지막 항목을 제거하고 배열 길이를 줄인 후 제거된 항목을 반환합니다.

코드 복사 코드는 다음과 같습니다.

var colors = new Array() / /배열 생성
var count = colors.push('red','blue'); //두 항목 푸시
alert(count) //2
count = colors.push('yellow) ') ; //다른 항목 푸시
alert(count); //3
var item = colors.pop(); //마지막 항목 가져오기
alert(item); >alert(colors.length); //2

　
큐 메소드
큐 데이터 구조의 접근 규칙이 먼저입니다. 밖으로. 대기열은 목록 끝에 항목을 추가하고 목록 앞쪽에서 항목을 제거합니다. push()는 배열의 끝에 항목을 추가하는 메서드이므로 대기열을 시뮬레이션하는 데 필요한 것은 배열의 앞쪽에서 항목을 가져오는 메서드뿐입니다. 이를 수행하는 배열 메소드는 배열의 첫 번째 항목을 제거하고 이를 반환하며 배열의 길이를 1씩 감소시키는 Shift()입니다. Shift() 및 push() 메소드를 결합하면 대기열과 같은 배열을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

var colors = new Array(); //배열 생성
var count = colors.push('red','blue') //두 항목 푸시
alert(count); //2
count = colors.push('yellow'); //다른 항목 푸시
alert(count) //3
var item = colors.shift( ); //첫 번째 항목 가져오기
alert(item); //red
alert(colors.length); //2

JavaScript는 배열에 대한 unshift도 제공합니다. 방법. 이름에서 알 수 있듯이 unshift()는 Shift()와 반대입니다. 즉, 배열 앞에 원하는 수의 항목을 추가하고 새 배열의 길이를 반환합니다. 따라서 unshift() 및 pop() 메서드를 동시에 사용하면 반대 방향, 즉 배열 앞에 항목을 추가하고 배열 끝에서 항목을 제거하는 대기열을 시뮬레이션할 수 있습니다. 예:

코드 복사 코드는 다음과 같습니다.

var colors = new Array(); //배열 만들기
var count = colors .unshift('red','blue'); //두 항목 푸시
alert(count) //2
count = colors.unshift(' yellow'); //항목 하나 더 푸시
alert(count); //3
var item = colors.pop() //첫 번째 항목 가져오기
alert(item);
alert(colors.length); //2

참고: IE의 JavaScript 구현에는 편차가 있습니다. 해당 unshift() 메서드는 항상 배열의 새 길이 대신 정의되지 않은 값을 반환합니다. .

　
재정렬 방법
배열을 재정렬하는 데 직접 사용할 수 있는 두 가지 방법이 이미 있습니다: reverse() 및 sort() 방법은 역순입니다. 배열 항목의 순서를 변경합니다.

코드 복사 코드는 다음과 같습니다.

var 값 ​​= [1,2 ,3,4, 5];
values.reverse();
alert(values); //5,4,3,2,1

기본적으로 정렬은 () 메소드는 배열 항목을 오름차순으로 정렬합니다. 즉, 가장 작은 값이 앞에 오고 가장 큰 값이 끝에 옵니다. 정렬을 구현하기 위해 sort() 메서드는 각 배열 항목의 toString() 변환 메서드를 호출한 다음 결과 문자열을 비교하여 정렬 방법을 결정합니다. 배열의 각 항목이 숫자 값이더라도 sort() 메서드는 아래와 같이 문자열을 비교합니다.

코드 복사 코드는 다음과 같습니다:

var 값 ​​= [0,1,5,10,15]
values.sort()
alert(values); /0,1 ,10,15,5


예제의 값 순서가 정확하더라도 sort() 메서드는 테스트 문자열의 결과에 따라 원래 순서를 변경하는 것을 볼 수 있습니다. 값 5가 10보다 작더라도 문자열을 비교하면 "10"이 "5" 앞에 오기 때문입니다. 따라서 sort() 메서드는 비교 함수를 매개 변수로 받을 수 있으므로 어떤 값이 어떤 값 앞에 오는지 지정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 비교(값1,값2) ){
if(value1 < value2){
return 1;
} else if(value1 > value2){
return -1
} else{
return 0 ;
}
}
var 값 ​​= [0,1,5,10,15]
values.sort(compare)
alert(values); ,10,5, 1,0

valueOf() 메소드가 숫자 유형을 반환하는 숫자 유형 또는 객체 유형의 경우 더 간단한 비교 함수를 사용할 수 있습니다. 이 함수는 주로 두 번째 값에서 첫 번째 값을 뺍니다.

코드 복사 코드는 다음과 같습니다.

함수 비교(값1,값2){
return value2 - value1;
}

　작업 방법

JavaScript는 배열을 작업하는 다양한 방법을 제공합니다. 그 중 concat() 메서드는 현재 배열의 모든 항목을 기반으로 새 배열을 생성할 수 있으며, 하나 이상의 배열이 concat() 메서드에 전달되면 메서드는 이러한 배열의 각 항목을 결과에 추가합니다. 배열에서. 전달된 값이 배열이 아닌 경우 해당 값은 결과 배열의 끝에 추가됩니다.

코드 복사 코드는 다음과 같습니다.

var colors = ['red',' green', 'blue'];
var colors2 = colors.concat('yellow',['black' , 'brown'])
alert(colors)
alert( colors2); //빨간색, 녹색, 파란색, 노란색, 검은색, 갈색

Slice() 메서드는 현재 배열에 있는 하나 이상의 항목을 기반으로 새 배열을 만들 수 있습니다. Slice() 메서드는 반환할 항목의 시작 위치와 끝 위치인 하나 또는 두 개의 매개 변수를 허용할 수 있습니다. 인수가 하나만 있는 경우, Slice() 메서드는 해당 인수로 지정된 위치에서 시작하여 현재 배열의 끝에서 끝나는 모든 항목을 반환합니다. 인수가 두 개인 경우 이 메서드는 시작 위치와 끝 위치 앞의 항목을 반환하지만 끝 위치의 항목은 포함하지 않습니다.

코드 복사 코드는 다음과 같습니다.

var colors = ['red ',' 녹색','파란색','노란색','검은색','갈색'];
var colors2 = colors.slice(1)
var colors3 = colors.slice(1,4) ;
alert(colors2); //green,blue,yellow,black,brown
alert(colors3); //green,blue,yellow

스플라이스를 소개하겠습니다. ( ) 메서드 중 이 메서드는 아마도 가장 강력한 배열 메서드일 것입니다. splice()의 주요 목적은 항목을 배열 중앙에 삽입하는 것이지만 이 메서드를 사용하는 방법에는 세 가지가 있습니다.

삭제 - 삭제할 첫 번째 항목의 위치와 삭제할 항목 수라는 2개의 매개변수를 지정하여 원하는 만큼의 항목을 삭제할 수 있습니다. 예를 들어, splice(0,2)는 배열의 처음 두 항목을 삭제합니다.

삽입 - 지정된 위치에 항목을 얼마든지 삽입할 수 있습니다. 시작 위치, 0(삭제할 항목 수), 삽입할 항목의 3가지 매개변수만 제공하면 됩니다. 여러 항목을 삽입하려는 경우 네 번째 및 다섯 번째 항목을 전달하거나 원하는 만큼 항목을 전달할 수 있습니다. 예를 들어, splice(2,0,'red','green')은 현재 배열의 위치 2부터 시작하여 'red' 및 'green' 문자열을 삽입합니다.

교체 - 지정된 위치에 원하는 수의 항목을 삽입하고 동시에 원하는 수의 항목을 삭제할 수 있습니다. 시작 위치, 삭제할 항목 수 및 3개의 매개변수만 지정하면 됩니다. 삽입할 항목 수. 삽입된 항목 수는 삭제된 항목 수와 동일할 필요는 없습니다. 예를 들어 splice(2,1,'red','green')은 현재 배열의 위치 2에 있는 항목을 삭제한 다음 위치 2부터 시작하여 'red' 및 'green' 문자열을 삽입합니다.

코드 복사 코드는 다음과 같습니다.

var colors = ['red',' green', 'blue'];
var selected = colors.splice(0,1); //첫 번째 항목 제거
alert(colors); //green,blue
alert(removed); //red
removed = colors.splice(1,0,'yellow','black'); //위치 1부터 두 항목 삽입
alert(colors); blue
alert(removed); //빈 배열 반환
removed = colors.splice(1,1,'red','brown') //두 항목을 삽입하고 한 항목 삭제
alert (색상) ; //녹색, 빨간색, 갈색, 검정색, 파란색
경고(제거됨) //노란색

날짜 유형

JavaScript의 날짜 유형은 초기 Java의 java.util.Date 클래스를 기반으로 구축되었습니다. 이를 위해 날짜 유형은 1970년 1월 1일 0시(UTC) 이후 경과된 밀리초 수를 사용하여 날짜를 저장합니다. 이 데이터 저장 형식을 사용하는 조건에서 날짜 형식으로 저장되는 날짜는 1970년 1월 1일 전후 285,616년까지 정확할 수 있습니다.

날짜 객체를 생성하려면 new 연산자와 Date 생성자를 사용하세요.

var now = new Date();
매개변수 전달 없이 Date 생성자를 호출하면 새로 생성된 객체가 자동으로 현재 날짜와 시간을 가져옵니다. 특정 날짜 및 시간을 기반으로 날짜 객체를 생성하려면 해당 날짜를 나타내는 밀리초 수를 전달해야 합니다. 이 계산 프로세스를 단순화하기 위해 JavaScript는 Date.parse() 및 Date.UTC()라는 두 가지 메서드를 제공합니다.

그 중 Date.parse() 메소드는 날짜를 나타내는 문자열 매개변수를 전달받고, 이 문자열을 기반으로 해당 날짜의 밀리초를 반환하려고 시도합니다. JavaScript는 Date.parse()가 지원해야 하는 형식을 정의하지 않으므로 이 메서드의 동작은 구현마다 다르며 종종 로케일마다 다릅니다. 지역이 미국으로 설정된 브라우저는 일반적으로 다음 날짜 형식을 허용합니다.

● "월/일/년", 예: 6/13/2204

● "영어 월 이름 일, 연도", 예: January 12,2004

● "영어 요일, 영어 월 이름, 일, 연도, 시: 분: 두 번째 시간대", 예: Tue May 25 2004 00:00:00 GMT-0700

예를 들어 2004년 5월 25일에 대한 날짜 객체를 생성하려면 다음 코드를 사용할 수 있습니다.

var someDate = new Date(Date.parse ("May 25, 2004"));
Date.parse() 메서드에 전달된 문자열이 날짜를 나타낼 수 없으면 NaN을 반환합니다. 실제로 날짜를 나타내는 문자열을 Date 생성자에 직접 전달하면 Date.parse()도 백그라운드에서 호출됩니다. 즉, 다음 코드는 이전 예제와 동일합니다.

var someDate = new Date('May 25, 2004')
Date.UTC() 메서드는 다음과 같은 날짜도 반환합니다. 밀리초이지만 값을 구성할 때 Date.parse()와 다른 정보를 사용합니다. Date.UTC()의 매개변수는 연도와 0 기반 월입니다(1월은 0, 2월은 1 등). 날짜(1~31), 시(0~23), 분, 초, 밀리초입니다. 이러한 매개변수 중 처음 2개(연도 및 월)만 필요합니다. 해당 월의 일수가 제공되지 않으면 일수가 1로 간주되고, 다른 매개변수가 생략되면 일수가 0으로 간주됩니다.

코드 복사 코드는 다음과 같습니다.

// GMT 시간 0:00 2000년 1월 1일
　var y2k = new Date(Date.UTC(2000, 0));
　//GMT 시간 2005년 5월 5일 오후 5시 55분 55초
　var allFives = new Date (Date.UTC (2005,4,5,17,55,55));
Date.parse()를 모방하는 것처럼 Date 생성자도 Date.UTC()를 모방하지만 한 가지 분명한 차이점이 있습니다. 날짜와 시간은 모두 GMT가 아닌 현지 시간대를 기준으로 합니다. 이전 예제는 다음과 같이 다시 작성할 수 있습니다.

// 현지 시간 2000년 1월 1일 0시
var y2k = new Date(2000,0)
// 현지 시간 2005년 5월 5일 오후 5시 55분 55초
　var allFives = new Date(2005,4,5,17,55,55)

Date 유형에는 날짜를 문자열로 형식화하기 위한 몇 가지 메서드도 있습니다.

● toDateString() - 요일, 월, 일을 구현별 형식으로 표시합니다. 및 연도

● toTimeString() - 구현별 형식으로 시, 분, 초 및 시간대를 표시합니다.

● toLocaleDateString() - 요일, 지역별 형식으로 표시합니다. 일 및 연도

● toLocaleTimeString() - 구현별 형식으로 시, 분, 초 표시

● toUTCString() - 구현별 형식으로 UTC 완료 날짜

위 문자열 형식 지정 방법의 출력도 브라우저마다 다르므로 사용자 인터페이스에 일관된 날짜 정보를 표시하는 데 어떤 방법도 사용할 수 없습니다.

다음은 모두 Date 유형의 메소드입니다.

방법	설명
날짜()	현재 날짜의 날짜와 시간을 반환합니다.
getDate()	Date 객체에서 해당 월의 일자(1~31)를 반환합니다.
getDay()	Date 객체에서 요일(0~6)을 반환합니다.
getMonth()	Date 객체에서 월(0~11)을 반환합니다.
getFullYear()	Date 객체에서 연도를 4자리 숫자로 반환합니다.
getYear()	대신 getFullYear() 메소드를 사용하세요.
getHours()	Date 객체의 시간(0~23)을 반환합니다.
getMinutes()	Date 객체의 분(0~59)을 반환합니다.
getSeconds()	Date 객체의 초 수를 반환합니다(0 ~ 59).
getMilliseconds()	Date 객체의 밀리초(0 ~ 999)를 반환합니다.
getTime()	1970년 1월 1일 이후의 밀리초 수를 반환합니다.
getTimezoneOffset()	현지 시간과 그리니치 표준시(GMT)의 시차를 분 단위로 반환합니다.
getUTCDate()	세계시를 기준으로 Date 객체에서 해당 월의 일자(1~31)를 반환합니다.
getUTCDay()	세계시를 기준으로 Date 객체로부터 요일(0~6)을 반환합니다.
getUTCMonth()	Date 객체에서 세계시를 기준으로 월(0~11)을 반환합니다.
getUTCFulYear()	세계시를 기준으로 Date 객체에서 4자리 연도를 반환합니다.
getUTCHours()	Date 객체의 시간을 표준시(0~23)에 따라 반환합니다.
getUTCMinutes()	Date 객체의 분을 표준시(0~59)에 따라 반환합니다.
getUTCSeconds()	Date 객체의 초(0~59)를 표준시에 맞춰 반환합니다.
getUTCMilliseconds()	Date 객체의 밀리초(0 ~ 999)를 표준시에 따라 반환합니다.
parse()	1970년 1월 1일 자정부터 지정된 날짜(문자열)까지의 밀리초 수를 반환합니다.
setDate()	Date 객체에 해당 월의 날짜(1~31)를 설정합니다.
setMonth()	Date 객체에 월(0~11)을 설정합니다.
setFullYear()	Date 객체에 연도(4자리)를 설정합니다.
setYear()	대신 setFullYear() 메소드를 사용하세요.
setHours()	Date 객체에 시간(0~23)을 설정합니다.
setMinutes()	Date 객체에 분(0~59)을 설정합니다.
setSeconds()	Date 객체에 초를 설정합니다(0~59).
setMilliseconds()	Date 객체에 밀리초(0 ~ 999)를 설정합니다.
setTime()	날짜 개체를 밀리초 단위로 설정합니다.
setUTCDate()	Date 객체(1~31)에 세계시를 기준으로 날짜를 설정합니다.
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds()	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource()	返回该对象的源代码。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString()	把 Date 对象的日期部分转换为字符串。
toGMTString()	请使用 toUTCString() 方法代替。
toUTCString()	根据世界时，把 Date 对象转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
UTC()	根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

함수 유형

JavaScript에서 가장 흥미로운 것은 함수라고 생각합니다. 그리고 재미의 원천은 함수가 실제로 객체라는 것입니다. 각 함수는 Function 유형의 인스턴스이며 다른 참조 유형과 동일한 속성 및 메서드를 갖습니다. 함수는 객체이므로 함수 이름은 실제로 함수 객체에 대한 포인터이며 함수에 바인딩되지 않습니다.

함수는 일반적으로 다음 예와 같이 함수 선언 구문을 사용하여 정의됩니다.

코드 복사 코드

function sum(num1,num2)
{
return num1 num2
}

이는 다음과 같습니다. 다음 함수 표현식 정의 방법은 거의 동일합니다.

코드 복사 코드는 다음과 같습니다.

var sun = function(num1 ,num2){
return num1 num2;
};

　 위 코드는 변수 sum을 정의하고 함수로 초기화합니다. function 키워드 뒤에는 함수 이름이 없습니다. 이는 함수 표현식을 사용하여 함수를 정의할 때 함수 이름을 사용할 필요가 없기 때문입니다. 함수는 sum 변수를 통해 참조될 수 있습니다. 또한, 다른 변수를 선언할 때와 마찬가지로 함수 끝에 세미콜론이 있다는 점에 유의하세요.

함수를 정의하는 마지막 방법은 Function 생성자를 사용하는 것입니다. 함수 생성자는 여러 개의 매개변수를 받을 수 있지만 마지막 매개변수는 항상 함수 본문으로 간주되고 이전 매개변수는 새 함수의 매개변수를 열거합니다.

　var sum = Function('num1','num2','return num1 num2'); //이 방법은 권장되지 않습니다
함수 이름은 함수에 대한 포인터일 뿐이므로 함수는 이름 객체에 대한 포인터를 포함하는 다른 변수와 다르지 않습니다. 즉, 함수에 여러 이름이 있을 수 있습니다. 예:

코드 복사 코드는 다음과 같습니다.

함수 sum(num1,num2)
{
return num1 num2;
}
alert(sum(10,10)) //20
var anotherSum = sum;
alert(anotherSum(10,10)); //20
sum = null
alert(anotherSum(10,10));
참고: 괄호 없이 함수 이름을 사용하면 함수를 호출하는 것이 아니라 함수 포인터에 액세스합니다.

함수 선언과 함수 표현
지금까지는 함수 선언과 함수 표현을 구분하지 못했습니다. 실제로 파서가 실행 환경에 데이터를 로드할 때 함수 선언과 함수 표현식을 동일하게 처리하지 않습니다. 파서는 코드를 실행하기 전에 먼저 함수 선언을 읽고 이를 사용 가능(액세스 가능)하게 만듭니다. 함수 표현식의 경우 파서가 해당 코드 줄에 도달할 때까지 실제로 해석 및 실행되지 않습니다.

코드 복사 코드는 다음과 같습니다.

alert(sum(10,10)) ;

function sum(num1,num2)
{
return num1 num2;


　위 코드는 정상적으로 실행될 수 있습니다. 코드가 실행되기 전에 파서는 이미 함수 선언을 읽고 이를 실행 환경에 추가했기 때문입니다. 위의 함수 선언을 아래 예시와 같이 변수 초기화로 변경하면 실행 시 오류가 발생하게 됩니다.

코드 복사 코드는 다음과 같습니다. alert(sum(10,10)) ;

var sum = function(num1,num2)

{
return num1 num2;


　Function as value
자바스크립트 자체의 함수 이름이기 때문입니다. 는 변수이므로 함수를 값으로 사용할 수도 있습니다. 즉, 매개변수처럼 함수를 다른 함수에 전달할 수 있을 뿐만 아니라 다른 함수의 결과로 함수를 반환할 수도 있습니다.

코드 복사

코드는 다음과 같습니다. function callSomeFunction(someFunction, someArgument) {

return someFunction(someArgument)

}


이 함수는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 함수여야 하고, 두 번째 매개변수는 함수에 전달되는 값이어야 합니다. 그런 다음 다음 예시와 같이 함수를 전달할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

function add(num)
{
return num 10;
}
var result = callSomeFunction(add,10)
alert(result); 20

물론, 다른 함수에서 함수를 반환하는 것도 가능하며, 이 역시 매우 유용한 기술입니다.

코드 복사 코드는 다음과 같습니다.

function createSumFunction()
{
return function(num1,num2){
return num1 num2;
}
var sumFunction = createSumFunction()
alert(sumFunction(10,10) ); / /20

함수 내부 속성
함수 내에는 두 가지 특수 개체, 즉 인수와 this가 있습니다. 그 중 인수는 함수에 전달되는 모든 매개변수를 포함하는 배열형 객체이며, 길이 속성을 사용하여 전달되는 매개변수 수를 결정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

function sayHi()
{
alert(arguments.length); //2
alert(arguments[0] ',' 인수[1]) //hello,world
}
sayHi('hello' ,'world');

인수의 주요 목적은 함수 매개변수를 저장하는 것이지만 이 개체에는 이 인수 개체를 소유하는 함수에 대한 포인터인 callee라는 속성도 있습니다. 아래의 매우 고전적인 계승 함수를 살펴보세요.

코드 복사 코드는 다음과 같습니다.

함수 계승(숫자)
{
if(num <= 1){
return 1;
} else {
return num * 계승(숫자-1);
}
}

함수에 이름이 있고 이름이 변경되지 않는 경우 일반적으로 계승 함수를 정의하려면 위 코드와 같이 재귀 알고리즘을 사용해야 합니다. 미래에는 이 정의에 문제가 없습니다. 하지만 문제는 이 함수의 실행이 함수 이름인 계승(factorial)과 밀접하게 결합되어 있다는 것입니다. 이러한 긴밀한 결합 현상을 제거하기 위해 다음과 같이 Argument.callee를 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다. 다음: 🎜>

function Factorial(num)

{
if(num <= 1){
return 1;
} else {
num * 인수 반환 .callee (num-1);
}
}


다시 작성된 이 계승() 함수의 함수 본문에서 함수 이름 계승은 더 이상 인용되지 않습니다. 이렇게 하면 함수를 참조할 때 어떤 이름을 사용하더라도 재귀 호출이 정상적으로 완료된다는 것을 보장할 수 있습니다. 예:

코드 복사 코드는 다음과 같습니다.

var trueFactory = 계승;

factorial = function(){
return 0;
}
alert(trueFactory(5)) //120
alert(5));


함수 내부의 또 다른 특수 개체는 this입니다. 이는 작업을 수행하는 함수 데이터를 참조하거나 함수가 실행되는 범위라고 할 수도 있습니다. 웹 페이지의 전역 범위 범위 내에서 함수가 호출되면 이 개체는 창을 참조합니다. 아래 예를 보세요.

코드를 복사하세요. 코드는 다음과 같습니다.

window.color = 'red';

var o = {color:'blue'};

function sayColor()
{
alert(this.color); }

sayColor(); //빨간색
o.sayColor = sayColor;
o.sayColor(); //파란색


위 함수 sayColor()는 전역 범위에 정의되어 있으며 이 객체를 참조합니다. 함수가 호출되기 전에는 this 값이 결정되지 않으므로 코드 실행 중에 this가 다른 개체를 참조할 수 있습니다. 전역 범위에서 sayColor()가 호출되면 전역 개체 창을 참조합니다. 즉, this.color를 평가하는 것이 window.color를 평가하는 것으로 변환되므로 결과는 'red'입니다. 이 함수를 객체 o에 할당하고 o.sayColor()를 호출하면 this는 객체 o를 참조하므로 this.color를 평가하는 것은 o.color를 평가하는 것으로 변환되어 결과는 'blue'입니다.

함수 속성 및 메서드
JavScript의 함수는 객체이므로 함수에도 속성과 메서드가 있습니다. 각 함수에는 길이와 프로토타입이라는 두 가지 속성이 포함되어 있습니다. 그중 길이 속성은 함수가 수신하기를 원하는 명명된 매개변수의 수를 나타냅니다.

코드 복사 코드는 다음과 같습니다.

function sayName(name)
{
alert(이름);
}
function sayHi()
{
alert('hi')
}

alert(sayName. length); //1
alert(sayHi.length); //0

JavaScript에서 가장 흥미로운 것은 프로토타입 속성입니다. 참조 유형의 경우 프로토타입은 모든 인스턴스 메소드가 저장되는 실제 장소입니다. toString() 및 valueOf()와 같은 메소드는 실제로 프로토타입 이름 아래에 저장되지만 해당 객체의 인스턴스를 통해 액세스됩니다. 사용자 정의 참조 유형을 생성하고 상속을 구현할 때 프로토타입 속성의 역할은 매우 중요합니다(여기서는 프로토타입 속성에 대해 자세히 소개하지 않습니다).

각 함수에는 상속되지 않은 두 가지 메서드인 apply()와 call()이 포함되어 있습니다. 이 두 메서드의 목적은 특정 범위에서 함수를 호출하는 것입니다. 이는 실제로 함수 본문에서 이 개체의 값을 설정하는 것과 같습니다. 먼저, apply() 메서드는 두 개의 매개변수를 받아들입니다. 하나는 함수가 실행되는 범위이고 다른 하나는 매개변수 배열입니다. 그 중 두 번째 매개변수는 Array의 인스턴스이거나 인수 객체일 수 있습니다. 예:

코드 복사 코드는 다음과 같습니다.

function sum( num1,num2)
{
return num1 num2;
}
function callSum1(num1,num2)
{
return sum.apply(this,arguments)
}
function callSum2(num1,num2)
{
return sum.apply(this,[num1,num2])
}
alert(callSum1(10,10)); 20
Alert(callSum2(10,10)); //20

위의 예에서 callSum1()은 sum() 함수를 실행할 때 이를 범위로 전달합니다(작동하기 때문). 전역적으로 도메인에서 호출되므로 창 개체)와 인수 개체가 전달됩니다. 그리고 callSum2는 sum() 함수도 호출하지만 이 함수와 매개변수 배열을 전달합니다.

call() 메서드는 apply() 메서드와 동일한 기능을 가지고 있지만 차이점은 매개변수를 받는 방식뿐입니다. call() 메소드의 경우 첫 번째 매개변수의 범위는 변경되지 않습니다. 변경된 점은 나머지 매개변수가 함수에 직접 전달된다는 것입니다.

코드 복사 코드는 다음과 같습니다.

function callSum2(num1,num2)
{
return sum.call(this,num1,num2);
}
alert(callSum2(10,10)) //20

매개변수는 적용되지 않습니다. 이것이 바로 ()와 call()의 진정한 힘이 발휘되는 부분입니다. 함수가 작동하는 범위를 확장하는 능력입니다. 아래 예를 보세요.

코드를 복사하세요. 코드는 다음과 같습니다.

window.color = 'red';
var o = {color:'blue'};

function sayColor()
{
alert(this.color); }

sayColor(); //빨간색
sayColor.call(this); //빨간색
sayColor.call(window); //빨간색
sayColor.call(o); //파란색


위의 예에서 sayColor.call(o)가 실행되면 함수 본문의 this 객체가 o를 가리키기 때문에 함수의 실행 환경이 달라지므로 결과가 "blue"로 표시됩니다.

참고: 각 함수에는 현재 함수를 호출한 함수를 가리키는 비표준 호출자 속성이 있습니다. 일반적으로 함수 내에서 호출 스택 추적은args.callee.caller를 통해 구현됩니다. 현재 IE, FireFox, Chrome은 모두 이 속성을 지원하지만 디버깅 목적으로 이 속성을 사용하는 것이 좋습니다.

내장 객체
JavaScript에는 전역과 수학이라는 두 가지 내장 객체가 있습니다.

글로벌 객체
글로벌(global) 객체는 자바스크립트에서 가장 특별한 객체라고 할 수 있는데, 어느 각도에서 봐도 이 객체는 존재하지 않기 때문입니다. JavaScript의 Global 개체는 어떤 의미에서는 궁극적인 "포괄 개체"로 정의됩니다. 즉, 다른 개체에 속하지 않는 속성과 메서드는 궁극적으로 해당 개체의 속성과 메서드입니다. 실제로 전역 변수나 전역 함수는 없습니다. 전역 범위에 정의된 모든 속성과 함수는 Global 개체의 속성입니다. isNaN(),parseInt(),parseFloat()등은 실제로는 모두 Global 객체의 메소드이고, Global 객체에는 다른 메소드도 포함되어 있습니다.

URI 인코딩 방법
Global 개체의 encodeURI() 및 encodeURIComponent() 메서드는 URI를 브라우저에 보낼 수 있도록 인코딩할 수 있습니다. 공백과 같은 특정 문자는 유효한 URI에 포함될 수 없습니다. 이 두 가지 URI 인코딩 방법은 브라우저가 이를 받아들이고 이해할 수 있도록 모든 유효하지 않은 문자를 특수 UTF-8 인코딩으로 대체합니다.

그 중 encodeURI()는 전체 URI(예: http://www.test.com/test value.html)에 주로 사용되는 반면, encodeURIComponent()는 특정 세그먼트에 주로 사용됩니다. URI(예: http://www.test.com/test value.html) 이전 URI의 test value.html)가 인코딩됩니다. 이들 간의 주요 차이점은 encodeURI()는 콜론, 슬래시, hellos 및 파운드 기호와 같은 URI의 일부인 특수 문자를 인코딩하지 않는다는 것입니다. encodeURIComponent()는 발견된 비표준 문자를 인코딩합니다.

코드 복사 코드는 다음과 같습니다.

var uri = "http: //www .test.com/test value.html#start";
//"http://www.test.com/test value.html#start"
alert(encodeURI(uri));
//"http://www.test.com/test value.html#start"
alert(encodeURIComponent(uri))

　　一般来说，使用encodeURIComponent()方法的时候要比使用encodeURI()更多，因为在实践中更常见的是对查询字符串参数而不是对基础URI进行编码。

　　与encodeURI()和encodeURIComponent()方法对应的两个方法分别是decodeURI()和decodeURIComponent()。其中，decodeURI()只能对encodeURI()替换的字符进行解码，同样，decodeURIComponent()只能对encodeURIComponent()替换的字符进行解码。

　　eval()方法
　　eval()方法大概是JavaScript中最强大的一个方法了，eval()方法就像是一个完整的JavaScript解析器，它只接受一个参数，即要执行的字符串。看下面的例子：

　　eval("alert('hi')");
　　这行代码的作用等价于下面这行代码：

　　alert('hi');
　　当解析器发现代码中调用eval()方法时，它会将传入的参数当做实际的JavaScript语句来解析，然后把执行结果插入到原位置。通过eval()执行的代码被认为是包含该次调用的执行环境的一部分，因此被执行的代码具有与该执行环境相同的作用域链。这意味着通过eval()执行的代码可以引用在包含环境中定义的变量，例如：

var msg = 'hello world';
eval('alert(msg)'); //hello world
　　可见，变量msg是在eval()调用的环境之外定义的，但其中调用的alert()仍然能够显示“hello world”。这是因为上面第二行代码最终被替换成了一行真正的代码。同样地，我们也可以在eval()调用中定义一个函数，然后再在该调用的外部代码中引用这个函数：

eval("function sayHi(){alert('hi')}");
sayHi();
　　注意：能够解释代码字符串的能力非常强大，但也非常危险。因此在使用eval()时必须极为谨慎，特别是在用它执行用户输入数据的情况下。否则，可能会有恶意用户输入威胁你的站点或应用程序安全的代码（即所谓的代码注入）。

　Math对象
　　与我们在JavaScript直接编写的计算功能相比，Math对象提供的计算功能执行起来要快得多。Math对象还提供了辅助完成这些计算的属性。

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

Math 객체에는 다음 메서드가 포함되어 있습니다.

方法	描述
abs(x)	返回数的绝对值。
acos(x)	返回数的反余弦值。
asin(x)	返回数的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 e 的指数。
floor(x)	对数进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y)	返回 x 和 y 中的最高值。
min(x,y)	返回 x 和 y 中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	把数四舍五入为最接近的整数。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。
toSource()	返回该对象的源代码。
valueOf()	返回 Math 对象的原始值。