前端开发常用的函数

42次阅读

共计 3783 个字符,预计需要花费 10 分钟才能阅读完成。

实用的函数集合总结
基本类型的判断
在项目实例中,难免要做一些容错处理或者是对实例的类型判断,那么就可以把这部分的判断整理成公共的 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’)

正文完
 0