《 자 바스 크 립 트 모드 》 독서 노트 (2) - 기본 기교 2

전편 에 서 는 js 코드 의 기본 기 교 를 간단하게 소개 했다.그러면 이 글 은 우리 가 후속 적 인 내용 을 계속 할 것 이다. 、 for
for 순환 은 인용 수 (arguments) 와 HTML 용기 (HTML Collation) 와 같은 배열 이나 클래스 의 대상 을 옮 겨 다 니 는 데 자주 사 용 됩 니 다.보통 for 순환 모드 는 다음 과 같이 사용 합 니 다.

for(var i = 0; i < myarray.length; i++) {
    //  myarray[i]   
}

이 모델 의 문 제 는 순환 이 바 뀔 때마다 데이터 의 길 이 를 방문 해 야 한 다 는 점 이다.이러 면 안 돼.그래서:

for(var i = 0, max = myarray.length; i < max; i++) {
    //  myarray[i]   
}

우 리 는 이렇게 해서 먼저 길 이 를 저장 할 수 있다. 그러면 매번 순환 할 때마다 데이터 의 길 이 를 방문 하지 않 을 것 이다.특히 일부 DOM 작업 하에 서 접근 속도 가 매우 느리다.
다음은 단일 변수 모드 이 며, 변 수 를 순환 이외 의 곳 에 놓 을 수도 있 습 니 다.

function looper() {
    var i = 0,
        max,
        myarray = [];
    // ...
    for (i = 0,max = myarray.length; i < max; i++){
        //  myarray[i]
    }
}

이런 모델 의 장점 은 단일 변수의 모델 을 관통 하기 때문에 일치 성에 있다.결함 은 코드 를 만 들 때 전체 순환 을 붙 이 고 복사 하 는 것 이 귀 찮 습 니 다.예 를 들 어 한 함수 에서 다른 함수 로 순환 하려 면 i 와 max 를 새 함수 에 가 져 갈 수 있 도록 확보 해 야 합 니 다 (이 몇 개의 양 이 원 함수 에서 더 이상 필요 하지 않 으 면 삭제 할 수 있 습 니 다).여기 서 복 제 는 단순히 다른 곳 으로 가 는 것 이 아니 라 js 코드 재 활용 모드 를 통 해 다른 함수 에서 사용 합 니 다.
순환 의 마지막 개선 에 대해 서 는 두 가지 표현 식 대신 i + + 를 사용 합 니 다.

i = I + 1

i += 1

for 모드 가 무 거 운 두 변 수 는 작은 조작 을 이 끌 어 냈 습 니 다. 그 이 유 는:

가장 적은 변 수 를 사용 했다 (가장 많은 것 이 아니 라)

점차적으로 0 으로 줄 어 들 면 보통 빠 릅 니 다. 같은 0 이 같은 배열 의 길이 보다 비교 되 거나 0 이 아 닌 배열 과 비교 하 는 것 이 효율 적 이기 때 문 입 니 다.

첫 번 째 수 정 된 모드:

var i ,myarray = [];
for(i = myarray.length; i--;){
    //   myarray[i]
}

두 번 째 사용 while 순환:

var myarray = [],i = myarray.length;
while(i--){
    //  myarray[i]
}

　　
2. for - in 순환
 for - in 순환 은 비 배열 대상 을 옮 겨 다 니 는 데 사용 해 야 합 니 다.for - in 순환 을 사용 하 는 것 도 매 거 진 (enumeration) 이 됩 니 다.기술적 으로 for - in 순환 을 사용 하여 배열 을 옮 겨 다 닐 수 있 습 니 다 (자바 스 크 립 트 에서 배열 도 대상 이기 때 문 입 니 다). 그러나 이 배열 의 대상 이 사용자 정의 함수 로 확대 되 었 을 때 논리 적 인 오 류 를 초래 할 수 있 기 때 문 입 니 다.

var myarray = ['a','b','c','d'];
for(var i in myarray) {
    console.log(i)
    console.log(myarray[i])
}

대상 속성 을 옮 겨 다 니 며 프로 토 타 입 체인 의 속성 을 걸 러 낼 때 hasOwnProperty () 방법 을 사용 할 때 매우 중요 합 니 다.예 를 들 면:

var man = {
    hands:2,
    legs:2,
    heads:1
}

