JS开发中的一些小技巧和方法

loostudy 发布于2019-08-20 11:07 / 2767人阅读

摘要：前言这两年前端很火，又是前端的必会技能，在开发中其实有一些有意思的小技巧和方法，本文记录了一些我工作中遇到的一些技巧和方法。验证是否为数组先检验本地是否有函数，没有就执行后面的方法检测。最高效的方法是第一种，所以推荐使用第一种方法清空数组。

前言

这两年前端很火，JavaScript又是前端的必会技能，在JavaScript开发中其实有一些有意思的小技巧和方法，本文记录了一些我工作中遇到的一些技巧和方法。

首发地址我的博客 正文 生成指定范围内的随机数

当我们需要获取指定范围(min,max)内的整数的时候，下面的代码非常适合；这段代码用的还挺多的。

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

json转url参数

当我们进行http请求时，可能需要把json转化为url参数，这时下面这段代码就派上用场了。

function json2url(json) {
    var arr=[];
    for(var name in json){
        arr.push(name+"="+json[name]);
    }
    return arr.join("&");
}

验证是否为数组

function isArray(obj){
    return Array.isArray(obj) || Object.prototype.toString.call(obj) === "[object Array]";
}

先检验本地是否有Array.isArray函数，没有就执行后面的方法检测。

清空数组

方式一 通过将长度设置为0
var arr=[1,2,3,4,5];
arr.length=0;

方式二 通过splice方法
 var arr=[1,2,3,4,5];
arr.splice(0,arr.length);

//方式三
var arr=[1,2,3,4,5];
arr=[];

方式三将一个新的数组的引用赋值给变量，其他引用并不受影响。这意味着以前数组的内容被引用的话将依旧存在于内存中，这将导致内存泄漏。最高效的方法是第一种，所以推荐使用第一种方法清空数组。

保留指定小数位

这个需求在项目中也是很常见的，可以toFixed()方法

var num =3.1415926;
num = num.toFixed(4); //toFixed()方法可把 Number 四舍五入为指定小数位数的数字，括号里面取值0~20（包括0和20）
console.log(num); //3.1416

打乱数组的顺序

方式一
arr.sort(function(){return Math.random()-0.5});

方式二
function shuffle(arr) {
    var i, 
        j,
        temp;
    for (i = arr.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;    
};

方式一使用了数组的内置排序方法：sort，而方式二是借助了一个中间量，随机数组里的两个值，让它们交换位置。

使用 === 而不是 ==

== (或者 !=) 操作在需要的情况下自动进行了类型转换。=== (或 !==)操作不会执行任何转换。===在比较值和类型时，可以说比==更快。

[10] ==  10      // 为 true
[10] === 10      // 为 false

"10" ==  10      // 为 true
"10" === 10      // 为 false

 []  ==  0       // 为 true
 []  === 0       // 为 false

 ""  ==  false   // 为 true 但 true == "a" 为false
 ""  === false   // 为 false

妙用“&&”和“||”

||和&&运算符妙用，可用于精简代码，降低程序的可读性。

用于赋值
&&：从左往右依次判断，当当前值为true则继续，为false则返回此值（是返回未转换为布尔值时的原值哦）
|| ：从左往右依次判断，当当前值为false则继续，为true则返回此值（是返回未转换为布尔值时的原值哦）

var attr = true && 4 && "aaa"; //aaa;

var attr = true && 0 && "aaa"; //0

var attr = 100 || 12; //100

var attr = "e" || "hahaha" //"e"

var attr = "" || "hahaha" //"hahaha"

用于条件执行语句

// 普通的if语句
if(test){
  isTrue();
}
// 上面的语句可以使用 "&&" 写为：
( test && isTrue() );


test = false;
if(!test){
  isFalse();
}
// 上面的语句可以使用 "||" 写为：
( test || isFalse());

用于多次判断后的赋值

var add_level = 0; 
if(add_step == 5){ 
    add_level = 1; 
} 
else if(add_step == 10){ 
    add_level = 2; 
} 
else if(add_step == 12){ 
    add_level = 3; 
} 
else if(add_step == 15){ 
    add_level = 4; 
} 
else { 
    add_level = 0; 
}

//可以写成
var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;

获取数组中的最大值或最小值

function maxAndMin(arr){
    return {
       max:Math.max.apply(null,arr.join(",").split(",")),
       min:Math.min.apply(null,arr.join(",").split(","))
    }
}

该方法适合一维或者多维数组。

随机获取数组里的元素

function getRadomFromArr(arr){
    return arr[Math.floor(Math.random()*arr.length)];
}

从数组里查找指定的值

查到了返回true，没查到返回false。

function findInArr(arr, value){
    for (var i=0; i
生成指定长度的随机数字字母字符串
function getRandomStr(len) {
    var str = "";
    for( ; str.length < len; str  += Math.random().toString(36).substr(2));
    return  str.substr(0, len);
}
去除字符串的空格
虽然在ECMAScript5中已经实现了trim方法，它对低版本浏览器并不支持，所以有时候我们需要自己实现。
去除首尾空格
function trim(str){
    return str.replace(/(^s*)|(s*$)/g, "");
}

trim("  hello world    "); //"hello world"
去除所有空格
function trimAll(str){
    return str.replace(/s+/g,"");
}

trimAll("   he ll o  wo  r ld    "); //"helloworld"
后记
JavaScript里面肯定还有很多技巧，以后遇到了慢慢总结。JavaScript的水很深，感觉还有好多要学的。加油！！！

云服务器 GPU云服务器 js开发技巧 js中的replace方法 js中的字符串方法 vps日常维护中的一些要点总结

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

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

JS开发中的一些小技巧和方法

摘要：生成指定范围内的随机数转参数验证是否为数组获取数组中的最大值或最小值该方法适合一维或者多维数组。随机获取数组里的元素从数组里查找指定的值查到了返回，没查到返回。巧用可以写成去除字符串的空格去除首尾空格去除所有空格生成指定范围内的随机数 function setRadomNum(min,max){ return Math.floor(Math.random(...

KnewOne 2019-08-20 14:19 评论0 收藏0
HTML-CSS-JS

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

mikasa 2019-08-01 18:18 评论0 收藏0
HTML-CSS-JS

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

李世赞 2019-08-29 14:08 评论0 收藏0
HTML-CSS-JS

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

MudOnTire 2019-08-21 18:25 评论0 收藏0
你可能不知道的前端小技巧

摘要：主要分成事件，浏览器调试小技巧，其他三部分。一事件先来看一个有趣的问题。介绍一组很有用的事件。我介绍这个的目的并不是简单的介绍这个事件，而是这里有个小坑。只能通过来进行绑定。二浏览器调试小技巧用来代替在文件中打断点的操作。这篇文章主要记录一些我在开发工作中踩过的一些坑或者新学到的一些知识。主要分成‘事件’，‘浏览器调试小技巧’，‘其他‘三部分。====================...

elarity 2019-08-26 10:18 评论0 收藏0