1.類數組快速轉成數組
如arguments對象可以通過
let args = [].slice.call(arguments);
// or
let args = Array.prototype.slice.call(arguments);
args此時是真正的數組結構,可以調用數組對象擁有的方法。
2.apply處理arguments入參
當一個方法fn的入參是多個的時候,譬如:
function fn (arg1, arg2, arg3) {...}
fn(1, 2, 3);
// => function fn (arg1, arg2, arg3) {
// arg1 = 1;
// arg2 = 2;
// arg3 = 3;
// }
如果直接通過fn(arguments)調用,arguments=[1, 2, 3],則等價于fn([1,2,3])
function fn (arg1, arg2, arg3) {
arg1 = [1, 2, 3];
arg2 = undefined;
arg3 = undefined;
}
所以借用apply方法,fn.apply(this, arguments)可以把arguments的參數分別賦值給fn對應的入參中。
再比如一個求平均值的例子,如果有個求平均值函數average(...args)是可變參數:
average(1, 2, 3); // 2
average(1); // 1
average(4, 6); // 5
此時有個方法直接獲取分數的數組:
var scores = getAllScores(); // [1, 2, 3]
要直接讓aaverage調用scores數組,只需:
average.apply(null, scores);
3.柯里化的一個簡單實現原理
函數柯里化是實現高階函數的一個基礎,一個簡單的柯里化實現原理如下:
function func(fn) {
var args = [].slice.call(arguments, 1);
return function () {
var localArgs = [].slice.call(arguments);
return fn.apply(fn, args.concat(localArgs));
};
}
通過一個加法舉個例子:
function add (a, b) {
return a+b;
}
var f = func(add, 2, 3); // 函數柯里化
console.log(f()); // 5
// 高階函數的一般寫法
var addTo = func(add, 2); // 函數柯里化
console.log(addTo(3)); // 5
4.巧用JS定時器,快速響應用戶界面
研究表明,瀏覽器處理任務超過100ms則會對用戶體驗產生影響。因此結合JS定時器,把耗時較長的腳本拆分成較短的片段,讓UI線程(Call Stack)得到及時更新。
對于處理一個大數組的時候,直接循環處理可能由于處理每個數組的內容比較耗時或者整個數組的數據太多導致耗時過長。
for(let i=0, len=items.length; i < len; i++) {
process(items[i]);
}
定時器取代循環必須考慮兩個條件:
- 處理過程是否需要同步
- 數據是否按順序處理
如果這兩個條件都不需要滿足的話,就可以用定時器分解任務達到優化的目的。
function processArray(items, process, callback) {
// 拷貝一份數組
let todo = items.concat();
setTimeout(function() {
// 處理時間時間小于50ms則持續執行
let start = +new Date();
do {
process(todo.shift());
} while (todo.length > 0 && (+new Date() - start < 50))
// 超過50ms時間則另設定時器執行
if (todo.length > 0) {
setTimeout(arguments.callee, 25);
} else {
// 處理完最后調用回調函數處理數組
callback(items);
}
}, 25)
}
var items = [...];
function outputValue(value) {
console.log(value);
}
processArray(items, outputValue, function(){
console.log("Done!");
});