> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 커널의 기본 개념_기본 지식

JavaScript 커널의 기본 개념_기본 지식

WBOY
풀어 주다: 2016-05-16 18:00:51
원래의
1083명이 탐색했습니다.

이 장에서는 주로 JavaScript의 데이터 유형(기본 유형 및 참조 유형), 변수(변수의 범위 포함) 및 연산자(주로 문자 그대로 이해하기 쉽지 않은 일부 일반적인 연산자)에 대해 설명합니다. JavaScript에서는 "모든 것이 객체"이기 때문에 이러한 기본 개념을 익히면 독자는 범위, 객체 호출, 클로저, 커링 등과 같은 더 어려운 개념을 쉽게 이해할 수 있습니다.

데이터 유형

프로그래밍 경험이 있는 독자라면 C나 Java와 같은 언어에서는 데이터가 입력된다는 점을 알아야 합니다. 예를 들어 사용자 이름을 나타내는 데 사용됩니다. 속성은 문자열이고, 직원의 나이는 숫자입니다. UI의 스위치 버튼을 나타내는 데이터 모델은 부울 값 등입니다. 숫자는 부동 소수점 숫자, 정수, 정수로 나눌 수도 있습니다. 긴 정수형과 짧은 정수형으로 나눌 수 있습니다. 즉, 모두 언어에서 데이터의 값 형식을 나타냅니다.

JavaScript의 데이터 유형은 기본 데이터 유형과 객체 유형의 두 가지 유형으로 나뉩니다. 객체 유형에는 객체, 배열, 함수가 포함됩니다(사실 함수, 배열 등도 객체이므로 이에 대해 논의하겠습니다). 자세한 내용은 나중에 참조하세요).

1.1.1 기본 데이터 유형

JavaScript에는 문자열, 숫자, 부울(boolean)의 세 가지 기본 데이터 유형이 있습니다. 다음은 몇 가지 간단한 예입니다.

코드 복사 코드는 다음과 같습니다.
var str = "Hello, world"; //String
var i = 10;//Integer
var f = 2.3;//부동소수점

var b = true;//부울 값

볼 수 있습니다 변수의 값과 변수의 유형은 각각
코드 복사 코드는 다음과 같습니다.

print(str);
print(i);
print(f);
print(b)

print( typeof i);
print(typeof f);
print(typeof b);

여기에 사용된 print() 함수는 Rhino 인터프리터의 함수입니다. 최상위 개체는 문자열을 인쇄하는 데 사용할 수 있습니다. 일반적으로 프로그래머는 유사한 작업을 수행하기 위해 경고()를 사용합니다. 경고()는 브라우저 메서드의 최상위 개체(창)입니다. .

Hello, world
10
2.3
true

string
number
number
Boolean
JavaScript에서는 모든 숫자 , 여부 정수 부동 소수점이며 "숫자" 기본 유형에 속합니다. typeof는 단항 연산자이며 이 장의 다른 섹션에서 설명합니다.


1.1.2 객체 유형
여기서 언급하는 객체는 객체 자체가 아니라 유형에 대한 자세한 내용은 3장 토론에서 다루겠습니다. 여기서 객체에는 객체(속성 모음, 즉 키 값의 해시 테이블), 배열(정렬된 목록) 및 함수(실행 코드 포함)가 포함됩니다.

객체 유형은 복합 데이터 유형입니다. 기본 요소는 기본 데이터 유형으로 구성됩니다. 예를 들어 객체 유형의 값은 다른 것일 수 있습니다. 객체 유형 인스턴스를 예로 들어 보겠습니다.


코드 복사 코드는 다음과 같습니다.
var str = "안녕하세요, 세계";
obj.str = str
obj.num = 2.3; ("foo", "bar", "zoo" );

var func = function(){
print("나는 함수입니다.")
}

보시다시피 객체에는 obj.str, obj.num과 같은 속성이 있으며 이러한 속성의 값은 기본 유형일 수 있지만 실제로는 더 복잡할 수 있습니다. 해당 유형을 살펴보겠습니다. 🎜>


