函数记录

作者:datura_lj
链接:https://www.jianshu.com/p/2e3697ca43b3
來源:简书



1. 数组(arr)和对象(json)的深拷贝

使用方法:

var arr = [1, 3, 5, {a: 5}]
var newArr =cloneObject(arr,true);
newArr[3].a = 9
console.log(arr, newArr)

补充:

//判断是否为数组
1.   Object.prototype.toString.call(obj) === '[object Array]'
2.   obj.constructor === Array

源码:

function cloneObject( obj, deep ){
   if ( obj === null || obj === undefined || typeof (obj) !== 'object' ){
      return obj;
   }
   var deep = !!deep;
   var cloned = null;
   if ( obj.constructor === Array ){//Object.prototype.toString.call(obj) === '[object Array]'
      if ( deep === false ) return obj;
      cloned = [];
      for ( var i in obj ){
         cloned.push( cloneObject( obj[i], deep ) );
      }
      return cloned;
   }
   cloned = {};
   for ( var i in obj ){
      cloned[i] = deep ? cloneObject( obj[i], true ) : obj[i];
    }
    return cloned;
}
2. localStorage存储的封装

使用方法:

storage.set('datura_lj','666');
alert(storage.get('datura_lj'));
storage.del('datura_lj');

源码:

var storage = {
     isLocalStorage: !!window.localStorage,
     set: function (key, value) { //设置缓存
              if (this.isLocalStorage) {//判断浏览器是否支持storage
                    window.localStorage.setItem(key, value);
               } else {
                    var expireDays = 365; //失效时间
                    var exDate = new Date();
                    exDate.setTime(exDate.getTime() + expireDays * 24 * 60 * 60 * 1000);
                    document.cookie = key + "=" + escape(value) + ";expires=" + exDate.toGMTString();
               }
            },
     get: function (key) { //读取缓存
                if (this.isLocalStorage) {
                    return window.localStorage.getItem(key);
                } else {
                    var arr, reg = new RegExp("(^| )" + key + "=([^;]*)(;|$)");
                    if (arr = document.cookie.match(reg)) {
                        return unescape(arr[2]);
                    } else {
                        return null;//如果查找不到返回null
                    }
                }
            },
      del: function (key) { //删除缓存
                if (this.isLocalStorage) {
                    localStorage.removeItem(key);
                } else {
                    var exDate = new Date();
                    exDate.setTime(exDate.getTime() - 1);
                    var read_val = this.read(key);
                    if (read_val != null) document.cookie = key + "=" + read_val + ";expires=" + exDate.toGMTString();
                }
            }
};
3. 时间格式转换

使用方法:

var str = '2017-08-07';
alert(timeFormatConversion({str:str,link:'.',content:'-'}));//2017.8.7
//str为要转换的时间格式,link为要以“神马东西”连接,content原来是“用啥”连接的

源码:

function timeFormatConversion(oldTimeFormat){
   var reg = new RegExp('(\\d+)('+ oldTimeFormat.content +')','g');
   return (oldTimeFormat.str).replace(reg,function($0,$1,$2){
            //第一个参数:$0(匹配成功后的整体结果:2017- ,08-);
            //第二个参数:$1(匹配成功的第一个分组,这里指的是“\d”:2017,08);
            //第三个参数:$2(匹配成功的第二个分组,这里指的是“-”:- , -)
             return $1 + oldTimeFormat.link;
          });
}
        

补充:在正则中使用变量

//方法一:使用eval
var regk = "/(\\d+)("+ bbb +")/g";
ar reg = eval(regk);
//方法二:使用new RegExp();  推荐
var reg = new RegExp('(\\d+)('+ bbb  +')','g');
4. 敏感词过滤

使用方法:

var str2 = "我爱北京天安门, 天安门上太阳升, 伟大领袖毛主席, 指引我们向前进."
document.write(sensitiveWords({str:str2,words:['我','北京','天安门']}));
//str后面是元字符串,words后面是一个数组把要屏蔽的关键字写入。
//注:默认是一个字替换一个*

源码:

function sensitiveWords(sensitive){
    var regWords = '';
    var wordsLength = (sensitive.words).length;//2
    for(var i=0;i<wordsLength;i++){
        if(i == (wordsLength-1)){
            regWords += (sensitive.words)[i];
        }else {
            regWords += (sensitive.words[i]) + '|';
        }
    }
    var reg = new RegExp(regWords,'g');
    return (sensitive.str).replace(reg,function(str){
         var result = '';
        for(var i=0;i<str.length;i++){
            result += '*';
        }
        return result ;
    });
};
5、时间戳转成日期对象

简述:

toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串,并返回结果;
replace(/:\d{1,2}$/,' ')验证替换以:开始有一位或二位数字的结束字符串,就是秒;替换为空。

使用方法:

alert(getLocalTime(1502166609)); //2017-8-8 12:30  单位是秒

源码:

// 单位是秒,传入的时间戳是“秒”数
function getLocalTime(S) {     
   return new Date(parseInt(S) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');     
}
6、vue-resource跨域取数据

使用方法:

this.$http.jsonp(
      'http://api.k780.com/?app=life.time&appkey={xxxx}&sign={xxxx}&format=json&jsoncallback=data',
      {
        credentials: true,
        jsonp: 'callback',
        jsonpCallback: 'data'
      })
    .then((res) => {
      if (res.data.success === '1') {
        console.log(res.data.result.timestamp)
      }
    }, (err) => {
      console.log('错误了:' + err)
    })
7、判断设备类型

使用方法:

   const browser = browserRedirect();

源码:

 function browserRedirect() {
        const userAgentInfo = navigator.userAgent
        let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod', 'Mobile']
        let flag = true
        for (let v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false
                break
            }
        }
        return flag ? 'pc' : 'phone'
    }
