1.数组扁平化初探
ES6中数组的扩展引入了flat和flatMap：
数组的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] 扁平化所有
数组的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 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
手动实现一个数组扁平化方法
// depth-扁平层数
function flattenArr(arr, depth=1){
let res = [];
// 遍历每一项
arr.forEach(v => {
// 判断子项是否为数组，是否已达到指定深度
if(Array.isArray(v) && depth > 0){
// 递归调用
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.函数柯里化初探
// 实现一个add方法，使计算结果能够满足如下预期：
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;
或者说，将下面这个函数柯里化：
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）与节流(throttle)初探
防抖：设置一个时间间隔K秒，在K秒内多次触发事件，只会在最后一次事件结束后K秒触发事件回调，如果在最后一次事件结束不满K秒的过程中再次触发时间则会清除掉之前的定时器，并重新计时。
节流：设置一个时间间隔K秒，开始频繁的触发事件，事件每隔K秒便会触发一次。
1.防抖
/**
* 防抖
* @param func: function 控制的回调函数
* @param threshold: number 控制的时间，单位ms
* @param execAsap: boolean 控制执行 false - 检测开始时执行 true - 检测期结束时执行
* */
function debounce(func, threshold, execAsap) {
var timeout;
return function debounced(){
var obj = this;
var args = arguments;
function delayed(){
if(!execAsap){ // false 检测开始时执行(马上执行)
func.apply(obj, args);
}
timeout = null;
}
if(timeout){
clearTimeout(timeout);
}else if(execAsap){ // true 检测结束时执行(等待执行)
func.apply(obj,args);
}
timeout=setTimeout(delayed,threshold || 100)
}
}
// 使用
document.onmousemove = debounce(function (e) {
console.log('防抖');
}, 500, false);
- 节流
/**
* 节流
* @param func: function 控制的回调函数
* @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('节流')
}, 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)) // 递归调用
}
// 浅拷贝
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