코드 복사
코드는 다음과 같습니다. print(typeof obj) print (typeof array); print(typeof func);
//
object
object
function


을 출력합니다. print(typeof array)는 객체를 인쇄합니다. 실제로 객체와 배열 사이의 경계는 분명하지 않지만(사실 동일한 유형입니다), 이 책의 다음 장에서는 그 동작이 매우 다릅니다. 두 가지 중요한 데이터 유형을 별도로 사용합니다.


2.1.3 둘 사이의 변환


은 Java의 기본 데이터 유형에 대한 자동 박싱 및 언박싱과 유사하며 기본 데이터 유형에 대해서도 유사한 작업이 있습니다. 일부 작업을 수행할 때 개체가 일시적으로 래핑되고 작업이 완료된 후 개체가 자동으로 해제됩니다. 몇 가지 예를 들어 설명할 수 있습니다.



코드 복사
코드는 다음과 같습니다.
var str = "JavaScript Kernal";
print(str.length);//Print 17

str은 typeof 연산자를 통해 해당 유형이 "string"임을 알 수 있습니다. " 및 :

코드 복사 코드는 다음과 같습니다.
var str2 = new String ("JavaScript Kernal") ;
print(typeof str2);

str2의 유형이 "객체"라는 것을 알 수 있습니다. 즉, 둘이 동일하지 않은데 왜 우리는 str.length를 사용하여 str의 길이를 얻으십니까? 사실 위에서 str.length를 사용하면 JavaScript는 자동으로 str의 내용으로 임시 String 객체를 래핑한 다음 객체의 length 속성을 얻고 마지막으로 임시 객체를 얻습니다. 출시됩니다.

이러한 방식으로 객체가 기본 유형으로 변환됩니다. 객체의 valueOf() 메소드를 호출하여 객체의 값을 가져오고 컨텍스트 유형과 일치하면 해당 값을 사용합니다. valueOf가 값을 얻을 수 없으면 객체의 toString() 메서드를 호출해야 하고, 컨텍스트가 숫자인 경우 문자열을 숫자 값으로 변환해야 합니다. JavaScript는 약한 형식이므로 JavaScript 엔진은 컨텍스트를 기반으로 개체의 형식을 "추측"해야 하며, 이로 인해 JavaScript는 컴파일된 언어보다 효율성이 떨어집니다.

valueOf()의 함수는 객체의 값을 상황별 요구 사항을 충족하는 기본 유형으로 변환하는 것입니다. toString()은 이름에 충실하며 객체에 해당하는 문자열을 인쇄할 수 있습니다. 물론 전제는 Object의 toString() 메서드를 "다시 "포함"한다는 것입니다.

사실 이 변환 규칙은 많은 문제를 야기합니다. 예를 들어 다음과 같이 비어 있지 않은 모든 객체는 부울 환경에서 true로 변환됩니다.
코드 복사
코드는 다음과 같습니다. function ConvertTest(){ if(new Boolean(false) && new Object() &&
new String("") && new Array()){
print("부울로 변환")
}
}
convertTest();//부울로 변환


초보자는 JavaScript의 유형 변환 규칙에 대해 쉽게 혼란스러워할 것입니다. 실제로 규칙을 익히기만 하면 이러한 이상한 작성 방법이 매우 어색해 보일 것입니다. 코드를 개선하려면 예제를 통해 이러한 규칙을 알아보세요.


코드 복사
코드는 다음과 같습니다. var x = 3; var y = x "2";// => 32 var z = x 2;// => 5
print(y );
print (z);


일반적으로 JS 코드에서 다음과 같은 코드를 찾을 수 있습니다.



코드 복사

