JS实现原生api

::: tip

ES5实现map()方法

Array.prototype.MyMap = function(fn,context){
var arr = Array.prototype.slice.call(this); //es5 不需要用...展开
var mappedArr = [];
for(var i =0;i<arr.length;i++){
if(!arr.hasOwnProperty(i))continue;
mappedArr.push(fn.call(context,arr[i],i,this))
}
return mappedArr;
}

ES5实现数组的reduce()方法

Array.prototype.myReduce = function(fn,initialValue){
var arr = Array.prototype.slice.call(this);
var res,startIndex;
res = intitalValue?initialValue:arr[0];
startIndex = intitalValue?0:1;
for(var i=0;i<arr.length;i++){
res = fn.call(null,res,arr[i],i,this);
}
return res;
}

ES6实现call/apply

Function.prototype.myCall = function(context = window,..args){
let func = this;
let fn = Symbol("fn");
conext[fn] = func;
let res = context[fn](...args); //重点代码 利用this指向，相当于context.call(...args)
delete context[fn];
return res;
}

实现generator

// 使用 * 表示这是一个 Generator 函数
// 内部可以通过 yield 暂停代码
// 通过调用 next 恢复执行
function* test() {
let a = 1 + 2;
yield 2;
yield 3;
}
let b = test();
console.log(b.next()); // >
{ value: 2, done: false }
console.log(b.next()); // >
{ value: 3, done: false }
console.log(b.next()); // >
{ value: undefined, done: true }
// cb 也就是编译过的 test 函数
function generator(cb) {
return (function() {
var object = {
next: 0,
stop: function() {}
};
return {
next: function() {
var ret = cb(object);
if (ret === undefined) return { value: undefined, done: true };
return {
value: ret,
done: false
};
}
};
})();
}
// 如果你使用 babel 编译后可以发现 test 函数变成了这样
function test() {
var a;
return generator(function(_context) {
while (1) {
switch ((_context.prev = _context.next)) {
// 可以发现通过 yield 将代码分割成几块
// 每次执行 next 函数就执行一块代码
// 并且表明下次需要执行哪块代码
case 0:
a = 1 + 2;
_context.next = 4;
return 2;
case 4:
_context.next = 6;
return 3;
// 执行完毕
case 6:
case "end":
return _context.stop();
}
}
});
}

实现Object.create方法

function create(proto){
function F(){};
F.prototype = proto;
return new F();
}

实现Bind方法

核心要点：
1、对于普通函数，绑定this指向
2、对于构造函数，要保证原函数的原型对象上的属性不能丢失

Function.prototype.bind = function(context,...args){
let self = this; // this表示的调用bind函数
let fBound = function(){
//this instanceof fBound为true表示构造函数的情况。如new func.bind(obj)
return self.apply(this instanceof fBound?this:context||window,args);
}
fBound.prototype = Object.create(this.prototype); //保证原函数的原型对象上的属性不丢失
return fBound;
}
Function.prototype.bind=function(context,...args){
if(typeof this!=='function'){
throw new Error('not a function');
}
let fn = this;
let resFn = function(...args2){
return fn.apply(this instanceof resFn?this:context,args.contact(args2));
};
const DumpFunction = function DumpFunction(){};
DumpFunction.prototype = this.prototype;
resFn.prototype = new DumpFunction();
return resFn;
}
Function.prototype.myFind=function(context){
if(typeof this!=='function'){
throw new TypeError('Error');
}
var _this = this;
var args = [...arguments].slice(1)
//return a function 
return function F(){
//due to return a function ,use new F() 
if(this instanceof F){
return new _this(...args,...arguments)
}
return _this.apply(context,args.contact(...arguments))
}
}

实现Call

Function.prototype.call = function(context){
var context = context||window;
//add property to context
// getValue.call(a, 'yck', '24') => a.fn = getValue
context.fn = this;
//将context后面的参数取出来
var args = [...arguments].slice(1);
/// getValue.call(a, 'yck', '24') => a.fn('yck',24)
var result = context.fn(...args)
//删除fn
delete context.fn;
return result;
}

实现apply

Function.prototype.apply = function(context){
var context = context||window;
context.fn = this;
var result
//判断是否存储第二个参数
//如果存在，就将第二个参数展开
if(arguments[1]){
result = context.fn(...arguments[1])
}else{
result = context.fn();
}
delete context.fn;
return result;
}

实现new关键字

核心要点:

1.创建一个全新的对象，这个对象的__proto__要指向构造函数的原型对象
2.执行构造函数
3.返回值为object类型则作为new方法的返回值返回，否则返回上述全新对象

function myNew(fn,...args){
let instance = Object.create(fn.prototype);
let res = fn.apply(instance,args);
return typeof res === 'object'?res:instance;
}

实现instanceof的作用

核心要点：原型链的向上查找

function myInstanceOf(left,rigth){
let proto = Object.getPrototype(left);
while(true){
if(proto==null) return false;
if(proto==right.prototype) return true;
proto = Object.getPrototype(proto);
}
}
function instance_of(L:Object,R:any){
let protoChain = Object.getOwnProperty(L);
const LPrototype = R.prototype;
//最坏的情况递归查到Object.prototype === null
while(protoChain){
//两个对象指向同一个内存地址，则为同一个对象
if(protoChain === LPrototype){
return true;
}
protoChain = Object.getPrototypeOf(protoChain);
}
//找到终点还没有找到，则无
return false;
}

