相信做编程的朋友都知道，目前Javascript是最常用的编程语言之一，超过97%的网站都在使用它。近些年，随着许多框架的推出，涵盖了从后端、Web前端到跨平台移动应用程序，甚至游戏的方方面面，Javascript的流行度达到了很高的水平。
今天广州蓝景小编跟大家分享一下关于20个基础实用的JavaScript技巧，希望对大家有所帮助。
1.确定对象的数据类型
functionmyType(type){
returnObject.prototype.toString.call(type).slice(8,-1);
使用Object.prototype.toString，通过传入不同类型的判断返回不同的判断函数，一行代码，简洁优雅灵活；
2.循环遍历数组map方法
constmyMap=function(fn,context){
letarr=Array.prototype.slice.call(this);
letresultArr=Array();
for(leti=0;iarr.length;i++){
if(!arr.hasOwnProperty(i))continue;
resultArr=fn.call(context,arr,i,this);
}
returnresultArr;
};
Array.prototype.myMap=myMap;
letarr=[1,2,3];
console.log(arr.myMap((item)=item+1));//2,3,4
值得注意的是，map第二个参数在第一个参数回调中指向this。如果第一个参数是箭头函数，则第二个this的设置无效。
3.循环遍历数组过滤方法
constmyFilter=function(fn,context){
letarr=Array.prototype.slice.call(this)
letresultArr=[]
for(leti=0;iarr.length;i++){
if(!arr.hasOwnProperty(i))continue;
fn.call(context,arr,i,this)resultArr.push(arr)
}
returnresultArr
}
Array.prototype.myFilter=myFilter
letarr=[1,2,3]
console.log(arr.myFilter(item=item===2))//[2]
4.使用reduce实现数组过滤方法
constmyFilter2=function(fn,context){
returnthis.reduce((total,current,index)={
returnfn.call(context,current,index,this)?[...total,current]:[...total]
},[])
}
5.遍历数组的一些方法
constmySome=function(fn,context){
letarr=Array.prototype.slice.call(this);
//Theemptyarrayreturnsfalsedirectly,andtheeverymethodofthearrayreturnstrueconversely
if(!arr.length)returnfalse;
for(leti=0;iarr.length;i++){
if(!arr.hasOwnProperty(i))continue;
letres=fn.call(context,arr,i,this);
if(res)returntrue;
}
returnfalse;
};
Array.prototype.mySome=mySome;
letarr=[1,2,3];
console.log(arr.mySome((item)=item===2));
执行some的数组如果是空数组总是返回false，而另一个数组的every方法中的数组如果是空数组总是返回true。
6.通过循环实现数组的reduce方法
Array.prototype.myReduce=function(fn,initialValue){
letarr=Array.prototype.slice.call(this)
letstartItem
letstartIndex
if(initialValue===undefined){
//Findstheelementandsubscriptofthefirstnon-empty(real)unit
for(leti=0;iarr.length;i++){
if(!arr.hasOwnProperty(i))continue
startIndex=i
startItem=arr
break
}
}else{
startItem=initialValue
}
//Thestartingpointfortraversalistherealelementaftertherealelementfoundinthepreviousstep
//Eachiterationskipstheelementsoftheemptycell
for(leti=++startIndex
0;iarr.length;i++){
if(!arr.hasOwnProperty(i))continue
startItem=fn.call(null,startItem,arr,i,this)
}
returnstartItem
}
Array.prototype.myReduce=myReduce
letarr=[1,2,3]
console.log(arr.myReduce((acc,cur)=acc+cur))//6
console.log(arr.reduce((acc,cur)=acc+cur))//6
7.使用reduce实现array的flat方法
//reduceimplementsarray.prototype.flat,Arrayflat
constmyFlat=function(depth=1){
letarr=Array.prototype.slice.call(this)
if(depth===0)returnarr
returnarr.reduce((total,current)={
if(Array.isArray(current)){
//Youneedtobindthiswithcall,otherwiseitpointstothewindow
return[...total,...myFlat.call(current,depth-1)]
}else{
return[...total,current]
}
},[])
}
Array.prototype.myFlat=myFlat
letarr=[1,2,[3,4,[5,6,[a,b,c,[d]],7,8],9],10,11,12,[13,14]]
console.log(arr.myFlat())
因为myFlat依赖这个指向，所以需要在reduce遍历的时候指定myFlat的这个指向；否则默认指向window，会报错。
当数组的元素还是数组时，使用ES6的扩展运算符对其进行降维（ES5中可以使用concat方法）。但是数组元素内部可能有嵌套数组，所以需要递归调用selfFlat。
同时，原生的Flat方法支持一个深度参数来表示降维的深度。默认值为1，表示数组减少一维。
传递Infinity将传递的数组变成一维数组：
8.实现ES6类语法
functionAnimal(name){
this.name=name
}
Animal.staticFunc=function(){
console.log(staticFunc)
}
Animal.prototype.sleep=function(){
console.log(animalissleeping)
}
//Parasitic