前端复习企划14-JS功能与原理实现
JS功能实现
数组去重的方法
双重for循环
外层遍历，内层比较。
function distinct(arr){
for(let i=0,len=arr.length;i<len;i++){
for(let j=i+1;j<len;j++){
if(arr[i]==arr[j]){
arr.splice(j,1);
//数组长度变了
len --;
j--;
}
}
}
} Array.filter()+indexOf()
合并为一个数组，用fliter遍历数组,结合indexOf排除重复项。
function distinct(arr){
return arr.filter((item,index)=>arr.indexOf(item)===index)
} for...of+includes()
双重for的升级版，外层用for...of替换，内层循环改用includes。
创建一个新数组，如果includes返回false,将该元素push进去。
function distinct(arr){
let result=[];
for(let i of arr){
!result.includes(i)&&result.push(i);
}
return result;
} Array.sort()+相邻元素比较
先排序，然后比较相邻元素，从而排除重复项。
function distinct(arr){
arr.sort();
let result=[arr[0]];
for(let i=1,len=arr.length;i<len;i++){
arr[i] !==arr[i-1]&&result.push(arr[i]);
}
return result;
} new Set()
function distinct(arr){
return Array.from(new Set([...arr]));
} for...of+Object对象属性不重复
function distinct(arr){
let result=[];
let obj={};
for(let i of arr){
if(!obj[i]){
result.push(i);
obj[i]=1;
}
}
return result;
} 数组扁平化
先解释一下意思：就是[1,[2,3,[4,5]]]这样的多维数组，变为一维数组[1,2,3,4,5]
reduce实现
遍历每一项，若值为数组则递归遍历，否则concat
function flatten(arr){
return arr.reduce((result.item)=>{
return result.concat(Array.isArray(item)? flatten(item):item);
},[])
} toString()和split
调用数组的toString()方法，将数组变为字符串，然后再用split分割还原为数组。
split分割后形成的数组每一项值为字符串，所以需要用一个map方法遍历数组将其每一项换为数值型
function flatten(arr){
return arr.toString().split(',').map(function(item){
return Number(item);
})
} join&split
也是将数组转换为字符串
function flatten(arr){
return arr.join(',').split(',').map(function(item){
return parseInt(item);
})
} 递归
function flatten(arr){
var res=[];
arr.map(item=>{
if(Array.isArray(item)){
res=res.concat(flatten(item));
}else{
res.push(item);
}
});
return res;
} 扩展运算符
function flatten(arr){
while(arr.some(item=>Array.isArray(item))){
arr=[].concat(...arr);
}
return arr;
} 异步操作对比--实现获取用户信息
先写一个获取用户的方法
function fetchUser() {
return new Promise((resolve, reject) => {
fetch('https://api.github.com/users/yiichitty')
.then((data) => {
resolve(data.json());
}, (error) => {
reject(error);
});
});
} 使用Promise
function getUserByPromise() {
fetchUser()
.then((data) => {
console.log(data);
}, (error) => {
console.log(error);
})
} Promise 的方式虽然解决了回调地狱的问题，但是如果处理流程复杂的话，整段代码将充满 then()。
它的语义化不明显，代码流程不能很好的表示执行流程。
使用Generator
function* fetchUserByGenerator() {
const user = yield fetchUser();
return user;
}
const g = fetchUserByGenerator();
const result = g.next().value;
result.then((v) => {
console.log(v);
}, (error) => {
console.log(error);
}) Generator 的方式解决了 Promise 的一些问题，流程更加直观、语义化。但是 Generator 的问题在于，函数的执行需要依靠执行器，每次都需要通过next()的方式去执行。
使用async+await
async function getUserByAsync(){
let user = await fetchUser();
return user;
}
getUserByAsync()
.then(v => console.log(v)); async函数完美的解决了上面两种方式的问题。流程清晰，直观、语义明显。
操作异步流程就如同操作同步流程。同时async函数自带执行器，执行的时候无需手动加载。
数组去重通用API
要求就是写一个数组去重的API，第一个参数是一个数组，第二个参数是一个函数（对象数组去重的规则）。
思路就是当它是数组的时候，直接用这个Set数据结构去重，如果是个对象数据的话，就新建一个Map，按照传入的函数返回的值，存入Map。这里用到了filter，它是用传入的函数测试所有的元素，并且返回所有通过测试的元素。
function fn(arr,rule){
if(!rule){
return Array.from(new Set([...arr]));
}else{
const res=new Map();
return arr.filter((a)=>!res.has(rule(a))&&res.set(rule(a),1));
}
} 对象数组按规则排序
有一个数组，里面都是对象，现在要针对对象中的某一个key进行排序，顺序是已给定的数组。
比如原数组为[{a:'ww'},{a:'ff'},{a:'pe'}]，
顺序是[{ww:1},{pe:3},{hf:2},{oo:4},{ff:5}]
那么输出是 [{a:'ww'},{a:'pe'},{a:'ff'}]
var objarr=[{a:'ww'},{a:'ff'},{a:'pe'}];
var rulearr=[{ww:1},{pe:3},{hf:2},{oo:4},{ff:5}];
//暴力解决
function sortByRule(objarr,key,rulearr){
let ResultArr=[];
rulearr.forEach(item=>{
//获取当前的value和规则的位次
let value=Object.getOwnPropertyNames(item)[0];
let order=item[value];
//找到对应的obj放入对应位次的位置
ResultArr[order]=objarr.find(item=>item[key]===value);
});
//去掉那些为空的
return ResultArr.filter(item=>item);
}
//用sort方法
function sortByRule(objarr,key,rulearr){
//把rulearr处理成一个对象{ww:1,pe:3……}
let rule={}
rulearr.forEach(item=>rule={...rule,...item});
//对objarr排序
return objarr.sort((a,b)=>{
//取到“a”
const akey=Object.keys(a)[0];
const bkey=Object.keys(b)[0];
//按升序排
return rule[a[akey]]-rule[b[bkey]];
}
return 0;
})
} 实现防抖
//实现按钮防2次点击操作
//在规定时间内再次触发就清除定时后重新设置，直到不触发了
function debounce(fn,delay){
let timer=0;
return function(...args){
if (timer) clearTimeout(timer)
timer=setTimeout(()=>{func.apply(this,args)},delay);
}
}
function fn(){
console.log('防抖')
}
addEventListener('scroll',debounce(fn,1000)) 实现节流
//节流就是说在一定时间内只会被触发一次
//比如滚动事件啥的
function throttle(fn,delay){
let last;//上次被触发的时间
return function(...args){
let now=+new Date();
if(!last||now>last+delay){
last=now;
func.apply(this,args);
}
}
}
//使用
function fn(){
console.log('节流');
}
addEventListener('scroll',throttle(fn,1000)); 实现懒加载
//首先html的img标签设置一个无关的标签比如说data，加载到的时候再替换成src
//思路就是到视口区了再替换过去加载
let img=document.querySelectorAll('img');
//可视区大小
let clientHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
function lazyload(){
//滚动卷走的高度
let scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;
for(let i=0;i<imgs.length;i++){
//在可视区冒出的高度
let x=clientHeight+scrollTop-imgs[i].offsetTop;
if(x>0&&x<clientHeight+imgs[i].height){
img[i].src=img[i].getAttribute('data');
}
}
}
//addEventListener('scroll',lazyload)
//setInterval(lazyload,1000) hash路由
//hash路由
class Route{
constructor(){
//存储对象
this.routes=[];
//当前hash
this.currentHash=''
//绑定this.避免监听时this指向改变
this.freshRoute=this.freshRoute.bind(this);
//监听
window.addEventListener('load',this.freshRoute,false);
window.addEventListener('hashmessage',this.freshRoute,false);
}
//存储
storeRoute(path,cb){
this.routes[path]=cb||function(){};
}
//更新
freshRoute(){
this.currentHash=location.hash.slice(1)||'/'
this.routes[this.currentHash]();
}
} 实现元素拖拽
window.onload=function(){
//drag目标是绝对定位状态
var drag=document.getElementById('box');
drag.onmousedown=function(e){
e=e||window.event;
//鼠标与拖拽元素的距离=鼠标与可视区边界的距离-拖拽元素与可视区的距离
let diffX=e.clientX-drag.offsetLeft;
let diffY=e.clientY-drag.offsetTop;
drag.onmousemove=function(e){
e=e||window.event;
//拖拽元素的移动距离=鼠标当前与可视区边界的距离-鼠标与拖拽元素的距离
let left=e.clientX-diffX;
let top=e.clientY-diffY;
//避免拖出可视区外
if(left<0){ left=0;}
else if(left>window.innerWidth-drag.offsetWidth){
//超出了就放在innerWidth的位置
left=window.innerWidth-drag.offsetWidth;
}
if(top<0) top=0;
else if (top>window.innerHeight-drag.offsetHeight){
top=window,innerHeight-drag.offsetHeight;
}
drag.style.left=left+'px';
drag.style.top=top+'px';
}
drag.onmouseup=function(e){
e=e||window.event;
this.onmousemove=null;
this.onmousedown=null;
}
}
} 构建一个Service Worker
//比如在index.js里注册一个Service Worker
if (navigator.serviceWorker){
navigator.serviceWorker.register('xx.js').then(
function (registration){
console.log ('注册成功')
}).catch(function(e){
console.log('注册失败')
})
}
//xx.js
//监听install事件，缓存所需要的文件
self.addEventListener('install',e=>{
e.wiatUntil(
caches.open('my-cache').then(function(cache){
return cache.addAll(['./index.html','./index.js'])
})
)
})
//拦截请求
//如果缓存中已经有数据就直接用缓存，否则去请求数据
self.addEventListener('fetch',e=>{
e.respondWith(
cache.match(e.request).then(function(response){
if(response){
return response;
}
console.log('fetch source');
})
)
}) JS原理
使用setTimeout模拟setInterval
//使用setTimeout模拟setInterval
//避免因执行时间导致间隔执行时间不一致
setTimeout(function(){
//do something
//arguments.callee引用该函数体内当前正在执行的函数
setTimeout(arguments.callee,500);
},500) 实现call
////传入一个this 绑定上所有的属性
Function.prototype.myCall=function(context){
if(typeof this !=='function'){
throw new TypeError('error');
}
context=context||window;
context.fn=this;
//除去要绑定的对象，剩下参数应该绑定进去
const args=[...arguments].slice(1);
const result=context.fn(...args);
delete context.fn;
return result;
} 实现Apply
//与call的区别是，第二个第二个参数传入的是数组
Function.prototype.apply()=function(context){
if(typeof this !=='function'){
throw new TypeError('error');
}
context=context||window;
context.fn=this;
let result;
//判断是否存在数组参数,毕竟是可选参数
if(arguments[1]){
result=context.fn(...arguments[1]);
}else{
result=context.fn();
}
delete context.fn;
return result;
} 实现Bind
Function.prototype.myBind=function(context){
if (typeof this !== 'function') {
throw new TypeError('error');
}
const _this=this;
const args=[...arguments].slice(1);
return function F(){
// new ,不动this
if (this instanceof F){
//链式调用要加上新旧参数
return new _this(...args,...arguments);
}
return _this.apply(context,args.concat(...arguments));
}
} 实现Object.create()
//Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
Object.prototype.mycreate=function(obj){
function F(){}
F.prototype=obj;
return new F();
}
//其实也可以这么写
Object.prototype.mycreate=function(obj){
return {'_protp_':obj};
} 实现new
//使用new时:1 内部生成一个obj 2 链接到原型 3 obj绑定this(使用构造函数的this) 4 返回新对象（原始值的话忽略，如果是对象的话就返回这个对象）
Function.prototype.myNew()=function(func,...args){
let obj={};
obj._proto_=func.prototype;
let result=func.apply(obj,args);
return result instanceof Object? result:obj;
}
//可以用Object.create
//以构造函数的原型对象为原型，创建一个空对象；等价于 创建一个新的对象，把他的_proto_指向prototype
Function.prototype.myNew()=function(func,...args){
let obj=Object.create(func.prototype);
let result=func.apply(obj,args);
return result instanceof Object? result:obj;
} Instanceof
//本质是看左边变量的原型链是否含有右边的原型
function myInstanceof(left,right){
//要找的原型
let prototype=right.prototype;
left=left._proto_;
while(true){
//全部遍历完都没有 false
if(left===null||left==="undefined") return false;
//匹配上 true
if(left===prototype) return true;
//找下一个原型链
left=left._proto_;
}
} 深拷贝
//JSON.parse 解决不了循环引用的问题，会忽略undefined\symbol\函数
let a={}
let b=JSON.parse(JSON.stringify(a));
//循环引用是说a.b.d=a.b这样的
//MessageChannel含有内置类型，不包含函数
function structuralClone(obj){
return new Promise(resolve=>{
const{port1,port2}=new MessageChannel();
port2.onmessage=ev=>{resolve(ev.data)}
port1.postMessage(obj);
})
}
//可以处理循环引用对象、也可以处理undefined
//不过它是异步的
const test =async()=>{
const clone=await structuralClone(obj);
console.log(clone);
}
test();
//手写一个简单的deepclone
function deepClone(obj){
function isObject(o){
return (typeof o==='object'||typeof o==='function')&&o !==null;
}
if(!isObject(obj)){
throw new Error('Not Object')
}
let isArray=Array.isArray(obj);
let newObj=isArray?[...obj]:{...obj};
Reflect.ownKeys(newObj).forEach(item=>{
newObj[item]=isObject(obj[item])?deepClone(obj[item]):obj[item];
})
return newObj;
}
//还可以这样写
function deepClone(){
let copy=obj instanceof Array? []:{};
for(let i in obj){
if(obj.hasOwnProperty(i)){
copy[i]=typeof obj[i] ==='object'?deepClone(obj[i]):obj[i];
}
}
return copy;
} 实现Array.map()
Array.prototype.newMap = function(fn) {
var newArr = [];
for(var i = 0; i<this.length; i++){
newArr.push(fn(this[i],i,this))
}
return newArr;
} 实现Array.reduce()
Array.prototype.MyReduce = function(fn , prev) {
for(let i = 0; i<this.length; i++) {
if (typeof prev === 'undefined') {
// prev不存在
prev = fn(this[i], this[i+1], i+1, this);
i++;
} else {
prev = fn(prev, this[i], i, this);
}
}
return prev;
原生实现Ajax
//简单流程
//实例化
let xhr=new XMLHttpRequest();
//初始化
xhr.open(methond,url,async);
//发送请求
xhr.onreadystatechange=()=>{
if(xhr.readyState===4&&xhr.status===200){
console.log(xhr.responseText);
}
}
//有Promise的实现
function ajax(options){
//地址
const url=options.url;
//请求方法
const method=options.methond.toLocalLowerCase()||'get';
//默认为异步true
const async=options.async;
//请求参数
const data=options.data;
//实例化
let xhr=new XMLHttpRequest();
//超时时间
if(options.timeout&&options.timeout>0){
xhr.timeout=options.timeout;
}
return new Promise((resolve,reject)=>{
xhr.ontimeout=()=>reject&&reject('请求超时');
//状态变化回调
xhr.onreadystatechange=()=>{
if(xhr.readyState==4){
if(xhr.status>=200&&xhr.status<300||xhr.status==304){
resolve && resolve(xhr.responseText)
}else{
reject&&reject();
}
}
}
//错误回调
xhr.onerr=err=>reject&&reject();
let paramArr=[];
let encodeData;
//处理请求参数
if(data instanceof Object){
for(let key in data){
paramArr.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key]));
}
encodeData=paramArr.join('&');
}
//get请求拼接参数
if(method==='get'){
//检查url中有没有?以及它的位置
const index=url.indexOf('?');
if(index===-1) url+='?';
else if (index !==url.length -1) url+='&';
url += encodeData;
}
//初始化
xhr.open(method,url,async);
if(method ==='get') xhr.send(encodeData);
else{ //post设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-unlencoded;charset=UTF-8');
xjr.send(encodeData);
}
})
} 手写实现一个Promise
//n个promise的数组，按要执行的顺序排好
var promiseArr=[new Promise(()=>{console.log('1')}),
new Promise(()=>{console.log('2')}),
new Promise(()=>{console.log('3')}),
new Promise(()=>{console.log('4')})
];
function* donebyOrder(arr){
let len=arr.length;
for(let i=0;i<len;i++){
yield arr[i];
}
}
let gen=donebyOrder(promiseArr)
for(let i=1;i<promiseArr.length;i++){
gen.next();
}
实现Promise.all
//Promise.all
//多个Promise任务并行执行,输入是一个数组，最后输出一个新的Promise对象
//1.如果全部成功执行，则以数组的方式返回所有Promise任务的执行结果；
//2.如果有一个Promise任务rejected，则只返回 rejected 任务的结果。
function promiseAll(promises){
return new Promise(resolve,reject)=>{
if(!Array.isArray(promises)){
return reject(new Error("arguments must be an array"))
}
let promisecounter=0,
promiseNum=promises.length,
//保存结果
resolvedValues=new Array(promisNum);
for(let i =0;i<promiseNum;i++){
(function(i){
Promise.resolve(promises[i]).then((value)=>{
promiscounter++;
resolvedValues[i]=value;
if(promiseCounter==promiseNum) {
return resolve(resolvedValues);
}
}).catch(err=>{reject(err)})
})(i)
}
} rem的实现原理
function setRem(){
let doc=document.documentElement;
let width=doc.getBoundingClientRect().width;
let rem=width/75
doc.style.fontsize=rem+'px';
}
addEventListener("resize",setRem); 双向数据绑定实现原理
//双向数据绑定
let obj={};
let input=document.getElementById('input');
let span=document.getElementById('span');
//数据劫持
Object.defineProperty(obj,'text',{
configurable:true,
enumerable:true,
get(){
console.log('获取数据');
},
set(newVal){
console.log('数据更新');
input.value=newVal;
span.innerHTML=newVal;
}
})
//监听
input.addEventListener('keyup',function(e){
obj.text=e.target.value;
}) EventBus组件通信原理
//组件通信
//一个触发 监听的过程
class EventEmitter{
constructor(){
//存储事件
this.events=this.events||new Map();
}
addListener(type,fn){
if(!this.events.get(type)){
this.events.set(type,fn);
}
}
emit(type){
let handler=this.events.get(type);
handler.apply(this,[...arguments].slice(1))
}
}
//测试
let emitter=new EventEmitter();
emitter.addListener('ages',age=>{console.log(age)})
emitter.emit('ages',24); 
比亚迪工作强度 331人发布
投递联想等公司10个岗位 >