前端开发常用的函数
实用的函数集合总结
基本类型的判断
在项目实例中,难免要做一些容错处理或者是对实例的类型判断,那么就可以把这部分的判断整理成公共的js文件,供全局使用。
利用object.prototype.toString.call
可以判断对象的类型
变量的两种类型值:
1、基本类型:String,Number,Boolean,undefined,null,按值访问
2、引用类型:Object,Array, 对象保存在内存中
可以作为项目的工具类,比如命名为tool.js
export default isNumber(value) {
return Object.prototype.toString.call(value) == '[object Number]'
}
export default isString(value) {
return Object.prototype.toString.call(value) == '[object String]'
}
export default isArray(value) {
return Object.prototype.toString.call(value) == '[object Array]'
}
export default isBoolean(value) {
return Object.prototype.toString.call(value) == '[object Boolean]'
}
export default isUndefined(value) {
return value === undefined
}
export default isNull(value) {
return value === null
}
export default isSymbol(value) {
return Object.prototype.toString.call(value) == '[object Symbol]'
}
export default isObject(value) {
return ( Object.prototype.toString.call(value) == '[object Object]'
||
// if it isn't a primitive value, then it is a common object
(
!isNumber(value) &&
!isString(value) &&
!isBoolean(value) &&
!isArray(value) &&
!isNull(value) &&
!isFunction(value) &&
!isUndefined(value) &&
!isSymbol(value)
)
)
}
//是否是一个空对象
export function isEmptyObject(obj) {
if(!isObject(obj)) {
return false
}
if(var key in obj) {
return false
}
return true
}
//是否是一个空数组
export function isEmptyArray(array) {
if(!isArray(array)) {
return false
}
return array.length > 0 ? false : true
}
export function isFunction(value) {
return Object.prototype.toString.call(value) == '[object Function]';
}
引用类型克隆合并
Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果拷贝后的结果是两个对象指向同一引用地址,修改其中一个对象的属性,则另一个对象的属性也会改变
所以改变引用类型值时会影响到拷贝的值
var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2
下面extend
函数就是解决上面的问题
/*
深度合并内容
引用类型克隆合并
arguments[0] = target
arguments type is Object Or Array
多内容合并覆盖优先级: arguments[0]<arguments[1]<arguments[2]..
如果sources 不是数组或者对象 则直接忽略
使用 extend(target, ...source)
*/
export function extend(){
var args = Array.prototype.slice.call(arguments);
if(args.length === 0){
console.error('extends params is undefined')
return {};
}
if(args.length === 1){
return args[0]
}
//要合并的目标对象
var target = args[0];
//要合并的内容
var sources = args.slice(1,args.length)
if(!isObject(target) && !isArray(target)){
target = {};
}
sources.map(function(item){
//防止死循环
if(target === item){
return false;
}
//如果内容是对象
if(isObject(item)){
//开始遍历
for(var key in item){
//如果内容是对象
if(isObject(item[key])){
//修正数据
target[key] = (target[key] && isObject(target[key]))?target[key]:{};
target[key] = extend(target[key],item[key])
}else if(isArray(item[key])){
//修正数据
target[key] = (target[key] && isArray(target[key]))?target[key]:[];
target[key] = extend(target[key],item[key])
}else{
//基本类型直接赋值
target[key] = item[key]
}
}
}else if(isArray(item)){
for(var i = 0; i<item.length ;i++){
//如果内容是对象
if(isObject(item[i])){
//修正数据
target[i] = (target[i] && isObject(target[i]))?target[i]:{}
target[i] = extend(target[i],item[i])
}else if(isArray(item[i])){
//修正数据
target[i] = (target[i] && isArray(target[i]))?target[i]:[];
target[i] = extend(target[i],item[i])
}else{
//基本类型直接赋值
target[i] = item[i]
}
}
}
//其他类型直接忽略
})
return target
}
此时引用类型克隆出来的对象就是完全独立的对象了,源对象修改属性不会影响到克隆的对象
var obj1 = {a: {b: 1}};
var obj2 = extend({}, obj1)
obj1.a.b = 2;
obj2.a.b // 1
可以合并 对象与对象,数组与数组,对象与数组等
不同时间形式的输出
时间戳是一样的,有时需要根据需求输出不一样格式的时间形式
- yyyy年MM月dd日 hh:mm:ss
- yyyy年MM月dd日
- yyyy-mm-dd
/*@param date 时间戳*/
/*@param format 时间格式*/
function dateFormat(date,format){
if(!format || typeof format !== 'string'){
console.error('format is undefiend or type is Error');
return '';
}
date = date instanceof Date? date : (typeof date === 'number'|| typeof date === 'string')? new Date(date): new Date();
//解析
var formatReg = {
'y+': date.getFullYear(),
'M+': date.getMonth()+1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for(var reg in formatReg){
if(new RegExp(reg).test(format)){
var match = RegExp.lastMatch;
format = format.replace(match, formatReg[reg]< 10 ? '0'+formatReg[reg]: formatReg[reg].toString() );
}
}
return format;
}
这样,把你想要的时间的格式和时间戳传入即可。
dateFormat(new Date().getTime(),'yyyy-MM-dd hh:mm:ss')
dateFormat(new Date().getTime(),'MM-dd-yy hh:mm:ss')
...