45가지 자바스크립트 개발 팁

JavaScript는 세계에서 가장 널리 사용되는 프로그래밍 언어이며 웹 개발, 모바일 애플리케이션 개발(PhoneGap, Appcelerator), 서버측 개발(Node.js 및 Wakanda) 등에 사용할 수 있습니다. JavaScript는 많은 초보자가 프로그래밍 세계에 입문하는 첫 번째 언어이기도 합니다. 브라우저에 간단한 프롬프트 상자를 표시하거나 nodebot 또는 nodruino를 통해 로봇을 제어하는 ​​데 사용할 수 있습니다. 명확한 구조와 고성능으로 JavaScript 코드를 작성할 수 있는 개발자는 이제 채용 시장에서 가장 인기 있는 사람들입니다.

이 글에서는 브라우저의 자바스크립트 엔진이든, 서버측 자바스크립트 인터프리터이든, 몇 가지를 제외한 몇 가지 자바스크립트 팁, 비밀, 모범 사례를 공유하겠습니다.

이 글의 샘플 코드는 최신 버전의 Google Chrome 30(V8 3.20.17.15)에서 테스트를 통과했습니다.

1. 변수에 처음 값을 할당할 때는 반드시 var 키워드를 사용해야 합니다.

선언 없이 변수를 직접 할당하면 새 변수로 사용됩니다. 기본적으로 전역 변수를 사용하지 마십시오.

2. ==

== 대신 ===를 사용하면 필요할 때 != 연산자가 자동으로 데이터 유형을 변환합니다. 그러나 === 및 !==는 그렇지 않습니다. 값과 데이터 유형을 동시에 비교하므로 == 및 !=보다 빠릅니다.

[10] === 10    // is false
[10]  == 10    // is true
'10' == 10     // is true
'10' === 10    // is false
 []   == 0     // is true
 [] ===  0     // is false
 '' == false   // is true but true == "a" is false
 '' === false  // is false

3. underfined, null, 0, false, NaN 및 빈 문자열의 논리 결과는 모두 false입니다

4 줄 끝에 세미콜론을 사용합니다

실제로는 대부분 세미콜론을 사용하는 것이 가장 좋습니다. 작성하는 것을 잊어버려도 상관없지만 대부분의 경우 JavaScript 인터프리터가 자동으로 추가합니다. 세미콜론이 사용되는 이유에 대한 자세한 내용은 JavaScript의 세미콜론에 관한 진실 기사를 참조하세요.

5. 객체 생성자 사용

function Person(firstName, lastName){
    this.firstName =  firstName;
    this.lastName = lastName;
}
var Saad = new Person("Saad", "Mousliki");

6. typeof, instanceof 및 생성자를 신중하게 사용하세요.

• typeof: 문자열 형식에 사용되는 JavaScript 단항 연산자 변수의 원래 유형을 반환합니다. typeof null도 객체를 반환합니다. 대부분의 객체 유형(배열 배열, 시간 날짜 등)도 객체

• 생성자를 반환합니다. 속성은 코드

• instanceof: JavaScript 연산자를 통해 재정의할 수 있습니다. 이 연산자는 프로토타입 체인의 생성자에서 검색하여 발견되면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

var arr = ["a", "b", "c"];
typeof arr;   // 返回 "object" 
arr instanceof Array // true
arr.constructor();  //[]

7. 자체 호출 함수 사용

함수는 생성 직후 자동으로 실행되며 일반적으로 자체 호출 익명 함수(Self-Invoked Anonymous Function)라고 부르거나 함수 표현식을 직접 호출합니다. (즉시 호출되는 함수 표현). 형식은 다음과 같습니다:

(function(){
    // 置于此处的代码将自动执行
})();  
(function(a,b){
    var result = a+b;
    return result;
})(10,20)

8. 배열에서 임의의 멤버 가져오기

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
var  randomItem = items[Math.floor(Math.random() * items.length)];

9. 지정된 범위 내에서 임의의 숫자 가져오기

