22条常用JavaScript开发小技巧

1、使用var声明变量

如果给一个没有声明的变量赋值,默认会作为一个全局变量(即使在函数内赋值)。要尽量避免不必要的全局变量。

2、行尾使用分号

虽然JavaScript允许省略行尾的分号,但是有时不注意的省略,会导致不必要的错误。建议在可用可不用行尾分号的地方加上分号。

3、获取指定范围内的随机数

var getRandom = function(max, min) {
    min = arguments[1] || 0;
    return Math.floor(Math.random() * (max - min + 1) + min);};

上面的函数接受一个你希望的随机最大数和一个你希望的随机最小数。

4、打乱数字数组的顺序

var sortArray = array.sort(function(){
  return Math.random() - 0.5;});

5、取出数组中的随机项

var ran = array[Math.floor(Math.random() * array.length)];

6、去除字符串的首尾空格

var s = string.trim();

7、类数组对象转为数组

比如:类数组对象遍历:

Array.prototype.forEach.call(argumens,function(value){})

DOM的NodeList和HTMLCollection也是类数组对象

8、获取数组中的最大值和最小值

var max = Math.max.apply(Math, array);
var min = Math.min.apply(Math, array);

9、清空数组

array.length = 0;
array = [];

10、保留指定小数位

var num = num.toFixed(2);

返回字符串,保留两位小数

11、使用for-in循环来遍历对象的属性

