xe-utils

To use xe-utils, import the XEUtils object and call its methods directly. It provides high-performance utilities for common tasks like type checking, date formatting, and object manipulation.

import XEUtils from 'xe-utils'

// Check if a value is an array
XEUtils.isArray([1, 2, 3]) // true

// Format a date
XEUtils.toDateString(new Date(), 'yyyy-MM-dd HH:mm:ss')

// Deep clone an object
const copy = XEUtils.clone(originalObj, true)

Install the xe-utils library using npm to access its collection of utility functions for data types, objects, arrays, dates, numbers, strings, URLs, and browser operations.

npm install xe-utils

You can install xe-utils via npm or include it directly in your HTML using a CDN.

npm install xe-utils

You can use xe-utils/ctor to get the main XEUtils constructor and then use .mixin() to attach specific on-demand imports to it. This allows you to use the methods as properties of the XEUtils object.

import XEUtils from 'xe-utils/ctor'
import each from 'xe-utils/each'
import toDateString from 'xe-utils/toDateString'
import toFixedNumber from 'xe-utils/toFixedNumber'

XEUtils.mixin({
  each,
  toDateString,
  toFixedNumber
})

XEUtils.toDateString(Date.now(), 'yyyy-MM-dd HH:mm:ss')
// 2018-01-01 10:30:28

To minimize your bundle size, you can import individual functions directly from their specific paths. A single function import is approximately >≈ 60B (gzip).

import each from 'xe-utils/each'
import toDateString from 'xe-utils/toDateString'

each({ a: 11, b: 22, c: 33 }, function (item, key){
  console.log(item)
})
// 11
// 22
// 33

toDateString(Date.now(), 'yyyy-MM-dd HH:mm:ss')
// 2018-01-01 10:30:28

To use all utility methods at once, import the default export from xe-utils. This provides a single object (often aliased as _) containing all available functions.

import _ from 'xe-utils'

_.toDateString(Date.now())
// 2018-01-01 10:30:28
_.toStringDate('2018-01-01 10:30:00')
// Mon Jan 01 2018 10:30:00 GMT+0800 (中国标准时间)

If you want to organize your imports by category while still using the mixin pattern, you can import entire functional groups (e.g., object, array, date) and mix them into the XEUtils constructor.

import XEUtils from 'xe-utils/ctor'
import objectMethods from 'xe-utils/object'
import arrayMethods from 'xe-utils/array'
import baseMethods from 'xe-utils/base'
import numberMethods from 'xe-utils/number'
import dateMethods from 'xe-utils/date'
import stringMethods from 'xe-utils/string'
import functionMethods from 'xe-utils/function'
import urlMethods from 'xe-utils/url'
import webMethods from 'xe-utils/web'

XEUtils.mixin(
  // Object
  objectMethods,
  // Array
  arrayMethods,
  // Base
  baseMethods,
  // Number
  numberMethods,
  // Date
  dateMethods,
  // String
  stringMethods,
  // Function
  functionMethods,
  // URL
  urlMethods,
  // Web
  webMethods
)

Use eachTree(obj, iterate[, options, context]) to traverse a tree structure. It allows you to iterate over every node in the tree.

Options:

• children: The property name that holds the child nodes. Defaults to 'children'.

Example of traversing a tree where children are stored in a custom property childs:

var tree2 = [
  { id: 1 },
  { id: 2, childs: [{ id: 20 }] },
  { id: 3, childs: [{ id: 30 }] }
]
XEUtils.eachTree(tree2, item => {
  // ... logic for each item
}, { children: 'childs' })

Use these specialized methods for high-performance object iteration:

• objectEach(obj, iterate[, context]): Iterates over object properties.
• lastObjectEach(obj, iterate[, context]): Iterates over object properties in reverse order.
• objectMap(obj, iterate[, context]): Returns a new object where values are transformed by the iterate function.

// objectEach
XEUtils.objectEach({a: 1, b: 2}, (item, key) => { /* ... */ })

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

Use zip(...[]) to merge multiple arrays into a single array of arrays, where each inner array contains elements from the same index. Use unzip(arrays) to perform the inverse operation.

XEUtils.zip(['name1', 'name2'], [true, false]) // [['name1', true], ['name2', false]]
XEUtils.unzip([['name1', true], ['name2', false]]) // [['name1', 'name2'], [true, false]]

The map(obj, iterate[, context]) method creates a new array composed of the results of calling the provided iterate function on every element in the collection.

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

Manage high-frequency function calls:

• throttle(callback, wait[, options]): Ensures the function is called at most once every wait milliseconds. Use options like { leading: true, trailing: false } to control when the execution occurs relative to the wait period.
• debounce(callback, wait[, options]): Delays execution until wait milliseconds have passed since the last call. Use options like { leading: true, trailing: false } to control timing.

// throttle example
let func = XEUtils.throttle(function (msg) {
  console.log(msg)
}, 300)
func('执行一次')
func.cancel() // Cancels the pending execution

// debounce example
let func = XEUtils.debounce(function (msg) {
  console.log(msg)
}, 300)
func('计时结束之前执行一次')
func.cancel() // Cancels the pending execution