JS开辟中的一些小技能和要领

媒介

这两年前端很火,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<arr.length; i++){
        if (arr[i] == value){
            return true;
        }
    }    
    return false;
}

天生指定长度的随机数字字母字符串

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的水很深,觉得另有很多要学的。加油!!!

    原文作者:funnyF2E
    原文地址: https://segmentfault.com/a/1190000006941324
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