前端开发常用的函数

YacaToy 发布于2019-08-23 13:41 / 1825人阅读

摘要：实用的函数集合总结基本类型的判断在项目实例中，难免要做一些容错处理或者是对实例的类型判断，那么就可以把这部分的判断整理成公共的文件，供全局使用。

实用的函数集合总结 基本类型的判断

在项目实例中，难免要做一些容错处理或者是对实例的类型判断，那么就可以把这部分的判断整理成公共的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]
此时引用类型克隆出来的对象就是完全独立的对象了，源对象修改属性不会影响到克隆的对象
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") 
...

GPU云服务器云服务器 php常用的变量函数 php的常用函数库常用的服务器开发语言 php常用的开发工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99396.html

前端基础入门五（掌握jQuery的常用api，实现动态效果）

摘要：基本概念学习目标学会如何使用，掌握的常用，能够使用实现常见的效果。想要实现简单的动画效果，也很麻烦代码冗余。实现动画非常简单，而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。为什么要学习jQuery？【01-让div显示与设置内容.html】使用javasc...

nevermind 2019-08-30 15:55 评论0 收藏0
前端基础入门五（掌握jQuery的常用api，实现动态效果）

摘要：基本概念学习目标学会如何使用，掌握的常用，能够使用实现常见的效果。想要实现简单的动画效果，也很麻烦代码冗余。实现动画非常简单，而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。为什么要学习jQuery？【01-让div显示与设置内容.html】使用javasc...

codecook 2019-08-23 14:52 评论0 收藏0
前端基础入门五（掌握jQuery的常用api，实现动态效果）

摘要：基本概念学习目标学会如何使用，掌握的常用，能够使用实现常见的效果。想要实现简单的动画效果，也很麻烦代码冗余。实现动画非常简单，而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。为什么要学习jQuery？【01-让div显示与设置内容.html】使用javasc...

WalkerXu 2019-08-02 14:09 评论0 收藏0
前端基础入门五（掌握jQuery的常用api，实现动态效果）

摘要：基本概念学习目标学会如何使用，掌握的常用，能够使用实现常见的效果。想要实现简单的动画效果，也很麻烦代码冗余。实现动画非常简单，而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。为什么要学习jQuery？【01-让div显示与设置内容.html】使用javasc...

widuu 2019-07-01 11:14 评论0 收藏0
JavasScript重难点知识

摘要：忍者级别的函数操作对于什么是匿名函数，这里就不做过多介绍了。我们需要知道的是，对于而言，匿名函数是一个很重要且具有逻辑性的特性。通常，匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果...

forsigner 2019-08-21 18:36 评论0 收藏0