1.數(shù)組扁平化初探
ES6中數(shù)組的擴展引入了flat和flatMap：
數(shù)組的flat方法：
var arr = [1,2,3,[4,5,[6,7]]];
arr.flat(); // [1,2,3,4,5,[6,7]] 默認扁平化1層
arr.flat(2); // [1,2,3,4,5,6,7] 扁平化2層
arr.flat(Infinity); // [1,2,3,4,5,6,7] 扁平化所有
數(shù)組的flatMap方法：
參考MDN
// map與flatMap
var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
// 只會將 flatMap 中的函數(shù)返回的數(shù)組 “壓平” 一層
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
手動實現(xiàn)一個數(shù)組扁平化方法
// depth-扁平層數(shù)
function flattenArr(arr, depth=1){
let res = [];
// 遍歷每一項
arr.forEach(v => {
// 判斷子項是否為數(shù)組，是否已達到指定深度
if(Array.isArray(v) && depth > 0){
// 遞歸調(diào)用
res.push(...flattenArr(v, --depth))
}else{
res.push(v)
}
})
return res;
}
var arr = [1,2,3,[4,5,[6,7]]];
flattenArr(arr,2)
// [1,2,3,4,5,6,7]
2.函數(shù)柯里化初探
// 實現(xiàn)一個add方法，使計算結(jié)果能夠滿足如下預(yù)期：
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;
或者說，將下面這個函數(shù)柯里化：
function add(...args) {
return args.reduce((a, b) => a + b);
}
add(1,2,3,4) // 10
function add(){
let args = [].slice.call(arguments);
let outerAdd = function(){
var innerAdd = function(){
args.push(...arguments);
return innerAdd;
};
innerAdd.toString = function() {
return args.reduce(function(a, b) {
return a + b;
});
};
return innerAdd;
};
return outerAdd(...args);
}
add(1)(2)(3)(4); // f 10
add(1, 2, 3, 4); // f 10
add(1, 2)(3, 4); // f 10
add(1, 2, 3)(4); // f 10
add(1)(2)(3)(4) + 10 // 20
3.防抖（debounce）與節(jié)流(throttle)初探
防抖：設(shè)置一個時間間隔K秒，在K秒內(nèi)多次觸發(fā)事件，只會在最后一次事件結(jié)束后K秒觸發(fā)事件回調(diào)，如果在最后一次事件結(jié)束不滿K秒的過程中再次觸發(fā)時間則會清除掉之前的定時器，并重新計時。
節(jié)流：設(shè)置一個時間間隔K秒，開始頻繁的觸發(fā)事件，事件每隔K秒便會觸發(fā)一次。
1.防抖
/**
* 防抖
* @param func: function 控制的回調(diào)函數(shù)
* @param threshold: number 控制的時間，單位ms
* @param execAsap: boolean 控制執(zhí)行 false - 檢測開始時執(zhí)行 true - 檢測期結(jié)束時執(zhí)行
* */
function debounce(func, threshold, execAsap) {
var timeout;
return function debounced(){
var obj = this;
var args = arguments;
function delayed(){
if(!execAsap){ // false 檢測開始時執(zhí)行(馬上執(zhí)行)
func.apply(obj, args);
}
timeout = null;
}
if(timeout){
clearTimeout(timeout);
}else if(execAsap){ // true 檢測結(jié)束時執(zhí)行(等待執(zhí)行)
func.apply(obj,args);
}
timeout=setTimeout(delayed,threshold || 100)
}
}
// 使用
document.onmousemove = debounce(function (e) {
console.log('防抖');
}, 500, false);
- 節(jié)流
/**
* 節(jié)流
* @param func: function 控制的回調(diào)函數(shù)
* @param delay: number 控制的時間，單位ms
* */
function throttle(func, delay) {
var timer = null;
var startTime = Date.now();
return function() {
var curTime = Date.now();
var remaining = delay - (curTime - startTime);
var obj = this;
var args = arguments;
clearTimeout(timer);
if(remaining <= 0) {
func.apply(obj, args);
startTime = Date.now();
} else {
timer = setTimeout(func, remaining);
}
}
}
// 使用
window.addEventListener('scroll', throttle(function(){
console.log('節(jié)流')
}, 1000));
4. 對象拷貝
對象拷貝都知道分為深拷貝和淺拷貝。
簡單理解，就是：
淺拷貝：修改B對象的屬性和方法會影響到A對象的屬性和方法, 我們稱之為淺拷貝。
深拷貝：修改B對象的屬性和方法不會影響到A對象的屬性和方法, 我們稱之為深拷貝。
深拷貝方法一：
JSON.parse(JSON.stringify(obj))
深拷貝方法二：
/**
* 對象拷貝
* @param value: object 拷貝對象
* @param isDeep: boolean true - 深拷貝 false - 淺拷貝
* */
function clone(value, isDeep) {
if(value === null){return null;}
if(typeof value != 'object') {return value}
if(Array.isArray(value)) {
if(isDeep) { // 深拷貝
return value.map(item => clone(item, true)) // 遞歸調(diào)用
}
// 淺拷貝
return [...value]
} else {
if(isDeep) {
var obj = {};
Object.keys(value).forEach(item => {
obj[item] = clone(value[item], true)
})
return obj;
}
return {...value}
}
}
// 使用
var objects = { c: { 'a': 1, e: [1, {f: 2}] }, d: { 'b': 2 } };
var shallow = clone(objects, true);
console.log(shallow.c.e[1]); // { f: 2 }
console.log(shallow.c === objects.c); // false
console.log(shallow.d === objects.d); // false
console.log(shallow === objects); // false
