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]();
}
 

Javascript实用技巧的更多相关文章

  1. javascript实用技巧、javascript高级技巧

    字号+作者:H5之家 来源:H5之家 2016-10-31 11:00 我要评论( ) 三零网提供网络编程. JavaScript 的技术文章javascript实用技巧.javascript高级技巧 ...

  2. 【JavaScript实用技巧(二)】Js操作DOM(由问题引发的文章改版,新人大佬都可)

    [JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...

  3. JavaScript 实用技巧和写法建议

    1.前言 从大学到现在,接触前端已经有几年了,感想方面,就是对于程序员而言,想要提高自己的技术水平和编写易于阅读和维护的代码,我觉得不能每天都是平庸的写代码,更要去推敲,去摸索和优化代码,总结当中的技 ...

  4. javascript实用技巧,js小知识

    一.js整数的操作 使用|0和~~可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快,在处理像素及动画位移等效果的时候会很有用.性能比较见此. var foo = (1 ...

  5. JavaScript实用技巧总结

    前言 总结一下最近接触到的JavaScript语法糖,与大家共享. 每块糖都有详细的说明和示例,就不多说了. 准确的类型检查 /* * @function: * 类型检查示例 * 通过此方法,可以检查 ...

  6. 41个Web开发者必须收藏的JavaScript实用技巧

    1. 将彻底屏蔽鼠标右键 oncontextmenu=”window.event.returnValue=false” < table border oncontextmenu=return(f ...

  7. JavaScript 实用技巧

    1数组中删除重复 let arr = [1,2,4,3,6,4] Array.from(new Set(arr)) // es6中 .from()[1,2,4,3,6] [...new Set(arr ...

  8. 12个十分实用的JavaScript小技巧

    12个非常实用的JavaScript小技巧 在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候 ...

  9. 实用Javascript调试技巧

    摘要: 高效调试JS代码. 原文:实用Javascript调试技巧分享 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 见过太多同学调试Javascript只会用简单的con ...

随机推荐

  1. 【react redux && flux】

    redux: http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html https://bai ...

  2. #define宏定义

    1 #define的概念  #define命令是C语言中的一个宏定义命令,它用来将一个标识符定义为一个字符串,该标识符被称为宏名,被定义的字符串称为替换文本.  该命令有两种格式:一种是简单的宏定义, ...

  3. 前端 javascript 数据类型 字典

    定义字典 a = {"k1":"v1","k2":"v2",}; Object {k1: "v1", ...

  4. Python 调用 Shell脚本的方法

    Python 调用 Shell脚本的方法 1.os模块的popen方法 通过 os.popen() 返回的是 file read 的对象,对其进行读取 read() 的操作可以看到执行的输出. > ...

  5. PHP代码编写的优化

    // $b 会新创建一个内存空间 $a = array('a'=>'aa','b'=>'bb'); $b = $a; $a['c'] = 'cc'; // $b 会引用 $a 的内存空间 ...

  6. abap 中modify 的使用

    1.modify table itab from wa Transporting f1 f2 ... 表示表itab中符合工作区wa 中关键字的一条数据的 f1 f2字段会被wa中对应的字段值更新. ...

  7. APICloud常用方式

    新打开一个窗口: api.openWin({ name: 'unlogin', url: 'widget://html/unlogin.html', pageParam: { } }); 新打开一个F ...

  8. 二进制x&(x-1);

    求下面函数的返回值(微软) int func(x) {     int countx = 0;     while(x)     {           countx ++;           x ...

  9. 2.MySQL简介

    MySQL是一种DBMS,即它是一种数据库软件.   1.连接   为了连接到MyAQL,需要一下信息: ➡️主机名(计算机名)---如果连接到本地MySQL服务器,为localhost ➡️duan ...

  10. HDU 5963 朋友(树+博弈)

    #include<vector> #include<cstdio> #include<cstring> #include<algorithm> #def ...