Skip to main content
 Web开发网 » 站长学院 » 浏览器插件

20个有用的JavaScript实用技巧,教你轻松写代码

2021年11月26日5580百度已收录

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 false3、underfined、null、0、false、NaN、空字符串的逻辑结果均为false4、行尾使用分号实践中最好还是使用分号,忘了写也没事,大部分情况下JavaScript解释器都会自动添加。对于为何要使用分号,可参考文章JavaScript中关于分号的真相。

5、使用对象构造器function Person(firstName, lastName){ this.firstName = firstName; this.lastName = lastName;}var Saad = new Person("Saad", "Mousliki");6、小心使用typeof、instanceof和contructortypeof:JavaScript一元操作符,用于以字符串的形式返回变量的原始类型,注意,typeof null也会返回object,大多数的对象类型(数组Array、时间Date等)也会返回object contructor:内部原型属性,可以通过代码重写 instanceof:JavaScript操作符,会在原型链中的构造器中搜索,找到则返回true,否则返回false

var arr = ["a", "b", "c"];typeof arr; // 返回 "object" arr instanceof Array // truearr.constructor(); //[]7、使用自调用函数函数在创建之后直接自动执行,通常称之为自调用匿名函数(Self-Invoked Anonymous Function)或直接调用函数表达式(Immediately Invoked Function Expression )。格式如下:

(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对象函数一个trim函数:

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如果在浏览器中没有使用frame,还可以用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; // false18、获取数组中的最大值和最小值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 will20、使用length属性截断数组前面的例子中用length属性清空数组,同样还可用它来截断数组:

var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ]; myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].与此同时,如果把length属性变大,数组的长度值变会增加,会使用undefined来作为新的元素填充。length是一个可写的属性。

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

评论列表暂无评论
发表评论
微信