코드는 다음과 같습니다: if(datamodel.item){ //do Something... }else{ datamodel.item = new Item(); }
이러한 작성 방식은 실제로 더 깊은 의미를 갖습니다.

datamodel.item은 객체(문자열, 숫자 등)라는 점에 유의해야 합니다. ), 부울 표현식 공식이 필요한 경우 여기서 유형 변환이 수행됩니다. JavaScript에서 컨텍스트에 부울 값이 필요한 경우 엔진은 자동으로 개체를 부울 값으로 변환합니다. 변환 규칙은 객체가 비어 있지 않으면 true로 변환되고, 그렇지 않으면 false로 변환된다는 것입니다. 따라서 다음과 같은 축약된 형식을 취할 수 있습니다.

전통적인 프로그래밍 언어(강력한 형식)에서는 다음이 필요합니다.





코드 복사

코드는 다음과 같습니다: if(datamodel.item != null){ //뭔가를 하세요... }else{ datamodel.item = new Item() }


2.1.4 유형 판단

앞서 JavaScript 기능에 대해 이야기할 때 JavaScript는 약한 유형의 언어라고 했지만 때로는 필요합니다. 예를 들어, 함수 매개변수는 다른 함수일 것으로 예상됩니다.



코드 복사

코드는 다음과 같습니다. functionhandleMessage(message,handle){returnhandle(message);}handleMessage를 호출하는 함수에 의해 핸들이 전달된 경우 함수가 아닌 경우 JavaScript 엔진은 오류를 보고하므로 호출하기 전에 판단해야 합니다.



코드 복사

코드는 다음과 같습니다.
functionhandleMessage(message,handle){
if(typeofhandle == "function"){
returnhandle(message)
}else{
throw new Error("두 번째 인수는 함수여야 합니다.");
}
}

그러나 다음 상황과 같이 typeof가 항상 유효한 것은 아닙니다.

코드 복사 코드는 다음과 같습니다.
var obj = {};
var array = ["one", "two", "Three " , "four"];

print(typeof obj);//object
print(typeof array); //object

실행 결과는 object obj의 typeof를 보여줍니다. 및 array array 값은 모두 "객체"이므로 정확하게 판단할 수는 없습니다. 이때, instanceof를 호출하여 추가 판단을 내릴 수 있습니다:

print(obj instanceof Array);//false
print(array instanceof Array);//true
코드의 첫 번째 줄은 false를 반환하고 두 번째 줄은 true를 반환합니다. 따라서 판단을 위해 연산자 유형과 연산자 인스턴스를 결합할 수 있습니다.

2.2 변수

변수, 즉 값이 이름과 연관되어 있으며 나중에 해당 값을 변수를 통해 참조할 수 있습니다. 🎜>

코드 복사 코드는 다음과 같습니다.
var str = "Hello, World"
var num = 2.345;
다음번에 "Hello, Wrold" 문자열을 참조하여 특정 작업을 수행하려면 변수 str만 사용하면 됩니다. 마찬가지로 10*을 사용할 수 있습니다. num은 10*2.345를 나타냅니다. 변수의 목적은 변수에 값을 "저장"하는 것입니다.

2.2.1 기본 유형과 참조 유형

이전 섹션에서는 숫자, 부울 값과 같은 기본 유형이 메모리에 고정되어 있음을 소개했습니다. , 변수를 통해 기본 유형의 데이터에 직접 액세스합니다. 객체, 배열 및 함수와 같은 참조 유형의 경우 원칙적으로 크기에 제한이 없으므로 참조 자체에 액세스하여 액세스합니다. 개체.

기본 유형과 참조 유형의 차이는 비교적 분명합니다. 몇 가지 예를 살펴보겠습니다.


코드 복사코드는 다음과 같습니다.
var x = 1;//숫자 x, 기본 유형
var y = x;//숫자 y, 기본 유형
print(x) ;
print(y);

x = 2;//x 값을 수정합니다

print(x);//x 값이 2가 됩니다.
print( y);/ /y 값은 변경되지 않습니다
실행 결과는 다음과 같습니다.

1

1

2

1

이러한 작업 결과는 예상 범위 내에 있어야 합니다. 배열의 길이는 고정되어 있지 않으며 동적으로 추가할 수 있으므로 참조 유형의 예를 살펴보겠습니다. 또는 삭제된 경우 배열은 참조 유형입니다.


코드 복사 코드는 다음과 같습니다.
var array = [1,2,3,4,5];
var arrayRef = array;

array.push(6)
print(arrayRef);
참조는 주소를 가리킨다. 즉, 참조는 참조 자체를 가리키는 것이 아니라, 참조에 해당하는 실제 객체를 가리킨다. 따라서 array가 가리키는 배열을 수정하면 arrayRef가 동일한 객체를 가리키므로 동작 효과는 다음과 같습니다.

1,2,3,4,5,6

2.2 .2 변수 범위

변수가 정의되는 영역은 해당 범위입니다. 전역 변수는 전역 범위를 갖습니다. 예를 들어 함수 내부에 선언된 변수는 지역 범위를 가지며 함수 외부에서 직접 액세스할 수 없습니다. 의. 예:


코드 복사 코드는 다음과 같습니다.
var 변수 = "out" ;

function func(){
var 변수 = "in";
print(변수);//print "in"
}

func();
print (변수);//Print "out"
함수 내에서 var 키워드가 필요하다는 점에 유의하세요. var 키워드를 작성하지 않고 변수를 사용하는 경우 기본 동작은 다음과 같습니다. 전역 개체 예:


코드 복사 코드는 다음과 같습니다.
var 변수 = "out";

function func(){
variable = "in";//이 변수 앞에는 var 키워드가 없습니다.
print(variable)}

func() ;
print(variable);//전역 변수 변수가 수정되었습니다

변수는 var 키워드 없이 func 함수에서 사용되므로 기본값은 전역 개체의 변수 속성에 대해 작동하는 것입니다(변수 값을 in으로 수정). 따라서 이 코드는 다음을 인쇄합니다.

in

in



2.3 연산자

연산자는 일반적으로 간과하기 쉽지만 이상한 것이 있습니다 문법 현상 여전히 연산자의 조합 비율이나 기능으로 설명해야 할 수도 있습니다. JavaScript에서 연산자는 JS 프로그래밍 경험이 있는 많은 사람들이 여전히 혼란스러워하는 부분입니다.

이 섹션에서는 주로 다음 연산자를 설명합니다.

2.3.1 대괄호 연산자([])

[] 연산자는 배열 객체와 객체에 사용할 수 있습니다. 아래 첨자로 배열에서 값을 가져옵니다.

코드 복사 코드는 다음과 같습니다.
var array = ["one", "two", "3", "four"];
array[0]

그리고 []도 객체에 작용할 수 있습니다. 속성 값은 다음과 같이 점(.) 연산자를 통해 가져옵니다.

코드 복사 코드는 다음과 같습니다. 다음:
var object = {
field : "self",
printInfo : function(){
print(this.field)
}
}

object.field;
object.printInfo();

그런 상황을 고려하면 객체를 순회할 때 속성의 키에 대해 아무것도 없습니다. 점(.)을 통해 액세스합니까? 이때 [] 연산자를 사용할 수 있습니다:

코드 복사 코드
for(var key in object){
print(key ":" object[key])
}

실행 결과는 다음과 같습니다.

field:slef
printInfo:function (){
print(this.field)
}
2.3.2 도트 연산자(.)

도트 연산자의 왼쪽은 객체(속성 모음)이고 오른쪽은 속성 이름입니다. 왼쪽 객체의 속성인 것 외에도 오른쪽의 값도 있을 수 있다는 점에 유의해야 합니다. 오른쪽에 있는 자체 값의 개체가 됩니다.

코드 복사 코드는 다음과 같습니다.
var object = {
field : "self",
printInfo : function(){
print(this.field)
},
outter:{
inner : "내부 텍스트",
printInnerText : function(){
print(this.inner)
}
}
}

object.outter.printInnerText();

이 예제에서는 outter가 object의 속성으로 사용되는 동시에 printInnerText()의 개체입니다.

2.3.3 == 및 === 및 != 및 !==

== 연산자는 같음으로 읽고 === 연산자는 같음으로 읽습니다. 이 두 연산자 연산은 JavaScript 코드에서 자주 볼 수 있지만 그 의미는 정확히 동일하지 않습니다. 즉, 항등 연산자는 피연산자의 양쪽에서 유형 변환을 수행하지만 항등 연산자는 그렇지 않습니다. 예를 들어 설명하겠습니다.

print(1 == true);
print(1 === true)
print("" == false); === false);

