JS 학습노트 1_ 기초와 상식

##1.6 가지 데이터 타입##

5 가지 기본 타입：Undefined, Null, Boolean, Number, String (그중 Undefined 는 Null 에서 파생됨)

1 가지 복잡한 타입：Object (본질적으로 순서가 없는 키 - 값 쌍의 집합)

##2.문자열을 숫자로 변환##

• Number(str): 먼저 평가한 후 변환 (먼저 valueOf, 다음 toString, 모두 실패하면 NaN). 일반적으로 기대하는 결과와 다릅니다. 예를 들어 Number('')=Number(false)=Number(null)=0 반면 var x;Number(x)=NaN... 따라서 일반적으로 다음 두 가지 방식을 사용합니다

• parseInt(str): 진수를 지정할 수 있습니다.parseInt(x, 10); 과 같은 형식을 권장합니다. 즉 항상 진수를 명시합니다

• parseFloat(str): 진수를 지정할 수 없습니다.정수를 파싱할 때는 부동 소수점이 아닌 정수를 반환합니다

##3.문자열 길이 가져오기##

String 타입의 값에는 모두 length 속성이 있습니다.str.length 는 문자열 길이의 정수 값을 반환합니다. 다른 함수를 통해 문자열 길이를 가져오는 것이 아닙니다

##4.값 전달과 주소 전달##

함수 매개변수 전달은 모두 값 전달입니다

##5.스코프 체인##

본질적으로스택이며, 각 층의 변수 객체를 저장합니다 (컴파일러의 심볼 테이블 포인터 스택과 유사). 변수 객체는 해당 층의 모든 변수와 함수에 대한 액세스 권한을 보유합니다. 해당 층이 함수인 경우, 변수 객체는 arguments 객체입니다. 스택 탑은 현재 실행 중인 컨텍스트 환경에 해당하는 변수 객체이며, 스택 바닥은 글로벌 실행 환경에 해당하는 변수 객체입니다.

##6.스코프##

블록 레벨 스코프는 없고, 함수 스코프가 있습니다

##7.Object 객체를 생성하는 2 가지 방법##

1. var obj = new Object();obj.attr = value;

전통적인 방식.생성자를 호출하여 객체를 생성합니다

2. var obj = {attr1 : value1, attr2 : value2} 또는 var obj = {"attr1" : value1, "attr2" : value2}

객체 리터럴 표기법.속성명은 문자열일 수 있습니다

주의:

1. 속성명에 모호함이 있는 경우 (예:null, var 등) 를 제외하고, 일반적으로 문자열을 속성명으로 사용하지 마십시오.물론 이는 습관적 제약입니다

2. 객체 리터럴 방식으로 객체를 정의할 때,생성자는 호출되지 않습니다

##8.속성 값에 액세스하는 두 가지 방법##

1. obj.attr

2. obj["attr"] 장점은 변수를 통해 속성에 액세스할 수 있다는 것입니다.예:var attrName = "attr";obj[attrName] 더 유연합니다

##9.배열의 선언과 초기화##

1. var arr = new Array(value1, value2...);

2. var arr = Array(...);new 를 생략할 수 있습니다

3. 배열 리터럴:var arr = [value1, value2...];

주의:배열 리터럴로 배열을 정의할 때도생성자는 호출되지 않습니다

##10.배열 관련 함수##

부록 참조

##11.함수 선언과 함수 표현식의 차이##

1. function fun(){...} js 엔진은 소스 코드를 로드할 때 이 함수 객체를 생성합니다

2. var fun = function(){...} js 엔진은 실행할 때 이 함수 객체를 생성합니다

##12.함수 오버로드##

오버로드를 지원하지 않습니다.나중에 선언된 함수가 먼저 선언된 함수를 덮어씁니다.본질적으로 함수명에 여러 번 대입 연산을 수행한 것입니다 (함수명은 단지 포인터 변수일 뿐입니다)

##13.함수 내부의 특수 속성##

1. arguments.callee 함수 포인터.해당 arguments 객체를 가진 함수, 즉 현재 함수를 가리킵니다

2. this 현재 실행 환경의 참조.최상위 this 는 window 입니다

3. arguments.callee.caller 함수 포인터.현재 함수를 호출한 함수를 가리킵니다.없으면 null 을 반환합니다

주의:this 는 객체 참조 또는 함수 참조일 수 있지만,callee 와 caller 는 함수 참조만 가능합니다

##14.함수 객체의 속성과 메서드##

1. length 함수가 기대하는 이름 있는 매개변수의 수.js 에서는 함수에 임의의 수의 매개변수를 전달할 수 있습니다.형식 매개변수 외에도 arguments 를 사용하여 임의의 매개변수를 가져올 수 있기 때문입니다

2. prototype 함수의 프로토타입 객체를 가리킵니다

3. call(context, arg1, arg2...) 특정 스코프에서 함수를 호출하는 데 사용되며,객체와 함수의 긴밀한 결합을 해제합니다

4. apply(context, arguments或其它数组对象) 기능은 위와 동일하며,배열 매개변수를 지원합니다

