高阶函数实现 AOP(面向切面编程)
Function.prototype.before = function (beforefn) {
let _self = this; // 缓存原函数的援用
returnfunction () { // 代理函数
beforefn.apply(this, arguments); // 执行前置函数
return _self.apply(this, arguments); // 执行原函数
}
}
Function.prototype.after = function (afterfn) {
let _self = this;
returnfunction () {letset = _self.apply(this, arguments);
afterfn.apply(this, arguments);
returnset;
}
}
let func = () => console.log('func');
func = func.before(() => {console.log('===before===');
}).after(() => {console.log('===after===');
});
func();
输入后果:
===before===
func
===after===
当咱们 new 一个类的时候 都产生了什么
/** * new2 new 关键字的代码实现演示 * @param {function} func 被 new 的类 (构造函数) */
function new2(func) {
// 创立了一个实例对象 o,并且这个对象__proto__指向 func 这个类的原型对象
let o = Object.create(func.prototype);
// (在构造函数中 this 指向以后实例)让这个类作为一般函数值行 并且外面 this 为实例对象
let k = func.call(o);
// 最初再将实例对象返回 如果你在类中显示指定返回值 k,// 留神如果返回的是援用类型则将默认返回的实例对象 o 代替掉
return typeof k === 'object' ? k : o;
}
// 试验
functionM() { // 行将被 new 的类
this.name = 'liwenli';
}
let m = new2(M); // 等价于 new M 这里只是模仿
console.log(m instanceof M); // instanceof 检测实例
console.log(m instanceof Object);
console.log(m.__proto__.constructor === M);
Object.create 兼容实现
let obj1 = {id: 1};
Object._create = (o) => {let Fn = function() {}; // 长期的构造函数
Fn.prototype = o;
return new Fn;
}
let obj2 = Object._create(obj1);
console.log(obj2.__proto__ === obj1); // true
console.log(obj2.id); // 1
// 原生的 Object.create
let obj3 = Object.create(obj1);
console.log(obj3.__proto__ === obj1); // true
console.log(obj3.id); // 1
currying 函数柯理化
curry 柯理化的实现(递归调用 + valueOf)
知识点:valueOf 浏览器环境下 当咱们以 log(fn)这种模式取值时,会隐式调用 fn 本身的 valueOf 所以失去的是 valueOf 的返回值
functionfn() {};
fn.valueOf = () => console.log('valueof');
console.log(fn); // valueof
const mul = x => {const result = y => mul(x * y); // 递归调用 mul
result.valueOf = () => x;
return result;
}
console.log(mul(2)(3)); // 6
// 在下面 mul 每执行一次, 就会返回一个 valueOf 被改写后的新函数 result 并且 result 执行会在外面调用 mul(x * y)
// 在 result 函数的 valueOf 里保留着 由上一次 x * y 传进来的后果 x, 也就是上一次 x *y 会作为这一次的输入 仍然叫 x
// 第一次 mul(2) 此时 x 为 2 return result
result 为 result = y => mul(2 * y);
// 第二次 mul(2)(3) 等价于 第一个 mul 返回的 result(3), result 执行 => mul(2 * 3) 再次调用 mul 将 2 *3 = 6 的后果作为 mul 参数
// 最初 mul(6) x = 6 在返回一个新函数 result 此时 result 的 valueOf = () => 6
// log(mul(2)(3)) 相当于 log 的最初返回的 result 隐式调用 valueOf 返回 6
curry 将多参数函数转换为接管繁多参数的函数
function fe(a, b, c) {return a + b + c;}
function curry(fe) {let args = []; // 参数汇合
let len = args.length;
returnfunctionbar() {args = [...args, ...arguments]; // 收集参数
if (args.length >= fe.length) {return fe.apply(this, args);
}
return bar;
}
}
console.log(curry(fe)(1)(2)(3)); // 6
currying 局部求值
// currying 函数柯理化
let currying = function(fn) {let args = [];
returnfunctionfe() {if (arguments.length === 0) {return fn.apply(this, args);
}
[].push.apply(args, arguments);
return fe;
}
}
let count = currying(function (...rest) {return rest.reduce((prev, cur) => prev + cur, 0);
});
console.log(count(100)(200)(10)()); // 310
收集参数 提早执行 达到指定次数才执行
// 参数收集 指定次数后执行
function fn(...rest) {console.log(rest);};
function after(fn, time = 1) {let params = [];
returnfunction(...rest) {params = [...params, ...rest];
if (--time === 0) {fn.apply(this, params);
}
}
}
let newFn = after(fn, 3); // 执行 3 次 外部 fn 才会执行
newFn(2);
newFn(3);
newFn(4);
参考 前端进阶面试题具体解答
函数节流
throttle 策略的电梯。保障如果电梯第一个人进来后,50 毫秒后准时运送一次,不期待。如果没有人,则待机。
let throttle = (fn, delay = 50) => { // 节流 管制执行间隔时间 避免频繁触发 scroll resize mousemove
let stattime = 0;
returnfunction (...args) {let curTime = new Date();
if (curTime - stattime >= delay) {fn.apply(this, args);
stattime = curTime;
}
}
}
防抖动
debounce 策略的电梯。如果电梯里有人进来,期待 50 毫秒。如果又人进来,50 毫秒期待从新计时,直到 50 毫秒超时,开始运送。
let debounce = (fn, time = 50) => { // 防抖动 管制闲暇工夫 用户输出频繁
let timer;
returnfunction (...args) {
let that = this;
clearTimeout(timer);
timer = setTimeout(fn.bind(that, ...args), time);
}
}
深度拷贝兼容写法(不包含原型属性)
function deepCopy(obj) {if (typeof obj !== 'object') return obj;
if (typeof window !== 'undefined' && window.JSON) { // 浏览器环境下 并反对 window.JSON 则应用 JSON
return JSON.parse(JSON.stringify(obj));
} else {let newObj = obj.constructor === Array ? [] : {};
for(let key in obj) {newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
}
return newObj;
}
}
let obj = {a: 1, b: [12]};
let newObj = deepCopy(obj);
newObj.b[1] = 100;
console.log(obj);
console.log(newObj);
Function 的 bind 实现
Function.prototype._bind = function(context) {
let func = this;
let params = [].slice.call(arguments, 1);
returnfunction() {params = params.concat([].slice.call(arguments, 0));
func.apply(context, params);
}
}
let obj = {id: 24}
function fn1(a) {console.log(this, arguments);
}
let foo = fn1._bind(obj, obj.id);
函数组合串联 compose(koa reduce 中间件)
// 组合串联
let fn1 = (a) => a + 1;
let fn2 = (b) => b + 2;
let fn3 = (c) => c + 3;
let funs = [fn1, fn2, fn3];
let compose = (func) => {return arg => func.reduceRight((composed, fn) => fn(composed), arg);
}
console.log(compose(funs)(100)); // 相当于 fn1(fn2(fn3(100)))
co 函数
function* fn(a) {
a = yield a;
let b = yield 2;
let c = yield 3;
return a + b + c;
}
function co(fn, ...args) {let g = fn(...args);
return new Promise((resolve, reject) => {function next(lastValue) {let { value, done} = g.next(lastValue);
if (done) {resolve(value);
} else {if (value instanceof Promise) {value.then(next, (val) => reject(val));
} else {next(value)
}
}
}
next();});
}
co(fn, 100).then(value => {console.log(value); // 105
});
如何被动停止 Promise 调用链
const p1 = new Promise((resolve, reject) => {setTimeout(() => { // 异步操作
resolve('start')
}, 1000);
});
p1.then((result) => {console.log('a', result);
return Promise.reject('中断后续调用'); // 此时 rejected 的状态将间接跳到 catch 里,剩下的调用不会再持续
}).then(result => {console.log('b', result);
}).then(result => {console.log('c', result);
}).catch(err => {console.log(err);
});
// a start
// 中断后续调用
bluebird.promisify 实现(将异步回调函数 api 转换为 promise 模式)
// promisify.js
module.exports = {promisify(fn){returnfunction () {var args = Array.from(arguments);
return new Promise(function (resolve, reject) {fn.apply(null, args.concat(function (err) {if (err) {reject(err);
} else {resolve(arguments[1])
}
}));
})
}
}
}
// main.js
const fs = require('fs');
const {promisify} = require('./promisify.js');
const readFile = promisify('fs.readFile'); // 转换异步读取
// 异步文件 由回调函数模式变成 promise 模式
readFile('./1.txt', 'utf8').then(data => {console.log(data);
}).catch(err => {console.log(err);
});
window.requestAnimationFrame 兼容性解决
window._requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){window.setTimeout(callback, 1000 / 60);
};
})();
字符串是否合乎回文规定
let str = 'My age is 0, 0 si ega ym.';
办法一
function palindrome(params) {params = params.replace(/[\W\s_]/ig, '');
return params.toLowerCase() === params.split('').reverse().join('').toLowerCase();}
console.log(palindrome(str));
办法二
function palindrome(params) {params = params.replace(/[\W\s_]/ig, '').toLowerCase();
for (var i = 0, j = params.length-1; i<j; i++, j--) {if (params[i] !== params[j]) {returnfalse;}
}
returntrue;
}
解构
// 将 destructuringArray([1, [2, 3], 4], "[a, [b], c]") => {a: 1, b: 2, c: 4}
const targetArray = [1, [2, 3], 4];
const formater = "[a, [b], c]";
const destructuringArray = (values, keys) => {
try {const obj = {};
if (typeof keys === 'string') {keys = JSON.parse(keys.replace(/\w+/g, '"$&"'));
}
const iterate = (values, keys) =>
keys.forEach((key, i) => {if(Array.isArray(key)) iterate(values[i], key)
else obj[key] = values[i]
})
iterate(values, keys)
return obj;
} catch (e) {console.error(e.message);
}
}
数组展平
将[[1, 2], 3, [[[4], 5]]] 展平为 [1, 2, 3, 4, 5]
let arr = [[1, 2], 3, [[[4], 5]]]; // 数组展平
function flatten(arr) {return [].concat(...arr.map(x => Array.isArray(x) ? flatten(x) : x)
)
}
二分查找
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
// 二分查找 递归 由两头开始往两边查找 前提是有序的数组 返回对应的索引地位
function binarySearch1(arr, dest, start = 0, end = data.length) {if (start > end) {return -1}
let midIndex = Math.floor((start + end) / 2); // 两头地位索引
let mid = arr[midIndex]; // 两头值
if (mid == dest) {return midIndex;}
if (dest < mid) { // 要找的比两头值小 就从两头往结尾找 始终到 0
return binarySearch1(arr, dest, 0, midIndex - 1);
}
if (dest > mid) { // 要找的比两头值大 就从两头往后找 始终到 end 完结
return binarySearch1(arr, dest, midIndex + 1, end);
}
return -1; // 找不到返回 -1
}
console.log(binarySearch1(arr, 7, 3, 6)); // 6
// 非递归 arr 前提有序数组(从小到大)返回对应的索引地位
function binarySearch2(arr, dest) {
let max = arr.length - 1;
let min = 0;
while (min <= max) {let mid = Math.floor((max + min) / 2); // mid 两头地位索引
if (dest < arr[mid]) { // 如果要找的这项比两头项还要小 阐明应该在 mid 两头地位后面 批改最大边界值 max=mid-1
max = mid - 1;
} elseif (dest > arr[mid]) { // 如果要找的这项比两头项还要大 阐明应该在 mid 两头地位的前面 批改最小边界值 min=mid+1
min = mid + 1;
} else {return mid;}
}
return -1; // 找不到返回 -1
}
console.log(binarySearch2(arr, 3)); // 2
找出数组中反复呈现过的元素
// 例如:[1,2,4,4,3,3,1,5,3]
// 输入:[1,3,4]
let arr = [1, 2, 4, 4, 3, 3, 1, 5, 3];
// 办法一
function repeat1(arr){var result = [], map = {};
arr.map(function(num){if(map[num] === 1) result.push(num); // 等于 1 阐明之前呈现过一次 这次反复呈现了
map[num] = (map[num] || 0) + 1; // 奥妙之处 开始第一次呈现无值 记为 0 + 1 = 1 下一次从 1 开始累加
});
return result;
}
console.log(repeat1(arr));
// 办法二
function repeat(arr) {let result = arr.filter((x, i, self) => {return self.indexOf(x) === i && self.lastIndexOf(x) !== i
}); //
return result;
}
console.log(repeat(arr));
数组中依照数字反复呈现的次数进行排序
// 如果次数雷同 则依照值排序 比方 2, 2, 2 和 1, 1, 1 应排序为 [1, 1, 1, 2, 2, 2]
// 比方 [1,2,1,2,1,3,4,5,4,5,5,2,2] => [3, 4, 4, 1, 1, 1, 5, 5, 5, 2, 2, 2, 2]
let arr = [9, 7, 7, 1, 2, 1, 2, 1, 3, 4, 5, 4, 5, 5, 2, 2];
function sortArray(arr) {let obj = {};
let newArr = [];
for(let i = 0; i < arr.length; i++) {let cur = arr[i];
if(obj[cur]){obj[cur].push(cur);
continue;
}
obj[cur] = [cur];
}
for(let k in obj) {if(obj.hasOwnProperty(k)) {newArr.push(obj[k])
}
}
newArr.sort((a, b) => {if(a.length === b.length){return a[0] - b[0];
}
return a.length - b.length;
});
newArr = newArr.reduce((prev, cur) => prev.concat(cur));
return newArr;
}
console.log(sortArray(arr)); // [3, 9, 4, 4, 7, 7, 1, 1, 1, 5, 5, 5, 2, 2, 2, 2]
不必循环,创立一个长度为 100 的数组,并且每个元素的值等于它的下标。
// 办法一 递归写法
function createArray(len, arr = []) {if (len > 0) {arr[--len] = len;
createArray(len, arr);
}
return arr;
}
console.log(createArray(100));
// 办法二
// 上面评论中 @MaDivH 提供的实现办法 长度为 100 的数组
Array(100).fill().map((_,i)=>i+1);
// 办法三
[...Array(100).keys()]
依据关键词找出 所在对象 id
var docs = [
{
id: 1,
words: ['hello', "world"]
}, {
id: 2,
words: ['hello', "hihi"]
}, {
id: 3,
words: ['haha', "hello"]
}, {
id: 4,
words: ['world', "nihao"]
}
];
findDocList(docs, ['hello']) // 文档 id1,文档 id2,文档 id3
findDocList(docs, ['hello', 'world']) // 文档 id1
function findDocList(docs, word = []) {if (word.constructor !== Array) return;
let ids = [];
for (let i = 0; i < docs.length; i++) {let {id, words} = docs[i];
let flag = word.every((item) => {return words.indexOf(item) > -1;
});
flag && ids.push(id);
}
return ids;
}
findDocList(docs, ['hello', 'world']);
getElementsByClassName 兼容写法
function getByClass(cName) {if ('getElementsByClassName'in this) {return this.getElementsByClassName(cName);
}
cName = cName.replace(/(^\s+|\s+$)/g, '').split(/\s+/g);
let eles = this.getElementsByTagName('*');
for (let i = 0; i < cName.length; i++) {let reg = new RegExp(`(^|)${cName[i]}(|$)`);
let temp = [];
for (let j = 0; j < eles.length; j++) {let cur = eles[j];
let {className} = cur;
if (reg.test(className)) {temp.push(cur);
}
}
eles = temp;
}
return eles;
}
console.log(content.getByClass('c1 c2'));
插入排序
插入排序 从后往前比拟 直到碰到比以后项 还要小的前一项时 将这一项插入到前一项的前面
function insertSort(arr) {
let len = arr.length;
let preIndex, current;
for (let i = 1; i < len; i++) {
preIndex = i - 1;
current = arr[i]; // 以后项
while (preIndex >= 0 && arr[preIndex] > current) {arr[preIndex + 1] = arr[preIndex]; // 如果前一项大于以后项 则把前一项往后挪一位
preIndex-- // 用以后项持续和后面值进行比拟
}
arr[preIndex + 1] = current; // 如果前一项小于以后项则 循环完结 则将以后项放到 前一项的前面
}
return arr;
}
抉择排序
抉择排序 每次拿以后项与前面其余项进行比拟 失去最小值的索引地位 而后把最小值和以后项替换地位
function selectSort(arr) {
let len = arr.length;
let temp = null;
let minIndex = null;
for (let i = 0; i < len - 1; i++) { // 把以后值的索引作为最小值的索引一次去比拟
minIndex = i; // 假如以后项索引 为最小值索引
for (let j = i + 1; j < len; j++) { // 以后项前面向一次比小
if (arr[j] < arr[minIndex]) { // 比假如的值还要小 则保留最小值索引
minIndex = j; // 找到最小值的索引地位
}
}
// 将以后值和比拟出的最小值替换地位
if (i !== minIndex) {temp = arr[i]
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
}
return arr;
}
冒泡排序
冒泡排序 相邻两项进行比拟 如果以后值大于后一项 则替换地位
function bubleSort(arr) {
let length = arr.length;
let temp = null;
for (let i = 0; i < length - 1; i++) { // 管制轮数
let flag = false; // 以后这轮是否替换过标识
for (let l = 0; l < length - i - 1; l++) { // 管制每轮比拟次数
if (arr[l] > arr[l + 1]) {temp = arr[l];
arr[l] = arr[l + 1];
arr[l + 1] = temp;
flag = true; // 如果产生过替换 flag 则为 true
}
}
if (!flag) { // 优化 如果从头到尾比拟一轮后 flag 仍然为 false 阐明 曾经排好序了 没必要在继续下去
temp = null;
return arr;
}
}
}
疾速排序(递归)
function quickSort(arr) {if (arr.length <= 1) return arr;
let midIndex = Math.floor(arr.length / 2);
let midNum = arr.splice(midIndex, 1)[0];
let left = [];
let right = [];
for(let i = 0; i < arr.length; i++) {let cur = arr[i];
if (cur <= midNum) {left.push(cur);
} else {right.push(cur);
}
}
return quickSort(left).concat(midNum, quickSort(right));
}
let arr = [2, 4, 12, 9, 22, 10, 18, 6];
quickSort(arr);
数组去重几种办法
const arr = [1, 2, 1, 2, 3, 4, 2, 1, 3];
// 1 ES6
let newArr = [...new Set(arr)];
// 2
const arr = [1, 2, 1, 2, 3, 4, 'l', 2, 1, 3, 'l'];
const newArr = arr.filter(function(ele, index, array) {return index === array.indexOf(ele)
});
console.log(newArr); // [1, 2, 3, 4, 'l']
// 3
Array.prototype.unique2 = function() {let newArr = [];
let len = this.length;
for(let i = 0; i < len; i++) {let cur = this[i];
if(newArr.indexOf(cur) === -1) {newArr[newArr.length] = cur;
}
}
return newArr;
}
console.log(arr.unique1());
// 4
Array.prototype.unique3 = function() {let newArr = this.slice(0);
let len = this.length;
let obj = {};
for(let i = 0; i < len; i++) {let cur = newArr[i];
if(obj[cur]) {newArr[i] = newArr[newArr.length - 1];
newArr.length--;
i--;
continue;
}
obj[cur] = cur;
}
return newArr;
}
console.log(arr.unique3());
// 5
Array.prototype.unique4 = function() {let json = {}, newArr = [], len = this.length;
for(var i = 0; i < len; i++) {let cur = this[i];
if (typeof json[cur] == "undefined") {json[cur] = true;
newArr.push(cur)
}
}
return newArr;
}
console.log(arr.unique4());
千分符
办法一
// 解决数字
let str1 = 2123456789;
let str2 = 2123456789.12;
console.log(str1.toLocaleString()); // 2,123,456,789
console.log(str2.toLocaleString()); // 2,123,456,789.12
办法二
// 解决字符串
let str1 = '2123456789';
let str2 = '2123456789.12';
// 利用正向预查 匹配 结尾一个数字 \d 前面匹配这个数字前面必须是三个数字为一组为结尾或小数为结尾
function thousandth(str) {let reg = /\d(?=(?:\d{3})+(?:\.\d+|$))/g;
return str.replace(reg, '$&,');
}
console.log(thousandth(str1)); // 2,123,456,789
console.log(thousandth(str2)); // 2,123,456,789.12
在一个数组中 如 a、b 两项, 要保障 a 和 b 两项的差 与 a 和 b 两项索引的差 的相加后的后果 max 是数组中其余两项 max 中的最大值 找出符合条件两项 a, b 的值 (不能够排序 或扭转数组地位) 如:
let max = (a – b) + (a 的索引 - b 的索引);
求 a b
答案:
// 思路:其实也就是找出数组中以后的每一项与本身索引相加后的和的最大值以及与索引相加后的最小值的和 找出符合条件的两项即可 如 let result = (maxItem-minItem) + (maxIndex-minIndex) 等价于 (maxItem+maxIndex) - (minItem+minIndex)
// let arr = [1, 2, 3, 4, 5, 6]; // 最简略的测试数组 最小项 1 最大项 6
// 很显然这个数组中最大值 6 与索引相加 (6+5) 是当中最大值 11 1 与索引相加 (1+0) 为当中的最小值 1(6 + 5)-(1+0)= 10
// 假如法
let arr = [2, 10, 9, 1, 8, 3, 4];
let minItem = arr[0]; // 假如第一项与本身索引的和是最小值 索引为 0 因而省略
let maxItem = arr[0]; // 假如第一项与本身索引的和是最大值 索引为 0 因而省略
let min = minItem; // 最小项
let max = maxItem; // 最大项
let minIndex = 0; // 最小项索引
let maxIndex = 0; // 最大项索引
for(let i = 1; i < arr.length; i++) {let cur = arr[i] + i; // 以后项和本身索引的和
cur < minItem ? (minItem = cur, min = arr[i], minIndex = i) : null;
cur > maxItem ? (maxItem = cur, max = arr[i], maxIndex = i) : null;
}
console.log(maxItem, minItem); // 最大项与索引的和 最小项与索引的和
console.log(max, min); // 最大项 最小项
console.log(maxIndex, minIndex); // 最大项的索引 最小项的索引
检测 字符串中括号表达式是否均衡
// 如 balance('[()') = false; balance('[()()()]') = true
// 一
function match(a, b) {return (a === '(' && b === ')') || (a === ')' && b === '(') || (a === '[' && b === ']') || (a === ']' && b === '[');
}
function balance(str) {if (str.length % 2 === 0) {
let len = str.length;
for (let i = 0, j = len - 1; i < len / 2; i++, j--) {if (!match(str[i], str[j])) {returnfalse;}
}
returntrue;
}
returnfalse;
}
console.log(balance('[()()()]')); // true
console.log(balance('[()')); // false
console.log(balance('[]()')); // false
// 二
function is_balance(str) {return [...str].reduce((stack, c) => {match(stack[stack.length - 1], c) ?
stack.pop() : stack.push(c);
return stack;
}, []).length === 0;
}
console.log(is_balance('[()()()]')); // true
console.log(is_balance('[()')); // false
console.log(is_balance('[]()')); // false
求相邻两项最大和
// 一
let arr1 = [-1, 3, 1, -5, 2]; // 如 [2, 4, -4, -3] => 4
function sum(arr) {let prev = arr[0];
let sumArr = [];
let len = arr.length;
for(let i = 1; i < len; i++) {let cur = arr[i];
sumArr.push(cur + prev);
prev = cur;
}
return Math.max(...sumArr);
}
console.log(sum(arr1));
// 二
function maxsum(arr) {const M = [arr[0]];
let max = M[0];
for(let i = 1; i < arr.length; i++) {M[i] = Math.max(arr[i], M[i - 1] + arr[i]);
max = Math.max(M[i], max);
}
return max;
}
字符串去除相邻的反复项 如:’aabbccddeexxxxaa’ => ‘abcdexa’
// 正则表达式
let str = 'aabbccddeexxxxaa';
function uniq1(str) {// return str.replace(/([a-z])(\1){1,}/g, '$1');
return str.replace(/(.)(?=\1)/g, '');
}
console.log(uniq1(str));
// 数组形式
function uniq2(str) {let arr = str.split('');
let newArr = [arr[0]];
for(let i = 1; i < arr.length; i++) {let cur = arr[i];
if (cur !== newArr[newArr.length - 1]) {newArr.push(cur);
}
}
return newArr.join('');
}
console.log(uniq2(str));