Preface这些实用的方法合集时间过得真快。一转眼，2017年已经过去大半。你说不可怕，这一年你成长了多少，有没有付出很多。或者天天往上走，收获很多。今天主要写一些看Zepto基本模块时比较实用的内部方法，在我们日常工作或者学习中也会用到。源码仓库原文链接1.将数组展平（flatten）在面试或者工作中，经常会遇到需要将多维数组展平为一维数组。例如，[1,2,[3],[4],[5]]变为[1,2,3,4,5]functionflatten(array){returnarray.length>0?$.fn。concat.apply([],array):array}这里先把$.fn.concat理解为原数组的concat方法，我们会发现其实只能铺一层。比如[1,2,[3],[4,[5]]]=>[1,2,3,4,[5]]怎么才能把多层嵌套的数组完全压平成一层呢？？这里有两种方法。方法一letflatten=(array)=>{returnarray.reduce((result,val)=>{returnresult.concat(Array.isArray(val)?flatten(val):val)},[])}test让testArr1=[1,2,3,4]让testArr2=[1,[2],3,[4,[5,[6,[7]]]]]console.log(flatten(testArr1))//=>[1,2,3,4]console.log(flatten(testArr2))//=>[1,2,3,4,5,6,7]方式2letflatten=(array)=>{letresult=[]letidx=0array.forEach((val,i)=>{if(Array.isArray(val)){letvalue=flatten(val)letlen=value.lengthletj=0result.length+=lenwhile(j{return[...newSet(array)]}test让testArr=[1,1,2,3,0,-1,-1]console.log(uniq(testArr))//=>[1,2,3,0,-1]3.将连字符转换为驼峰式（camelize）的方法非常实用。它可以将a-b-c的形式转换为aBC。当然下划线的个数可以是多个，a---b-----c=>aBCletcamelize=function(str){returnstr.replace(/-+(.)?/g,function(match,chr){returnchr?chr.toUpperCase():''})}4.判断是否为文档对象（isDocument）。通过dom元素的nodeType属性可以知道它属于哪种元素类型。结合下表（developer.mozilla.org/en-US/docs/Web/API/Node/nodeType），其实不仅可以写成判断是否是文档对象，还可以判断是否它是一个元素对象。functionisDocument(obj){returnobj!=null&&obj.nodeType==obj.DOCUMENT_NODE}5、判断obj是否为类数组（likeArray）什么是类数组对象？类数组对象：包含指向对象元素的number索引下标和length属性flag属性的个数不包含数组push、concat等方法常见的类数组对象包括通过augments、document等API获取的dom集合.getElementsByClassName，符合上述Condition对象等functionlikeArray(obj){//!!obj直接过滤掉false,null,undefined,''等值//然后obj必须包含length属性varlength=!!obj&&obj中的'length'&&obj.length,//获取obj的数据类型type=$.type(obj)//不能是函数类型，不能是window//如果是数组，直接返回true//或者当数据类型length的为number，取值范围为0到(length-1)这里是通过判断length-1是否为obj的属性return'function'!=type&&!isWindow(obj)&&('array'==type||length===0||(typeoflength=='number'&&length>0&&(length-1)inobj))}代码有注释，主要是对比一下underscore是如何判断是否是类的大批。varMAX_ARRAY_INDEX=Math.pow(2,53)-1;vargetLength=property('长度');varisArrayLike=function(collection){varlength=getLength(collection);returntypeoflength=='number'&&length>=0&&length<=MAX_ARRAY_INDEX;};Underscore在判断类数组时更加宽松。MAX_ARRAY_INDEX是JavaScript中可以准确表示的最大数字。主要判断对象的length属性是否为number类型，是否大于0且在MAX_ARRAY_INDEX的范围内。zepto中类数组的判断比较严格，因为window和functions其实是有length属性的，这里过滤掉了。6、判断是否为window对象。window对象的window属性指向它自己。直接看mdn上的解释吧。functionisWindow(obj){returnobj!=null&&obj==obj.window}但实际上下面的代码也会被认为是window对象。leta={}a.window=aa===a.window//trueisWindow(a)//true7.判断数据类型使用Object.prototype.toString方法判断数据类型。letclass2type={}lettoString=class2type.toString//填充class2typemap$.each("BooleanNumberStringFunctionArrayDateRegExpObjectError".split(""),function(i,name){class2type[""[object"+name+"]"]=name.toLowerCase()})最后class2type会变成class2type={"[objectBoolean]":"boolean","[objectArray]":"array","[objectNumber]":"number"...}接下来是typefunctionfunctiontype(obj){returnobj==null?String(obj):class2type[toString.call(obj)]||"object的定义"}首先，如果传入的obj为null或undefined，则使用String函数返回null或undefined，toString.call(obj)返回的正是shape[objectArray]，所以结合上面的class2type变量,刚好得到例如。类型（[]）=>数组类型（1）=>数字8。判断一个纯对象（isPlainObject）就够了，有时候我们想要满足这个条件的对象。但是在js中并没有直接的方法来判断是不是纯对象。//对象字面量形式letobj={name:'qianlongo'}//通过Object构造函数创建letperson=newObject({name:'qianlongo',sex:'boy'})Zepto如何判断？//要判断obj是否是纯对象，必须满足//首先必须是对象---isObject(obj)//不是窗口对象---!isWindow(obj)//原型必须是等于Object的原型functionisPlainObject(obj){returnisObject(obj)&&!isWindow(obj)&&Object.getPrototypeOf(obj)==Object.prototype}Object.getPrototypeOf()方法返回指定对象的原型（即，内部[[Prototype]]属性的值），如果没有继承的属性，则为null。9.判断是否为空对象(isEmptyObject)//判断是否为空对象//用forin遍历，只要obj有属性，就认为不是空对象$.isEmptyObject=function(obj){varnamefor(nameinobj)returnfalsereturntrue}主要是通过for循环判断的，所以后面的数据也会被认为是空对象。nullundefined[]''1024(number)trueorfalse{}newPerson()//自定义构造函数，所以这里判断空对象的本意不只是像{}一样判断形状，newObject()？到此为止临时更新这些就可以了，后续在阅读源码的过程中会继续补充参考资料阅读Zepto源码的内部方法jQuery.isPlainObject对jQuery.isPlainObject()Object.getPrototypeOf()的理解文章记录你是这样的实现细节）谁说你只是“会用”jQuery？学习zepto.js如何手动触发DOM事件mouseenter和mouseover为什么你这么纠结？