//       
//             
if(typeof Object.prototype.clone === 'undefined'){
    Object.prototype.clone = function () {};
}
//    
for(var i in man) {
    console.log(i + ':' + man[i])
}

아니면, 그래 야 네가 원 하 는 것 이다.

var man = {
    hands:2,
    legs:2,
    heads:1
}

//       
//             
if(typeof Object.prototype.clone === 'undefined'){
    Object.prototype.clone = function () {};
}

for(var i in man) {
    if(man.hasOwnProperty(i)) {
        console.log(i + ':' + man[i])
    }
}

그럼 한 마디 더 하 자 면 Object. hasOwnProperty () 방법 은 무엇 을 하 는 것 입 니까?방법 은 불 값 을 되 돌려 주 고 대상 자체 속성 에 지정 한 속성 이 있 는 지 여부 (즉, 지정 한 키 가 있 는 지 여부) 를 표시 합 니 다.이것 은 MDN 상의 표현 이다.즉, 이 방법 은 이 속성 이 다른 소스 (예 를 들 어 원형 체인 의 속성) 가 아 닌 대상 자체 의 속성 인지 알려 줄 것 이다.
다른 hasOwnProperty () 를 사용 하 는 모드 는 Object. property 에서 이 함 수 를 호출 하 는 것 입 니 다. 예 를 들 어:

for(var i in man) {
    if(Object.prototype.hasOwnProperty.call(man,i)) {
        console.log(i + ':' + man[i])
    }
}

hasOwnProperty 를 사용 하여 man 대상 을 정련 한 후에 이름 충돌 을 효과적으로 피 할 수 있 고 로 컬 변 수 를 사용 하여 비교적 긴 속성 명 을 캐 시 할 수 있 습 니 다. 예 를 들 어:

var i,
    hasOwn = Object.prototype.hasOwnProperty;

for(i in man) {
    if(hasOwn.call(man,i)) {
        console.log(i + ':' + man[i])
    }
}

주의: 엄 밀 히 말 하면 hasOwnProperty () 를 사용 하지 않 는 것 은 잘못 이 없습니다.구체 적 인 작업 과 코드 에 대한 자신 감 에 의존 하면 이 방법 을 생략 하고 순환 의 실행 속 도 를 약간 가속 화 할 수 있 습 니 다.그러나 대상 의 내용 (원형 체인 과) 을 확인 하지 못 할 경우 hasOwnProperty () 와 같은 안전 검 사 를 추가 하 는 것 이 좋다.
포맷 된 변종 이 있 지만 개인 적 으로 는 이렇게 사용 하 는 것 을 추천 하지 않 습 니 다. 가 독성 이 매우 떨 어 지기 때문에 JSlint 검 사 를 통과 할 수 없습니다.

var i,
    hasOwn = Object.prototype.hasOwnProperty;

for(i in man) if(hasOwn.call(man,i)) {
    console.log(i + ':' + man[i])
}

유일한 장점 은 괄호 하 나 를 아 끼 는 것 입 니까?
 
3. 내 장 된 원형 을 추가 하지 마 세 요.
구조 함수 의 원형 속성 을 증가 시 키 는 것 은 기능 성 을 강화 하 는 강력 한 방법 이지 만 가끔 은 이 방법 이 너무 강하 다.내장 구조 함수 (예 를 들 어 Object (), Array (), Function () 등) 의 원형 을 추가 하 는 것 은 유혹 적 이지 만 유지 가능성 에 심각 한 영향 을 미 칠 수 있 습 니 다. 이러한 방법 은 코드 를 더욱 예측 할 수 없 게 만 들 기 때 문 입 니 다.
따라서 가장 좋 은 방법 은 내 장 된 원형 에 속성 을 추가 하지 않 는 것 이다. 1. 미래의 ECMAScript 버 전이 나 JavaScript 의 구체 적 인 실현 이 이 기능 을 통 일 된 내 장 된 방법 으로 할 수 있 을 때 를 제외 하고.2. 사용자 정의 속성 이나 방법 이 존재 하지 않 을 때 검사 합 니 다.또는 서로 다른 브 라 우 저 나 같은 브 라 우 저의 서로 다른 버 전 을 통일 하기 위해 호 환 되 는 경우 존재 여 부 를 확인 하 는 것 이 전제 입 니 다.3. 문서 기록, 그리고 팀 과 명확 하 게 소통 합 니 다.
만약 위의 장면 을 만 났 다 면, 당신 은 이렇게 할 수 있 습 니 다.

