Javascript实用技巧

1. 给参数赋默认值

//通常写法
function dateRender(format){
    if(format){
       format = 'Y-m-d';
    }        
    // code
}

//强推
function dateRender(format){
     format = format || 'Y-m-d';
            
    // code
}

 

2. 多个参数的函数，可以使用对象代替

function save(name, sex, age) {
      name = name || '';
      sex = sex || 'female';
      age = age || 0;

　　// code 
}

function save(person) {
       person = person || {};
       var name = person.name || '';
       var sex = person.sex || 'female';
       var age = person.age || 0;

　　// code 
}

 

3. 使用 === 代替 ==

==（或者!=）做对比的时候会将进行对比的两者转换到同一类型再比较。===（或者!==）则不会，他会将进行对比的两者做类型对比和值对比，相对于 == ，=== 的对比会更加严谨。

"" == false // true 
"" === false // false

 

4. 变量转换

1)string to number

var pi = '123';
var pi_num1 = +pi; // 123
var pi_num2 = 1*pi; // 123
var pi_num3 = ~~pi;  //123

 2)string/number to bool

3) string to array

直接在字符串上加 [].

 

5. 清空/截短一个数组

 

6. 利用闭包给回调函数传递参数: 详细说明

// 1）延时函数 
function fun1(arg){
return function(){console.dir(arg);}
}
var test=fun1('hello');//返回f3的内部函数的引用
setTimeout(test,100);  //这里直接传递fun1是不正确的

// 2)方法注册

document.getElementById("hello").onclick=test;//正确,

document.getElementById("hello").attachEvent("onclick",test);//正确,

 

7. 记录代码块的执行时间，性能调试时有用。

 

8. 检查一个对象是否有属性

var myObject = {
name: '@tips_js'
};
myObject.hasOwnProperty('name'); // true
'name' in myObject; // true
myObject.hasOwnProperty('valueOf'); // false, valueOf 是从原型链继承的
'valueOf' in myObject; // true

 

9. 使用for-in遍历一个对象内部属性的时候注意检查属性

下面的代码片段能够避免在遍历一个对象属性的时候访问原型的属性

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

 

10. "use strict" 和懒惰 

严格模式的JavaScript让开发人员更加安全的编写JavaScript。
默认情况下，JavaScript允许开发者懒惰，例如，我们在第一次声明变量的时候可以不用var，虽然这可能看起来像一个没有经验的开发人员，同时这也是很多错误的根源，变量名拼写错误或意外地将它提到了外部作用域。

程序员喜欢让电脑为我们做些无聊的事，检查一些我们工作的错误。"use strict"指令我们做这些，将我们的错误转换成JavaScript的错误。

我们将一些较大的JavaScript项目中的不良行为直接在JavaScript引擎执行中禁止了。在其他情况中，严格模式改变以下的行为：

· 变量只有在前面 var 声明了才能用
· 试图写入只读属性产生的误差
· 必须用 new 关键字调用构造函数
· this 不会默认指向全局对象
· 非常有限的使用eval()
· 保护保留字符或未来保留字符不被作为变量名使用

 

11. 处理一个数组或单个元素作为参数的方法

相比于写个单独的方法去分别操作一个数组和一个元素作为参数的函数，更好的是写一个通用的函数，这样就都可以操作。这类似于一些jQuery的方法(css匹配将修改所有的选择器)。
你仅需要先将一切放进数组，Array.concat会接收数组或单一的对象：

function printUpperCase(words) {
var elements = [].concat(words);
for (var i = 0; i < elements.length; i++) {
console.log(elements[i].toUpperCase());
}
}

 

12. 改善嵌套条件

但我们必须避免在每一个条件下进行多次检查，尽量避免使用switch。我们也必须考虑到最有效的方法是通过一个object。

var colorObj = {
'black': printBlackBackground,
'red': printRedBackground,
'blue': printBlueBackground,
'green': printGreenBackground,
'yellow': printYellowBackground
};
 
if (color in colorObj) {
colorObj[color]();
}