이 함수는 가짜를 생성할 때 사용됩니다. 테스트용 데이터 지정된 범위 내에 급여 번호와 같은 특수 번호가 있습니다.

var x = Math.floor(Math.random() * (max - min + 1)) + min;

10. 0부터 지정된 값까지 숫자 배열을 생성합니다

var numbersArray = [] , max = 100;
for( var i=1; numbersArray.push(i++) < max;);  // numbers = [1,2,3 ... 100]

11. 임의의 영숫자 문자열을 생성합니다

function generateRandomAlphaNum(len) {
    var rdmString = "";
    for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));
    return  rdmString.substr(0, len);
}

12. 🎜>

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});
/* numbers 数组将类似于 [120, 5, 228, -215, 400, 458, -85411, 122205]  */

여기에서는 JavaScript의 내장 배열 정렬 기능이 사용됩니다. 더 좋은 방법은 이를 구현하기 위해 특수 코드(예: Fisher-Yates 알고리즘)를 사용하는 것입니다. StackOverFlow에서 이 토론을 볼 수 있습니다.

13. 문자열 공백 제거

Java, C#, PHP 및 기타 언어에서는 특수 문자열 공백 제거 기능을 구현했지만 JavaScript에서는 사용할 수 없습니다. 해 보세요 문자열 객체 함수 다듬기 함수:

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

새로운 JavaScript 엔진에는 이미 Trim()의 기본 구현이 있습니다.

14. 배열 사이에

var array1 = [12 , "foo" , {name "Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 值为  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

추가 15. 객체를 배열로 변환

var argArray = Array.prototype.slice.call(arguments);

16 . 숫자인지 확인

function isNumber(n){
    return !isNaN(parseFloat(n)) && isFinite(n);
}

17. 배열인지 확인

function isArray(obj){
    return Object.prototype.toString.call(obj) === '[object Array]' ;
}

하지만 toString() 메서드를 재정의하면 작동하지 않습니다. 다음과 같은 방법을 사용할 수도 있습니다.

Array.isArray(obj); // its a new Array method

브라우저에서 프레임을 사용하지 않는 경우에는 인스턴스오브(instanceof)를 사용해도 되지만, 컨텍스트가 너무 복잡하면 오류가 발생할 수 있습니다.

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]  
// myArray 的构造器已经丢失，instanceof 的结果将不正常
// 构造器是不能跨 frame 共享的
arr instanceof Array; // false

18. 배열의 최대값과 최소값을 가져옵니다

var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers); 
var minInNumbers = Math.min.apply(Math, numbers);

19. 배열을 지웁니다

var myArray = [12 , 222 , 1000 ];  
myArray.length = 0; // myArray will be equal to [].

20. array

배열 요소에 직접 삭제를 사용하면 삭제되지 않지만 해당 요소는 정의되지 않음으로 설정됩니다. 배열 요소 삭제는 splice를 사용해야 합니다.

하지 마세요:

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
items.length; // return 11 
delete items[3]; // return true 
items.length; // return 11 
/* items 结果为 [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined ×
 1, "Doe", 2154, 119] */

