JavaScript 提升性能小技巧

1.惰性載入函數

function foo (){
    if(a!==b){
        console.log('aaa')
    }else{
        console.log('bbb')
    }
}



//優化後

function foo (){
    if(a!=b){
        foo = function(){
            console.log('aaa')
        }
    }else{
        foo = function(){
            console.log('bbb')
        }
    }
    return foo();
}

那麼第一次運行之後就會覆寫這個方法，下一次再運行的時候就不會執行判斷了。當然現在只有一個判斷，如果判斷很多，分支比較複雜，那麼節約的資源還是可觀的。

2.一次性函數

var test = function(){

    console.log('msg')

    test = function(){
        console.log('foo')
    }

}


sca() // msg

sca()// foo

sca()// foo

跟上面的惰性載入函數同理，可以在函數體裏覆寫當前函數，那麼可以創建一個一次性的函數，重新賦值之前的代碼相當於只運行了一次，適用於運行一些只需要執行一次的初始化代碼。

3.精確到指定位數的小數

const round =(n,decimals=0)=>Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);

round(1.356,2)//1.35

將數字四捨五入到指定的小數位數。使用 Math.round() 和模板字面量將數字四捨五入爲指定的小數位數。省略第二個參數 decimals ，數字將被四捨五入到一個整數。

4.reduce方法同時實現map和filter

const num = [10,20,30,40];

const test = num.reduce((arr,item)=>{

    item = item*2;

    if(item>50){
        arr.push(item);
    }
    
    return arr;
},[]);

test;//[60,80]

假設現在有一個數列，你希望更新它的每一項（map的功能）然後篩選出一部分（filter的功能）。如果是先使用map然後filter的話，你需要遍歷這個數組兩次。

在下面的代碼中，我們將數列中的值翻倍，然後挑選出那些大於50的數。

5.統計數組總相同項的個數

很多時候，你希望統計數組中重複出現項的個數然後用一個對象表示。那麼你可以使用reduce方法處理這個數組。

下面的代碼將統計每一種車的數目然後把總數用一個對象表示。

var cars = ['BMW','Benz','Benz','Tesla','BMW','Toyota'];
var carObj = cars.reduce( function ( obj,name) {

    obj[name] = obj[name]?++obj[name]:1;
    
    return obj;
},{});

carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

6.接受函數返回多個結果

在下面的代碼中，我們從/a中獲取一個帖子，然後在/b中獲取相關評論。由於我們使用的是async/await，函數把返回值放在一個數組中。而我們使用數組解構後就可以把返回值直接賦給相應的變量。

async function getFullPost (){

    return await new Promise.all([
        axios('/a'),
        axios('/b')
    ])

}

const [a,b] = getFullPost();

7.數組最大值

const a = [23,123,342,12];
const max = a.reduce(function(pre,cur,inde,arr){return pre>cur?pre:cur;}); // 342

8.字符串中字母出現的次數

const str = 'sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas-cmxzmnha';
const res = str.split('').reduce((accumulator, cur) => {accumulator[cur] ? accumulator[cur]++ : accumulator[cur] = 1; return accumulator;}, {});

9.數組去重

這個方法很多不一一列舉了

var arr = [1,2,2,3,3,4,5];
//1
console.log([...new Set(arr)])

//2
console.log(Array.from(new Set(arr)))

//3
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);