工作中—常用函数记录总结
2017-08-05 本文已影响792人
108N8
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);
}
}