实现单例模式

核心要点：使用闭包和proxy拦截

function proxy(fun){
let instance;
let handler = {
constructor(target,args){
if(!instance){
instance = Reflect.constructor(fun,args);
}
return instance;
}
}
return new Proxy(func,handler);
}

实现防抖效果

核心要点：如果在定时器的时间范围内再次触发，则重新计时

const debounce = (fn,delay)=>{
let timer = null;
return (...args) =>{
clearTimeout(timer);
timer = setTimeout(()=>{
fn.apply(this,args);
},delay);
};
};

实现节流功能

核心要点：如果在定时器时间的范围内再次触发，则不予理睬，等当前定时器完成，才能启动下一个定时器

const throttle = (fn,delay=500)=>{
let flag = true;
return (...args)=>{
if(!flag) return;
flag = false;
setTimeout(()=>{
fn.apply(this,args);
flag =true;
},delay);
};
};

JS数组扁平化(flat)方法总结

需求:多维数组=>一维数组

let ary = [1, [2, [3, [4, 5]]], 6];
let str = JSON.stringify(ary);
//第0中处理:直接的调用
arr_flat = arr.flat(Infinity);
//第一种处理
ary = str.replace(/([|])/g, '').split(',');
// (/([|])/g)
//第三种处理：递归处理
let result = [];
let fn = function(ary){
for(let i=0;i<ary.length;i++){
let item = ary[i];
if(Array.isArray(ary[i])){
fn(item);
}else{
result.push(item);
}
}
}
//第四种处理：用 reduce 实现数组的 flat 方法
function flatten(ary){
return ary.reduce((pre,cur)=>
{
return pre.contact(Array.isArray(cur)?flatten(cur):cur);
},[]);
}
let ary = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(ary))
//第五种处理：扩展运算符
while(ary.some(Array.isArray)){
ary = [].contact(...ary);
}
// 多维数组扁平化
var arr = [1,2,[3,4,5,[6,7,8,[9,10]]]];
function streamroller(arr){
var res = [];
for(var i=0;i<arr.length;i++){
if(Array.isArray(arr[i])){
res.push.apply(res,steamroller(arr[i]));
}else{
res.push(arr[i]);
}
}
return res;
}
console.log(steamroller(arr));
//apply+some
// 利用arr.some判断当数组中还有数组的话，递归调用steamroller2扁平函数(利用apply扁平), 用concat连接，最终返回arr;
function steamroller2(arr){
while(arr.some(item=>Array.isArray(item))){
arr = [].concat.apply([],arr);
}
return arr;
}
console.log(steamroller2(arr));
//reduce方法
// 当数组中还有数组的话，递归调用steamroller3扁平函数(利用reduce扁平), 用concat连接，最终返回arr.reduce的返回值;
function steamroller3(arr){
return arr.reduce((pre,next)=>{
return pre.concat(Array.isArray(next)?steamroller3(next):next);
},[])
}
//es6
// 利用arr.some判断当数组中还有数组的话，递归调用flatten扁平函数(利用es6展开运算符扁平), 用concat连接，最终返回arr;
function steamroller4(arr){
while(arr.some(item=>Array.isArray(item))){
arr=[].concat(...arr);
}
return arr;
}
console.log(steamroller4(arr))

数组去重排序

方法一：
双层循环，外层循环元素，内层循环时比较
如果有相同的值则跳过，不相同则push进数组

Array.prototype.distinct = function(){
var arr = this;
result = [],i,j,len=arr.length;
for(i=0;i<len;i++){
for(j=i+1;j<len;j++){
if(arr[i]==arr[j]){
j=++i;
}
}
result.push(arr[i]);
}
return result;
}
var array = [1,2,3,4,5,5,4,1,5,2];
console.log(array.distinct());

ES6

[...new Set(arr)].sort()

hash数组去重

var arr=[1,8,5,6,4,2,3,8,6,7,5,3];
var n={},r=[];
//n为hash表，r为临时数组
for(var i=0;i<arr.length;i++){
if(!n[arr[i]]){ //如果hash表中没有当前项
n[arr[i]]=true;
//把当前项存入hash表
r.push(arr[i]);
//把当前项
r.sort();
r.severse();
}
}
console.log(r);

利用新数组indexof查找

var arr=[1,8,5,6,4,2,3,8,6,7,5,3];
var res=[];
for(var i=0;i<arr.length;i++){
if(res.indexOf(arr[i])==-1){
res.push(arr[i]);
res.sort();
}
}
console.log(res);

reduce模拟map

// 别忘了map的第二个参数
Array.prototype._map = function(fn, context = window) {
if (typeof fn !== 'function') {
throw new TypeError(`${typeof fn} is not a function`);
}
return this.reduce((prev, val, index, arr) => {
return prev.concat(fn.call(context, val, index, arr));
}, []);
};

:::

最后

以上就是悦耳耳机为你收集整理的JavaScript基础之实现部分原生与有趣的api（一）JS实现原生api的全部内容，希望文章能够帮你解决JavaScript基础之实现部分原生与有趣的api（一）JS实现原生api所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。