32 pure handwritten JS to consolidate your JS foundation
coldplay.xixi
Release： 2020-10-07 15:55:59
forward
2818 people have browsed it
The
javascript column introduces 32 purely handwritten JS to you to consolidate the foundation of JS (high-frequency interviews), let’s learn together.
As a front-end development, JS is the top priority. The peak period of interviews has recently ended. Basically, the offer has been finalized and we are waiting for the draw. I will take advantage of this time to summarize Below are 32 handwritten JS questions. These are high-frequency interview questions. I hope they can be helpful to you.
The source code follows the specifications and can be run through MDN examples. Most of the rest will involve some application questions about JS and my interview process
01. Array flattening
Array flattening refers to turning a multi-dimensional array into a one-dimensional array
const unique5 = arr => { const map = new Map(); const res = []; for (let i = 0; i < arr.length; i++) { if (!map.has(arr[i])) {
map.set(arr[i], true)
res.push(arr[i]);
}
} return res;
}复制代码
Copy after login
03. Convert class array to array
Class array has the length property but does not have methods on the array prototype. Common class arrays include arguments and the results returned by DOM operation methods.
Array.prototype.filter = function(callback, thisArg) { if (this == undefined) { throw new TypeError('this is null or not undefined');
} if (typeof callback !== 'function') { throw new TypeError(callback + 'is not a function');
} const res = []; // 让O成为回调函数的对象传递（强制转换对象）
const O = Object(this); // >>>0 保证len为number，且为正整数
const len = O.length >>> 0; for (let i = 0; i < len; i++) { // 检查i是否在O的属性（会检查原型链）
if (i in O) { // 回调函数调用传参
if (callback.call(thisArg, O[i], i, O)) {
res.push(O[i]);
}
}
} return res;
}复制代码
Copy after login
For
> >>0 Questions: Explain>>>The role of 0
05.Array.prototype.map()##
Array.prototype.map = function(callback, thisArg) { if (this == undefined) { throw new TypeError('this is null or not defined');
} if (typeof callback !== 'function') { throw new TypeError(callback + ' is not a function');
} const res = []; // 同理
const O = Object(this); const len = O.length >>> 0; for (let i = 0; i < len; i++) { if (i in O) { // 调用回调函数并传入新数组
res[i] = callback.call(thisArg, O[i], i, this);
}
} return res;
}复制代码
Copy after login
06.Array.prototype.forEach()##forEach is similar to map, The only difference is that
forEach has no return value.
Array.prototype.forEach = function(callback, thisArg) { if (this == null) { throw new TypeError('this is null or not defined');
} if (typeof callback !== "function") { throw new TypeError(callback + ' is not a function');
} const O = Object(this); const len = O.length >>> 0; let k = 0; while (k < len) { if (k in O) {
callback.call(thisArg, O[k], k, O);
}
k++;
}
}复制代码
Copy after login
07.Array.prototype.reduce()
Array.prototype.reduce = function(callback, initialValue) { if (this == undefined) { throw new TypeError('this is null or not defined');
} if (typeof callback !== 'function') { throw new TypeError(callbackfn + ' is not a function');
} const O = Object(this); const len = this.length >>> 0; let accumulator = initialValue; let k = 0; // 如果第二个参数为undefined的情况下
// 则数组的第一个有效值作为累加器的初始值
if (accumulator === undefined) { while (k < len && !(k in O)) {
k++;
} // 如果超出数组界限还没有找到累加器的初始值，则TypeError
if (k >= len) { throw new TypeError('Reduce of empty array with no initial value');
}
accumulator = O[k++];
} while (k < len) { if (k in O) {
accumulator = callback.call(undefined, accumulator, O[k], k, O);
}
k++;
} return accumulator;
}复制代码
Copy after login
08.Function.prototype.apply()First one The parameter is bound this, the default is
window
, the second parameter is an array or array-like
Function.prototype.apply = function(context = window, args) { if (typeof this !== 'function') { throw new TypeError('Type Error');
} const fn = Symbol('fn');
context[fn] = this; const res = context[fn](...args); delete context[fn]; return res;
}复制代码
Copy after login
09.Function.prototype.callyu
call
The only difference is that the
call() method accepts a parameter list
Function.prototype.call = function(context = window, ...args) { if (typeof this !== 'function') { throw new TypeError('Type Error');
} const fn = Symbol('fn');
context[fn] = this; const res = context[fn](...args); delete context[fn]; return res;
}复制代码
Copy after login
10.Function.prototype.bind
Function.prototype.bind = function(context, ...args) { if (typeof this !== 'function') { throw new Error("Type Error");
} // 保存this的值
var self = this; return function F() { // 考虑new的情况
if(this instanceof F) { return new self(...args, ...arguments)
} return self.apply(context, [...args, ...arguments])
}
}复制代码
Copy after login
11.debounce( Anti-shake) The function will only be executed once within n seconds after the high-frequency time is triggered. If the high-frequency time is triggered again within n seconds, the time will be recalculated.
Anti-shake is often used when users perform search input to save request resources. Anti-shake is only triggered once when
window
triggers the
resize event. 12.throttle (throttle)
High-frequency time trigger, but it will only be executed once in n seconds, so throttling will dilute the execution frequency of the function.
const throttle = (fn, time) => { let flag = true; return function() { if (!flag) return;
flag = false;
setTimeout(() => {
fn.apply(this, arguments);
flag = true;
}, time);
}
}复制代码
Copy after login
Throttling is often used to trigger continuous mouse clicks and monitor scrolling events. 13. Function clarification
refers to changing a function that accepts multiple parameters into a fixed form that accepts one parameter and returns a function, so that it can be called again, for example f(1)(2)
Classic interview question: Implement
add(1)(2)(3)(4)=10;
,
add(1 )(1,2,3)(2)=9;
function add() { const _args = [...arguments]; function fn() {
_args.push(...arguments); return fn;
}
fn.toString = function() { return _args.reduce((sum, cur) => sum + cur);
} return fn;
}复制代码
Copy after login
14. Simulate new operation3 steps:
以ctor.prototype为原型创建一个对象。
执行构造函数并将this绑定到新创建的对象上。
判断构造函数执行返回的结果是否是引用数据类型，若是则返回构造函数执行的结果，否则返回创建的对象。
function newOperator(ctor, ...args) { if (typeof ctor !== 'function') { throw new TypeError('Type Error');
} const obj = Object.create(ctor.prototype); const res = ctor.apply(obj, args); const isObject = typeof res === 'object' && res !== null; const isFunction = typeof res === 'function'; return isObject || isFunction ? res : obj;
}复制代码
const myInstanceof = (left, right) => { // 基本数据类型都返回false
if (typeof left !== 'object' || left === null) return false; let proto = Object.getPrototypeOf(left); while (true) { if (proto === null) return false; if (proto === right.prototype) return true;
proto = Object.getPrototypeOf(proto);
}
}复制代码
var a = { b: 123, c: '456', e: '789',
}var str=`a{a.b}aa{a.c}aa {a.d}aaaa`;// => 'a123aa456aa {a.d}aaaa'复制代码
Copy after login
实现函数使得将str字符串中的{}内的变量替换，如果属性不存在保持原样（比如{a.d}）
类似于模版字符串，但有一点出入，实际上原理大差不差
const fn1 = (str, obj) => { let res = ''; // 标志位，标志前面是否有{
let flag = false; let start; for (let i = 0; i < str.length; i++) { if (str[i] === '{') {
flag = true;
start = i + 1; continue;
} if (!flag) res += str[i]; else { if (str[i] === '}') {
flag = false;
res += match(str.slice(start, i), obj);
}
}
} return res;
}// 对象匹配操作const match = (str, obj) => { const keys = str.split('.').slice(1); let index = 0; let o = obj; while (index < keys.length) { const key = keys[index]; if (!o[key]) { return `{${str}}`;
} else {
o = o[key];
}
index++;
} return o;
}复制代码
The above is the detailed content of 32 pure handwritten JS to consolidate your JS foundation. For more information, please follow other related articles on the PHP Chinese website!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
