JS開發(fā)中的一些小技巧和方法

loostudy 發(fā)布于2019-08-20 11:07 / 2770人閱讀

摘要：前言這兩年前端很火，又是前端的必會技能，在開發(fā)中其實(shí)有一些有意思的小技巧和方法，本文記錄了一些我工作中遇到的一些技巧和方法。驗(yàn)證是否為數(shù)組先檢驗(yàn)本地是否有函數(shù)，沒有就執(zhí)行后面的方法檢測。最高效的方法是第一種，所以推薦使用第一種方法清空數(shù)組。

前言

這兩年前端很火，JavaScript又是前端的必會技能，在JavaScript開發(fā)中其實(shí)有一些有意思的小技巧和方法，本文記錄了一些我工作中遇到的一些技巧和方法。

首發(fā)地址我的博客 正文 生成指定范圍內(nèi)的隨機(jī)數(shù)

當(dāng)我們需要獲取指定范圍(min,max)內(nèi)的整數(shù)的時候，下面的代碼非常適合；這段代碼用的還挺多的。

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

json轉(zhuǎn)url參數(shù)

當(dāng)我們進(jìn)行http請求時，可能需要把json轉(zhuǎn)化為url參數(shù)，這時下面這段代碼就派上用場了。

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

驗(yàn)證是否為數(shù)組

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

先檢驗(yàn)本地是否有Array.isArray函數(shù)，沒有就執(zhí)行后面的方法檢測。

清空數(shù)組

方式一 通過將長度設(shè)置為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=[];

方式三將一個新的數(shù)組的引用賦值給變量，其他引用并不受影響。 這意味著以前數(shù)組的內(nèi)容被引用的話將依舊存在于內(nèi)存中，這將導(dǎo)致內(nèi)存泄漏。最高效的方法是第一種，所以推薦使用第一種方法清空數(shù)組。

保留指定小數(shù)位

這個需求在項(xiàng)目中也是很常見的，可以toFixed()方法

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

打亂數(shù)組的順序

方式一
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;    
};

方式一使用了數(shù)組的內(nèi)置排序方法：sort，而方式二是借助了一個中間量，隨機(jī)數(shù)組里的兩個值，讓它們交換位置。

使用 === 而不是 ==

== (或者 !=) 操作在需要的情況下自動進(jìn)行了類型轉(zhuǎn)換。=== (或 !==)操作不會執(zhí)行任何轉(zhuǎn)換。===在比較值和類型時，可以說比==更快。

[10] ==  10      // 為 true
[10] === 10      // 為 false

"10" ==  10      // 為 true
"10" === 10      // 為 false

 []  ==  0       // 為 true
 []  === 0       // 為 false

 ""  ==  false   // 為 true 但 true == "a" 為false
 ""  === false   // 為 false

妙用“&&”和“||”

||和&&運(yùn)算符妙用，可用于精簡代碼，降低程序的可讀性。

用于賦值
&&：從左往右依次判斷，當(dāng)當(dāng)前值為true則繼續(xù)，為false則返回此值（是返回未轉(zhuǎn)換為布爾值時的原值哦）
|| ：從左往右依次判斷，當(dāng)當(dāng)前值為false則繼續(xù)，為true則返回此值（是返回未轉(zhuǎn)換為布爾值時的原值哦）

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"

用于條件執(zhí)行語句

// 普通的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;

獲取數(shù)組中的最大值或最小值

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

該方法適合一維或者多維數(shù)組。

隨機(jī)獲取數(shù)組里的元素

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

從數(shù)組里查找指定的值

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

function findInArr(arr, value){
    for (var i=0; i
生成指定長度的隨機(jī)數(shù)字字母字符串
function getRandomStr(len) {
    var str = "";
    for( ; str.length < len; str  += Math.random().toString(36).substr(2));
    return  str.substr(0, len);
}
去除字符串的空格
雖然在ECMAScript5中已經(jīng)實(shí)現(xiàn)了trim方法，它對低版本瀏覽器并不支持，所以有時候我們需要自己實(shí)現(xiàn)。
去除首尾空格
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里面肯定還有很多技巧，以后遇到了慢慢總結(jié)。JavaScript的水很深，感覺還有好多要學(xué)的。加油?。。?/p>

GPU云服務(wù)器云服務(wù)器 js開發(fā)技巧 js中的replace方法 js中的字符串方法 vps日常維護(hù)中的一些要點(diǎn)總結(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80401.html

發(fā)表評論

登陸后可評論

0條評論

loostudy

男|高級講師

我要關(guān)注我要私信

TA的文章

免費(fèi)英文字體Hanson Bold 無襯線粗體字體無需商業(yè)授權(quán)

閱讀 4045·2021-09-24 10:24
虛擬主機(jī)怎么傳文件-虛擬主機(jī)怎么上傳文件？

閱讀 1406·2021-09-22 16:01
程序員的算法趣題Q12: 平方根數(shù)字

閱讀 2726·2021-09-06 15:02
關(guān)于CSS的position屬性

閱讀 1028·2019-08-30 13:01
探究行內(nèi)元素和塊級元素

閱讀 1015·2019-08-30 10:52
：：before和：：after的詳細(xì)介紹

閱讀 641·2019-08-29 16:36
左右兩側(cè)寬度固定,中間自適應(yīng)之【圣杯+雙飛翼】實(shí)現(xiàn)

閱讀 2245·2019-08-29 12:51
Week 1：那些值得一閱的好文章

閱讀 2341·2019-08-28 18:29

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JS開發(fā)中的一些小技巧和方法

相關(guān)文章