대신:

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
items.length; // return 11 
items.splice(3,1) ; 
items.length; // return 10 
/* items 结果为 [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119]

객체의 속성을 삭제할 때 삭제를 사용할 수 있습니다.

21. 길이 속성을 사용하여 배열을 자릅니다.

이전 예에서는 길이 속성을 사용하여 배열을 자릅니다.

var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];  
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

동시에, length 속성이 커질수록 배열의 길이 값이 증가하게 되고, undefed 가 새로운 요소로 채워지게 됩니다. length는 쓰기 가능한 속성입니다.

myArray.length = 10; // the new array length is 10 
myArray[myArray.length - 1] ; // undefined

22. 논리 AND 또는 조건에서 사용

var foo = 10;  
foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething(); 
foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();

논리 OR를 사용하여 함수 매개변수의 기본값과 같은 기본값을 설정할 수도 있습니다.

function doSomething(arg1){ 
    arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
}

23. 데이터에 대해 map() 함수 메서드를 반복합니다

var squares = [1,2,3,4].map(function (val) {  
    return val * val;  
}); 
// squares will be equal to [1, 4, 9, 16]

24. 지정된 소수 자릿수를 유지합니다

var num =2.443242342;
num = num.toFixed(4);  // num will be equal to 2.4432

toFixec()는 문자열입니다. 숫자가 아닙니다.

25. 부동 소수점 계산 문제

아아아

왜요? 0.1+0.2는 0.30000000000000004와 같기 때문입니다. JavaScript 숫자는 IEEE 754 표준에 따라 구성되며 내부적으로 64비트 부동 소수점 소수점으로 표시됩니다. 자세한 내용은 toFixed()를 사용하여 JavaScript의 숫자를 인코딩하는 방법을 참조하세요. 및 toPrecision() 이 문제를 해결하십시오.

26、通过for-in循环检查对象的属性

下面这样的用法，可以防止迭代的时候进入到对象的原型属性中。

for (var name in object) {  
    if (object.hasOwnProperty(name)) { 
        // do something with name
    }  
}

27、逗号操作符

var a = 0; 
var b = ( a++, 99 ); 
console.log(a);  // a will be equal to 1 
console.log(b);  // b is equal to 99

28、临时存储用于计算和查询的变量

在jQuery选择器中，可以临时存储整个DOM元素。

var navright = document.querySelector('#right'); 
var navleft = document.querySelector('#left'); 
var navup = document.querySelector('#up'); 
var navdown = document.querySelector('#down');

29、提前检查传入isFinite()的参数

isFinite(0/0) ; // false
isFinite("foo"); // false
isFinite("10"); // true
isFinite(10);   // true
isFinite(undefined);  // false
isFinite();   // false
isFinite(null);  // true，这点当特别注意

30、避免在数组中使用负数做索引

var numbersArray = [1,2,3,4,5];
 var from = numbersArray.indexOf("foo") ; // from is equal to -1
 numbersArray.splice(from,2); // will return [5]

注意传给splice的索引参数不要是负数，当是负数时，会从数组结尾处删除元素。

31、用JSON来序列化与反序列化

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(person);
/* stringFromPerson 结果为 "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"   */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString 的值与 person 对象相同  */

32、不要使用eval()或者函数构造器

eval()和函数构造器（Functionconsturctor）的开销较大，每次调用，JavaScript引擎都要将源代码转换为可执行的代码。

var func1 = new Function(functionCode);
var func2 = eval(functionCode);

32、不要使用eval()或者函数构造器

eval()和函数构造器（Functionconsturctor）的开销较大，每次调用，JavaScript引擎都要将源代码转换为可执行的代码。

var func1 = new Function(functionCode);
var func2 = eval(functionCode);

33、避免使用with()

使用with()可以把变量加入到全局作用域中，因此，如果有其它的同名变量，一来容易混淆，二来值也会被覆盖。

34、不要对数组使用for-in

避免：

var sum = 0;  
for (var i in arrayNumbers) {  
    sum += arrayNumbers[i];  
}

而是：

var sum = 0;  
for (var i = 0, len = arrayNumbers.length; i < len; i++) {  
    sum += arrayNumbers[i];  
}

另外一个好处是，i和len两个变量是在for循环的第一个声明中，二者只会初始化一次，这要比下面这种写法快：

for (var i = 0; i < arrayNumbers.length; i++)

35、传给setInterval()和setTimeout()时使用函数而不是字符串

如果传给setTimeout()和setInterval()一个字符串，他们将会用类似于eval方式进行转换，这肯定会要慢些，因此不要使用：

setInterval('doSomethingPeriodically()', 1000);  
setTimeout('doSomethingAfterFiveSeconds()', 5000);

而是用：

setInterval(doSomethingPeriodically, 1000);  
setTimeout(doSomethingAfterFiveSeconds, 5000);

36、使用switch/case代替一大叠的if/else

当判断有超过两个分支的时候使用switch/case要更快一些，而且也更优雅，更利于代码的组织，当然，如果有超过10个分支，就不要使用switch/case了。