print(null == undefine);
print(null === undefine)
실행 결과는 다음과 같습니다.


코드 복사 코드는 다음과 같습니다.
true
false
true
false
true
거짓

항등 및 항등 연산자의 규칙은 다음과 같습니다.

항등 연산자

피연산자의 유형이 동일한 경우 두 피연산자의 값이 동일한 것으로 판단됩니다. 같음이면 true(같음)를 반환하고, 그렇지 않으면 false(같지 않음)를 반환합니다.

피연산자의 유형이 다를 경우 다음 상황에 따라 판단됩니다.

◆ null undefine 은 같음

◆ 둘 중 하나는 숫자이고 다른 하나는 문자열이므로 문자열을 숫자로 변환하여 비교하세요

◆ 둘 중 하나가 true이면 변환하세요. 먼저 1로 변환(false인 경우 0으로 변환) 비교

◆ 한 값이 객체이고 다른 값이 숫자/문자열인 경우 toString() 또는 valueOf(를 통해 객체를 원래 값으로 변환합니다. ) method)

◆ 그 외의 경우는 바로 false를 반환

동등 연산자

피연산자의 타입이 다를 경우에는 가치 판단을 하지 않고 false를 반환

피연산자의 유형이 동일한 경우 다음 상황에 따라 판단합니다.

