share_javascript 기술을 위한 20가지 실용적인 JavaScript 기술

우리 모두 알고 있듯이 JavaScript는 매우 인기 있는 프로그래밍 언어입니다. 개발자는 이를 사용하여 멋진 웹 프로그램을 개발할 뿐만 아니라 일부 모바일 애플리케이션(예: PhoneGap 또는 Appcelerator)을 개발할 수도 있습니다. , NodeJS, Wakanda 및 기타 구현과 같은 것입니다. 또한 많은 개발자들이 입문자용 언어로 JavaScript를 선택하고 이를 사용하여 팝업 창과 같은 작은 것들을 만듭니다.

이 기사에서 저자는 JavaScript 개발 팁, 모범 사례 및 기타 매우 실용적인 콘텐츠를 공유할 것입니다. 프론트 엔드 개발자이든 서버 측 개발자이든 이 팁을 살펴보세요. 그들은 확실히 당신에게 도움이 될 것입니다.

이 문서에 제공된 코드 조각은 V8 JavaScript 엔진(V8 3.20.17.15)을 사용하는 최신 버전의 Chrome 30에서 테스트되었습니다.

1. 처음으로 변수에 값을 할당할 때 var 키워드를 잊지 마세요

선언되지 않은 변수에 값을 할당하면 해당 변수가 자동으로 전역 변수로 생성됩니다. JS 개발에서는 전역 변수 사용을 피해야 합니다.

2. ==

을 바꾸려면 ===를 사용하세요.

그리고 절대 = or를 사용하지 마세요! =.

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

[10] === 10 // 거짓
[10] == 10 // 참입니다
'10' == 10 // 참
'10' === 10 // 거짓
[] == 0 // 참
[] === 0 // 거짓
'' == false // 참이지만 참 == "a"는 거짓
'' === false // 거짓

3. 줄 종결자로 세미콜론을 사용하세요

줄이 끝나는 곳에 세미콜론을 사용하는 것이 좋습니다. 개발자가 세미콜론 추가를 잊어버리더라도 대부분의 경우 JavaScript 파서가 자동으로 추가하기 때문에 컴파일러는 아무런 단서를 얻지 못합니다.

4. 생성자 생성

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

함수 사람(이름, 성){
This.firstName = 첫 번째 이름
This.lastName = 성
} 

var Saad = new Person("Saad", "Mousliki")

5. Typeof, 인스턴스of 및 생성자를 신중하게 사용해야 합니다.

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

var arr = ["a", "b", "c"]
typeof arr; // "객체"를 반환합니다
Array 인스턴스 // true
arr.constructor(); //[]

6. 자기 호출 기능 만들기

이를 종종 자체 호출 익명 함수 또는 즉시 호출 함수 표현식(LLFE)이라고 합니다. 함수가 생성되면 다음과 같이 자동으로 실행됩니다.

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

(함수(){
// 자동으로 실행될 일부 비공개 코드
})();
(함수(a,b){
var 결과 = ab
결과 반환
})(10,20)

7. 배열에 대한 무작위 항목을 생성합니다

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

var 항목 = [12, 548, 'a', 2, 5478, 'foo', 8852, , 'Doe', 2145, 119]

var randomItem = 항목[Math.floor(Math.random() * items.length)]

8. 특정 범위에서 난수 얻기

다음 코드는 최소 급여와 최대 급여 이전에 임의의 값을 얻는 등 테스트용 가짜 데이터를 생성해야 할 때 매우 다양하게 사용됩니다.

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

var x = Math.floor(Math.random() * (최대 - 최소 1)) 최소

9. 숫자 0과 최대 숫자 사이의 난수 집합을 생성합니다

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

var numberArray = [] , 최대 = 100