if(typeof Object.prototype.myMethod !== 'function'){
    Object.prototype.myMethod = function () {
        // implementation
    }
}

　　
4. switch 모드
switch 하면 한 마디 더 하 겠 습 니 다. 많은 초보 자 들 이 if - else 의 성능 이 더 좋 은 지, 아니면 switch 의 성능 이 더 좋 은 지 고민 합 니 다.우선 구체 적 인 장면 을 버 리 고 성능 을 말 하 는 것 은 깡패 짓 이다.그 다음으로 switch 는 c + + 와 같은 언어 에서 성능 이 좀 좋아 야 합 니 다.그러나 자바 스 크 립 트 에 서 는 둘 다 거의 다 르 지 않 으 며 switch 는 의외 의 문 제 를 일 으 킬 수 있 으 므 로 if - else 를 사용 하 는 것 을 권장 합 니 다.
switch 가 더 좋 은 선택 이 라 고 확신한다 면 이렇게 할 수 있 습 니 다.

var inspect_me = 0,
    result = '';
switch (inspect) {
case 0:
    result = 'zero';
    break;
case 1:
    result = 'one';
    break;
default:
    result = 'unknow';
    break;
}

보통 형식 은 다음 과 같 습 니 다.

모든 케이스 와 switch 를 세로 로 정렬 합 니 다.

케이스 마다 코드 들 여 쓰기.

각 case 문장의 끝 에 명확 한 break 문구 가 있다.

fall - throughs (즉, 의도 적 으로 break 문 구 를 사용 하지 않 고 프로그램 이 순서대로 계속 아래로 실행 되도록 하 는 것) 를 피한다.fall - throughs 를 사용 하고 싶다 면 코드 에서 fall - throughs 를 사용 하 는 것 이 가장 좋 은 방법 이 라 고 확신 하 십시오. 다른 사람 이 이 코드 를 읽 을 때 오류 라 고 생각 하기 때 문 입 니 다.

default 문 구 를 switch 의 끝 으로 합 니 다. 상기 장면 이 일치 하지 않 을 때 기본 적 인 결 과 를 드 립 니 다.

 
5. 암시 적 유형 전환 사용 을 피한다.
프로그램 에서 = = 또는! = 을 사용 하지 마 세 요.사용 하 세 요.자 바스 크 립 트 는 비교 문 구 를 사용 할 때 암시 적 형식 변환 을 실행 하기 때문이다.전환 하 는 장면 이 네가 아 는 것 보다 훨씬 많 을 것 이다.
 
6. eval () 사용 을 피한다.
eval () 은 마귀 입 니 다. 당신 의 꿈 을 이 룰 수도 있 고 영혼 을 빼 앗 을 수도 있 습 니 다.따라서 코드 에 eval () 을 사용 하 는 것 을 피하 십시오.
이 함 수 는 임의의 문자열 을 자 바스 크 립 트 코드 로 실행 할 수 있 습 니 다.토론 할 코드 가 미리 컴 파일 되 어 있 을 때 (동적 으로 실 행 될 때 결정 되 는 것 이 아니 라) eval () 을 사용 할 이유 가 없습니다.코드 가 실 행 될 때 동적 으로 생 성 된다 면 eval () 대신 더 좋 은 방법 도 있 습 니 다.예 를 들 면:

//    
var property = 'name';
alert(eval("obj." + property));

//      
alert(obj[property])

eval () 을 사용 하 는 것 도 일부 안전 위험 을 포함 합 니 다. 이렇게 하면 변 경 된 코드 (예 를 들 어 네트워크 에서 온 코드) 를 실행 할 수 있 기 때 문 입 니 다.
한 가지 더 명심 해 야 할 것 은setInterval (), setTimeout (), function () 등 구조 함 수 를 통 해 파 라 메 터 를 전달 하고 대부분의 경우 eval () 과 유사 한 위험 을 초래 할 수 있 으 므 로 이 함수 들 을 사용 하지 않도록 해 야 합 니 다.막후 에서 자 바스 크 립 트 는 프로그램 코드 로 전 달 된 문자열 을 평가 하고 실행 해 야 합 니 다.

//    
setTimeout('myFunc()',1000);
setTimeout('myFunc(1,2,3)',1000);