◆ 둘 다 숫자인 경우 값이 동일합니다. 같음(NaN은 자신과 같지 않다는 예외가 있음), 그렇지 않으면 같지 않습니다.

◆ 다른 프로그래밍 언어와 마찬가지로 문자열의 값이 같지 않으면 모두 문자열입니다. 이면 동일하지 않고 그렇지 않으면 동일합니다.

◆ 모두 부울 값이고 값은 모두 true/false이면 동일하고 그렇지 않으면 동일하지 않습니다.

◆ 두 피연산자가 동일한 객체(배열, 함수)를 참조하는 경우 완전히 같고, 그렇지 않으면 동일하지 않습니다.

◆ 두 피연산자가 동일한 객체(배열, 함수)를 참조하는 경우 ) 둘 다 null이거나 정의되지 않은 경우 동일하고, 그렇지 않으면 동일하지 않습니다.

예:

코드 복사 코드는 다음과 같습니다.
var obj = {
id : "self",
name : "object"
}

var oa = obj;
var ob = obj;

print(oa == ob);
print(oa === ob);

는 다음을 반환합니다:

true

true

객체의 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.
var obj1 = {
id : "self",
name : "object",
toString : function(){
return "객체 1"
}
}

var obj2 = "객체 1"

print(obj1 == obj2); obj2);
반환 값은 다음과 같습니다.

true

false

obj1은 객체이고, obj2는 완전히 다른 구조의 문자열입니다. 등호 연산자를 사용하여 판단하면 obj1이 최상위 개체의 toString() 메서드를 오버로드하기 때문에 두 개는 완전히 동일합니다.

!=는 !==와 같지 않지만 ==/!==의 반대입니다. 따라서 JavaScript에서는 같음/같음 및 같지 않음/같지 않음을 사용할 때 유형 변환에 주의해야 합니다. 디버깅하기 어려운 일부 버그를 피할 수 있도록 같음/같지 않음을 사용하여 판단하는 것이 좋습니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