for( var i=1; numberArray.push(i )

10. 임의의 영숫자 집합을 생성합니다.

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

함수 generateRandomAlphaNum(len) {
var rdmstring = ""
for( ; rdmString.length rdmString.substr(0, len)을 반환합니다.

}

11. 디지털 어레이를 스크램블하세요

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

var 숫자 = [5, 458, 120, -215, 228, 400, 122205, -85411]
숫자 = 숫자.정렬(function(){ return Math.random() - 0.5}); /* 배열 번호는 예를 들어 [120, 5, 228, -215, 400, 458, -85411, 122205]와 동일합니다. */

12. 문자열 tim 함수

Trim 기능은 문자열에서 공백 문자를 제거할 수 있으며 Java, C#, PHP 및 기타 언어에서 사용할 수 있습니다.

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

String.prototype.trim = function(){return this.replace(/^s |s $/g, "");};

13. 배열 추가

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

var array1 = [12 , "foo" , {이름 "Joe"} , -2458];
var array2 = ["Doe" , 555 , 100]
Array.prototype.push.apply(array1, array2)
/* array1은 [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100]과 동일합니다. */

14. 매개변수 객체를 배열로 변환

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

var argArray = Array.prototype.slice.call(인수)

15. 주어진 매개변수가 숫자인지 확인

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

함수 isNumber(n){

Return !isNaN(parseFloat(n)) && isFinite(n)
}

16. 주어진 매개변수가 배열인지 확인

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

함수 isArray(obj){

Return Object.prototype.toString.call(obj) === '[객체 배열]'
}

toString() 메서드를 재정의하면 예상한 결과를 얻을 수 없습니다. 아니면 다음과 같이 쓸 수도 있습니다:

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

Array.isArray(obj); // 새로운 배열 메소드입니다

마찬가지로 여러 프레임을 사용하는 경우에도 인스턴스를 사용할 수 있습니다. 내용이 너무 많으면 결과도 틀려집니다.

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

var myFrame = document.createElement('iframe')
document.body.appendChild(myFrame)

var myArray = window.frames[window.frames.length-1].Array
var arr = new myArray(a,b,10); // [a,b,10]

//instanceof가 올바르게 작동하지 않습니다. myArray는 생성자를 잃습니다.
// 생성자는 프레임 간에 공유되지 않습니다
Array 인스턴스; // false

17. 숫자형 배열에서 최대값과 최소값을 구합니다

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

var 숫자 = [5, 458, 120, -215, 228, 400, 122205, -85411]
var maxInNumbers = Math.max.apply(수학, 숫자)
var minInNumbers = Math.min.apply(수학, 숫자)

18. 배열 지우기

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

var myArray = [12, 222, 1000]
myArray.length = 0; // myArray는 []와 같습니다.

19. 배열에서 항목을 삭제하기 위해 삭제를 사용하지 마세요

개발자는 삭제 대신 분할을 사용하여 배열 항목을 삭제할 수 있습니다. 배열에서 정의되지 않은 항목을 삭제하는 대신 삭제를 사용하세요.

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

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]
items.length; // 11을 반환합니다
항목 삭제[3]; // true를 반환합니다
items.length; // 11을 반환합니다
/* 항목은 [12, 548, "a", 정의되지 않음 × 1, 5478, "foo", 8852, 정의되지 않음 × 1, "Doe", 2154, 119] */

당신도 할 수 있습니다...

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

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]
items.length; // 11을 반환합니다
items.splice(3,1)
items.length; // 10을 반환
/* 항목은 [12, 548, "a", 5478, "foo", 8852, undefine × 1, "Doe", 2154, 119] */

삭제 메소드는 객체 속성을 삭제해야 합니다.

20. 배열을 짧게 하려면 길이 속성을 사용하세요.

위에서 언급한 것처럼 배열을 지우려면 개발자가 길이 속성을 사용하여 배열을 줄일 수도 있습니다.

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

var myArray = [12, 222, 1000, 124, 98, 10]
myArray.length = 4; // myArray는 [12, 222, 1000, 124]와 같습니다.

정의한 배열 길이 값이 너무 높으면 배열의 길이가 변경되고 정의되지 않은 일부 값이 배열에 채워집니다. 배열의 길이 속성은 읽기 전용이 아닙니다.

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

myArray.length = 10; // 새 배열 길이는 10입니다.

myArray[myArray.length - 1] // 정의되지 않음