37、在switch/case中使用数字区间

其实，switch/case中的case条件，还可以这样写：

function getCategory(age) {  
    var category = "";  
    switch (true) {  
        case isNaN(age):  
            category = "not an age";  
            break;  
        case (age >= 50):  
            category = "Old";  
            break;  
        case (age <= 20):  
            category = "Baby";  
            break;  
        default:  
            category = "Young";  
            break;  
    };  
    return category;  
}  
getCategory(5);  // 将返回 "Baby"

38、使用对象作为对象的原型

下面这样，便可以给定对象作为参数，来创建以此为原型的新对象：

function clone(object) {  
    function OneShotConstructor(){}; 
    OneShotConstructor.prototype = object;  
    return new OneShotConstructor(); 
} 
clone(Array).prototype ;  // []

39、HTML字段转换函数

function escapeHTML(text) {  
    var replacements= {"<": "<", ">": ">","&": "&", "\"": """};                      
    return text.replace(/[<>&"]/g, function(character) {  
        return replacements[character];  
    }); 
}

40、不要在循环内部使用try-catch-finally

try-catch-finally中catch部分在执行时会将异常赋给一个变量，这个变量会被构建成一个运行时作用域内的新的变量。

切忌：

var object = ['foo', 'bar'], i;  
for (i = 0, len = object.length; i <len; i++) {  
    try {  
        // do something that throws an exception 
    }  
    catch (e) {   
        // handle exception  
    } 
}

而应该：

var object = ['foo', 'bar'], i;  
try { 
    for (i = 0, len = object.length; i <len; i++) {  
        // do something that throws an exception 
    } 
} 
catch (e) {   
    // handle exception  
}

41、使用XMLHttpRequests时注意设置超时

XMLHttpRequests在执行时，当长时间没有响应（如出现网络问题等）时，应该中止掉连接，可以通过setTimeout()来完成这个工作：

var xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function () {  
    if (this.readyState == 4) {  
        clearTimeout(timeout);  
        // do something with response data 
    }  
}  
var timeout = setTimeout( function () {  
    xhr.abort(); // call error callback  
}, 60*1000 /* timeout after a minute */ ); 
xhr.open('GET', url, true);  
xhr.send();

同时需要注意的是，不要同时发起多个XMLHttpRequests请求。

42、处理WebSocket的超时

通常情况下，WebSocket连接创建后，如果30秒内没有任何活动，服务器端会对连接进行超时处理，防火墙也可以对单位周期没有活动的连接进行超时处理。

为了防止这种情况的发生，可以每隔一定时间，往服务器发送一条空的消息。可以通过下面这两个函数来实现这个需求，一个用于使连接保持活动状态，另一个专门用于结束这个状态。

var timerID = 0; 
function keepAlive() { 
    var timeout = 15000;  
    if (webSocket.readyState == webSocket.OPEN) {  
        webSocket.send('');  
    }  
    timerId = setTimeout(keepAlive, timeout);  
}  
function cancelKeepAlive() {  
    if (timerId) {  
        cancelTimeout(timerId);  
    }  
}

keepAlive()函数可以放在WebSocket连接的onOpen()方法的最后面，cancelKeepAlive()放在onClose()方法的最末尾。

43、时间注意原始操作符比函数调用快，使用VanillaJS

比如，一般不要这样：

var min = Math.min(a,b); 
A.push(v);

可以这样来代替：

var min = a < b ? a : b; 
A[A.length] = v;

44、开发时注意代码结构，上线前检查并压缩JavaScript代码

别忘了在写代码时使用一个代码美化工具。使用JSLint(一个语法检查工具)并且在上线前压缩代码（比如使用JSMin）。注：现在代码压缩一般推荐 UglifyJS (http://www.php.cn/)

45、JavaScript博大精深，这里有些不错的学习资源

• Code Academy资源：http://www.php.cn/

• Marjin Haverbekex编写的Eloquent JavaScript：http://www.php.cn/

• John Resig编写的Advanced JavaScript：http://www.php.cn/

 以上就是JavaScript 开发的45个技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！