资讯专栏INFORMATION COLUMN

几个js开发过程中的小技巧

golden_hamster / 3098人阅读

摘要:前言是一门非常灵活的语言,实际的开发过程中我们也可以灵活的使用它而给我们的工作带来便利,这篇文章记录了自己平时学习过程中经常用到的一些小技巧,整理出来作为笔记,也希望对感兴趣的同学有所帮助。

前言

javascript是一门非常灵活的语言,实际的开发过程中我们也可以灵活的使用它而给我们的工作带来便利,这篇文章记录了自己平时学习过程中经常用到的一些小技巧,整理出来作为笔记,也希望对感兴趣的同学有所帮助。

1 获取指定范围内的随机数

当我们需要获取指定范围(min,max)内的整数的时候,下面的代码非常适合。

function getRadomNum(min,max){
    return  Math.floor(Math.random() * (max - min + 1)) + min;
}

测试

2 随机获取数组中的元素
function getRadomFromArr(arr){
    return arr[Math.floor(Math.random()*arr.length)];
}
    

测试

3 生成从0到指定值的数字数组
var arr=[],length=100,i=1;
for(;arr.push(i++)

测试

4 打乱数字数组的顺序
    var arr=[1,2,3,4,5,6,7,"a","dsfs",8,9,"v"];
    arr.sort(function(){return Math.random()-0.5});

测试

5 对象转换为数组
//注意对象必须是以下格式的才可以通过此方式转化为数组
//获取的DOM集合,以及函数的arguments也可以通过此方式转化为数组
var obj={
    0:"qian",
    1:"long",
    2:"chu",
    3:"tian",
    length:4
}
var _slice=[].slice;
var objArr=_slice.call(obj);

测试

6 验证是否为数组

function isArray(obj){

return  Object.prototype.toString.call(obj) === "[object Array]" ;

}
测试

7 获取数组中最大或者最小值
function maxAndMin(arr){
    return {
       max:Math.max.apply(null,arr.join(",").split(",")),
       min:Math.min.apply(null,arr.join(",").split(","))
    }
}

该方法适合一维或者多维数组求最大最小值的情况

测试

8 清空数组
    //方式一 通过将长度设置为0
    var arr=[1,2,3,4,5];
    arr.length=0;
    
    //方式二 通过splice方法
     var arr=[1,2,3,4,5];
    arr.splice(0,arr.length);
    
    //方式三 通过将空数组 [] 赋值给数组(严格意义来说这只是将ary重新赋值为空数组,之前的数组如果没有引用在指向它将等待垃圾回收。)
    var arr=[1,2,3,4,5];
    arr=[];
    
9 保留指定小数位
var num =4.345678;
num = num.toFixed(4);  // 4.3457 第四位小数位以四舍五入计算
10 不要直接使用delete来删除数组中的元素

数组在js中也是对象,有时候我们可能会通过delete来删除数组中的元素,但是其实仅仅是将数组的元素的值赋值为了undefined。

var arr=[1,2,3,4,5,"谦龙","雏田"];
    delete arr[5];
    console.log(arr,arr[5],arr.length);

测试

可以通过splice来删除数组中的某一项

var arr=[1,2,3,4,5,"谦龙","雏田"];
    arr.splice(5,1);
    console.log(arr,arr[5],arr.length);

测试

11 生成指定长度的随机字母数字字符串
function getRandomStr(len) {
    var str = "";
    for( ; str.length < len; str  += Math.random().toString(36).substr(2));
    return  str.substr(0, len);
}

测试

12 null 与 undefined

null == undefined,null == null 返回true,有时候我们为了排除null 和 undefined可以使用如下的代码

    function test(obj){
        if(obj!=null){// obj除了undefined 和 null 之外都会走这里
            ....这里写代码逻辑
        }
    }
13 找出数组中出现次数最的元素,并给出其出现过的位置
function getMaxAndIndex( arr ){
        var obj = {};
        arr.forEach(function(item,index){
            if(!obj[item]){
                obj[item]= {indexs: [index]}
            }else{
                obj[item]["indexs"].push(index);
            }
        });
        var num=0;//记录出现次数最大值
        var str="";//记录出现次数最多的字符
        var reArr;//返回最大值的位置数组
        for(var attr in obj){
            var temp=obj[attr]["indexs"];
            if(temp.length>num){
                num=temp.length;
                str=attr;
                reArr=temp;
            }
        }
        return {
            maxStr:str,
            indexs:reArr
        }
    }

测试结果

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86178.html

相关文章

  • 你不知道的Chrome DevTools(2):那些debug的技巧

    摘要:我打算把一些上使用的高级技巧写成你不知道的这一系列的博文,希望大家一起学习学习。然而,这还不是最严重的,因为的语法比较宽松和随意,所以同一功能多种写法,各种奇葩都有。总结前端在调试代码的时候,知道开发工具上的小技巧,可以提高查找问题的效率。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools,使用它作为Web前端开发性能调试的必备工具。就连隔...

    warnerwu 评论0 收藏0
  • HTML-CSS-JS

    摘要:本周于上海闭幕,掘金和知乎上都有对应的实录和问答,但会议的视频目前都还没放出来,有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主,有业界大牛,也有小鲜肉,也有国外美女。 CSS 样式书写规范最佳实践 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范,可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

    mikasa 评论0 收藏0
  • HTML-CSS-JS

    摘要:本周于上海闭幕,掘金和知乎上都有对应的实录和问答,但会议的视频目前都还没放出来,有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主,有业界大牛,也有小鲜肉,也有国外美女。 CSS 样式书写规范最佳实践 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范,可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

    李世赞 评论0 收藏0
  • HTML-CSS-JS

    摘要:本周于上海闭幕,掘金和知乎上都有对应的实录和问答,但会议的视频目前都还没放出来,有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主,有业界大牛,也有小鲜肉,也有国外美女。 CSS 样式书写规范最佳实践 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范,可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

    MudOnTire 评论0 收藏0
  • 用测试工具JSLitmus来告诉你几个提升JavaScript性能的小技巧

    摘要:性能测试工具操作测试代码测试结果黄条代表每秒可执行测试函数的次数,当然越多越快。务必减少操作,减少无意义的路径的查找。其他测试测试代码这些测试代码来自,官网的例子这是一个空的非循环测试。正则表达式测试,数组的,新建日期,稍微慢了些。 性能测试工具 JSLitmus dom操作 测试代码 ...

    罗志环 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<