5. bind/unbind(context, arg1, arg2...) 실행 환경 또는 매개변수를 바인드/언바인드합니다.기존 함수에서 새 함수를 생성할 수 있지만,bind 로 연속 바인드하는 것은 무효입니다 (연속 != 여러 번).예를 들어:

    function fun(){
        alert(this.data);
    }
    var obj = {
        data : 'obj_data'
    };
    var newObj = {
        data : 'new_obj_data'
    };
    fun1 = fun.bind(obj);
    fun1();
    fun2 = fun1.bind(newObj);//연속 바인드
    fun2();
    fun3 = fun.bind(newObj);//여러 번 바인드
    fun3();
   

위 코드는'obj_data', 'obj_data', 'new_obj_data'를 출력합니다.두 번째 바인드는 실패했습니다.bind 함수 내부는 call 로 구현되기 때문에,연속 바인드의 효과는 다음과 유사합니다:

    //첫 번째 바인드로 얻은 함수
    fun1 = fun.call(obj);
    //두 번째 바인드로 얻은 함수
    fun2 = fun1.call(newObj);

두 번째 바인드로 얻은 함수 내에서 fun1 내부의 this 는 확실히 newObj 를 가리키지만,fun1 내에서는this 를 사용하지 않았기 때문에 아무런 영향이 없습니다

##15.몇 가지 상식##

1. this 는 항상 ��신에 속한 객체를 가리킵니다 (당신이 누구의 속성인가,당신 내부의 this 가 누구인가)

    var obj1 = {
        data : 1,
        fun : function(){
            alert(this.data);
        }
    };
    var obj2 = {
        data : 2
    };
   
    obj1.fun();
    obj2.fun = obj1.fun;
    obj2.fun();
   

   위 코드는 1 과 2 를 출력합니다.마지막에서 두 번째 문장을 실행한 후,obj2 에 새로운 fun 속성이 추가되었으며,값은 obj1.fun 의 참조이지만,obj2.fun 은 obj2 의 속성이므로 this 는 obj2 를 가리킵니다

2. 가능한 한 생성자의 프로토타입에서 멤버 함수를 정의하십시오.생성자 내에서 직접 정의된 함수는 런타임 클로저의 오버헤드가 있기 때문입니다

3. js 에서는 작은따옴표를 사용해야 합니다.JSON 과 XML 에서는 큰따옴표만 있으므로,작은따옴표를 사용하면 이스케이프를 피할 수 있습니다

4. 가능한 한 변수 선언과 동시에 초기화하십시오.undefined 가 선언되지 않음을 나타내도록 구분하기 위함입니다.선언되었지만 초기화되지 않은 변수와 선언되지 않은 변수에 typeof 연산자를 사용하면 모두"undefined"가 반환되기 때문입니다

5. NaN(Not a Number) 은 어떤 값과도 같지 않습니다.NaN 자체도 포함합니다.따라서 isNaN() 함수를 사용하여 판단해야 합니다

6. 참조 타입의 값에만 동적으로 속성을 추가할 수 있습니다.기본 타입의 값에 속성을 추가해도 오류는 발생하지 않지만 아무런 의미가 없습니다

7. 배열은 인덱스에 따라 자동으로 증가합니다.length 속성이 쓰기 가능하다는 점에 주의해야 합니다.즉 배열 길이를 동적으로 설정할 수 있습니다.예를 들어 꼬리 요소를 잘라내는 등

8. 함수명은 단지 포인터 변수일 뿐입니다.function fun{...} fun = null; 은 참조 관계만 끊었을 뿐,함수 본체는 파괴되지 않았습니다

##부록##

###1.기본 데이터 타입###

1. Undefined 정의되었지만 초기화되지 않은 객체의 기본값

2. Null 빈 객체 포인터를 나타냅니다.따라서 typeof 로 검사하면 object 가 반환됩니다

3. Boolean 불리언 값.Boolean() 변환 함수에 주의하십시오.규칙은 다음과 같습니다:

4. true/false ~ 변하지 않음

5. 비어 있지 않은 문자열/빈 문자열 ~ true/false

6. 0 이 아닌 숫자/0 과 NaN ~ true/false

7. 모든 객체/null ~ true/ false

8. undefined ~ false

위 규칙은 매우중요합니다.if 조건은 자동으로 Boolean() 변환을 적용하며,if(obj) 는 js 코드에서 매우 흔하기 때문입니다.많은 경우 흐름 제어 오류는 if 조건의 자동 변환으로 인해 발생합니다

4. Number 수치.js 에서 +0 과 -0 은 같으며,NaN 에 주의하십시오.그것은 어떤 것과도 같지 않으며,자신도 포함합니다.또한 n 보다 크지도 않고 n 이하도 아닙니다.Number 변수는 toString() 함수를 지원합니다.수치 문자열의 진수 변환에 사용할 수 있습니다.예를 들어 var num = 17;num.toString(16) 은"11"을 반환합니다

5. String 문자열.문자열의 불변성에 주의하십시오.대량의 연결 작업을 수행할 때는 배열 + join 을 사용하고 루프 + 를 사용하지 마십시오