8、JS获取浏览器地址栏“指定”数据

使用方法:

  const xxx= GetQueryString("xxx");

源码:

function GetQueryString(name){
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r!=null)return  unescape(r[2]); return null;
}

function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
        return results == null ? "": decodeURIComponent(results[1]);
        }
9、form表单方式请求数据

源码:

        var form = new FormData();
        form.append("键","值");
        var req = new XMLHttpRequest();
        req.open("post", "接口地址", false);
        req.send(form);
        if(req.status>=200 && req.status<300 || req.status==304){
            console.log(req.responseText)
        }
10、ajax数据加密

github地址
使用方法:

1. 加密处理
Base64.encode(str)

2. 解密处理
Base64.decode(str)
11、vue-cli中解决移动端300ms延迟问题(fastclick)

使用方法:

1. 安装
  npm install fastclick --save
2. 使用
  在main.js中引入
  import faskclick from 'fastclick'
  fastclick.attach(document.body)
12、vue中Json数据排序

使用方法:

在计算属性(computed)中进行对数组排序:

sortData: function() {
    return sortByKey(this.data, 'age')
}

源码:

function sortByKey(array, key) {
    return array.sort(function(a, b) {
        var x = a[key];
        var y = b[key];
        return ((x<y)?-1:((x>y)?1:0));
    });
}
13、时间戳转换制定格式“时间”

使用方法:

format(new Date(),'yyyy-MM-dd HH:mm')
"2017-10-10 20:11"
format(new Date(),'yyyy-MM-dd EE')
"2017-10-10 周二"
format(new Date(),'yyyy-MM-dd EEE')
"2017-10-10 星期二"

源码:

let format = (date, fmt) => {
    let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours() % 12 == 0 ? 12 : date.getHours() % 12,
        'H+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),//季度
        'S': date.getMilliseconds()
    };
    let week = ['日', '一', '二', '三', '四', '五', '六'];
    if(/(y+)/.test(fmt)) {
        let $1 = RegExp.$1;
        fmt = fmt.replace($1, (date.getFullYear() + '').substr(4 - $1.length));
    }
    if(/(E+)/.test(fmt)) {
        let $1 = RegExp.$1;
        fmt = fmt.replace($1, (($1.length > 1) ? ($1.length > 2 ? '星期' : '周') : '') + week[date.getDay()]);
    }
    for(let k in o) {
        if(new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
        }
    }
    return fmt;
}
14、hasOwnProperty() 函数详解

使用方法:

let json = {"a": 1, "b": 2, "c": 3}
json.hasOwnProperty("a")  => 存在返回 ture
json.hasOwnProperty("d")  => 不存在返回 false
15、字节个数统计

使用方法:

var str = '123axc我是好人';
 alert(getByLen(str));

源码:

      function getByLen(str,type){
            var len = 0;
            for (var i=0;i<str.length;i++){
                if(str.charAt(i)>='\u4e00' && str.charAt(i)<='\u9fa5'){
                    if(type == 'gbk' || type == 'gb2312'){
                        len+=2;
                    } else {
                        len+=3;
                    }
                } else {
                    len++;
                }
            }
            return len;
        }
16、千分位

源码:

 function formatCurrency(num) 
        {
            if(num)
            {
                //将num中的$,去掉,将num变成一个纯粹的数据格式字符串
                num = num.toString().replace(/\$|\,/g,'');
                //如果num不是数字,则将num置0,并返回
                if(''==num || isNaN(num)){return 'Not a Number ! ';}
                //如果num是负数,则获取她的符号
                var sign = num.indexOf("-")> 0 ? '-' : '';
                //如果存在小数点,则获取数字的小数部分
                var cents = num.indexOf(".")> 0 ? num.substr(num.indexOf(".")) : '';
                cents = cents.length>1 ? cents : '' ;//注意:这里如果是使用change方法不断的调用,小数是输入不了的
                //获取数字的整数数部分
                num = num.indexOf(".")>0 ? num.substring(0,(num.indexOf("."))) : num ;
                //如果没有小数点,整数部分不能以0开头
                if('' == cents){ if(num.length>1 && '0' == num.substr(0,1)){return 'Not a Number ! ';}}
                //如果有小数点,且整数的部分的长度大于1,则整数部分不能以0开头
                else{if(num.length>1 && '0' == num.substr(0,1)){return 'Not a Number ! ';}}
                //针对整数部分进行格式化处理,这是此方法的核心,也是稍难理解的一个地方,逆向的来思考或者采用简单的事例来实现就容易多了
                /*
                  也可以这样想象,现在有一串数字字符串在你面前,如果让你给他家千分位的逗号的话,你是怎么来思考和操作的?
                  字符串长度为0/1/2/3时都不用添加
                  字符串长度大于3的时候,从右往左数,有三位字符就加一个逗号,然后继续往前数,直到不到往前数少于三位字符为止
                 */
                for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
                {
                    num = num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));
                }
                //将数据(符号、整数部分、小数部分)整体组合返回
                return (sign + num + cents);    
            }

        }



阅读更多
上一篇vue上 中 下
下一篇vue父子组件传值
想对作者说点什么? 我来说一句

学生宿舍管理系统(c语言)

2009年10月20日 3KB 下载

oracle 常用函数

2010年01月08日 15KB 下载

SQL常用命令使用方法

2008年04月09日 51KB 下载

完整的五金店商品管理系统

2010年05月16日 8KB 下载

oracle函数大全

2013年11月04日 14KB 下载

oracle常用函数详细解

2010年12月30日 13KB 下载

没有更多推荐了,返回首页

关闭
关闭