//      
setTimeout(myFunc,1000);
setTimeout(function() {
    myFunc()
},1000)

new Function () 구조 함 수 를 사용 하 는 것 은 eval () 을 사용 하 는 것 과 유사 하기 때문에 이 함수 의 사용 도 매우 조심해 야 합 니 다. 이 함 수 는 기능 이 강 한 함수 이지 만 오용 되 기 쉽 습 니 다.eval () 을 꼭 사용 해 야 한다 면 new Function () 으로 대체 하 는 것 도 고려 할 수 있다.이렇게 하 는 잠재 적 인 장점 은 new Function () 의 코드 가 부분 함수 공간 에서 실 행 될 것 이기 때문에 코드 에서 var 정 의 를 사용 하 는 변 수 는 자동 으로 전체 변수 가 되 지 않 습 니 다.자동 으로 전역 변수 가 되 는 것 을 피 하 는 또 다른 방법 은 eval () 호출 을 실시 간 함수 에 패키지 하 는 것 입 니 다.
아래 코드 를 보 세 요. 여기 서 un 이라는 변수 만 전체 변수 이 고 네 임 스페이스 에 영향 을 줄 수 있 습 니 다.

console.log(typeof un);
console.log(typeof deux);
console.log(typeof trois);

var jsstring = "var un = 1; console.log(un)";
eval(jsstring);

jsstring = "var deux = 2; console.log(deux)";
new Function(jsstring)();

jsstring = "var trois = 3; console.log(trois)";
(function() {
    eval(jsstring);
}());

console.log(typeof un);
console.log(typeof deux);
console.log(typeof trois);

또 다른 new Function () 과 eval () 의 차 이 는 eval () 이 역할 영역 체인 에 영향 을 줄 수 있 고 Function 은 하나의 샌 드 박스 와 유사 하 다.어디서 Function 을 실행 하 든 전체 역할 영역 만 볼 수 있 습 니 다.따라서 국부 변수 에 대한 영향 은 비교적 작다.다음 의 예, eval () 은 외부 역할 영역의 변 수 를 방문 하고 수정 할 수 있 지만, Function 은 안 됩 니 다. (Function 을 사용 하 는 것 과 new Function 을 사용 하 는 것 은 같 음 을 주의 하 십시오.)

(function () {
    var local = 1;
    eval("local = 3;console.log(local)");
    console.log(local);
}());

(function() {
    var local = 1;
    Function("console.log(typeof local);")();
}())

 
7. parseInt () 의 수치 약속 사용
 paresInt () 를 사용 하면 문자열 에서 수 치 를 가 져 올 수 있 습 니 다.이 함수 의 두 번 째 매개 변 수 는 금지 매개 변수 입 니 다. 보통 이 매개 변 수 를 무시 할 수 있 지만 이렇게 하지 않 는 것 이 좋 습 니 다.해 석 된 문자열 이 0 으로 시작 하면 오류 가 발생 하기 때 문 입 니 다. 예 를 들 어 처리 날짜 가 일부 날짜 만 필드 에 들 어 갑 니 다.ECMAScript 3 에서 0 으로 시작 하 는 문자열 은 8 진수 로 간주 되 며, ECMAScript 5 에서 변 경 됩 니 다.일치 하지 않 고 예상 되 는 결 과 를 피하 기 위해 서 매번 구체 적 인 진법 인 자 를 지정 하 십시오.

var month = '06',
    year = '09';
month = parseInt(month,10);
year = parseInt(year,10);
console.log(month,year);

또 다른 문자열 을 수치 로 변환 하 는 방법 은:

Number('01');

이 방법 은 보통 parseInt () 보다 훨씬 빠 릅 니 다. 이름 처럼 parseInt () 은 간단 한 전환 이 아니 라 해석 이기 때 문 입 니 다.그러나 '08 hello' 가 하나의 수 치 를 되 돌려 주 기 를 원한 다 면 parseInt () 을 제외 한 다른 방법 은 모두 실패 하고 NaN 으로 돌아 갑 니 다.
이 내용 은 비교적 많 지만 실제 업무 에서 매우 가치 가 있다.다음 편 에 서 는 명명, 괄호 치기, 빈 칸 들 어가 기 등 인 코딩 에서 의 규범 과 제약 을 논의 할 것 이다.