###2.Object 타입 변수의 속성과 메서드###

1. Constructor 생성자에 대한 참조를 저장합니다

2. hasOwnProperty(porpertyName) 현재 객체가 지정된 속성을 가지고 있는지 확인하는 데 사용합니다 (여기서"속성"에는 속성과 메서드가 포함됩니다)

3. isPrototypeOf(obj) 현재 객체가 지정된 객체의 프로토타입인지 확인하는 데 사용합니다

4. propertyIsEnumerable(propertyName) 지정된 속성이 열거 가능한지 감지하는 데 사용합니다

5. toLocaleString() toString() 함수와 동일하지만 지역 특성이 추가되었습니다

6. toString() 객체의 문자열 표현을 반환합니다

7. valueOf() 객체의 문자열,수치 또는 불리언 표현을 반환합니다

###3.일반적인 참조 타입###

1. Function js 에서 함수도 객체이며,매우 유연합니다.예를 들어:

    var load = window.onload;
    window.onload = function(){
        //do something
        load();//就是这么简单、添一对括号马上执行
    }
   

2. Array 배열 타입의 조작 함수가 가장 많습니다

3. 스택 함수:push() 배열末尾에 한 항목 삽입,pop() 末尾 요소 스택에서 꺼냄

4. 큐 함수:push() 위와 동일,shift() 첫 번째 요소 큐에서 꺼내어 첫 번째 요소 반환;역큐 (큐 머리에서 들어가고,큐 꼬리에서 나옴) unshift()/pop()

5. 정렬 함수:sort(fun) 매개변수 없이 문자열 비교하여 오름차순 정렬,매개변수 있음 사용자 정의 비교 함수 전달하여 양수/음수/0 반환;reverse() 순서 반전

   주의:sort()/reverse() 는 모두 원본 배열을 직접 변경하며,sort() 의 기본 구현 방식은그리 과학적이지 않습니다.[1, 3, 10, 5] 를 정렬한 결과는 [1, 10, 3, 5] 입니다.원하는 결과를 얻으려면 사용자 정의 비교 함수를 전달해야 합니다

4. 조작 함수:

  1. arr.concat(arr1, arr2\.\.\.) 연결하여 새 배열 형성

  2. arr.slice() 문자열의 substring 과 유사한 자르기 효과로,사용법도 동일

  3. arr.splice() 배열 중간에 항목 삽입.splice(startIndex, num, item1, item2\.\.\.) 는 startIndex 부터 num 항목을 각 item 으로 교체함을 의미합니다.첫 두 매개변수만 있으면 startIndex 부터 num 항목을 빈 것으로 교체 (즉 삭제) 함을 의미합니다.splice 를 사용하여 삭제/교체/삽입 작업을 구현할 수 있습니다.

      *주의*:splice 함수도 원본 배열을 직접 변경합니다.

5. 위치 함수:indexOf(value) 와 lastIndexOf(value).value 의 인덱스 위치를 검색하며,찾지 못하면 -1 을 반환합니다.내부에서는 엄격 동등 연산자 (===) 를 사용합니다

6. 반복 함수:every(), filter(), forEach(), map(), some() 는 모두 배열의 각 항목에 대해 지정된 메서드를 실행합니다.IE9+ 가 지원하며 그다지 일반적이지 않아 여기서는 자세히 설명하지 않습니다

7. 환원 함수:reduce(), reduceRight() 는 소개하지 않습니다.이유는 위와 동일

3. Date 타입:관련 내용이 많으므로W3School 참조

4. RegExp 타입:var regex = /^cat$/i; 정규 표현식 (RegExp 타입) 생성.지원되는 모드에는 g, i, m 이 있으며 각각 글로벌 모드,대소문자 무시 모드,멀티라인 모드를 나타냅니다.물론 new RegExp(strRegex, strMode) 도 사용할 수 있지만,이런 방식을 사용할 이유가 있을까요?

js 는 정규식 캡처를 지원합니다.var matches = regex.exec(text); matches[0], matches[1]... 를 통해 캡처된 내용을 가져옵니다

일반 정규식 매칭:regex.test(text) 는 true/false 를 반환합니다

5. 기본 래퍼 타입:Boolean, String, Number.항상 마주치고 있었지만,눈치채지 못했을 뿐입니다.예를 들어:

    var str = 'smilestome';
    var str_ = str.substring(1);
   

위 코드는 다음과 동등합니다:

    var s1 = new String('smilestome');//래퍼 타입 인스턴스 생성
    var s2 = s1.substring(1);//인스턴스에서 해당 메서드 호출
    s1 = null;//인스턴스 파괴

자동 박싱/언박싱.기본 데이터 타입을 더 사용하기 ��게 하기 위함이지만,주의 가 필요합니다:new String() 과 String() 변환 메서드는 다릅니다.전자는 object 타입을 반환하고,후자는 string 타입을 반환합니다.이러한 차이를 고려할 때,혼용하면 불필요한 문제를 일으키므로,명시적으로 래퍼 타입을 생성할 이유가 없습니다.Boolean, Number 도 이와 유사합니다.