for(var key in object) {
   // object[key]}

不要用for-in来遍历数据

12、获取某月天数

function getMonthDay(date){
  date = date || new Date();
  if(typeof date === ‘string‘) {
      date = new Date(date);
  };
  date.setDate(32);
  return 32 - date.getDate();}

传入date参数,可以是字符串、日期对象实例;为空表示当月天数

13、浮点数问题

0.1 + 0.2 = 0.30000000000000004 != 0.3

JavaScript的数字都遵循IEEE 754标准构建,在内部都是64位浮点小数表示

14、JSON序列化和反序列化

使用JSON.stringify()来将JavaScript对象序列化为有效的字符串。
使用JSON.parse()来将有效的字符串转换为JavaScript对象。

在AJAX传输数据时很有用

15、使用“===”替换“==”

相等运算符(==)在比较时会将操作数进行相应的类型转换,而全等运算符(===)不会进行类型转换。

16、避免使用with()

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

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

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

18、简化if语句

if (condition) {
  fn();}

可替换成:

condition && fn();

19、给可能省略的参数赋默认值

function test(a, b){
  a = a || ‘1‘;}

20、给数组循环中缓存length的值

如果你确定循环中数组的长度不会变化,那么你可以这样:

var length = array.length;for(var i = 0; i < length; i++) {}

可以避免在每次迭代都将会重新计算数组的大小,提高效率

21、合并数组

对于小数组,我们可以这样:

var arr1 = [1,2,3];var arr2 = [4,5,6];
var arr3 = arr1.concat(arr2);  // [1,2,3,4,5,6]

不过,concat()这个函数并不适合用来合并两个大型的数组,因为其将消耗大量的内存来存储新创建的数组。在这种情况之个,可以使用Array.prototype.push.apply(arr1,arr2)来替代创建一个新数组。
这种方法不是用来创建一个新的数组,其只是将第一个第二个数组合并在一起,同时减少内存的使用:

Array.prototype.push.apply(arr1, arr2);
console.log(arr1); // [1,2,3,4,5,6]

22 枚举对象“自身”的属性

for...in除了枚举对象“自身”的属性外,还会枚举出继承过来的属性。

var hasOwn = Object.prototype.hasOwnProperty;
var obj = {name: ‘tg‘, age: 24};for(var name in obj) {
  if (hasOwn.call(obj, name)) {
    console.log(name + ‘:‘ + obj[name]);
  }}// name:tg// age:24

原文地址:https://www.cnblogs.com/xiaoqi2018/p/10325116.html

时间: 2024-08-28 15:49:28

22条常用JavaScript开发小技巧的相关文章

【前端】javascript中10常用的个小技巧总结

javascript中10常用的个小技巧总结 本文转自:http://www.cnblogs.com/libin-1/p/6756393.html 1. new Set() 可能有人知道ES6中提供了新的数据结构 Set,但是能够灵活运用的人或许不多.利用Set数据结构我们能够轻松的去重一个数组,比如: let arr = [1, 2, 2, 3]; let set = new Set(arr); let newArr = Array.from(set); // Array.from方法可以将

27个iOS开发小技巧

<span style="word-wrap: normal; word-break: normal; line-height: 1.5em; font-size: 14px; outline: none; color: rgb(51, 51, 51); font-family: 'Helvetica neue', Helvetica, sTheiti, 微软雅黑, 黑体, Arial, Tahoma, sans-serif, serif;"><span style=

BizTalk开发小技巧

BizTalk开发小技巧 随笔分类 - Biztalk Biztalk 使用BizTalk实现RosettaNet B2B So Easy 摘要: 使用BizTalk实现RosettaNet B2B So Easy最近完成了一个vmi-hub的B2B项目,使用Rosettanet 2.0的标准与一家品牌商,OEM,供应商实现B2B.一共交换4个报文,4B2,3B2,4B2 POD,4C1,说白了就是收发存这些数据:项目环境BizTalk2009...阅读全文 posted @ 2015-10-2

php开发小技巧--快速环境搭建

前几天同学让我帮忙调试一个PHP后台的网站,我擦,我都没有环境你丫还非得让我本地跑,不肯给我权限.我只想说三个字,你丫就是王八蛋.希望你看不到我写的这篇文章. now,吐槽结束,正题开始.下面介绍快速搭建一个PHP开发环境搭建的小技巧.no big deal,就是一个开源的软件.名字是PHPnow.它是Apache+PHP+ MySQL环境套件包,这种集成的开发环境的好处是,它用脚本的方式帮你做了各种缺省的配置,满足你的基本的需求.如果想更高级,对不起,自己定制. 下面用一个很久之前写的程序演示

ios开发小技巧-用宏化简代码

在IOS开发中,要做字典转模型一般情况如下: 1 /** 2 * 声明方法 3 */ 4 - (instancetype) initWithDictionary:(NSDictionary *)dict; 5 + (instancetype) carWithDictionary:(NSDictionary *)dict; 6 7 /** 8 * 实现方法 9 */ 10 - (instancetype)initWithDictionary:(NSDictionary *)dict 11 { 12

给大家分享12个或许能在实际工作中帮助你解决一些问题的JavaScript的小技巧

使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: 01 function Account(cash) { 02 this.cash = cash; 03 this.hasMoney

开发小技巧2——代码段

概念: 代码段是将预先定义好的可重用代码块快速插入到代码文件中,代码段提高了开发效率,增强了代码的可重用性:既节约了时间,又实现了不同开发人员间代码的共享.同时也可保证同一项目中代码风格的统一. Visual Studio中已经定义了部分代码段,例如:在visual studio中输入for按tab健即可自动生成for循环语句,输入tryf按tab则自动生成try catch语句.       在Visual Studio 2012中创建自定义代码段: 选中项目文件,右击添加-新建项-选择XML

前端网络、JavaScript优化以及开发小技巧

一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN缓存 通过构建工具Gulp,可以在开发的时候就将合并压缩的事情一起做掉. 之所以要做合并压缩是因为:HTTP 1.x不允许一个连接上的多个响应数据交错到达(多路复用),因而一个响应必须完全返回后,下一个响应才会开始传输. 也就是说即使客户端同时发送了两个请求,而且CSS资源先准备就绪,服务器也会先发

.Net开发小技巧

.NET项目开发中的小技巧 1.不要频繁的创建对象...这个损失是巨大的...new太多了,后果比较严重. 2.打开数据库后要及时的关闭连接,如果你不能做到一个open后跟一个close,那也没关系,用Using满足你偷懒的欲望吧 3.别太迷信string str1 = "";和string.empty之间的差异,性能上和你想的完全不一样.放心大胆的使用""吧. 4.如果你的项目比较大,或者你的IIS服务器配置不太高,那么,我还是建议你多用存储过程,减少前端服务器的