• 分享我常用的Javascript工具函数


    //----- 获得json数据的字符串格式 ---------------                        
    Object.prototype.toString=function(){
        var rtn="{"; 
        for(var i in this){
           rtn+=i+":"+this[i]+",";
        }
        rtn=rtn.substring(0,rtn.length-1);
        rtn+="}";
        return rtn;
    }
    
    Array.prototype.toString=function (){
        var rtn="[";
        for(var i in this){
          rtn+=this[i]+",";
        }
        rtn=rtn.substring(0,rtn.length-1)+"]";
        return rtn;
    }
    //-------------- Array添加indexOf方法 ------------
    //*** 返回某个元素在数组中的索引值 ***
    Array.prototype.indexOf=function(item){
        for(var i=0;i<this.length;i++){
            if(this[i]==item) return i;
        }
        return -1;
    };
    
    //----------------- swDisplay(o)  -----------
    //*** 函数 切换元素的显示和隐藏 ***
    function swDisplay(o){
        var dv=(o.currentStyle||window.getComputedStyle(o,null)).display;
        switch (dv){
        case "":
            o.style.display="none";
            break;
        case "block":
            o.style.display="none";
            break;
        case "inline":
            o.style.display="none";
            break;
        case "none":
            o.style.display="block";
            break;
        default:
            break;
        }
    }
    
    function swDisplayBetter(evObj,evType,targetObj){ // swDisplayBetter($('evDiv'),'click',$('tDiv'))
        //evObj[evType]=function(){ swDisplay(targetObj);}
        if(document.all){
            evObj.attachEvent('on'+evType,function(){ swDisplay(targetObj);});
        }else{
            evObj.addEventListener(evType,function(){ swDisplay(targetObj);},false);
        }
    }
    
    //-----------------  getCookie(cname), setCookie(cname,cvalue,expiresDays)  --------------------
    //*** cookies的读写函数  ***
    // 读取cookie  getCookie(cookiename)
    function getCookie(Cname){
        var start=document.cookie.indexOf(Cname+'=');
        if(start<0){
           return null;
        }
        else{
           start+=Cname.length+1; //Cname=后面
           //fname=pan;
          var endPos=(document.cookie+';').indexOf(';',start);// ;号前面
           return   document.cookie.substring(start,endPos);
        }
    }
    //写入cookies
    function setCookie(Cname,Cvalue,expiresDays){ //cookies名称 cookies值 几天过期
        var expires=new Date();
        expires.setTime(expires.getTime()+expiresDays*24*60*60*1000);
        document.cookie=Cname+'='+Cvalue+';expires='+expires.toGMTString(); //增加cookies 不会覆盖旧的cookies
        //alert(document.cookie);
    }
    
    //----------------- getElementsByClassName ------------------
    //*** 根据class获取元素 ***
    function getElementsByClassName(clsName,root,tag){
        if(root){ //root为id或者父节点
            root=typeof root==='string'?document.getElementById(root):root;
        }else{
          root=document;
        }
         var nodeArr=[]; 
         var tag= tag || "*"; //查找某种标签的class 还是所有标签的class
         var subEles=root.getElementsByTagName(tag);
        for(var i=0,l=subEles.length;i<l;i++){
          if(subEles[i].className.indexOf(clsName)>=0){nodeArr.push(subEles[i])}
        }
        return nodeArr;
    }
    
    example:
     var mcNodes=getElementsByClassName("mc");
     var mcNodes=getElementsByClassName("mc","p1"); 
     var mcNodes=getElementsByClassName("mc",null,"p");
     var mcNodes=getElementsByClassName("mc","p1","b");
    
    //---------------------- addClass(obj,itsClass) ------------------------------
    
    function addClass(obj,itsClass){
        if (obj.className.toString()=="") { //若没有设置class
            obj.className=itsClass;
        }
        else if(obj.className.indexOf(itsClass)<0){
            obj.className+=" "+itsClass;
        }
       
    }
    
    function addClass(obj,clsName){
        if(obj.className.indexOf(clsName)<0)
          obj.className=obj.className==""?clsName:(obj.className+" "+clsName);
    }
    
    利用条件运算符的结合性会更简洁一点
    

    function addClass(obj,clsName){
     var re=new RegExp("(\\s+"+clsName+"| ^"+clsName+"\\s+)","g");
     var re1= new RegExp("^"+clsName +"$","g");
     var ifhas = re.test(obj.className) || re1.test(obj.className);
     obj.className+=obj.className==''?clsName:ifhas?'':' '+clsName;
    }

    //---------------------- removeClass(obj,itsClass) ------------------------------
    
    //~~算法逻辑是对的 显得繁琐了点 建议用正则方式 简单明了 replace()支持正则 和 函数参数 
    function removeClass(obj,itsClass){
        if(obj.className.toString().indexOf(" ")>=0){//若包含空格 即class 中定义多个类名
            if(obj.className.indexOf(itsClass)>=0) obj.className=obj.className.replace(" "+itsClass,"");
        }
        else {
            if(obj.className.indexOf(itsClass)>=0) {obj.className=obj.className.replace(itsClass,"");}
        }
    }
    
    

    function removeClass(obj,clsName){
     var re=new RegExp("(\\s+"+clsName+"| ^"+clsName+"\\s+)","g");
     var re1= new RegExp("^"+clsName +"$","g");
     obj.className=re1.test(obj.className) ? "" : obj.className.replace(re,"");
    }

    //---------------------- setMoverMout(obj,itsClass) ----------------------------
    //*** 设置元素的onmouseover onmousout ***
    //~~~结合addClass  removeClass函数使用
    
    function setMoverMout(obj,itsClass){
        obj.onmouseover=function(){addClass(this,itsClass);}; 
        obj.onmouseout=function(){removeClass(this,itsClass);};
        //上下文环境为obj,所以匿名函数内 this指向obj,this作为实参传入addClass函数
    }
    
    //-------------  each(eles,fn) -----------------------
    //*** 遍历数组元素,每个元素作为参数传入fn并执行 ***
    function each(eles,fn){
        for(var i=0;i<eles.length;i++){
            fn(eles[i]); //fn接受一个dom元素作为参数 或者 fn(domEle,index,eles){}
        }
    }
    
    //------------------------------------ addEvent ----------------------------------
    //obj需要绑定事件的元素, type 事件类型, func 事件处理函数
    //注意在事件处理函数 func 内部,不能用this来引用事件源对象,this指向了window ;需要用event.srcElement||event.target获取事件源对象
    function addEvent(obj,type,func){ 
        if(document.all){ //for ie
            obj.attachEvent( "on"+type, function(e){func.apply(obj,arguments);} );
        }else{ //for FF
            obj.addEventListener( type, function(e){func.apply(obj,arguments)}, false ); //可以用fn.apply绑定fn内this的指向
        }
    }
    
    
    //....... Example .............
    
    function hi(){alert("nice to meet you");}
    
    addEvent($("hi"),"click",hi);
    
    function addBg(event){(event.srcElement||event.target).style.background="#c9a47a";}
    function removeBg(event){(event.srcElement||event.target).style.background="none";}
    
    addEvent($("hi"),"mouseover",addBg);
    addEvent($("hi"),"mouseout",removeBg);
    
    //------------------------ on(node,eventType,handler,scope) ---------------------
    //*** 工具函数 给对象的事件绑定事件处理函数 ***
    // on函数比addEvent函数多了个 scope参数,更加灵活一点
    function on(node,eventType,handler,scope){  
     node=typeof node=="string" ? document.getElementById(node) : node;  
     if(!!!node) { alert('没找到对应的dom元素'); return;}
     scope=scope || node;  
     if(document.all){  // for ie
     node.attachEvent("on"+eventType,function(){  
       handler.apply(scope,arguments) 
       // handler一般在全局环境定义,this指向window,
       // 这里指定事件处理函数的上下文对象为事件源元素或 你希望的元素
       // 上下文对象 和 arguments 传入handler函数并执行 
      });  
    } else { //for firefox 
    node.addEventListener(eventType,function(){  
            handler.apply(scope,arguments)  
     },false);  
         //firefox 可以在捕获和冒泡阶段触发事件处理函数 ,false表示不在捕获阶段触发事件
    }  
    }  
    
    //-------------------------------- getStyle() ------------------------
    //获取元素的当前样式或计算样式
    
    function getStyle(o,styleName){
        return (o.currentStyle||window.getComputedStyle(o,null))[styleName];
    }
    
    //------------------------- nobubble() ----------------------------
    //阻止事件冒泡
    function nobubble(event){
      //event 事件对象作为参数传入
      if(document.all){
        event.cancelBubble=true;
      }else{
        event.stopPropagation();
      }
    }
    
    //----------------------- String.prototype.replaceAll(fnd,rep) ------------
    //String类 扩展方法 字符串查找替换
    String.prototype.replaceAll(fnd,rep){
      return this.split(fnd).join(rep);
    }
    
    //--------------------- String.prototype.trim() -----------------------
    //String类扩展方法trim 删除前后空格
    String.prototype.trim=function(){
      return this.replace(/(^\s*)|(\s*$)/g,"");
    };
    
    //---------------- $tag(tag,root) ---------------------
    //*** 根据tagname获取元素的全局函数 document.getElemntsByTagName(tag)的简写版
    function $tag(tag,root){return (root||document).getElementsByTagName(tag);}
    
    //------------------ $(id) ---------------
    //*** document.getElementById(id) 的简写版 ***
    function $(id){return document.getElementById(id);}
    
    
    //------------------- bindMouseWheelEvent(obj,handler) ----------------------
    //*** 给对象绑定鼠标滑轮事件 兼容各浏览器的方法 
    //绑定滑轮事件 兼容各浏览器
    //绑定滑轮事件 兼容各浏览器
    function bindWheelEvent(obj,handler){
        if(document.addEventListener){ //ie以外的主流浏览器都支持
            //只有firefox有效  其他ie和非ie主流浏览器执行 dom.onwheelscroll=fn
            obj.addEventListener('DOMMouseScroll',handler,false); 
        }
        obj.onmousewheel=handler;
    }
    
    //----- example: ---------
    
    each(colorTxts,function(obj){bindWheelEvent(obj,colorValChg);});
    // 滚动鼠标滑轮的事件处理函数
    function colorValChg(e){
        // alert(this.id); this指向事件源元素
        
        //获取event对象
        e=e||window.event;
        var data=(e.wheelDelta/24)||(e.detail/-1);//ie9 chrome up 24 down -24; firefox up -1 down 1;
        var colorV=parseInt(this.value,10)+data;
        colorV=(colorV>255||colorV<0)?0:colorV;
        this.value=colorV+'';
        var k,m,n;
        k=colorTxts[0].value;
        m=colorTxts[1].value;
        n=colorTxts[2].value;
        $('showColor').style.background='rgb('+k+','+m+','+n+')';
    }
    
    //---------------------------- extend(subCls,supperCls,px)---------------------------
    //*** 继承
    
    function extend(subCls,supperCls,px){ //subCls子类 supperCls父类 px对象 子类需要扩展的属性集合
        if(!subCls || !supperCls) throw Error ('extend error');
        var F=function(){};
        F.prototype=supperCls.prototype;
        subCls.prototype=new F(); //通过实例化获得新对象,新对象和supperCls.prototype对象 地址不同 属性集合相似
        subCls.prototype.constructor=subCls;
        subCls.supperClass=supperCls.prototype;
        if(px){
            for(var i in px){
                if(px.hasOwnProperty(k)) subCls.prototype[k]=px[k];
            }
        }
        return subCls;
    }
    
    //---------------------------- objAttr2arr(obj) ----------------------
    //*** 把对象的属性赋值到数组中 并返回该数组 ***
    function objAttr2arr(obj){
        var arr=[],i=0;
        for(arr[i++] in obj) /* empty statement */ ;
        return arr;
    }
    
    
    //--------------------- classOf(obj) -----------------
    //*** 返回任意对象的类属性 对象的类型信息 ,正确返回js内置对象的对象类型***
    function classOf(o){
        if(o===null) return 'null';
        if(o===undefined) return 'undefined';
        return Object.prototype.toString.call(o).slice(8,-1);
    }
    classOf([]);
    classOf({});
    classOf("hi");
    classOf(function(){});
    //------------------ Array.prototype.distinct ------------
    //*** 扩展数组的方法,返回数组中不相同的元素
    Array.prototype.distinct=function(){
        var oArrVals={};
        var arrRtn=[];
        for(var i=0,len=this.length;i<len;i++){
            if(oArrVals[this[i]]) continue;
            oArrVals[this[i]]=i;
            arrRtn.push(this[i]);
        }
        return arrRtn;
    };
    //------------------ Function.prototype.bind -------------
    //*** 扩展函数类的方法,用闭包模拟ES5的bind方法,将函数绑定到特定的上下文对象和绑定部分实参
    Function.prototype.bind=function(o /*,arg1,arg2...*/){
        var self=this,boundArgs=arguments; // arguments[0]=this, arguments[1]=arg1,...
        return function(){ //这是一个闭包
            var args=[],i;
            for(i=1;i<boundArgs.length;i++){
                args.push(boundArgs[i])
            }
            for(i=0;i<arguments.length;i++){
                args.push(arguments[i]);
            }
            return self.apply(o,args);
        }
    }
    //---------------------- array(args,n) ----------------------
    //*** 把类数组对象转换为真正的数组对象
    function array(args,n){ //args为类数组对象 , n 可选参数 表示从哪个索引开始转换
        return Array.prototype.slice.call(args,n||0);
    }
    
    //------------------------ JsonStringfy(o) --------------------
    //*** json对象序列化 需要配合classOf函数获取类属性
    function JsonStringfy(o){
        if(classOf(o)==='Array'){
            var s='[',n=0;
            for(var i=0;i<o.length;i++){
                if(n++) s+=',';
                if(classOf(o[i])==='Array' || classOf(o[i])==='Object'){
                    s+=JsonStringfy(o[i]);
                }else{
                    s+=o[i].toString();
                }
            }
            return s+=']';
        }
        if(classOf(o)==='Object'){
            var s='{',m=0;
            for(var p in o){
                if(!o.hasOwnProperty(p)) continue;
                if(m++) s+=',';
                if(classOf(o[p])==='Array' || classOf(o[p])==='Object'){
                    s+=p+':'+JsonStringfy(o[p]);
                }else{
                    s+=p+':'+o[p];
                }
            }
            return s+='}';
        }
        alert('not an Array or Object');
        return; 
    }
    var mobj={a:1,b:2,c:3,d:[4,5,6]};
    var marr=['a','b','c',mobj];
    alert(JsonStringfy(mobj));
    alert(JsonStringfy(marr));
    
    //--------------------------- parseXML(xmlfile) ------------------
    //***解析xml文件的跨浏览器实现
    function parseXML(xmlFile){
     try{ //ie
        var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        }
     catch(e){ //firefox,safari,opera 
        try{
            var xmlDoc=document.implementation.createDocument("","",null);
        }
        catch(e){
            alert(e.message);
            return;
        }
     }
     xmlDoc.async=false;
     xmlDoc.load(xmlFile);
    }
    
    //---------------------------- parseXMLString(xmlStr) -------------------
    //*** 解析xml字符串的跨浏览器实现
    function parseXMLString(xmlStr){
        try{ //ie
            var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async=false;
            xmlDoc.loadXML(xmlStr);
    
        }
        catch(e){
            try{ //firefox,opera,chrome
                var parser=new DOMParser();
                var xmlDoc=parser.parseFromString(xmlStr,"text/xml");
            }
            catch(e){
                alert(e.message);
                return;
            }
        }
            return xmlDoc;
    }
    
    //---------------------------------- sendAjax(url) ---------------------
    //*** 发送ajax请求的跨浏览器实现
    var xmlhttp; //因为stateChange函数需要xmlhttp对象 所以定义为全局的。 function sendAjax(url){ if(window.XMLHttpRequest){ //for new browser include ie 7 xmlhttp=new XMLHttpRequest(); } else if(window.ActiveXObject){ //for ie5/6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } if(xmlhttp!=null){ xmlhttp.onreadystatechange=stateChange; xmlhttp.open("GET",url,true); xmlhttp.send(null); }else{ alert("your browser does not support XMLHTTP"); } } function stateChange(){ if(xmlhttp.readyState==4){ //loaded if(xmlhttp.status==200){// ok // our code here } } } //------------------ Array.prototype.filter(fn)--------------- //*** 返回能在fn中返回true的元素组成的新数组 Array.prototype.filter=function(fn){ //高阶函数filter var a=[]; for(var i=0;i<this.length;i++){ if(fn(this[i])) a.push(this[i]); } } example fn: function isOdd(n){ return parseInt(n)%2===1; } map each filter //----------------------------------------------------- //给一个函数绑定上下文对象和部分参数 proxy: function( fn, context ) { var args, proxy, tmp; if ( typeof context === "string" ) {//若参数2是字符串 则修正参数 tmp = fn[ context ]; context = fn; //参数1作为context,参数1[参数2]作为fn 形如:proxy(Array.prototype,'slice') fn = tmp; } if ( !jQuery.isFunction( fn ) ) {//参数1不是函数 则返回undefined return undefined; } // 模仿 bind 的原理 args = Array.prototype.slice.call( arguments, 2 ); //proxy函数第3个参数开始的参数列表 proxy = function() {//闭包 外部函数proxy的参数列表+闭包的参数列表形成新的args数组作为fn的参数 return fn.apply( context || this, args.concat( Array.prototype.slice.call( arguments ) ) ); }; // Set the guid of unique handler to the same of original handler, so it can be removed proxy.guid = fn.guid = fn.guid || jQuery.guid++; return proxy; }, //----- 参考jQuery的proxy方法,可给事件处理函数 提供附加的数据 ---- //** 事件处理函数以闭包的形式返回,父函数给其绑定所需数据 function handlerBindData(fn){ if(typeof fn !== 'function') return fn; //fn非函数 则直接返回fn 什么也不做 var args = Array.prototype.slice.call(arguments, 1); //第2个参数开始的参数数组 var _fn = function(){ fn.apply(this, Array.prototype.concat.call(Array.prototype.slice.call(arguments), args)); } return _fn; } function menuText(ev){ alert((ev.srcElement || ev.target).innerHTML); if(arguments[1]) alert('i am the first one'); } var menuTextWithData = handlerBindData(menuText, 'first');//绑定的参数+闭包的参数为实际的参数列表 $('firstLi').onclick = function(ev){menuTextWithData(ev)}; //------------------- fn.bind(oContent) -------------- //** 为函数绑定上下文对象,其实和上面的 handlerBindData一样的原理,都是返回一个绑定部分参数的闭包 Function.prototype.bind = function(oContext){ var that = this; return function(){ that.apply(oContext, arguments); }; }; function test(){ alert(this.hi);} var k = {'hi':'good'}; var test_ = test.bind(k); //封装原函数的一个闭包,绑定了上下文对象 //----------------- methodize(fn) --------------------------------- ** 借鉴Prototype的思想,把工具函数转化为方法函数,用面向对象的方式调用,从而避免了命名空间冲 突的问题。可以获取DOM元素时进行扩展,也可以直接扩展到DOM元素原型对象上,成为额外的固有方法 Function.prototype.methodize = function(fn){ return function(){ //返回一个包装原函数的闭包,闭包中绑定执行上下文,且让this成为第 一个形参的实参传入 var args=Array.prototype.slice.call(arguments); //获取其他参数 args.unshift(this); //让this作为第一个形参的值 fn.apply(this, args);//在指定上下文和绑定部分形参的情形下执行原有函数 } } ~~~example: function addClass(obj, cls){ if(typeof obj ==='string') obj = document.getElementById(obj); obj.className+=obj.className.indexOf(cls)>=0?'':obj.className===''? cls : ' '+cls; alert(obj.className); } window.onload = function(){ //addClass('test', 'hover'); var oTest = $id('test'); oTest.addClass('hover'); } $id = function(id){ var e = document.getElementById(id); e.addClass = addClass.methodize(); return e; }; //------------------- url后面的参数转换为json对象 -----------------------

    function urlPara2json(){
    if(location.href.indexOf('?')==-1) return null;
    var obj;
    var paraStr = location.href.substring(location.href.indexOf('?')+1);
    var arr = paraStr.split('&');

    function turn2pro(s){
    obj = obj || {};
    var arrPro = s.split('=');
    if(obj[arrPro[0] ]){
    if(typeof obj[arrPro[0] ] =='string'){ obj[arrPro[0] ] = [ obj[arrPro[0]] ]; }
    obj[arrPro[0] ].push(arrPro[1]);
    }else{
    obj[arrPro[0] ] = arrPro[1];
    }
    }

    for(var i = 0, len=arr.length; i<len; i++){
    turn2pro(arr[i]);
    }
    console.log(obj);
    return obj;
    }

    //------------------- 获取元素相对页面的offset -----------------------
    function pageOffset(ele){
    var x=0,y=0;
    while(p = ele.offsetParent){
    x+=ele.offsetLeft;
    y+=ele.offsetTop;
    ele = p;
    }
    return {"x":x,"y":y};
    }

    //------------------------ onDomLoaded ---------------------
    /* 当dom加载完成时 执行回调函数 */
    function onDomLoaded(fn){
    if ( document.addEventListener ) {// for:firefox,opera, chrome
    document.addEventListener( "DOMContentLoaded", fn, false );
    } else if ( document.attachEvent ) {// for:ie
    document.attachEvent( "onreadystatechange", function(){ if(document.readyState === 'complete') fn(); } );
    }
    }

    //------------------------ hasClass ------------------------

    /* 判断元素是否具有给定class名 */

    function hasClass(obj,cls){
      return (new RegExp("(^|\\s+)"+cls+"(\\s+|$)",'i') ).test(obj.className);
    }

    or

    function hasClass(obj,cls){
      return obj.className.split(' ').indexOf(cls)>=0 ;
    }

    //----------------------- inherits -------------------------
    //****inherits method ~~~实际是在函数内封装了组合继承的实现方法
    function inherits(superCls, methodObj){
    function foo(){
    superCls.apply(this, arguments);
    }
    function bar(){}
    bar.prototype = superCls.prototype;
    foo.prototype = new bar();
    for(var k in methodObj ){
    if(methodObj.hasOwnProperty(k)){
    foo.prototype[k] = methodObj[k];
    }
    }
    return foo.prototype.constructor = foo;
    // return foo;
    }

    var subCls = inherits(superCls, {sing:function(){ console.log('i can sing
    a song'); } });
    var sub = new subCls('nice to meet you');

    function superCls(w){
    this.hi=w;
    this.kind="fn";
    }
    superCls.prototype.say = function(){ alert(this.hi);}

    //---------------------- JSON.parse, JSON.stringify --------------

    //*** JSON序列化和反序列化  ie8+ ,现代浏览器支持的原生方法

    
    

    作用:这个函数的作用主要是为了系列化对象的。 
    可能有些人对系列化这个词过敏,我的理解很简单。就是说把原来是对象的类型转换成字符串类型(或者更确切的说是json类型的)。就这么简单。打个比方说,你有一个类,那么你可以通过这个方法转换成相应的json类型的。很简单吧。 
    接着看。 
    语法: 
    JSON.stringify(value [, replacer] [, space]) 
    value:是必须要的字段。就是你输入的对象,比如数组啊,类啊等等。 
    replacer:这个是可选的。它又分为2种方式,一种是方法,第二种是数组。 
    情况一:我们先说数据,通过我们后面的实验可以知道,它是和第一个有关系的。一般来说,我们系列化后的结果是通过键值对来进行表示的。 
    比如说: 
    name:"lan",age:25 
    这种形式。 
    所以,如果这种形式的话,如果第二个的值在第一个存在,那么的话就以第二个的值做key,第一个值为value进行表示,如果不存在,sorry,忽略。【是不是有点抽象,我也这么觉得,不过你等一下看实验 就OK了。。呼呼。】 
    情况二:如果是方法,那很简单,就是说把系列化后的每一个对象(记住 是每一个)传进方法里面进行处理。 
    space:很好理解,用什么来做分隔符的。 
    1.如果省略的话,那么显示出来的值 就没有分隔符。直接输出来 
    2.如果是一个数字的话,那么它就定义缩进几个字符,当然 如果大于10 ,则最大值为10. 
    3.如果是一些转义字符,比如“\t”,表示回车,那么它每行一个回车。 
    4.如果仅仅是字符串,OK,就在每行输出值的时候把这些字符串附加上去就OK。当然,最大长度也是10个字符。 
    开始用实例说明; 
    1.只有一个参数的情况下: 

    复制代码代码如下:

    var student = new Object(); 
    student.name = "Lanny"; 
    student.age = "25"; 
    student.location = "China"; 
    var json = JSON.stringify(student); 
    alert(student); 


    结果如下: 

    有些人可能会怀疑JSON.stringify的作用,OK。那假如,我们不要这个函数。代码下面的样子: 

    复制代码代码如下:

    var student = new Object(); 
    student.name = "Lanny"; 
    student.age = "25"; 
    student.location = "China"; 

    // var json = JSON.stringify(student); 
    alert(student); 


     恭喜你 得到的结果是: 

    没骗你吧,继续。
    2.第二个参数存在,并且第二个参数还是function的时候 

    复制代码代码如下:

    var students = new Array() ; 
    students[0] = "Lanny"; 
    students[1] = "dong"; 
    students[2] = "I love you"; 
    var json = JSON.stringify(students,switchUpper); 
    function switchUpper(key, value) { 
    return value.toString().toUpperCase(); 

    alert(json); 

            //var json = JSON.stringify(students, function (key,value) { 

            //return value.toString().toUpperCase(); 

           //}); 


        上面的方法也可以换成下面的,2个都是一样,只是写法有那么一点点的不一样而已。 
     得到结果如下: 

    3.第二个参数存在,并且第二个参数不是function,而是数组的时候。 
    3.1 【误区】如果第一个参数是数组,第二个参数也是数组的话,只显示第一个参数的值。 
    比如: 

    复制代码代码如下:

    var students = new Array() ; 
    students[0] = "Lanny"; 
    students[1] = "dong"; 
    students[2] = "I love you"; 
    var stu = new Array(); 
    stu[0] = "1"; 
    stu[1] = "2"; 
    var json = JSON.stringify(students,stu); 
    alert(json); 


     sorry 得到的结果就是: 

    第二个被忽略了,只是第一个被系列化了。 

    3.2 如果第一个是对象(这里说的对象就像在C#里面可以进行new的),第二个是数组的。 

    那么如果第二个的value在第一个存在,那么的话就以第二个的值做key,第一个值为value进行表示 

    复制代码代码如下:

    var student = new Object(); 
    student.qq = "5485891512"; 
    student.name = "Lanny"; 
    student.age = 25; 

    var stu = new Array(); 
    stu[0] = "qq"; 
    stu[1] = "age"; 
    stu[2] = "Hi";//这个student对象里不存在。 

    var json = JSON.stringify(student,stu); 
    alert(json); 


     得到的结果如下: 

    因为stu[2] = "Hi";这个Hi 在第一个找不到,所以就不进行显示了。 

    4.第三个参数 

    4.1.如果省略的话,那么显示出来的值 就没有分隔符。直接输出来 

    比如: 

    复制代码代码如下:

    var student = new Object(); 
    student.qq = "5485891512"; 
    student.name = "Lanny"; 
    student.age = 25; 

    var stu = new Array(); 
    stu[0] = "qq"; 
    stu[1] = "age"; 
    stu[2] = "Hi"; 

    var json = JSON.stringify(student,stu); 
    alert(json); 


     输出的就是: 

    4.2.如果是一个数字的话,那么它就定义缩进几个字符,当然 如果大于10 ,则最大值为10. 

    复制代码代码如下:

    var student = new Object(); 
    student.qq = "5485891512"; 
    student.name = "Lanny"; 
    student.age = 25; 

    var stu = new Array(); 
    stu[0] = "qq"; 
    stu[1] = "age"; 
    stu[2] = "Hi"; 

    var json = JSON.stringify(student,stu,100);//注意这里的100 
    alert(json); 


    那么得到的是: 

    空开来了10个字符。 

    4.3.如果是一些转义字符,比如“\t”,表示回车,那么它每行一个回车。 

    也是一样。 

    4.4.如果仅仅是字符串,OK,就在每行输出值的时候把这些字符串附加上去就OK。当然,最大长度也是10个字符。 

    如果是var json = JSON.stringify(student,stu,“HaiKou”);//

    就这样吧 。good night。 

  • 相关阅读:
    Python高阶函数
    获取checkbox勾选的id
    按照勾选 删除表格的行<tr>
    mysql where和having的区别
    条件查询 日期区间
    根据状态隐藏按钮
    单击列表行前边的checkbox被选中,再单击,取消选中
    重置按钮
    TypeError: $(…).tooltip is not a function
    list的add()方法与addAll()方法简介
  • 原文地址:https://www.cnblogs.com/stephenykk/p/3084356.html
Copyright © 2020-2023  润新知