JarCastinghelper-js
js functions, just import needed functions. TypeScript supported.
js 方法库, 按需使用. 支持TypeScript
Install
npm install helper-js --save
Import
import {arrayLast} from 'helper-js'
// or
import * as hp from 'helper-js'
hp.arrayLast(...)
Base functions
基础方法
function glb():Window {
get global, such as window in browser.
返回顶级全局变量. 例如浏览器的window
function isDocumentExisted() {
detect if global variable document existing.
判断全局变量document是否存在
function isArray (v): v is any[] {
function isBool (v): v is boolean {
function isNumber (v): v is number {
function isNumeric (v) {
function isString (v): v is string {
function isObject (v): v is object {
function isFunction (v) {
function isPromise (v) {
function empty(v) {
detect if argumrnt is null, undefined, empty array, empty string, false, NaN, empty object
检查是否是null, undefined, 空数组, 空字符串, false, NaN, 空对象
function randInt(min:number, max:number){
rand int in range, including min and max
返回指定范围随机整数, 包括范围起始值和终止值
function randChoice (arr: string|any[]) {
rand item in array
返回数组随机一项
function strPad(str:number|string, n:number, padString = '0') {
Pad a string to a certain length with another string
左边补充指定字符, 使其达到指定长度
function notLessThan(n:number, min:number) {
If n less than min, return min, else n.
如果n小于min, 返回min, 否则n.
function notGreaterThan (n:number, max:number) {
If n greater than max, return max, else n.
如果n大于max, 返回max, 否则n.
string
字符串
function studlyCase (str:string) {
'abc abc' to 'Abc abc'
function kebabCase(str:string) {
To lower case and use - as delimiter. example: '-ABC abc_def camelCase-- helloMyFriend' to 'a-b-c-abc-def-camel-case-hello-my-friend'
function snakeCase (str:string) {
To lower case and use _ as delimiter.
function camelCase (str:string) {
'abc-abc-abc_abc' to 'AbcAbcAbcAbc'
function camelToWords (str:string) {
'AbcAbcAbcAbc' to ['Abc', 'Abc', 'Abc', 'Abc']
function titleCase (str:string) {
'abcAbc' to 'Abc Abc'
function randString (len = 8, seeds:string|string[]='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789') {
generate random string
随机字符串
Array
数组
function arrayRemove(arr:any[], v:any) {
remove item from array. return removed count
从数组删除项. 返回删除计数
function arrayRemoveBySortedIndexes(arr:any[], sortedIndexes:number[]) {
remove items from array by sorted indexes. indexes example: [0, 2, 6, 8, 9]
通过有序的索引集删除数组项. 索引集例子: [0, 2, 6, 8, 9]
function newArrayExcludingIndexes(arr:any[], indexes:number[]) {
return new array excluding indexes
返回新数组除了给定索引
function arrayAt(arr:any[], n:number) {
get item from array by index. index can be negative number
通过所以获取数组一项. 支持负值索引.
function arrayFirst(arr:any[]) {
get first or array
返回数组首项
function arrayLast(arr: any[]) {
get last of array
返回数组末项
function arraySubtract(arr1: any[], arr2: any[]) {
return arr1 - arr2
function getArrayItemSibling(arr:any[], item:any, offset:number) {
get array item sibling. Example: getArrayItemSibling(arr, item, -1), get previous sibling
获得数组项的一个同级. 例: getArrayItemSibling(arr, item, -1), 获得前一个
function getArrayItemSiblings(arr:any[], item:any, offsets:number[]) {
get array item siblings. Example: getArrayItemSiblings(arr, item, [-1, 1]), get previous and next sibling
获得数组项的多个同级. 例: getArrayItemSiblings(arr, item, [-1, 1]), 获得前一个和后一个
function toArrayIfNot(arrOrNot:T): T|T[] {
function splitArray(arr:any[], n:number|Arg_n_function_splitArray) {
Split array every n. n can be getter, which argument is the times.
每n个拆分数组. n可以是方法, 参数是第几次分块
function groupArray(arr:any[], getMark:(item:any)=>any) {
Compute mark of each item, and group them by mark.
计算每项的标识, 通过标识将数组项分组.
function arrayDistinct(arr:any[]) {
Each item in the new array is unique.
新数组每项唯一.
function arrayGetRange(arr:any[], index:number, endIndex:number) {
get items from array by range. range can be negative
从数组获得一个范围内的项. 范围可以为负.
function arrayWithoutEnd(arr:any[], n:number) {
return new array excluding n items from end
返回新数组排除末尾n项
function arrayFlat(arr:any[], depth=10) {
get one-dimensional array from multidimensional array
从多维数组获取一维数组
Object
对象
function assignIfDifferent(obj:object, key:string, val:any) {
function objectMap(obj:object, handler:(value:any, key:string, index: number)=>any):object {
like Array.map
function objectOnly(obj:object, keys:string[]):object {
function objectExcept(obj:object, keys:string[]):object {
function* iterateAll(val:string|any[]|object|NodeList, opt: iterateAll_Options = {}):Generator<{value:any, index?:number, key?:string}> {
loop for Array, Object, NodeList, String
function objectGet(obj:object, path:string|string[], throwError?:boolean): any {
example: objectGet(window, 'document.body.children.0') . source: http://stackoverflow.com/questions/8817394/javascript-get-deep-value-from-object-by-passing-path-to-it-as-string
例: objectGet(window, 'document.body.children.0') . 参考: http://stackoverflow.com/questions/8817394/javascript-get-deep-value-from-object-by-passing-path-to-it-as-string
function objectSet(obj:object, path:string|string[], value:any) {
refer objectGet
function unset(obj:object, prop:string) {
try delete obj[prop]
function objectAssignIfKeyNull(obj1:object, obj2:object) {
function mapObjectTree(obj:object, handler:mapObjectTree_Handler, limit=10000):object {
walk object and change key, value, delete key. return cloned new object.
深度遍历对象, 可以改变key, value, 删除key. 返回克隆的新对象.
Arguments:
-
handler:
-
return null: don't change anything
-
return {delete: true}: delete
-
return {key: newKey}: change key
-
return {value: newValue}: change value
-
return {skip: true}: skip children
-
return {stop: true}: stop
-
can return delete|((key|value)|(skip|stop))
-
-
limit: to prevent circular reference.
function mapObjects(arr:any[], idKey:string|mapObjects_idKey_function):object {
[{id: 1}, {id: 2}] to {'1':{id: 1}, '2': {id: 2}}
function pairRows(rows1:any[], rows2:any[], key1:string, key2:string=key1):[any, any][] {
example: pairRows(users, userProfiles, 'id', 'user_id')
function depthFirstSearch(obj:object|any[], handler:depthFirstSearch_Handler, childrenKey = 'children', opt:depthFirstSearch_Options={}) {
walk tree data by with depth first search. tree data example: [{children: [{}, {}]}]
深度优先遍历树形数据. 树形数据示例: [{children: [{}, {}]}]
const walkTreeData = depthFirstSearch
refer depthFirstSearch
class TreeData {
tree data helpers
function
函数
function resolveValueOrGettter(valueOrGetter, args = []) {
if it is function, return result, else return it directly.
function executeWithCount(func:T) {
add executed count as first argument of func
增加执行次数作为方法的第一个参数
function watchChange(getVal:ReplaceReturnType<OmitFirstArg, any>, handler:T) {
(getVal, handler) => update . when execute update, call getVal and check if changed.
(getVal, handler) => update . 执行update时, 调用getVal并检查结果是否改变.
function debounceTrailing(action:T, wait = 0) {
function debounceImmediate(action:T, wait = 0) {
function joinFunctionsByResult(funcs) {
the returned function only accept one argument
function joinFunctionsByNext(funcs) {
must pass arguments to next manually
promise
function executePromiseGetters(getters: (()=>any)[], concurrent = 1) {
execute promise in sequence
function promiseTimeout(promise, timeout:number) {
url
function getUrlParam(par) {
dom
function createElementFromHTML(htmlString:string) {
return NodeList if there are multiple top-level nodes
function uniqueId (prefix = 'id_'):string {
function isDescendantOf (el:HTMLElement, parent:HTMLElement) {
function removeEl(el:HTMLElement) {
function getScroll(){
function getOffset(el: HTMLElement) {
refer: https://gist.github.com/aderaaij/89547e34617b95ac29d1
function getOffsetParent(el: HTMLElement) {
there is some trap in el.offsetParent, so use this func to fix
function getPosition(el: HTMLElement) {
get el current position. like jQuery.position. The position is relative to offsetParent viewport left top. it is for set absolute position, absolute position is relative to offsetParent viewport left top.
相对于offsetParent可视区域左上角(el.offsetLeft或top包含父元素的滚动距离, 所以要减去). position一般用于设置绝对定位的情况, 而绝对定位就是以可视区域左上角为原点.
function getPositionFromOffset(el:HTMLElement, of:{x:number, y:number}) {
like jQuery.offset(x, y), but it just return cmputed position, don't update style
类似 jQuery.offset的设置功能, 但是它只返回计算的position, 不改变元素样式.
function getBoundingClientRect(el:HTMLElement){
const getViewportPosition = getBoundingClientRect
refer getBoundingClientRect
function viewportPositionToOffset(position:{x:number, y:number}){
TODO not tested
function offsetToViewportPosition(offset:{x:number, y:number}){
TODO not tested
function findParent(el:HTMLElement, callback:findParent_Callback, opt:{withSelf?:boolean}={}) {
function backupAttr(el:HTMLElement, name:string) {
function restoreAttr(el:HTMLElement, name:string) {
function hasClass(el:HTMLElement, className:string) {
source: http://youmightnotneedjquery.com/
function addClass(el:HTMLElement, className:string) {
source: http://youmightnotneedjquery.com/
function removeClass(el:HTMLElement, className:string) {
source: http://youmightnotneedjquery.com/
function getElSizeEvenInvisible(el:HTMLElement) {
function isOffsetInEl(x:number, y:number, el:HTMLElement) {
-
[isOffsetInEl]
-
@param {Number} x
-
@param {Number} y
-
@param {Object} el HTML Element
function getBorder(el:HTMLElement) {
get border
function setElChildByIndex(el:HTMLElement, child:HTMLElement, index:number) {
function onDOM(el:HTMLElement|Window|Document, name:string, handler:EventHandler, ...args:any[]) {
function offDOM(el:HTMLElement|Window|Document, name:string, handler:EventHandler, ...args:any[]) {
function onDOMMany(els:(HTMLElement|Window|Document)[], names:string[], handler:EventHandler, ...args:any[]) {
function getImageSizeByUrl(url:string) {
function findNodeList(list:NodeList, callback:findNodeList_Callback, opt:{reverse?:boolean} = {}) {
function findNodeListReverse(list:NodeList, callback:findNodeList_Callback) {
function elementsFromPoint(x:number, y:number):Element[] {
function getOuterAttachedHeight(el:Element, opt:{margin?:boolean, border?: boolean} = {}) {
function getOuterAttachedWidth(el:Element, opt:{margin?:boolean, border?: boolean} = {}) {
function scrollTo(options:{
scroll to a positon with duration
from https://gist.github.com/andjosh/6764939
interface options{
x: number // nullable. don't scroll horizontally when null
y: number // nullable. don't scroll vertically when null
duration: number // default 0
element: Element // default is the top scrollable element.
beforeEveryFrame: (count: number) => boolean|void // call before requestAnimationFrame execution. return false to stop
}
return stop
DOM structure
function insertBefore(el:Element, target:Element) {
function insertAfter(el:Element, target:Element) {
function prependTo(el:Element, target:Element) {
function appendTo(el:Element, target:Element) {
Date
function cloneDate(dateObj:Date) {
function addDate(dateObj:Date, n:number, type:'year'|'month'|'day'|'date'|'hour'|'minute'|'second'|'millisecond') {
day and date is same
function getMonthStart (dateObj:Date) {
function getMonthEnd (dateObj:Date) {
function getCalendar(year:number, month:number, startWeekDay = 0):getCalendar_Day[][] {
startWeekDay: 0 is Sunday
return: [getCalendar_Day x 7][]
function isIsoFormat(str:string) {
eg: 2018-09-07T03:38:37.888Z
timezone must be UTC
function parseISO(timestamp:string) {
timestamp eg: 2018-09-07T03:38:37.888Z
advanced
function binarySearch(arr:any[]|NodeList, callback:binarySearch_Callback, opt:binarySearch_Options={}): binarySearch_Return {
binarySearch
callback(mid, i) return mid - your_value if arr is ascending, else return your_value - mid
二分查找
callback(mid, i) arr升序时, 返回mid - your_value, 否则返回your_value - mid
function windowLoaded() {
function waitTime(milliseconds:number, callback?:()=>void) {
function waitFor(condition:()=>boolean, time = 100, maxTimes = 1000) {
async function retry(action: any, limitTimes = 3) {
function copyTextToClipboard(text:string) {
clipboard-polyfill is more powerful
复制文字到剪贴板. 仅限于简单使用. 复杂环境推荐clipboard-polyfill
function isWindowDefined() {
function isNode() {
function isIE() {
function openWindow(url:string, name:string, opt:any = {})
https://developer.mozilla.org/docs/Web/API/Window/open
http://www.w3school.com.cn/htmldom/met_win_open.asp#windowfeatures
function openCenterWindow(url:string, name:string, width:number, height:number, opt:any = {})
class URLHelper {
function resolveArgsByType(args:any[], types:any[]) {
resolve arguments to help overload. 解析函数参数, 帮助重载
types eg: ['Object', (i) => i > 3, ['Number', default], null ]
null represent all types of argument
resolveArgsByType([1,'str'], ['Number', 'Boolean' ,'String']) -> [1, null, 'str']
resolveArgsByType([1,'str'], ['Number', ['Boolean', true] ,'String']) -> [1, true, 'str']
function makeStorageHelper(storage:T) {
function getLocalStorage2() {
function getSessionStorage2() {
class EventProcessor {
事件处理
class CrossWindowEventProcessor extends EventProcessor{
const CrossWindow = CrossWindowEventProcessor
Deprecated in next version
function onContinuousInput(handler:(input:string)=>void, opt:{timeout?:number}={}) {
on continuous input. return destroy
监听连续输入事件. 返回取消监听函数.
const onQuickKeydown = onContinuousInput
refer onContinuousInput
function getUserLanguage() {
class Cache {
function attachCache(obj:any, toCache:object, cache = new Cache()) {
attach cached getters to an object; can attach to self
function easeInOutQuad(startValue, changeInValue, changedTime, duration) {
for animation