精华内容
下载资源
问答
  • 在vue里如何使用xe-utils
    千次阅读
    2020-12-24 07:17:15

    这次给大家带来在vue里如何使用xe-utils,在vue里使用xe-utils的注意事项有哪些,下面就是实战案例,一起来看一下。

    本文介绍了vue使用xe-utils函数库的具体方法,分享给大家,具体如下:

    安装完成后自动挂载在vue实例:this.$utils(函数库)

    支持挂载函数列表:this.$browse(浏览器内核判断) this.$locat(用于读写地址栏参数)

    在 vue 实例中通过 this.$utils 调用的函数 this 默认指向当前vue实例。

    CDN 安装

    使用 script 方式安装,VXEUtils 会定义为全局变量

    生产环境请使用 vxe-utils.min.js,更小的压缩版本,可以带来更快的速度体验。

    cdnjs 获取最新版本

    点击浏览已发布的所有 npm 包的源代码。

    unpkg 获取最新版本

    点击浏览已发布的所有 npm 包的源代码

    AMD 安装

    require.js 安装示例// require 配置

    require.config({

    paths: {

    // ...,

    'xe-utils': './dist/xe-utils.min',

    'vxe-utils': './dist/vxe-utils.min'

    }

    })

    // ./main.js 安装

    define(['Vue', 'xe-utils', 'vxe-utils'], function (Vue, XEUtils, VXEUtils) {

    Vue.use(VXEUtils, XEUtils)

    })

    ES6 Module 安装方式npm install xe-utils vxe-utils --save

    通过 Vue.use() 来全局安装import Vue from 'vue'

    import XEUtils from 'xe-utils'

    import VXEUtils from 'vxe-utils'

    Vue.use(VXEUtils, XEUtils)

    // 通过vue实例的调用方式

    const dateStr = this.$utils.dateToString(new Date(), 'yyyy-MM-dd')

    const date = this.$utils.stringToDate('11/20/2017 10:10:30', 'MM/dd/yyyy HH:mm:ss')

    vue 实例挂载自定义属性

    示例import Vue from 'vue'

    import XEUtils from 'xe-utils'

    import VXEUtils from 'vxe-utils'

    import customs from './customs'

    XEUtils.mixin(customs)

    Vue.use(VXEUtils, XEUtils, {mounts: ['locat', 'browse', 'cookie']})

    this.$locat // this.$locat.origin

    this.$browse // this.$browse['-webkit'] true

    this.$cookie // this.$cookie('name', 'value')

    混合函数

    文件 ./customs.jsexport function custom1 () {

    console.log('自定义函数')

    }

    示例 ./main.jsimport Vue from 'vue'

    import XEUtils from 'xe-utils'

    import customs from './customs'

    XEUtils.mixin(customs)

    Vue.use(VXEUtils, XEUtils)

    // 调用自定义扩展函数

    XEUtils.custom1()

    示例

    Home.vue

    • {{ item.dateStr }}或者{{ $utils.dateToString(item.date) }}

    export default {

    data () {

    return {

    list: []

    }

    },

    methods: {

    init () {

    this.$ajax.getJSON('services/user/list', {id: 123})

    .then(data => {

    this.list = data.map(item => {

    item.dateStr = this.$utils.dateToString(item.date, 'MM/dd/yyyy')

    })

    }).catch(data => {

    this.list = []

    })

    }

    },

    created () {

    this.init()

    }

    }

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    更多相关内容
  • 主要介绍了vue使用xe-utils函数库的具体方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue使用xe-utils通用函数库

    千次阅读 2020-01-06 12:25:30
    目录 一、xe-Utils介绍 ...三、如何全局使用xe-utils 3.1 安装xe-utils 3.1.1 ES6方式(推荐): 3.1.2 CDN安装 3.1.3 AMD安装 3.2 全局配置 3.3 全局参数配置(可省略) 3.4 使用 4、功能扩展(使用mi...

    目录

    一、xe-Utils介绍

    二、xe-utils API介绍

    API全局参数

    基础函数

    常用函数

    日期函数

    高级函数

    浏览器函数

    三、如何全局使用xe-utils

    3.1 安装xe-utils

    3.1.1 ES6方式(推荐):

    3.1.2 CDN安装

    3.1.3 AMD安装

    3.2 全局配置

    3.3 全局参数配置(可省略)

    3.4 使用

    4、功能扩展(使用mixin)

    4.1 写功能js

    4.2 main.js中配置

    4.3 调用自定义函数

    5、常见的操作

    5.1 日期操作


    最近,做项目中发现了一个很流弊的通用函数库,githup上人家把常用的函数给写好了,项目中只需要调用即可使用函数,不需要自己SB的整半天。这个函数库的名称叫做:xe-Utils

    一、xe-Utils介绍

    xe-utils提供了一套实用的基础函数、任意格式的日期转换函数,浏览器相关操作函数等。

    最新版本见 Github,点击查看历史版本

    二、xe-utils API介绍

    API
    全局参数

    • setup ( options ) 设置默认全局参数

    基础函数

    • isNaN (val) 判断是否非数值
    • isFinite (val) 判断是否为有限数值
    • isUndefined (val) 判断 Undefined
    • isArray (val) 判断是否数组
    • isFloat (val) 判断是否小数
    • isInteger (val) 判断是否整数
    • isBoolean (val) 判断是否 Boolean 对象
    • isString (val) 判断是否 String 对象
    • isNumber (val) 判断是否 Number 对象
    • isRegExp (val) 判断是否 RegExp 对象
    • isObject (val) 判断是否 Object 对象
    • isPlainObject (val) 判断是否是一个对象
    • isDate (val) 判断是否 Date 对象
    • isError (val) 判断是否 Error 对象
    • isTypeError (val) 判断是否 TypeError 对象
    • isEmpty (val) 判断是否为空,包括空对象、空数值、空字符串
    • isNull (val) 判断是否为 Null
    • isSymbol (val) 判断是否 Symbol 对象
    • isArguments (val) 判断是否 Arguments 对象
    • isElement (val) 判断是否 Element 对象
    • isDocument (val) 判断是否 Document 对象
    • isWindow (val) 判断是否 Window 对象
    • isFormData (val) 判断是否 FormData 对象
    • isMap (val) 判断是否 Map 对象
    • isWeakMap (val) 判断是否 WeakMap 对象
    • isSet (val) 判断是否 Set 对象
    • isWeakSet (val) 判断是否 WeakSet 对象
    • isLeapYear (date) 判断是否闰年
    • isEqual (obj1, obj2) 深度比较两个对象之间的值是否相等
    • isDateSame (date1, date2, format) 判断两个日期是否相同

    常用函数

    • toNumber ( num ) 转数值
    • toInteger ( num ) 转整数
    • toFixedNumber ( num, digits ) 和 Number.toFixed 类似,区别就是不会对小数进行四舍五入,结果返回数值
    • toFixedString ( num, digits ) 和 Number.toFixed 类似,区别就是不会对小数进行四舍五入,结果返回字符串
    • toArray ( array ) 将对象或者伪数组转为新数组
    • toStringJSON (str) 字符串转 JSON
    • toJSONString (obj) JSON 转字符串
    • getType (obj) 获取对象类型
    • getSize ( obj ) 返回对象的长度
    • uniqueId ( prefix ) 获取一个全局唯一标识
    • uniq ( array ) 数组去重
    • union ( ...array ) 将多个数的值返回唯一的并集数组
    • random ( min, max ) 获取一个指定范围内随机数
    • range ( start, stop, step ) 序号列表生成函数
    • clear (obj[, defs, assigns]) 清空对象; defs如果不传(清空所有属性)、如果传对象(清空并继承)、如果传值(给所有赋值)
    • remove (obj, iteratee) 移除对象属性
    • assign (destination, ...sources) 浅拷贝一个或者多个对象到目标对象中,如果第一值是true,则使用深拷贝
    • clone (obj, deep) 浅拷贝/深拷贝
    • destructuring (obj, ...target) 将一个或者多个对象值解构到目标对象
    • trim ( str ) 去除字符串左右两边的空格
    • trimLeft ( str ) 去除字符串左边的空格
    • trimRight ( str ) 去除字符串右边的空格
    • escape ( str ) 转义HTML字符串,替换&, <, >, ", ', `字符
    • unescape ( str ) 反转 escape
    • camelCase ( str ) 将带驼峰字符串转成字符串
    • kebabCase ( str ) 将字符串转成驼峰字符串
    • repeat ( str, count ) 将字符串重复 n 次
    • padStart ( str, targetLength, padString ) 用指定字符从前面开始补全字符串
    • padEnd ( str, targetLength [, padString] ) 用指定字符从后面开始补全字符串
    • startsWith ( str, val [, startIndex] ) 判断字符串是否在源字符串的头部
    • endsWith ( str, val [, startIndex] ) 判断字符串是否在源字符串的尾部
    • slice ( array, start, end ) 裁剪 Arguments 或数组 array,从 start 位置开始到 end 结束,但不包括 end 本身的位置
    • indexOf (obj, val) 返回对象第一个索引值
    • findIndexOf (obj, iteratee [, context]) 返回对象第一个索引值
    • lastIndexOf (obj, val) 从最后开始的索引值,返回对象第一个索引值
    • findLastIndexOf (obj, iteratee [, context]) 从最后开始的索引值,返回对象第一个索引值
    • includes (obj, val) 判断对象是否包含该值,成功返回 true 否则 false
    • includeArrays (array1, array2) 判断数组是否包含另一数组
    • each ( obj, iteratee [, context] ) 通用迭代器
    • arrayEach ( obj, iteratee [, context] ) 数组迭代器
    • objectEach ( obj, iteratee [, context] ) 对象迭代器
    • lastEach ( obj, iteratee [, context] ) 通用迭代器,从最后开始迭代
    • lastArrayEach ( obj, iteratee [, context] ) 数组迭代器,从最后开始迭代
    • lastObjectEach ( obj, iteratee [, context] ) 对象迭代器,从最后开始迭代
    • forOf ( obj, iteratee [, context] ) 通用迭代器,支持 return false 跳出循环 break
    • lastForOf ( obj, iteratee [, context] ) 通用迭代器,从最后开始迭代,支持 return false 跳出循环 break
    • keys (obj) 获取对象所有属性
    • values (obj) 获取对象所有值
    • entries (obj) 获取对象所有属性、值
    • first (obj) 获取对象第一个值
    • last (obj) 获取对象最后一个值
    • groupBy ( obj, iteratee [, context] ) 集合分组,默认使用键值分组,如果有 iteratee 则使用结果进行分组
    • countBy ( obj, iteratee [, context] ) 集合分组统计,返回各组中对象的数量统计
    • sortBy ( arr, iteratee [, context] ) 数组按属性值升序
    • shuffle ( array ) 将一个数组随机打乱,返回一个新的数组
    • sample ( array, number ) 从一个数组中随机返回几个元素
    • some ( obj, iteratee [, context] ) 对象中的值中的每一项运行给定函数,如果函数对任一项返回 true,则返回 true,否则返回 false
    • every ( obj, iteratee [, context] ) 对象中的值中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true,否则返回 false
    • filter ( obj, iteratee [, context] ) 根据回调过滤数据
    • find ( obj, iteratee [, context] ) 查找匹配第一条数据
    • findKey ( obj, iteratee [, context] ) 查找匹配第一条数据的键
    • map ( obj, iteratee [, context] ) 指定方法后的返回值组成的新数组
    • objectMap ( obj, iteratee [, context] ) 指定方法后的返回值组成的新对象
    • pick (obj, array) 根据 keys 过滤指定的属性值 或者 接收一个判断函数,返回一个新的对象
    • omit (obj, array) 根据 keys 排除指定的属性值 或者 接收一个判断函数,返回一个新的对象
    • copyWithin ( array, target, start [, end] ) 浅复制数组的一部分到同一数组中的另一个位置,数组大小不变
    • sum ( obj, iteratee [, context] ) 求和函数,将数值相加
    • mean ( obj, iteratee [, context] ) 求平均值函数
    • reduce ( array, iteratee [, initialValue] ) 接收一个函数作为累加器,数组中的每个值(从左到右)开始合并,最终为一个值
    • chunk ( array, size ) 将一个数组分割成大小的组。如果数组不能被平均分配,那么最后一块将是剩下的元素
    • min ( arrb[, iteratee] ) 获取最小值
    • max ( arr [, iteratee] ) 获取最大值
    • commafy ( num [, options] ) 数值千分位分隔符、小数点

    日期函数

    • now ( ) 返回当前时间戳
    • timestamp ( date[, format] ) 将日期转为时间戳
    • toStringDate ( str, format ) 任意格式字符串转为日期
    • toDateString ( date [, format, options] ) 日期格式化为任意格式字符串
    • getWhatYear ( date, year [, month] ) 返回前几年或后几年的日期,可以指定年初(first)、年末(last)、月份(0~11),默认当前
    • getWhatMonth ( date, month [, day] ) 返回前几月或后几月的日期,可以指定月初(first)、月末(last)、天数,默认当前
    • getWhatWeek ( date, week [, day] ) 返回前几周或后几周的日期,可以指定星期几(0~6),默认当前
    • getWhatDay ( date, day [, mode] ) 返回前几天或后几天的日期
    • getDayOfYear ( date [, year] ) 返回某个年份的天数,可以指定前几个年或后几个年,默认当前
    • getYearDay ( date ) 返回某个年份的第几天
    • getYearWeek ( date ) 返回某个年份的第几周
    • getMonthWeek ( date ) 返回某个月份的第几周
    • getDayOfMonth ( date [, month] ) 返回某个月份的天数,可以指定前几个月或后几个月,默认当前
    • getDateDiff ( startDate, endDate [, rules] ) 返回两个日期之间差距,如果结束日期小于开始日期 done 为 fasle

    高级函数

    • toArrayTree ( array, options ) 一个高性能的树结构转换函数,将一个带层级的数据列表转成树结构
    • toTreeArray ( array, options ) 将一个树结构转成数组列表
    • property ( path ) 返回一个获取对象属性的函数
    • pluck ( array, key ) 获取数组对象中某属性值,返回一个数组
    • invoke ( list, path, ...arguments ) 在list的每个元素上执行方法,任何传递的额外参数都会在调用方法的时候传递给它
    • zip ( ) 将每个数组中相应位置的值合并在一起
    • unzip ( arrays ) 与 zip 相反
    • delay (callback, wait[, ...arguments]) 该方法和 setTimeout 一样的效果,区别就是支持额外参数
    • bind (callback, context[, ...arguments]) 创建一个绑定上下文的函数
    • once (callback, context[, ...arguments]) 创建一个只能调用一次的函数,只会返回第一次执行后的结果
    • after (count, callback, context) 创建一个函数, 调用次数超过 count 次之后执行回调并将所有结果记住后返回
    • before (count, callback, context) 创建一个函数, 调用次数不超过 count 次之前执行回调并将所有结果记住后返回
    • throttle (callback, wait[, options]) 创建一个策略函数,当被重复调用函数的时候,至少每隔多少秒毫秒调用一次该函数
    • debounce (callback, wait[, options]) 创建一个防反跳策略函数,在函数最后一次调用多少毫秒之后才会再次执行,如果在期间内重复调用会重新计算延迟

    浏览器函数

    • serialize ( query ) 序列化查询参数
    • unserialize ( str ) 反转序列化查询参数
    • browse ( ) 获取浏览器信息
    • locat ( ) 获取地址栏信息
    • parseUrl ( url ) 解析 URL 参数
    • getBaseURL ( ) 获取上下文路径
    • cookie ( name, value, options ) Cookie 操作函数

    三、如何全局使用xe-utils

    这玩意肯定需要全局使用,这样工程中任何地方都能方便使用。

    3.1 安装xe-utils

    3.1.1 ES6方式(推荐):

    npm install xe-utils vxe-utils --save

    备注:最好连同vxe-utils一起安装了

    3.1.2 CDN安装

    <script src="https://cdn.jsdelivr.net/npm/vxe-utils@1.3.4/dist/vxe-utils.js"></script>

    3.1.3 AMD安装

    require.js安装实例:

    // require 配置
    
    require.config({
    
     paths: {
    
      // ...,
    
      'xe-utils': './dist/xe-utils.min',
    
      'vxe-utils': './dist/vxe-utils.min'
    
     }
    
    })
    
    // ./main.js 安装
    
    define(['Vue', 'xe-utils', 'vxe-utils'], function (Vue, XEUtils, VXEUtils) {
    
     Vue.use(VXEUtils, XEUtils)
    
    })

    3.2 全局配置

    在main.js中通过Vue.use()来全局安装:

    import Vue from 'vue'
    import XEUtils from 'xe-utils'
    import VXEUtils from 'vxe-utils'
     
    // mounts 可以设置['cookie', 'browse', 'locat']
    Vue.use(VXEUtils, XEUtils, {mounts: ['cookie']})
    

    3.3 全局参数配置(可省略)

    这步操作,可以省略,即全部采用默认的。

    
    XEUtils.setup({
      cookies: {
        path: '/'
      },
      treeOptions: {strict: false, parentKey: 'parentId', key: 'id', children: 'children', data: null},
      formatDate: 'yyyy-MM-dd HH:mm:ss.SSS',
      formatString: 'yyyy-MM-dd HH:mm:ss',
      formatStringMatchs : {
        E: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        q: [null, '第一季度', '第二季度', '第三季度', '第四季度']
      },
      commafys: {spaceNumber: 3, separator: ',', fixed: 0}
    })
    

    3.4 使用

    在vue文件中,template标签利用$utils.方法名调用,script中利用this.$utils.方法名调用:

    template标签中:

    <template>
      <div>{{ $utils.toDateString(startDate, 'yyyy-dd-MM HH:mm:ss') }}</div>   //直接使用$utils.函数名称来调用函数
    </template>

    script标签中:

    <script>
    export default {
      name: 'App',
      data: {
        return {
          endDate: null
        }
      },
      created () {
        this.endDate = this.$utils.toDateString(new Date(), 'MM/dd/yyyy HH:mm:ss.SSS')
      }    //使用this.$utils.函数名调用
    }
    </script>
    

    4、功能扩展(使用mixin)

    这个js只是网上给提供的常用函数,要是自己项目中有经常使用到的工具,当然了也可以自己额外整个公共的js当做工具类,但是要想也放到xe-utils这个工具类下面,可以使用mixin扩展。

    4.1 写功能js

    export function custom1 () {
    
     console.log('自定义函数')
    
    }

    4.2 main.js中配置

    XEUtils.mixin(customs)

    4.3 调用自定义函数

    XEUtils.custom1()

    5、常见的操作

    5.1 日期操作

    // 日期格式化为字符串
    let date = new Date(2019, 2, 2, 10, 30, 20, 95)
    XEUtils.toDateString(date) // 2019-02-02 10:30:20
    XEUtils.toDateString(date, 'yyyy/MM/dd HH:mm:ss.S') // 2019/02/02 10:30:20.95
    XEUtils.toDateString(date, 'E') // 周六
    XEUtils.toDateString(date, '第 WW 周') // 第 05 周
    XEUtils.toDateString(date, 'q') // 第一季度
    
    // 格式化为日期
    XEUtils.toStringDate('2019-02-02 10:30:20.95') // Sat Feb 02 2019 10:30:20 GMT+0800
    XEUtils.toStringDate('02/02/2019', 'MM/dd/yyyy') // Sat Feb 02 2019 00:00:00 GMT+0800
    XEUtils.toStringDate('20190202103020', 'yyyyMMddHHmmss') // Sat Feb 02 2019 10:30:20 GMT+0800
    

     

    展开全文
  • xe-utils 函数库

    2021-03-16 00:58:51
    最新版本见 Github,点击查看历史版本XEUtils 提供一套实用的基础函数、任意格式的日期转换函数,浏览器相关操作函数等...APIisNaN (val) 判断是否非数值import XEUtils from 'xe-utils'XEUtils.isNaN(undefined) //...

    最新版本见 Github,点击查看历史版本

    XEUtils 提供一套实用的基础函数、任意格式的日期转换函数,浏览器相关操作函数等...

    API

    isNaN (val) 判断是否非数值

    import XEUtils from 'xe-utils'

    XEUtils.isNaN(undefined) // true

    XEUtils.isNaN({}) // true

    XEUtils.isNaN('num') // true

    XEUtils.isNaN(true) // false

    XEUtils.isNaN(null) // false

    XEUtils.isNaN('') // false

    isFinite (val) 判断是否为有限数值

    import XEUtils from 'xe-utils'

    XEUtils.isFinite(NaN) // false

    XEUtils.isFinite(0) // true

    XEUtils.isFinite(2e64) // true

    isUndefined (val) 判断Undefined

    import XEUtils from 'xe-utils'

    XEUtils.isUndefined(0) // false

    XEUtils.isUndefined() // true

    isArray (val) 判断是否数组

    import XEUtils from 'xe-utils'

    XEUtils.isArray(null) // false

    XEUtils.isArray({}) // false

    XEUtils.isArray([1,2,3]) // true

    isFloat (val) 判断是否小数

    import XEUtils from 'xe-utils'

    XEUtils.isFloat(null) // false

    XEUtils.isFloat(0) // false

    XEUtils.isFloat(3) // false

    XEUtils.isFloat(3.3) // true

    isInteger (val) 判断是否整数

    import XEUtils from 'xe-utils'

    XEUtils.isInteger(null) // false

    XEUtils.isInteger(3.3) // false

    XEUtils.isInteger(3) // true

    XEUtils.isInteger(0) // true

    isFunction (val) 判断是否方法

    import XEUtils from 'xe-utils'

    XEUtils.isFunction({}) // false

    XEUtils.isFunction(function(){}) // true

    isBoolean (val) 判断是否Boolean对象

    import XEUtils from 'xe-utils'

    XEUtils.isBoolean('false') // false

    XEUtils.isBoolean(true) // true

    isString (val) 判断是否String对象

    import XEUtils from 'xe-utils'

    XEUtils.isString(1) // false

    XEUtils.isString(true) // false

    XEUtils.isString('') // true

    XEUtils.isString('abc') // true

    isNumber (val) 判断是否Number对象

    import XEUtils from 'xe-utils'

    XEUtils.isNumber(null) // false

    XEUtils.isNumber('1') // false

    XEUtils.isNumber(1) // true

    isRegExp (val) 判断是否RegExp对象

    import XEUtils from 'xe-utils'

    XEUtils.isRegExp(null) // false

    XEUtils.isRegExp('a') // false

    XEUtils.isRegExp(new RegExp('a')) // true

    XEUtils.isRegExp(/\a/) // true

    isObject (val) 判断是否Object对象

    import XEUtils from 'xe-utils'

    XEUtils.isObject(null) // true

    XEUtils.isObject([]) // true

    XEUtils.isObject({}) // true

    XEUtils.isObject(123) // false

    isPlainObject (val) 判断是否是一个对象

    import XEUtils from 'xe-utils'

    XEUtils.sPlainObject(null) // false

    XEUtils.isPlainObject([]) // false

    XEUtils.isPlainObject(123) // false

    XEUtils.isPlainObject({}) // true

    isDate (val) 判断是否Date对象

    import XEUtils from 'xe-utils'

    XEUtils.isDate('2017-12-20') // false

    XEUtils.isDate({}) // false

    XEUtils.isDate(1514096716800) // false

    XEUtils.isDate(new Date()) // true

    isError (val) 判断是否Error对象

    import XEUtils from 'xe-utils'

    XEUtils.isError(null) // false

    XEUtils.isError({}) // false

    XEUtils.isError(new Error('error')) // true

    isTypeError (val) 判断是否TypeError对象

    import XEUtils from 'xe-utils'

    XEUtils.isTypeError(null) // false

    XEUtils.isTypeError({}) // false

    XEUtils.isTypeError(new TypeError('error')) // true

    isEmpty (val) 判断是否为空,包括空对象、空数值、空字符串

    import XEUtils from 'xe-utils'

    XEUtils.isEmpty(0) // true

    XEUtils.isEmpty('') // true

    XEUtils.isEmpty(null) // true

    XEUtils.isEmpty({}) // true

    XEUtils.isEmpty([]]) // true

    isNull (val) 判断是否为Null

    import XEUtils from 'xe-utils'

    XEUtils.isNull(0) // false

    XEUtils.isNull('') // false

    XEUtils.isNull(null) // true

    isSymbol (val) 判断是否Symbol对象

    import XEUtils from 'xe-utils'

    XEUtils.isSymbol('a') // false

    XEUtils.isSymbol(Symbol('a')) // true

    isArguments (val) 判断是否Arguments对象

    import { isArguments } from 'xe-utils'

    isArguments([]) // false

    isArguments(arguments) // true

    isElement (val) 判断是否Element对象

    import XEUtils from 'xe-utils'

    XEUtils.isElement({}) // false

    XEUtils.isElement(document.createElement('div')) // true

    isDocument (val) 判断是否Document对象

    import XEUtils from 'xe-utils'

    XEUtils.isDocument(document.createElement('div')) // false

    XEUtils.isDocument(document) // true

    isWindow (val) 判断是否Window对象

    import XEUtils from 'xe-utils'

    XEUtils.isWindow(document) // false

    XEUtils.isWindow(window) // true

    isFormData (val) 判断是否FormData对象

    import XEUtils from 'xe-utils'

    XEUtils.isFormData({}) // false

    XEUtils.isFormData(new FormData()) // true

    isMap (val) 判断是否Map对象

    import XEUtils from 'xe-utils'

    XEUtils.isMap({}) // false

    XEUtils.isMap(new Map()) // true

    isWeakMap (val) 判断是否WeakMap对象

    import XEUtils from 'xe-utils'

    XEUtils.isWeakMap({}) // false

    XEUtils.isWeakMap(new WeakMap()) // true

    isSet (val) 判断是否Set对象

    import XEUtils from 'xe-utils'

    XEUtils.isSet({}) // false

    XEUtils.isSet(new Set()) // true

    isWeakSet (val) 判断是否WeakSet对象

    import XEUtils from 'xe-utils'

    XEUtils.isWeakSet({}) // false

    XEUtils.isWeakSet(new WeakSet()) // true

    isLeapYear (date) 判断是否闰年

    import XEUtils from 'xe-utils'

    XEUtils.isLeapYear() // 判断当前年 true

    XEUtils.isLeapYear('2018-12-01') // false

    XEUtils.isLeapYear('2020-12-01') // true

    XEUtils.isLeapYear(new Date('2020/12/01')) // true

    isDateSame (date1, date2, format) 判断两个日期是否相同

    import XEUtils from 'xe-utils'

    // 例如:new Date() => 2018-12-01

    XEUtils.isDateSame('2018-12-01', '2018-12-01') // true

    XEUtils.isDateSame(new Date(), '2018-12-01', 'yyyy') // 判断是否同一年 true

    XEUtils.isDateSame(new Date(), XEUtils.stringToDate('12/30/2018', 'MM/dd/yyyy'), 'MM') // 判断是否同一月 true

    XEUtils.isDateSame(new Date(), new Date(), 'dd') // 判断是否同一日 true

    XEUtils.isDateSame(new Date(), new Date(), 'yyyyMMdd') // 判断是否同年同月同日 true

    getType (obj) 获取对象类型

    import XEUtils from 'xe-utils'

    XEUtils.getType() // 'undefined'

    XEUtils.getType(null) // 'null'

    XEUtils.getType('') // 'string'

    XEUtils.getType(1) // 'number'

    XEUtils.getType([]) // 'array'

    XEUtils.getType({}) // 'object'

    XEUtils.getType(function(){}) // 'function'

    uniqueId ( prefix ) 获取一个全局唯一标识

    import XEUtils from 'xe-utils'

    XEUtils.uniqueId() // 1

    XEUtils.uniqueId() // 2

    XEUtils.uniqueId('prefix_') // 'prefix_3'

    getSize ( obj ) 返回对象的长度

    import XEUtils from 'xe-utils'

    XEUtils.getSize('123') // 3

    XEUtils.getSize([1, 3]) // 2

    XEUtils.getSize({a: 2, b: 5}) // 2

    indexOf (obj, val) 返回对象第一个索引值

    import XEUtils from 'xe-utils'

    XEUtils.indexOf([11, 22, 33, 22], 55) // -1

    XEUtils.indexOf([11, 22, 33, 22], 22) // 1

    findIndexOf (obj, iteratee [, context]) 返回对象第一个索引值

    import XEUtils from 'xe-utils'

    XEUtils.findIndexOf([11, 22, 33, 22], function (item){ return item === 55 }) // -1

    XEUtils.findIndexOf([11, 22, 33, 22], function (item){ return item === 22 }) // 1

    lastIndexOf (obj, val) 从最后开始的索引值,返回对象第一个索引值

    import XEUtils from 'xe-utils'

    XEUtils.lastIndexOf([11, 22, 33, 22], 55) // -1

    XEUtils.lastIndexOf([11, 22, 33, 22], 22) // 3

    findLastIndexOf (obj, iteratee [, context]) 从最后开始的索引值,返回对象第一个索引值

    import XEUtils from 'xe-utils'

    XEUtils.findLastIndexOf([11, 22, 33, 22], function (item){ return item === 55 }) // -1

    XEUtils.findLastIndexOf([11, 22, 33, 22], function (item){ return item === 22 }) // 3

    includes (obj, val) 判断对象是否包含该值,成功返回true否则false

    import XEUtils from 'xe-utils'

    XEUtils.includes([11], 22) // false

    XEUtils.includes([11, 22], 22) // true

    includeArrays (array1, array2) 判断数组是否包含另一数组

    import XEUtils from 'xe-utils'

    XEUtils.includeArrays([11, 22, 33], []) // true

    XEUtils.includeArrays([11, 22, 33], [11]) // true

    XEUtils.includeArrays([11, 22, 33], [22, 33]) // true

    XEUtils.includeArrays([11, 22, 33], [22, 44]) // false

    bind (callback, context[, ...arguments]) 创建一个绑定上下文的函数

    import XEUtils from 'xe-utils'

    var rest = XEUtils.bind(function (val) {

    return this.name + ' = ' + val

    }, {name: 'test'})

    rest(222) // 'test = 222'

    once (callback, context[, ...arguments]) 创建一个只能调用一次的函数,只会返回第一次执行后的结果

    import XEUtils from 'xe-utils'

    var rest = XEUtils.once(function (val) { return this.name + ' = ' + val }, {name: 'test'})

    rest(222) // 'test = 222'

    rest(333) // 'test = 222'

    throttle (callback, wait[, options]) 创建一个策略函数,当被重复调用函数的时候,至少每隔多少秒毫秒调用一次该函数

    import XEUtils from 'xe-utils'

    function scrollEvent (evnt) {

    console.log('至少每隔wait秒毫秒之内只会调用一次')

    }

    document.body.addEventListener('scroll', XEUtils.throttle(scrollEvent, 100)) // 在计时结束之前执行

    document.body.addEventListener('scroll', XEUtils.throttle(scrollEvent, 100), {leading: true, trailing: false}) // 在计时结束之前执行

    document.body.addEventListener('scroll', XEUtils.throttle(scrollEvent, 100), {leading: false, trailing: true}) // 在计时结束之后执行

    // 取消

    var func = XEUtils.throttle(function (msg) {

    console.log(msg)

    }, 300)

    func('执行一次')

    func.cancel()

    func('取消后中断计时,再次调用会马上执行')

    debounce (callback, wait[, options]) 创建一个防反跳策略函数,在函数最后一次调用多少毫秒之后才会再次执行,如果在期间内重复调用会重新计算延迟

    import XEUtils from 'xe-utils'

    function resizeEvent (evnt) {

    console.log('如果wait毫秒内重复调用则会重新计时,在函数最后一次调用wait毫秒之后才会执行回调')

    }

    document.addEventListener('resize', XEUtils.debounce(resizeEvent), 100)) // // 在计时结束之后执行

    document.addEventListener('resize', XEUtils.debounce(resizeEvent), 100), true) // 在计时结束之前执行

    document.addEventListener('resize', XEUtils.debounce(resizeEvent), 100), {leading: true, trailing: false}) // 在计时结束之前执行

    document.addEventListener('resize', XEUtils.debounce(resizeEvent), 100), {leading: false, trailing: true}) // 在计时结束之后执行

    // 取消

    var func = XEUtils.debounce(function (msg) {

    console.log(msg)

    }, 300)

    func('计时结束之前执行一次')

    func.cancel()

    func('取消后中重新计时,在计时结束之前执行')

    clear/clearObject (obj[, defs, assigns]) 清空对象; defs如果不传(清空所有属性)、如果传对象(清空并继承)、如果传值(给所有赋值)

    import XEUtils, { clearObject } from 'xe-utils'

    var a = [11, 22, 33, 33]

    XEUtils.clear(a) // []

    XEUtils.clear(a, undefined) // [undefined, undefined, undefined, undefined]

    XEUtils.clear(a, null) // [null, null, null, null]

    clearObject(a, null, [444]) // [null, null, null, null, 444]

    clearObject(a, [444]) // [444]

    var b = {b1: 11, b2: 22}

    XEUtils.clear(b) // {}

    XEUtils.clear(b, undefined) // {b1: undefined, b2: undefined}

    XEUtils.clear(b, null) // {b1: null, b2: null}

    clearObject(b, null, {b1: 555}) // {b1: 555, b2: null}

    clearObject(b, {b1: 555}) // {b1: 555}

    remove/removeObject (obj, iteratee) 移除对象属性

    import XEUtils, { removeObject } from 'xe-utils'

    var list = [11, 22, 33, 44]

    XEUtils.remove(list, item => item === 22) // list = [11, 33, 44]

    var obj = {a1: 11, a2: 22, a3: 33}

    removeObject(obj, item => item === 22) // obj = {a1: 11, a3: 33}

    assign/objectAssign/extend ([deep], target, ...) 浅拷贝一个或者多个对象到目标对象中,如果第一值是true,则使用深拷贝

    import XEUtils, { objectAssign } from 'xe-utils'

    let obj1 = {a: null}

    XEUtils.assign(obj1, {a: 11}) // {a: 11}

    // 浅拷贝

    let obj2 = {a: null}

    let obj3 = {bb: {b: 11}}

    let obj4 = objectAssign(obj2, {a: 11}) // {a: 11, c: null, bb: {b: 11}}

    obj3.bb = 22 // obj4 = {a: 11, c: null, bb: {b: 22}}

    // 深拷贝

    let obj2 = {a: null}

    let obj3 = {bb: {b: 11}}

    let obj4 = XEUtils.extend(true, obj3, {a: 11}) // {a: 11, c: null, bb: {b: 11}}

    obj3.bb = 22 // obj4 = {a: 11, c: null, bb: {b: 11}}

    destructuring (target, ...) 将一个或者多个对象值解构到目标对象

    import XEUtils, { destructuring } from 'xe-utils'

    XEUtils.destructuring({a: null}, {a: 11, b: 22, c: 33}) // {a: 11}

    destructuring({a: 11, d: 44}, {a: 11, b: 22, c: 33}) // {a: 11, d: 44}

    destructuring({a: 11, c: 33, d: 44}, {a: 11, b: 22, c: null, e: 55, f: 66}) // {a: 11, c: null, d: 44}

    stringToJson (str) 字符串转JSON

    import XEUtils from 'xe-utils'

    XEUtils.stringToJson('{"a":1}') // {a: 1}

    XEUtils.stringToJson('[11,22]') // [11, 22]

    jsonToString (obj) JSON转字符串

    import XEUtils from 'xe-utils'

    XEUtils.jsonToString({a: 1}) // '{"a":1}'

    XEUtils.jsonToString([11, 22]) // '[11,22]'

    keys/objectKeys (obj) 获取对象所有属性

    import XEUtils, { objectKeys } from 'xe-utils'

    XEUtils.keys({a: 11}) // ['a']

    objectKeys([11, 22]) // [0, 1]

    values/objectValues (obj) 获取对象所有值

    import XEUtils, { objectValues } from 'xe-utils'

    XEUtils.values({a: 11}) // [11]

    objectValues([11, 22]) // [11, 22]

    entries/objectEntries (obj) 获取对象所有属性、值

    import XEUtils from 'xe-utils'

    XEUtils.objectEntries({a: 11}) // [['a', 11]]

    XEUtils.objectEntries([11, 22]) // [[0, 11], [1, 22]]

    first/arrayFirst (obj) 获取对象第一个值

    import XEUtils, { arrayFirst } from 'xe-utils'

    XEUtils.first({a: 11, b : 22}) // 11

    arrayFirst([11, 22]) // 11

    last/arrayLast (obj) 获取对象最后一个值

    import XEUtils, { arrayLast } from 'xe-utils'

    XEUtils.last({a: 11, b: 22}) // 22

    arrayLast([11, 22]) // 22

    each/forEach/arrayEach/objectEach ( obj, iteratee [, context] ) 迭代器

    import XEUtils, { objectEach, arrayEach } from 'xe-utils'

    XEUtils.forOf([11, 22, 33], (item, key) => {

    // 通用迭代器,支持return false跳出循环

    })

    XEUtils.each([11, 22, 33], (item, key) => {

    // 通用迭代器

    })

    arrayEach([11, 22, 33], (item, index) => {

    // 数组迭代器

    })

    objectEach({a: 11, b: 22}, (item, key) => {

    // 对象迭代器

    })

    lastEach/forLastEach/arrayLastEach/objectLastEach ( obj, iteratee [, context] ) 迭代器,从最后开始迭代

    import XEUtils, { objectEach, arrayEach } from 'xe-utils'

    XEUtils.forOfLast([11, 22, 33], (item, key) => {

    // 通用迭代器,支持return false跳出循环

    })

    XEUtils.lastEach([11, 22, 33], (item, key) => {

    // 通用迭代器

    })

    arrayLastEach([11, 22, 33], (item, index) => {

    // 数组迭代器

    })

    objectLastEach({a: 11, b: 22}, (item, key) => {

    // 对象迭代器

    })

    groupBy ( obj, iteratee [, context] ) 集合分组,默认使用键值分组,如果有iteratee则使用结果进行分组

    import XEUtils from 'xe-utils'

    const result1 = XEUtils.groupBy([{type: 'a'}, {type: 'b'}], 'type') // {a: [{type: 'a'}], b: [{type: 'b'}]}

    const result2 = XEUtils.groupBy([{type: 'a'}, {type: 'a'}, {type: 'b'}], 'type') // {a: [{type: 'a'}, {type: 'a'}], b: [{type: 'b'}]}

    countBy ( obj, iteratee [, context] ) 集合分组统计,返回各组中对象的数量统计

    import XEUtils from 'xe-utils'

    const result1 = XEUtils.countBy([{type: 'a'}, {type: 'b'}], 'type') // {a: 1, b: 1}

    const result2 = XEUtils.countBy([{type: 'a'}, {type: 'a'}, {type: 'b'}], 'type') // {a: 2, b: 1}

    range ( start, stop, step ) 序号列表生成函数

    import XEUtils from 'xe-utils'

    const result1 = XEUtils.range(0) // []

    const result1 = XEUtils.range(10) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

    const result2 = XEUtils.range(-5, 5) // [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4]

    const result2 = XEUtils.range(0, 10, 2) // [0, 2, 4, 6, 8]

    objectMap ( obj, iteratee [, context] ) 指定方法后的返回值组成的新对象

    import XEUtils from 'xe-utils'

    const result = []

    XEUtils.objectMap({a: {type: 'a'}, b: {type: 'b'}}, item => item.type) // {a: "a", b: "b"}

    clone (obj, deep) 浅拷贝/深拷贝

    import XEUtils from 'xe-utils'

    const v1 = {a: 11, b: {b1: 22}}

    const v2 = XEUtils.clone(v1)

    if (v1.b === v2.b) {

    // true

    }

    const v3 = XEUtils.clone(v1, true)

    if (v1.b === v3.b) {

    // false

    }

    uniq/arrayUniq ( array ) 数组去重

    import XEUtils, { arrayUniq } from 'xe-utils'

    XEUtils.uniq([11, 22, 33, 33, 22, 55]) // [11, 22, 33, 55]

    arrayUniq([11, 22, 33, 33, 22, 55]) // [11, 22, 33, 55]

    union/arrayUnion ( ...array ) 将多个数的值返回唯一的并集数组

    import XEUtils, { arrayUnion } from 'xe-utils'

    XEUtils.union([11, 22], [33, 22], [44, 11]) // [11, 22, 33, 44]

    arrayUnion([11, 22], [33, 22], [44, 11]) // [11, 22, 33, 44]

    sort/arraySort/sortBy ( arr, iteratee [, context] ) 数组按属性值升序

    import XEUtils, { arraySort } from 'xe-utils'

    XEUtils.sort([{a: 9}, {a: 4}, {a: 5}], 'a') // [{a: 4}, {a: 5}, {a: 9}]

    XEUtils.sortBy([{a: 9}, {a: 4}, {a: 5}], 'a') // [{a: 4}, {a: 5}, {a: 9}]

    arraySort([{a: 9}, {a: 4}, {a: 5}], (v1, v2) => v1.a > v2.a ? 1 : -1) // [{a: 4}, {a: 5}, {a: 9}]

    shuffle/arrayShuffle ( array ) 将一个数组随机打乱,返回一个新的数组

    import XEUtils, { arrayShuffle } from 'xe-utils'

    XEUtils.shuffle([11, 22, 33, 44, 55]) // [22, 33, 55, 11, 44]

    arrayShuffle([11, 22, 33, 44, 55]) // [22, 33, 55, 11, 44]

    sample/arraySample ( array, number ) 从一个数组中随机返回几个元素

    import XEUtils, { arraySample } from 'xe-utils'

    XEUtils.sample([11, 22, 33, 44, 55], 3) // [22, 33, 55]

    arraySample([11, 22, 33, 44, 55], 3) // [22, 33, 55]

    some/arraySome ( obj, iteratee [, context] ) 对象中的值中的每一项运行给定函数,如果函数对任一项返回true,则返回true,否则返回false

    import XEUtils, { arraySome } from 'xe-utils'

    XEUtils.some([{value: 11}, {value: 22}], item => item.value === 55) // false

    arraySome([{value: 11}, {value: 22}], item => item.value === 11) // true

    every/arrayEvery ( obj, iteratee [, context] ) 对象中的值中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true,否则返回false

    import XEUtils, { arrayEvery } from 'xe-utils'

    XEUtils.every([{value: 11}, {value: 22}], item => item.value === 11) // false

    arrayEvery([{value: 11}, {value: 22}]], item => item.value === 11 || item.value === 22) // true

    filter/arrayFilter ( obj, iteratee [, context] ) 根据回调过滤数据

    import XEUtils, { arrayFilter } from 'xe-utils'

    XEUtils.filter([{value: 11}, {value: 22}], item => item.value > 11) // [{a: 22}]

    arrayFilter([{value: 11}, {value: 22}], item => item.value > 11) // [{a: 22}]

    find/arrayFind ( obj, iteratee [, context] ) 查找匹配第一条数据

    import XEUtils, { arrayFind } from 'xe-utils'

    XEUtils.find([{value: 11}, {value: 22}], item => item.value === 55) // null

    arrayFind([{value: 11}, {value: 22}], item => item.value === 22) // {a: 22}

    findKey ( obj, iteratee [, context] ) 查找匹配第一条数据的键

    import XEUtils from 'xe-utils'

    XEUtils.findKey([{value: 11}, {value: 22}], item => item.value === 22) // '1'

    XEUtils.findKey({aa: 11, bb: 22, cc: 33}, item => item === 22) // 'bb'

    map/arrayMap ( obj, iteratee [, context] ) 指定方法后的返回值组成的新数组

    import XEUtils, { arrayMap } from 'xe-utils'

    XEUtils.map([{value: 11}, {value: 22}], item => item.value) // [11, 22]

    arrayMap([{value: 11}, {value: 22}], item => item.value) // [11, 22]

    copyWithin/arrayCopyWithin ( array, target, start [, end] ) 浅复制数组的一部分到同一数组中的另一个位置,数组大小不变

    import XEUtils, { arrayCopyWithin } from 'xe-utils'

    XEUtils.copyWithin([11, 22, 33, 44], 0, 2) // [33, 44, 33, 44]

    XEUtils.copyWithin([11, 22, 33, 44], 0, -1) // [44, 22, 33, 44]

    arrayCopyWithin([11, 22, 33, 44], 0, 2) // [33, 44, 33, 44]

    arrayCopyWithin([11, 22, 33, 44], 0, -1) // [44, 22, 33, 44]

    sum/arraySum ( obj, iteratee [, context] ) 求和函数,将数值相加

    import XEUtils, { arraySum } from 'xe-utils'

    XEUtils.sum([22, 66, 88]) // 176

    XEUtils.sum([{value: 11}, {value: 22}, {value: 66}], 'value') // 99

    arraySum([{value: 11}, {value: 22}, {value: 66}], item => item.value * 2) // 198

    mean/arrayMean ( obj, iteratee [, context] ) 求平均值函数

    import XEUtils, { arrayMean } from 'xe-utils'

    XEUtils.mean([22, 66, 60, 60]) // 52

    XEUtils.mean([{value: 34}, {value: 22}], 'value') // 28

    arrayMean([{value: 11}, {value: 22}, {value: 66}], item => item.value * 2) // 66

    toArray/from ( array, callback [, context] ) 根据数组或可迭代对象中创建一个新的数组

    import XEUtils from 'xe-utils'

    XEUtils.from([]) // []

    XEUtils.from(arguments) // [...]

    XEUtils.toArray([]) // []

    XEUtils.toArray({}) // []

    XEUtils.toArray(arguments) // [...]

    reduce/arrayReduce ( array, callback [, initialValue] ) 接收一个函数作为累加器,数组中的每个值(从左到右)开始合并,最终为一个值

    import XEUtils, { arrayReduce } from 'xe-utils'

    XEUtils.reduce([22, 66, 88], (previous, item) => previous + item) // 176

    arrayReduce([22, 66, 88], (previous, item) => (previous + item) * 2) // 528

    zip ( ) 将每个数组中相应位置的值合并在一起

    import XEUtils from 'xe-utils'

    XEUtils.zip(['name1', 'name2', 'name3'], [true, true, false], [30, 40, 20])

    // [['name1', true, 30], ['name2', true, 40], ['name3', false, 20]]

    unzip ( arrays ) 与 zip 相反

    import XEUtils from 'xe-utils'

    XEUtils.unzip([['name1', true, 30], ['name2', true, 40], ['name3', false, 20]])

    // [['name1', 'name2', 'name3'], [true, true, false], [30, 40, 20]]

    chunk ( array, size ) 将一个数组分割成大小的组。如果数组不能被平均分配,那么最后一块将是剩下的元素

    import XEUtils from 'xe-utils'

    XEUtils.chunk(['a', 'b', 'c', 'd'], 2) // [['a', 'b'], ['c', 'd']]

    XEUtils.chunk(['a', 'b', 'c', 'd'], 3) // [['a', 'b', 'c'], ['d']]

    pluck ( array, key ) 获取数组对象中某属性值,返回一个数组

    import XEUtils from 'xe-utils'

    XEUtils.pluck([{a: 11, b: 22}, {a: 33, b: 44}], 'a') // [11, 33]

    XEUtils.pluck([[11, 22, 33], [44, 55, 66]], 1) // [22, 55]

    arrayToTree ( array, options ) 将一个带层级的数据列表转成树结构

    属性

    描述

    默认值

    strict

    是否严格模式,启用后会忽略错误数据

    false

    key

    节点键值

    'id'

    parentKey

    父节点键值

    'parentId'

    children

    子节点属性

    'children'

    data

    数据存放属性;如果为null,则返回原始数据结构

    'data'

    import XEUtils from 'xe-utils'

    // 默认结构

    const list1 = [{id: 1, name: '111'}, {id: 2, parentId: 1, name: '222'}, {id: 3, name: '333'}, {id: 4, parentId: 2, name: '444'}, {id: 5, parentId: 22, name: '555'}]

    XEUtils.arrayToTree(list1)

    // [{id: 1, data: {...}, children: [{id: 2, data: {...}, children: [{id: 4, data: {...}}]}]}, {id: 3, data: {...}}, {id: 5, data: {...}}]

    // 返回原始数据结构

    const list2 = [{id: 1, name: '111'}, {id: 2, parentId: 1, name: '222'}, {id: 3, name: '333'}, {id: 4, parentId: 2, name: '444'}]

    XEUtils.arrayToTree(list2, {data: null})

    // [{id: 1, name: '111', children: [{id: 2, name: '222', children: [{id: 4, name: '444'}]}]}, {id: 3, name: '333'}]

    // 如果设置为严格模式,(非父子关联及冗余)的数据会被忽略

    const list3 = [{id: 1, name: '111'}, {id: 2, parentId: 1, name: '222'}, {id: 3, name: '333'}, {id: 4, parentId: 2, name: '444'}, {id: 5, parentId: 22, name: '555'}]

    XEUtils.arrayToTree(list3, {strict: true, parentKey: 'parentId', key: 'id', children: 'children', data: 'data'})

    // [{id: 1, data: {...}, children: [{id: 2, data: {...}, children: [{id: 4, data: {...}}]}]}, {id: 3, data: {...}}]

    treeToArray ( array, options ) 将一个树结构转成数组列表

    属性

    描述

    默认值

    children

    子节点属性

    'children'

    data

    数据存放属性

    'data'

    import XEUtils from 'xe-utils'

    const list1 = [{id: 1, data: {}, children: [{id: 2, data: {}, children: [{id: 4, data: {}}]}]}, {id: 3, data: {}}]

    XEUtils.treeToArray(list1)

    // [{id: 1}, {id: 2, parentId: 1}, {id: 3}, {id: 4, parentId: 2}]

    const list2 = [{id: 1, data: {}, children: [{id: 2, data: {}, children: [{id: 4, data: {}}]}]}, {id: 3, data: {}}]

    XEUtils.treeToArray(list2, {data: null})

    // [{id: 1}, {id: 2, data: {}, parentId: 1}, {id: 3, data: {}}, {id: 4, data: {}, parentId: 2}]

    now/timestamp ( ) 返回时间戳

    import XEUtils, { timestamp } from 'xe-utils'

    XEUtils.now() // 1514096716800

    timestamp() // 1514096716800

    stringToDate ( str, format ) 任意格式字符串转为日期

    属性

    描述

    yyyy

    年份

    MM

    月份

    dd

    HH

    小时

    mm

    分钟

    ss

    SSS

    毫秒

    import XEUtils from 'xe-utils'

    XEUtils.stringToDate('2017-12-20') // Wed Dec 20 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.stringToDate('2017-12-20 10:10:30') // Wed Dec 20 2017 10:10:30 GMT+0800 (中国标准时间)

    XEUtils.stringToDate('12/20/2017', 'MM/dd/yyyy') // Wed Dec 20 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.stringToDate('2017/12/20 10:10:30', 'yyyy/MM/dd HH:mm') // Wed Dec 20 2017 10:10:00 GMT+0800 (中国标准时间)

    XEUtils.stringToDate('12/20/2017 10:10:30.100', 'MM/dd/yyyy HH:mm:ss.SSS') // Wed Dec 20 2017 10:10:30 GMT+0800 (中国标准时间)

    dateToString ( date [, format, options] ) 日期格式化为任意格式字符串

    属性

    描述

    备注

    yy

    年份

    自动截取后两位

    yyyy

    年份

    M

    月份

    1~12

    MM

    月份

    自动补0

    1~12

    d

    1~31

    dd

    自动补0

    1~31

    h

    12小时制

    1~12

    hh

    12小时制

    自动补0

    1~12

    H

    24小时制

    0~23

    HH

    24小时制

    自动补0

    0~23

    m

    分钟

    0~59

    mm

    分钟

    自动补0

    0~59

    s

    0~59

    ss

    自动补0

    0~59

    S

    毫秒

    0~999

    SSS

    毫秒

    自动补0

    0~999

    a

    上午,下午

    am/pm

    A

    上午,下午

    AM/PM

    D

    年份的第几天

    1~366

    e

    星期几

    0~6

    E

    星期几

    1~7

    q

    季度

    1~4

    w

    年份的第几周

    如果属于上个年份最后周期,返回0

    0~53

    W

    月份的第几周

    如果属于上个月份最后周期,返回0

    0~5

    z

    时区

    GMT

    Z

    时区值

    [+-]HHmm

    import XEUtils from 'xe-utils'

    XEUtils.dateToString(1513735830000) // '2017-01-01 14:05:30'

    XEUtils.dateToString(new Date()) // '2017-01-01 14:05:30'

    XEUtils.dateToString('2017-01-01 10:05:30', 'MM/dd/yyyy') // '01/01/2017'

    XEUtils.dateToString('2017-01-01 10:05:30', 'M/d/yyyy') // '1/1/2017'

    XEUtils.dateToString(new Date(), 'yyyy-MM-dd') // '2017-01-01'

    XEUtils.dateToString(new Date(), 'yy-M-d') // '17-1-1'

    XEUtils.dateToString(new Date(), 'yyyy-MM-dd HH:mm:ss.SSS') // '2017-01-01 14:05:30.099'

    XEUtils.dateToString(new Date(), 'yyyy-MM-dd hh:mm:ss.SSSZ') // '2017-01-01 02:05:30.099+0800'

    XEUtils.dateToString(new Date(), 'yyyy-MM-dd hh:mm:ss.SSS zZ') // '2017-01-01 02:05:30.099 GMT+0800'

    XEUtils.dateToString('2017-11-20 10:05:30', 'yyyy-M-d h:m:s.S') // '2017-11-20 2:5:30.99'

    XEUtils.dateToString(new Date(), 'yyyy-M-d H:m:s.S') // '2017-1-1 14:5:30.99'

    XEUtils.dateToString(new Date(), 'yyyy-M-d h:m:s.S') // '2017-1-1 2:5:30.99'

    XEUtils.dateToString(new Date(), 'yyyy年MM月dd日 HH时mm分ss秒S毫秒,星期E 第q季度')

    // '2017年01月01日 14时05分30秒99毫秒,星期3 第4季度'

    XEUtils.dateToString(new Date(), 'yy年M月d日 HH时m分s秒S毫秒,星期E 第q季度')

    // '17年1月1日 14时5分30秒99毫秒,星期3 第4季度'

    XEUtils.dateToString(new Date(), 'yyyy年MM月dd日 hh时mm分ss秒SSS毫秒zZ 星期E e 第q季度 今年第D天 今年第w周 当月第W周 a A')

    // '2018年05月29日 09时44分46秒647毫秒GMT+0800 星期2 1 第2季度 今年第149天 今年第22周 当月第4周 am AM'

    getWhatYear ( date, year [, month] ) 返回前几年或后几年的日期,可以指定年初(first)、年末(last)、月份(0~11),默认当前

    import XEUtils from 'xe-utils'

    XEUtils.getWhatYear(new Date(), -1) // Mon Nov 20 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatYear(1513735830000, -1) // Tue Dec 20 2016 10:10:30 GMT+0800 (中国标准时间)

    XEUtils.getWhatYear('2017-12-20', -1) // Tue Dec 20 2016 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatYear('2017-12-20', 1) // Thu Dec 20 2018 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatYear('2017-12-20', 0, 'first') // Sun Jan 01 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatYear('2017-12-20', 0, 'last') // Sun Dec 31 2017 23:59:59 GMT+0800 (中国标准时间)

    getWhatMonth ( date, month [, day] ) 返回前几月或后几月的日期,可以指定月初(first)、月末(last)、天数,默认当前

    import XEUtils from 'xe-utils'

    XEUtils.getWhatMonth(new Date(), -1) // Mon Nov 20 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatMonth(1513735830000, -1) // Mon Nov 20 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatMonth('2017-12-20', -1) // Mon Nov 20 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatMonth('2017-12-20', 1) // Sat Jan 20 2018 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatMonth('2017-12-20', -1, 'first') // Wed Nov 01 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatMonth('2017-12-20', 1, 'last') // Wed Jan 31 2018 23:59:59 GMT+0800 (中国标准时间)

    getWhatWeek ( date, week [, day] ) 返回前几周或后几周的日期,可以指定星期几(0~6),默认当前

    import XEUtils from 'xe-utils'

    XEUtils.getWhatWeek(new Date(), -1) // Sun Dec 17 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatWeek(1513735830000, -1) // Sun Dec 17 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatWeek('2017-12-20', -1) // Sun Dec 17 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatWeek('2017-12-20', 1) // Sun Dec 31 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatWeek('2017-12-20', -1, 5) // Fri Dec 15 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatWeek('2017-12-20', 1, 0) // Sun Dec 31 2017 00:00:00 GMT+0800 (中国标准时间)

    getWhatDay ( date, day [, mode] ) 返回前几天或后几天的日期

    import XEUtils from 'xe-utils'

    XEUtils.getWhatDay(new Date(), -1) // Tue Dec 19 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatDay(1513735830000, -1) // Tue Dec 19 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatDay('2017-12-20', -1) // Tue Dec 19 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatDay('2017-12-20', 1) // Tue Dec 21 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatDay('2017-12-20', 0, 'first') // Wed Dec 20 2017 00:00:00 GMT+0800 (中国标准时间)

    XEUtils.getWhatDay('2017-12-20', 0, 'last') // Wed Dec 20 2017 23:59:59 GMT+0800 (中国标准时间)

    getDayOfYear ( date [, year] ) 返回某个年份的天数,可以指定前几个年或后几个年,默认当前

    import XEUtils from 'xe-utils'

    XEUtils.getDayOfYear(new Date()) // 365

    XEUtils.getDayOfYear(1513735830000) // 365

    XEUtils.getDayOfYear('2017-12-20') // 365

    XEUtils.getDayOfYear('2019-12-20', 1) // 366

    XEUtils.getDayOfYear('2020-12-20') // 366

    getYearDay ( date ) 返回某个年份的第几天

    import XEUtils from 'xe-utils'

    XEUtils.getYearDay(new Date()) // 149

    XEUtils.getYearDay('2017-01-20') // 20

    XEUtils.getYearDay('2018-05-20') // 140

    getYearWeek ( date ) 返回某个年份的第几周

    import XEUtils from 'xe-utils'

    XEUtils.getYearWeek(new Date()) // 22

    XEUtils.getYearWeek('2017-01-20') // 3

    XEUtils.getYearWeek('2018-05-20') // 20

    getMonthWeek ( date ) 返回某个月份的第几周

    import XEUtils from 'xe-utils'

    XEUtils.getMonthWeek(new Date()) // 4

    XEUtils.getMonthWeek('2017-01-20') // 3

    XEUtils.getMonthWeek('2018-05-20') // 2

    getDayOfMonth ( date [, month] ) 返回某个月份的天数,可以指定前几个月或后几个月,默认当前

    import XEUtils from 'xe-utils'

    XEUtils.getDayOfMonth(new Date()) // 31

    XEUtils.getDayOfMonth(1513735830000) // 31

    XEUtils.getDayOfMonth('2017-12-20') // 31

    XEUtils.getDayOfMonth('2017-12-20', -1) // 30

    XEUtils.getDayOfMonth('2017-12-20', 1) // 31

    getDateDiff ( startDate, endDate [, rules] ) 返回两个日期之间差距,如果结束日期小于开始日期done为fasle

    import XEUtils from 'xe-utils'

    XEUtils.getDateDiff('2017-11-20', '2017-12-21') // {MM: 1, dd: 1}

    XEUtils.getDateDiff('2017-12-20', '2017-12-21') // {dd: 1}

    XEUtils.getDateDiff('2017-12-20', '2017-12-21') // {dd: 1, ss: 30}

    XEUtils.getDateDiff('2018-01-01', '2017-12-21') // {done: false}

    const dateDiff = XEUtils.getDateDiff('2017-12-20 10:10:30', '2017-12-21 10:15:00')

    const content = `${dateDiff.mm}分${dateDiff.ss}秒` // '4分30秒'

    random/getRandom ( min, max ) 获取一个指定范围内随机数

    import XEUtils from 'xe-utils'

    XEUtils.random() // 0 ~ 9

    XEUtils.random(3, 6) // 3 ~ 6

    XEUtils.getRandom(0, 5) // 0 ~ 5

    XEUtils.getRandom(10, 100) // 10 ~ 100

    min/arrayMin ( arrb[, iteratee] ) 获取最小值

    import XEUtils, { arrayMin } from 'xe-utils'

    XEUtils.min([22, 66, 77, 11]) // 11

    arrayMin([{a: 11}, {a: 44}], 'a') // 11

    arrayMin([{a: 11}, {a: 44}], item => item.a) // {a: 11}

    max/arrayMax ( arr [, iteratee] ) 获取最大值

    import XEUtils, { arrayMax } from 'xe-utils'

    XEUtils.max([22, 66, 77, 11]) // 77

    arrayMax([{a: 11}, {a: 44}], 'a') // 44

    arrayMax([{a: 11}, {a: 44}], item => item.a) // {a: 44}

    commafy ( num [, options] ) 数值千分位分隔符、小数点

    import XEUtils from 'xe-utils'

    // 千分位格式化 1,000,000

    XEUtils.commafy(1000000)

    // 格式化金额 1,000,000.00

    XEUtils.commafy('1000000', {fixed: 2})

    // 格式化银行卡 1234 1234 1234 1234

    XEUtils.commafy(1234123412341234, {spaceNumber: 4, separator: ' ', fixed: 0})

    // 字符串每隔3位分割 111,111,111,111,111,111,111,111,111

    XEUtils.commafy('111111111111111111111111111', {spaceNumber: 3, fixed: null})

    toNumber/stringToNumber ( num ) 转数值

    import XEUtils, { stringToNumber } from 'xe-utils'

    XEUtils.toNumber(123) // 123

    XEUtils.toNumber('12.3'}) // 12.3

    stringToNumber('abc') // 0

    toInteger/stringToInteger ( num ) 转整数

    import XEUtils, { stringToInteger } from 'xe-utils'

    XEUtils.toInteger(123) // 123

    XEUtils.toInteger('12.3'}) // 12

    stringToInteger('abc') // 0

    trim/stringTrim ( str ) 去除字符串左右两边的空格

    import XEUtils, { stringTrim } from 'xe-utils'

    XEUtils.trim(' abc ') // 'abc'

    stringTrim(' abc ') // 'abc'

    trimLeft/stringTrimLeft ( str ) 去除字符串左边的空格

    import XEUtils, { stringTrimLeft } from 'xe-utils'

    XEUtils.trimLeft(' abc ') // 'abc '

    stringTrimLeft(' abc ') // 'abc '

    trimRight/stringTrimRight ( str ) 去除字符串右边的空格

    import XEUtils, { stringTrimRight } from 'xe-utils'

    XEUtils.trimRight(' abc ') // ' aa'

    stringTrimRight(' abc ') // ' aa'

    escape ( str ) 转义HTML字符串,替换&, , ", ', `字符

    import XEUtils from 'xe-utils'

    XEUtils.escape('link') // '<a>link</a>'

    unescape ( str ) 反转escape

    import XEUtils from 'xe-utils'

    XEUtils.unescape('<a>link</a>') // 'link'

    camelCase ( str ) 将带驼峰字符串转成字符串

    import XEUtils from 'xe-utils'

    XEUtils.camelCase('projectName') // 'project-name'

    kebabCase ( str ) 将字符串转成驼峰字符串

    import XEUtils from 'xe-utils'

    XEUtils.kebabCase('project-name') // 'projectName'

    stringRepeat ( str, count ) 将字符串重复 n 次

    import XEUtils, { stringRepeat } from 'xe-utils'

    XEUtils.repeat('a', 5) // aaaaa

    stringRepeat('a', 5) // aaaaa

    padStart/stringPadStart ( str, targetLength, padString ) 用指定字符从前面开始补全字符串

    import XEUtils, { stringPadStart } from 'xe-utils'

    XEUtils.padStart('a', 5, 'b') // bbbba

    stringPadStart('a', 5, 'b') // bbbba

    padEnd/stringPadEnd ( str, targetLength [, padString] ) 用指定字符从后面开始补全字符串

    import XEUtils, { stringPadEnd } from 'xe-utils'

    XEUtils.padEnd('a', 5, 'b') // abbbb

    stringPadEnd('a', 5, 'b') // abbbb

    startsWith/stringStartsWith ( str, val [, startIndex] ) 判断字符串是否在源字符串的头部

    import XEUtils, { stringStartsWith } from 'xe-utils'

    XEUtils.startsWith('abc', 'b') // false

    stringStartsWith('abc', 'a') // true

    endsWith/stringEndsWith ( str, val [, startIndex] ) 判断字符串是否在源字符串的尾部

    import XEUtils, { stringEndsWith } from 'xe-utils'

    XEUtils.endsWith('abc', 5, 'a') // false

    stringEndsWith('abc', 5, 'c') // true

    browse ( ) 获取浏览器内核

    import XEUtils from 'xe-utils'

    XEUtils.browse()

    // {

    // "-khtml": false,

    // "-moz": false,

    // "-ms": fasle,

    // "-o": false,

    // "-webkit": true,

    // isMobile: false,

    // isNode: false,

    // isPC: true

    // }

    locat ( ) 获取地址栏信息

    import XEUtils from 'xe-utils'

    XEUtils.locat()

    // {

    // hash: '',

    // hostname: '',

    // protocol: '',

    // port: '',

    // origin: '',

    // ...

    // }

    parseUrl ( url ) 解析 URL 参数

    import XEUtils from 'xe-utils'

    XEUtils.parseUrl('http://xuliangzhan.com:8080/demo?id=123')

    // {

    // hostname: 'xuliangzhan.com',

    // protocol: 'http:',

    // port: '8080',

    // ...

    // }

    getBaseURL ( ) 获取上下文路径

    import XEUtils from 'xe-utils'

    XEUtils.getBaseURL() // http://xuliangzhan.com/demo/

    cookie ( [name, value, options] ) Cookie 操作函数

    import XEUtils from 'xe-utils'

    // 获取所有

    XEUtils.cookie()

    // 根据name获取

    XEUtils.cookie('name')

    // 删除

    XEUtils.cookie('name', null, {expires: -1})

    // 添加/修改

    XEUtils.cookie('name', 'value')

    // 指定 10 秒后过期

    XEUtils.cookie('name', 'value', {expires: '10s'})

    // 指定 1 分钟后过期

    XEUtils.cookie('name', 'value', {expires: '1m'})

    // 指定 1 小时后过期

    XEUtils.cookie('name', 'value', {expires: '1H'})

    // 指定 1 天后过期

    XEUtils.cookie('name', 'value', {expires: '1d'})

    // 指定 1 月后过期

    XEUtils.cookie('name', 'value', {expires: '1M'})

    // 指定 1 年后过期

    XEUtils.cookie('name', 'value', {expires: '1y'})

    // 指定时间戳后过期

    XEUtils.cookie('name', 'value', {expires: 1525541938031})

    // 指定日期过期

    XEUtils.cookie('name', 'value', {expires: new Date()})

    // 指定 UTCString 格式日期

    XEUtils.cookie('name', 'value', {expires: new Date().toUTCString()})

    // 指定数值 1 天后过期

    XEUtils.cookie('name', 'value', {expires: 1})

    // 完整设置domain/path/secure/expires

    XEUtils.cookie('name', 'value', {domain: 'xxx.com', path: '/', expires: 7, secure: true})

    // 批量删除

    XEUtils.cookie([{name: 'name', expires: -1}])

    // 批量添加/修改

    XEUtils.cookie([{name: 'name', value: 'value'}])

    // 批量添加并设置domain/path/secure/expires 7天后过期

    XEUtils.cookie([{name: 'name', value: 'value', domain: 'xxx.com', path: '/', expires: 7, secure: true}])

    // 判断name是否存在

    XEUtils.cookie.isKey(name)

    // 添加

    XEUtils.cookie.setItem(name, value, option)

    XEUtils.cookie.setItem(name, value, option).setItem(name, value, option)

    // 根据name获取

    XEUtils.cookie.getItem(name)

    // 删除

    XEUtils.cookie.removeItem(name)

    // 获取所有name

    XEUtils.cookie.keys()

    // 获取所有

    XEUtils.cookie.getJSON()

    // 兼容函数

    XEUtils.cookie.set(name, value)

    XEUtils.cookie.get(name)

    XEUtils.cookie.remove(name)

    展开全文
  • vue中xe-utils的强大

    2021-11-25 16:11:33
    import XEUtils from 'xe-utils' //案例: let amountNoTax = 0 let amount = 0 const salesResult = [1,2,3,4,5,6,7.9,8] for (let i = 0; i < salesResult.length; i++) { amountNoTax = XEUtils.sum(...

    每当遇到一个新需求,新问题,都想找到最新最棒的技术…

    //引入前端计算工具类
    import XEUtils from 'xe-utils'
    //案例:
    let amountNoTax = 0
    let amount = 0
    const salesResult = [1,2,3,4,5,6,7.9,8]
    for (let i = 0; i < salesResult.length; i++) {
    amountNoTax = XEUtils.sum([amountNoTax, salesResult[i]])
    //amount = XEUtils.sum([amount, salesResult[i]])
    }
    //结果:amountNoTax=36.9
    

    其他的自己测,多动手,会更深刻些

    //常用的函数
    基础函数
    isNaN (val) 判断是否非数值
    isFinite (val) 判断是否为有限数值
    isUndefined (val) 判断 Undefined
    isArray (val) 判断是否数组
    isFloat (val) 判断是否小数
    isInteger (val) 判断是否整数
    isBoolean (val) 判断是否 Boolean 对象
    isString (val) 判断是否 String 对象
    isNumber (val) 判断是否 Number 对象
    isRegExp (val) 判断是否 RegExp 对象
    isObject (val) 判断是否 Object 对象
    isPlainObject (val) 判断是否是一个对象
    isDate (val) 判断是否 Date 对象
    isError (val) 判断是否 Error 对象
    isTypeError (val) 判断是否 TypeError 对象
    isEmpty (val) 判断是否为空,包括空对象、空数值、空字符串
    isNull (val) 判断是否为 Null
    isSymbol (val) 判断是否 Symbol 对象
    isArguments (val) 判断是否 Arguments 对象
    isElement (val) 判断是否 Element 对象
    isDocument (val) 判断是否 Document 对象
    isWindow (val) 判断是否 Window 对象
    isFormData (val) 判断是否 FormData 对象
    isMap (val) 判断是否 Map 对象
    isWeakMap (val) 判断是否 WeakMap 对象
    isSet (val) 判断是否 Set 对象
    isWeakSet (val) 判断是否 WeakSet 对象
    isLeapYear (date) 判断是否闰年
    isEqual (obj1, obj2) 深度比较两个对象之间的值是否相等
    isDateSame (date1, date2, format) 判断两个日期是否相同
    常用函数
    
    toNumber ( num ) 转数值
    toInteger ( num ) 转整数
    toFixedNumber ( num, digits )Number.toFixed 类似,区别就是不会对小数进行四舍五入,结果返回数值
    toFixedString ( num, digits )Number.toFixed 类似,区别就是不会对小数进行四舍五入,结果返回字符串
    toArray ( array ) 将对象或者伪数组转为新数组
    toStringJSON (str) 字符串转 JSON
    toJSONString (obj) JSON 转字符串
    getType (obj) 获取对象类型
    getSize ( obj ) 返回对象的长度
    uniqueId ( prefix ) 获取一个全局唯一标识
    uniq ( array ) 数组去重
    union ( ...array ) 将多个数的值返回唯一的并集数组
    random ( min, max ) 获取一个指定范围内随机数
    range ( start, stop, step ) 序号列表生成函数
    clear (obj[, defs, assigns]) 清空对象; defs如果不传(清空所有属性)、如果传对象(清空并继承)、如果传值(给所有赋值)
    remove (obj, iteratee) 移除对象属性
    assign (destination, ...sources) 浅拷贝一个或者多个对象到目标对象中,如果第一值是true,则使用深拷贝
    clone (obj, deep) 浅拷贝/深拷贝
    destructuring (obj, ...target) 将一个或者多个对象值解构到目标对象
    trim ( str ) 去除字符串左右两边的空格
    trimLeft ( str ) 去除字符串左边的空格
    trimRight ( str ) 去除字符串右边的空格
    escape ( str ) 转义HTML字符串,替换&, <, >, ", ', `字符
    unescape ( str ) 反转 escape
    camelCase ( str ) 将带驼峰字符串转成字符串
    kebabCase ( str ) 将字符串转成驼峰字符串
    repeat ( str, count ) 将字符串重复 n 次
    padStart ( str, targetLength, padString ) 用指定字符从前面开始补全字符串
    padEnd ( str, targetLength [, padString] ) 用指定字符从后面开始补全字符串
    startsWith ( str, val [, startIndex] ) 判断字符串是否在源字符串的头部
    endsWith ( str, val [, startIndex] ) 判断字符串是否在源字符串的尾部
    slice ( array, start, end ) 裁剪 Arguments 或数组 array,从 start 位置开始到 end 结束,但不包括 end 本身的位置
    indexOf (obj, val) 返回对象第一个索引值
    findIndexOf (obj, iteratee [, context]) 返回对象第一个索引值
    lastIndexOf (obj, val) 从最后开始的索引值,返回对象第一个索引值
    findLastIndexOf (obj, iteratee [, context]) 从最后开始的索引值,返回对象第一个索引值
    includes (obj, val) 判断对象是否包含该值,成功返回 true 否则 false
    includeArrays (array1, array2) 判断数组是否包含另一数组
    each ( obj, iteratee [, context] ) 通用迭代器
    arrayEach ( obj, iteratee [, context] ) 数组迭代器
    objectEach ( obj, iteratee [, context] ) 对象迭代器
    lastEach ( obj, iteratee [, context] ) 通用迭代器,从最后开始迭代
    lastArrayEach ( obj, iteratee [, context] ) 数组迭代器,从最后开始迭代
    lastObjectEach ( obj, iteratee [, context] ) 对象迭代器,从最后开始迭代
    forOf ( obj, iteratee [, context] ) 通用迭代器,支持 return false 跳出循环 break
    lastForOf ( obj, iteratee [, context] ) 通用迭代器,从最后开始迭代,支持 return false 跳出循环 break
    keys (obj) 获取对象所有属性
    values (obj) 获取对象所有值
    entries (obj) 获取对象所有属性、值
    first (obj) 获取对象第一个值
    last (obj) 获取对象最后一个值
    groupBy ( obj, iteratee [, context] ) 集合分组,默认使用键值分组,如果有 iteratee 则使用结果进行分组
    countBy ( obj, iteratee [, context] ) 集合分组统计,返回各组中对象的数量统计
    sortBy ( arr, iteratee [, context] ) 数组按属性值升序
    shuffle ( array ) 将一个数组随机打乱,返回一个新的数组
    sample ( array, number ) 从一个数组中随机返回几个元素
    some ( obj, iteratee [, context] ) 对象中的值中的每一项运行给定函数,如果函数对任一项返回 true,则返回 true,否则返回 false
    every ( obj, iteratee [, context] ) 对象中的值中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true,否则返回 false
    filter ( obj, iteratee [, context] ) 根据回调过滤数据
    find ( obj, iteratee [, context] ) 查找匹配第一条数据
    findKey ( obj, iteratee [, context] ) 查找匹配第一条数据的键
    map ( obj, iteratee [, context] ) 指定方法后的返回值组成的新数组
    objectMap ( obj, iteratee [, context] ) 指定方法后的返回值组成的新对象
    pick (obj, array) 根据 keys 过滤指定的属性值 或者 接收一个判断函数,返回一个新的对象
    omit (obj, array) 根据 keys 排除指定的属性值 或者 接收一个判断函数,返回一个新的对象
    copyWithin ( array, target, start [, end] ) 浅复制数组的一部分到同一数组中的另一个位置,数组大小不变
    sum ( obj, iteratee [, context] ) 求和函数,将数值相加
    mean ( obj, iteratee [, context] ) 求平均值函数
    reduce ( array, iteratee [, initialValue] ) 接收一个函数作为累加器,数组中的每个值(从左到右)开始合并,最终为一个值
    chunk ( array, size ) 将一个数组分割成大小的组。如果数组不能被平均分配,那么最后一块将是剩下的元素
    min ( arrb[, iteratee] ) 获取最小值
    max ( arr [, iteratee] ) 获取最大值
    commafy ( num [, options] ) 数值千分位分隔符、小数点
    日期函数
    
    now ( ) 返回当前时间戳
    timestamp ( date[, format] ) 将日期转为时间戳
    toStringDate ( str, format ) 任意格式字符串转为日期
    toDateString ( date [, format, options] ) 日期格式化为任意格式字符串
    getWhatYear ( date, year [, month] ) 返回前几年或后几年的日期,可以指定年初(first)、年末(last)、月份(0~11),默认当前
    getWhatMonth ( date, month [, day] ) 返回前几月或后几月的日期,可以指定月初(first)、月末(last)、天数,默认当前
    getWhatWeek ( date, week [, day] ) 返回前几周或后几周的日期,可以指定星期几(0~6),默认当前
    getWhatDay ( date, day [, mode] ) 返回前几天或后几天的日期
    getDayOfYear ( date [, year] ) 返回某个年份的天数,可以指定前几个年或后几个年,默认当前
    getYearDay ( date ) 返回某个年份的第几天
    getYearWeek ( date ) 返回某个年份的第几周
    getMonthWeek ( date ) 返回某个月份的第几周
    getDayOfMonth ( date [, month] ) 返回某个月份的天数,可以指定前几个月或后几个月,默认当前
    getDateDiff ( startDate, endDate [, rules] ) 返回两个日期之间差距,如果结束日期小于开始日期 done 为 fasle
    高级函数
    
    toArrayTree ( array, options ) 一个高性能的树结构转换函数,将一个带层级的数据列表转成树结构
    toTreeArray ( array, options ) 将一个树结构转成数组列表
    property ( path ) 返回一个获取对象属性的函数
    pluck ( array, key ) 获取数组对象中某属性值,返回一个数组
    invoke ( list, path, ...arguments ) 在list的每个元素上执行方法,任何传递的额外参数都会在调用方法的时候传递给它
    zip ( ) 将每个数组中相应位置的值合并在一起
    unzip ( arrays ) 与 zip 相反
    delay (callback, wait[, ...arguments]) 该方法和 setTimeout 一样的效果,区别就是支持额外参数
    bind (callback, context[, ...arguments]) 创建一个绑定上下文的函数
    once (callback, context[, ...arguments]) 创建一个只能调用一次的函数,只会返回第一次执行后的结果
    after (count, callback, context) 创建一个函数, 调用次数超过 count 次之后执行回调并将所有结果记住后返回
    before (count, callback, context) 创建一个函数, 调用次数不超过 count 次之前执行回调并将所有结果记住后返回
    throttle (callback, wait[, options]) 创建一个策略函数,当被重复调用函数的时候,至少每隔多少秒毫秒调用一次该函数
    debounce (callback, wait[, options]) 创建一个防反跳策略函数,在函数最后一次调用多少毫秒之后才会再次执行,如果在期间内重复调用会重新计算延迟
    
    展开全文
  • xe-utils JavaScript 函数库、工具类 Browser Support 7+ ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ 6+ ✔ Docs To view the document 查看文档 Installing npm install xe-utils...
  • vue 使用 xe-utils 函数库

    千次阅读 2018-01-24 01:00:55
    npm install xe-utils vxe-utils --save 通过 Vue.use() 来全局安装 import Vue from 'vue' import XEUtils from 'xe-utils' import VXEUtils from 'vxe-utils' // mounts 可以设置['cookie', 'browse', 'locat'...
  • 本文介绍了安装完成后自动挂载在支持挂载函数列表:this.$browse(浏览器内核判断) this.$locat(用于读写地址栏参数)在CDN 安装使用 script 方式安装,VXEUtils 会定义为全局变量生产环境请使用 vxe-utils.min.cdnjs ...
  • 本篇预计阅读时长10分钟,讲解了 xe-utils 中 clone 深拷贝源码的实现,支持多种数据类型。
  • 但当看到官方文档中的用法与源码后,发现其确实是极妙的实现。 // 官方文档中的示例用法 XEUtils.isEmpty([11, 22]) // false XEUtils.isEmpty({a:null}) // false XEUtils.isEmpty(null) // true XEUtils.isEmpty({...
  • invoke ( list, path, ...arguments ) 在list的每个元素上执行方法,任何传递的额外参数都会在调用方法的时候传递给它 zip ( ) 将每个数组中相应位置的值合并在一起 unzip ( arrays ) 与 zip 相反 delay ...
  • isMatch 方法判断属性中的键值是否包含在对象中
  • xe-utils 源码第三期:通过 constructor 来更为准确地判断 JavaScript 中的一些实例对象。
  • 1. 背景   当要指定一个范围并生成序号表时,可以通过 xe-utils 的 range 方法来生成,实现效果如下: console.log(range(10)) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(range(-5, 5)) // [-5, -4, -3, -2,...
  • xe-utils工具库的源码解读,本期为Base篇:判断基础类型
  • 这期便来讲讲 xe-utils 源码中对是否 Array 的判断。   如果使用 typeof 来判断 Array 的话,返回的只会是一个 object,如下 const arr = [] console.log(typeof arr) // object   那源码中是如何判断 Array 的...
  •   本期的 find 就属于这一类,因此我会先用简单的方式实现一下 find 的功能,让你先了解实现思路,再去研究 xe-utils 中对兼容性和封装的处理。 2. 简单实现 1)思路 传入的参数有两个,第一个参数为目标对象(如...
  • uni-app 自己封装的utils.js 常用工具类(封装的ajax,上传,查看文档,富文本解析)
  • RSK 网络中 Ethr DID 方法的实用程序。 npm i ganache-core @rsksmart/ethr-did-utils 特征 启动 HTTP 服务器并部署 用法 您可以启动 Ganache 服务器并从新终端或 Node.js 部署注册表 从新终端 打开一个新的终端...
  • XEUtils前端工具组件的使用

    千次阅读 2021-12-21 12:18:49
    官网地址:https://x-extends.github.io/xe-utils/#/ 例子:https://github.com/x-extends/xe-utils 引入 npm install xe-util isNaN (val) 判断是否非数值,如果 value 是一个 NaN,那么返回 true,否则返回 false ...
  • ployfill报错,未能将ES6的方法完全转换为IE9支持的ES5方法 IE9样式错乱 可能的原因1,element-ui 中使用了 display: flex; 样式,IE9不支持次样式,解决方法为,排查下各组件,避免使用带 display: flex; 的组件 ...
  • 使用vxe-table表格虚拟滚动 做一个table,想要渲染上...npm install xe-utils@3 vxe-table@next 还有注意这里版本要切换成最新的 后面找了很多方法,改成这种方式下载包: npm install xe-utils vxe-table@next 这样
  • 主要介绍了JavaScript中的toDateString()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下
  • 1、NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: &gt;允许用户从NPM服务器下载别人编写的第三方包到本地使用。 &gt;允许用户从NPM服务器下载并...
  • log.info("---进入 FapiaoReportServiceImpl 类中 importExcel 方法!---"); String taxName= CommonUtils.trim(request.getParameter("taxName")); String taxID = CommonUtils.trim(request.getParameter("taxID...
  • 简介 xUtils是一款简单的对网络...使用注解来加载布局控件的方法也非常的简单好用 用法 添加依赖库 compile 'org.xutils:xutils:3.5.0'下面就可以对XUtils进行操作了,首先初始化数据xUtilspackage com.bawei.qiaoshi
  • element-plus unplugin-element-plus element plus 自动按需引入 element-plus 自动引入修改主题色 vxe-table 新建 vxe-table/component.js import XEUtils from 'xe-utils'; import { setup } from 'vxe-table/es/...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,020
精华内容 808
热门标签
关键字:

xe-utils用法