常用 JS 函数
各种业务开发都离不开对数据的处理，然而遇到的很多数据都是不好处理的。这个时候就需要寻求搜索引擎的帮助。这种方法效率是非常低下的，而且根据作者的个性不能保证其对自己的口味。因此这篇文字包含了一份 JS 常用业务函数手册，例如时间格式的处理、用的是哪个手机浏览器，手机号、邮箱的验证，以此来提高你的开发效率
常用 JS 函数
1.时间格式化
界面展示的时间千变万化, 所以一个处理时间的函数，它的重要性就不言而喻了。
export function formatDate (oldDate, fmt) {
let date = new Date()
if (typeof oldDate === 'string' || typeof oldDate === 'number') {
date = new Date(+oldDate)
} else {
date = oldDate
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds() }
function padLeftZero (str) {
return ('00' + str).substr(str.length)
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
}
}
return fmt
}
formatDate 接受俩个参数, oldDate 类型可以是 Date，String，Number。因为现在用时间戳传递时间真的是蛮多，也蛮方便的，而JS 是一门弱类型语言，所以我将 String 和 Number 类型的数据统一当做时间戳来处理。 fmt 是格式化的类型：yyyy-MM-dd hh:mm，其中的 yyyy | MM | dd | hh | mm 是分别匹配 年 | 月 | 日 | 时 | 分 的关键字。其中的连字符是可以随意替换的，只展示年月将其他关键字去掉即可。举几个例子：
- yyyy年MM月dd -> 2019年09月7日
- hh分mm秒 -> 16分53秒
2.以“天”为单位获取响应的时间戳
通常都会获取三天前的时间，12 个以内的数据，24 小时以内的数据，因此我弄了一个以天为单位获取时间戳的函数
export function setDate(num) { return Date.now() + num * 24 * 60 * 60 * 1000}
时间为正可以获得未来的时间，时间为负可以获得过去时间。举个例子
- 12 个小时之前的时间 -> setDate(-.5)
- 24 个小时之前的时间 -> setDate(-1)
- 三天后的时间 -> setDate(3)
3.获取 URL 中的参数
这个需求在三大框架的时代应用貌似不多了，不过面试中问的还是蛮多的，了解一下是好的
简单实现
var urlParams = new URLSearchParams('?post=1234&action=edit');
console.log(urlParams.get('action')); // "edit"
看了一下浏览器支持情况还是蛮好的，除了万恶的 ie
复杂实现
function getUrlParams(param){
// 有赖于浏览器环境， window.location.search 是浏览器函数
// 意思是:设置或返回从问号 (?) 开始的 URL（查询部分）。
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == param){return pair[1];}
}
return(false);
}
举个例子： http://xuyuechao.top?a=3&b=5&c=8888
- getUrlParams('a') -> 3
- getUrlParams('b') -> 5
- getUrlParams('c') -> 8888
4.手机端判断浏览器类型
BrowserInfo = {
isAndroid: Boolean(navigator.userAgent.match(/android/ig)),
isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),
isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),
isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),
isAli: Boolean(navigator.userAgent.match(/AlipayClient/ig)),
isPhone: Boolean(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent))
}
目前主要支持 安卓 & 苹果 & ipad & 微信 & 支付宝 & 是否是手机端。
5. 数组降维
二维数组
let arr = [ [1], [2], [3] ]
arr = Array.prototype.concat.apply([], arr); // [1, 2, 3]
多维数组降维
let arr = [1, 2, [3], [[4]]]
arr = arr.flat(3) // [1, 2, 3, 4]
flat 有兼容性问题，手机端问题不大。浏览器端不兼容 edge。填 Infinity 可展开任意深度的数组
6.深拷贝
使用变量 a 拷贝对象 b，改变 a 中的值 b 中的值也会跟着改变，这叫做浅拷贝。要想让 a 独立于 b 就需要深拷贝
简易处理
function deepClone() {
return JSON.parse(JSON.stringify(obj))
}
既然是简易处理就有他的不足，上面主要是用了 JSON 的序列化和反序列化。而 JSON 是不支持函数和 undefined 的因此碰到这些情况会缺失，但是已经能够满足大部分情况了
复杂处理
复杂处理就需要采用递归的方式了
function deepClone(obj) {
function isClass(o) {
if (o === null) return "Null";
if (o === undefined) return "Undefined";
return Object.prototype.toString.call(o).slice(8, -1);
}
var result;
var oClass = isClass(obj);
if (oClass === "Object") {
result = {};
} else if (oClass === "Array") {
result = [];
} else {
return obj;
}
for (var key in obj) {
var copy = obj[key];
if (isClass(copy) == "Object") {
result[key] = arguments.callee(copy);//递归调用
} else if (isClass(copy) == "Array") {
result[key] = arguments.callee(copy);
} else {
result[key] = obj[key];
}
}
return result;
}
7. 防抖 & 节流
防抖和节流属于高阶技巧，业务中比较多见的场合也就是搜索内容改变提示信息。即使不加也也不一定能看出区别，但是加了新手维护代码可能会崇拜你哦。
防抖
function debounce(func, wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args)
}, wait);
}
}
节流
function throttle(func, wait) {
let previous = 0;
return function() {
let now = Date.now();
let context = this;
let args = arguments;
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
}
}
8. 获取数组极值
function smallest(array){
return Math.min.apply(Math, array);
}
function largest(array){
return Math.max.apply(Math, array);
}
smallest([0, 1, 2.2, 3.3]); // 0
largest([0, 1, 2.2, 3.3]); // 3.3
感谢岁月无影的评论，再此补充用 es6 的实现方式
let list = [1, 2, 3, 4, 5]
Math.max(...list) // 5
Math.min(...list) // 19.判断小数是否相等
function epsEqu(x,y) {
return Math.abs(x - y) < Math.pow(2, -52);
}
// 举例
0.1 + 0.2 === 0.3 // false
epsEqu(0.1 + 0.2, 0.3) // true
感谢 IAmFineThanks 提供的 Number.EPSILON ，Number.EPSILON === Math.pow(2, -52)因此上述方法也可以这么写
function epsEqu(x,y) {
return Math.abs(x - y) < Number.EPSILON;
}
用户输入的是十进制数字，计算机保存的是二进制数。所以计算结果会有偏差，所以我们不应该直接比较非整数，而是取其上限，把误差计算进去。这样一个上限称为 machine epsilon，双精度的标准 epsilon 值是 2^-53 （Math.pow(2, -53)）
总结：
文中的代码可能不一定是最优代码，要是你有更好的代码欢迎评论。
参考资料：
一些让 JS 更优雅 / 易读的小技巧
对于工程师来说，代码是写一遍、修改很多遍、阅读更多遍的重要产出，可读性至关重要，所以高可读代码的重要性不言而喻。
1.用对象代替 switch / if
公共内容:
let a = 'VIP'
场景 1
if (a === 'VIP') {
return 1
} else if (a === 'SVIP') {
return 2
}
场景 2
switch(a) { // 感谢 红山老六 的评论指出这部分代码的 bug。现已改正
case 'VIP':
return 1
case 'SVIP':
return 2
}
场景 3
let obj = {
VIP: 1,
SVIP: 2
}
这里只是提供了一种方式，具体的使用场景还是要你自己判断。我用的比较多的一个场景是状态映射中文含义，例如支付状态通常获取的是 1， 2，3，4 这种值，但是列表要求显示相应的中文状态 未支付 | 支付中 | 已退款等等
2. || 和 && 的妙用
// 场景 1
function b(a) {
if (a) {
return a
} else {
return ''
}
}
// 场景 2
function b(a) {
return a || ''
}
上面是 || 的用法，也叫做短路处理。常见于 if 条件中，但是他其实也可以直接用于语句中。当第一个参数为 true 就会取第一个参数的值，当第一个参数不为 true 就会取第二个参数的值。&& 正好与 || 相反。第一个参数 为 true 会取第二个参数的值
希望本文总结的内容能给各位看官带来焕然一新的感觉。另外，如果你们有什么值得推荐的js技巧，欢迎在评论中补充，我可以收纳在本文中。
PS：此文档会持续新增内容。
Ajax请求
jquery ajax函数
我自己封装了一个ajax的函数，代码如下：
var Ajax = function(url, type success, error) {
$.ajax({
url: url,
type: type,
dataType: 'json',
timeout: 10000,
success: function(d) {
var data = d.data;
success && success(data);
},
error: function(e) {
error && error(e);
}
});
};
// 使用方法：
Ajax('/data.json', 'get', function(data) {
console.log(data);
});
jsonp方式
有时候我们为了跨域，要使用jsonp的方法，我也封装了一个函数：
function jsonp(config) {
var options = config || {}; // 需要配置url, success, time, fail四个属性
var callbackName = ('jsonp_' + Math.random()).replace(".", "");
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement('script');
oHead.appendChild(oScript);
window[callbackName] = function(json) { //创建jsonp回调函数
oHead.removeChild(oScript);
clearTimeout(oScript.timer);
window[callbackName] = null;
options.success && options.success(json); //先删除script标签，实际上执行的是success函数
};
oScript.src = options.url + '?' + callbackName; //发送请求
if (options.time) { //设置超时处理
oScript.timer = setTimeout(function () {
window[callbackName] = null;
oHead.removeChild(oScript);
options.fail && options.fail({ message: "超时" });
}, options.time);
}
};
// 使用方法：
jsonp({
url: '/http://b.com/b.json',
success: function(d){
//数据处理
},
time: 5000,
fail: function(){
//错误处理
}
});
常用正则验证表达式
手机号验证
var validate = function(num) {
var exp = /^1[3-9]d{9}$/;
return exp.test(num);
};
身份证号验证
var exp = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
ip验证
var exp = /^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$/;
常用js函数
返回顶部
$(window).scroll(function() {
var a = $(window).scrollTop();
if(a > 100) {
$('.go-top').fadeIn();
}else {
$('.go-top').fadeOut();
}
});
$(".go-top").click(function(){
$("html,body").animate({scrollTop:"0px"},'600');
});
阻止冒泡
function stopBubble(e){
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation(); //W3C阻止冒泡方法
}else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
全部替换replaceAll
var replaceAll = function(bigStr, str1, str2) { //把bigStr中的所有str1替换为str2
var reg = new RegExp(str1, 'gm');
return bigStr.replace(reg, str2);
}
获取浏览器url中的参数值
var getURLParam = function(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)', "ig").exec(location.search) || [, ""])[1].replace(/+/g, '%20')) || null;
};
深度拷贝对象
function cloneObj(obj) {
var o = obj.constructor == Object ? new obj.constructor() : new obj.constructor(obj.valueOf());
for(var key in obj){
if(o[key] != obj[key] ){
if(typeof(obj[key]) == 'object' ){
o[key] = mods.cloneObj(obj[key]);
}else{
o[key] = obj[key];
}
}
}
return o;
}
数组去重
var unique = function(arr) {
var result = [], json = {};
for (var i = 0, len = arr.length; i < len; i++){
if (!json[arr[i]]) {
json[arr[i]] = 1;
result.push(arr[i]); //返回没被删除的元素
}
}
return result;
};
判断数组元素是否重复
var isRepeat = function(arr) { //arr是否有重复元素
var hash = {};
for (var i in arr) {
if (hash[arr[i]]) return true;
hash[arr[i]] = true;
}
return false;
};
生成随机数
function randombetween(min, max){
return min + (Math.random() * (max-min +1));
}
操作cookie
own.setCookie = function(cname, cvalue, exdays){
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = 'expires='+d.toUTCString();
document.cookie = cname + '=' + cvalue + '; ' + expires;
};
own.getCookie = function(cname) {
var name = cname + '=';
var ca = document.cookie.split(';');
for(var i=0; i< ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return '';
};
知识技巧总结
数据类型
underfined、null、0、false、NaN、空字符串。他们的逻辑非结果均为true。
闭包格式
好处：避免命名冲突（全局变量污染）。
(function(a, b) {
console.log(a+b); //30
})(10, 20);
截取和清空数组
var arr = [12, 222, 44, 88];
arr.length = 2; //截取，arr = [12, 222];
arr.length = 0; //清空，arr will be equal to [].
获取数组的最大最小值
var numbers = [5, 45822, 120, -215];
var maxInNumbers = Math.max.apply(Math, numbers); //45822
var minInNumbers = Math.min.apply(Math, numbers); //-215
浮点数计算问题
0.1 + 0.2 == 0.3 //false
为什么呢？因为0.1+0.2等于0.30000000000000004。JavaScript的数字都遵循IEEE 754标准构建，在内部都是64位浮点小数表示。可以通过使用toFixed()来解决这个问题。
数组排序sort函数
var arr = [1, 5, 6, 3]; //数字数组
arr.sort(function(a, b) {
return a - b; //从小到大排
return b - a; //从大到小排
return Math.random() - 0.5; //数组洗牌
});
var arr = [{ //对象数组
num: 1,
text: 'num1'
}, {
num: 5,
text: 'num2'
}, {
num: 6,
text: 'num3'
}, {
num: 3,
text: 'num4'
}];
arr.sort(function(a, b) {
return a.num - b.num; //从小到大排
return b.num - a.num; //从大到小排
});
对象和字符串的转换
var obj = {a: 'aaa', b: 'bbb'};
var objStr = JSON.stringify(obj); // "{"a":"aaa","b":"bbb"}"
var newObj = JSON.parse(objStr); // {a: "aaa", b: "bbb"}
git笔记
git使用之前的配置
1.git config --global user.email xxx@163.com
2.git config --global user.name xxx
3.ssh-keygen -t rsa -C xxx@163.com(邮箱地址) // 生成ssh
4.找到.ssh文件夹打开，使用cat id_rsa.pub //打开公钥ssh串
5.登陆github，settings － SSH keys － add ssh keys （把上面的内容全部添加进去即可）
说明：然后这个邮箱（xxxxx@gmail.com）对应的账号在github上就有权限对仓库进行操作了。可以尽情的进行下面的git命令了。
git常用命令
1、git config user.name / user.email //查看当前git的用户名称、邮箱
2、git clone https://github.com/jarson7426/javascript.git project //clone仓库到本地。
3、修改本地代码，提交到分支: git add file / git commit -m “新增文件”
4、把本地库推送到远程库: git push origin master
5、查看提交日志：git log -5
6、返回某一个版本：git reset --hard 123
7、分支：git branch / git checkout name / git checkout -b dev
8、合并name分支到当前分支：git merge name / git pull origin
9、删除本地分支：git branch -D name
10、删除远程分支： git push origin :daily/x.x.x
11、git checkout -b mydev origin/daily/1.0.0 //把远程daily分支映射到本地mydev分支进行开发
12、合并远程分支到当前分支 git pull origin daily/1.1.1
13、发布到线上：
git tag publish/0.1.5
git push origin publish/0.1.5:publish/0.1.5
14、线上代码覆盖到本地：
git checkout --theirs build/scripts/ddos
git checkout --theirs src/app/ddos