阅读 12596

Javascript 高效开发工具函数

一、数组

multArray二维数组转换

将数组(array)拆分成多个子数组,并将这些子数组组成一个新数组。

multArray(array, count)
复制代码

参数

  • array需要处理的数组
  • count = 8子数组需要的长度

示例

multArray([1, 2, 3, 4, 5, 6], 2)
=> [[1, 2], [3, 4], [5, 6]]

multArray(['a', 'b', 'c', 'd'], 3)
=> [['a', 'b', 'c'], ['d']]
复制代码

源码

multArray.png

flatten扁平化数组

将多层嵌套数组(array)拆分成一个数组

flatten(array)
复制代码

参数

  • array多层嵌套数组

示例

flatten([1, [2], [3], [4, 5]])

// [1, 2, 3, 4, 5]
复制代码

源码

flatten.png

flattenDeep指定层级扁平化数组

将多层嵌套数组(array)拆分成指定层级数组

flattenDeep(array, depth)
复制代码

参数

  • array多层嵌套数组 depth = 减少的嵌套层级数

示例

flattenDeep(['a', ['b', ['c', ['d']], 'e']], 1)
// => ['a', 'b', ['c', ['d']], 'e']

// ES6方法 `flat(depth)`
['a', ['b', ['c', ['d']], 'e']].flat(1)
// => ['a', 'b', ['c', ['d']], 'e']
复制代码

源码

flattenDeep.png

isArrayEqual检查两个数组各项相等

比较两个数组内的各项值是否相等,返回一个Boolean

isArrayEqual(arrOne, arrTwo)
复制代码

参数

  • arrOne 要检查的数组
  • arrTwo 要检查的数组

示例

isArrayEqual([6, 5, 2, 4, 1, 3], [1, 2, 3, 4, 5, 6])
// => true

isArrayEqual([6, 5, 2, 7, 1, 3], [1, 2, 3, 4, 5, 6])
// => false
复制代码

源码

isArrayEqual.png

allEqual检查数组各项相等

allEqual(array)
复制代码

参数

  • array 要检查的数组

示例

allEqual([1, 2, 3, 4, 5, 6])
// => false

allEqual([1, 1, 1, 1])
// => true
复制代码

源码

allEqual.png

diffArray具有唯一array值的数组

创建一个具有唯一 array 值的数组,每个值不包含在其他给定的数组中

diffArray(arrOne, arrTwo)
复制代码

参数

  • arrOne 要检查的数组
  • arrTwo要排除的数组

示例

diffArray(['a', 2, 6, 7], ['a', 2, 9, 'b'])
// => [ 6, 7 ]
复制代码

源码

diffArray.png

haveArr具有共同array值的数组

创建一个具有共同 array 值的数组,每个值包含在其他给定的数组中

haveArr(arrOne, arrTwo)
复制代码

参数

  • arrOne 要检查的数组
  • arrTwo要包含的数组

示例

haveArr([1, 2, 6, 7], [1, 2, 9, 5])
// => [ 1, 2 ]
复制代码

源码

haveArr.png

uniqueArray数组去重

创建一个去重后的 array 数组副本

uniqueArray(array)
复制代码

参数

  • array 要去重的数组

示例

uniqueArray([1, 2, 2, 3, 4, 4, 5])
// => [ 1, 2, 3, 4, 5 ]
复制代码

源码

uniqueArray.png

uniqueArrayObject数组对象去重

创建一个去重后的 array 数组对象副本

uniqueArrayObject(array)
复制代码

参数

  • array 要去重的数组
  • key 要去重的对象属性值

示例

const responseList = [
    { id: 1, a: 1 },
    { id: 2, a: 2 },
    { id: 3, a: 3 },
    { id: 1, a: 4 },
    { id: 2, a: 2 },
    { id: 3, a: 3 },
    { id: 1, a: 4 },
    { id: 2, a: 2 },
    { id: 3, a: 3 },
    { id: 1, a: 4 },
    { id: 2, a: 2 },
    { id: 3, a: 3 },
    { id: 1, a: 4 },
]

uniqueArrayObject(responseList, 'id')

// => [ { id: 1, a: 1 }, { id: 2, a: 2 }, { id: 3, a: 3 } ]
复制代码

源码

uniqueArrayObject.png

treeData生成树结构数据

该函数传入一个数组, 每项id对应其父级数据parent_id,返回一个树结构数组

treeData(array, id, parent_id)
复制代码

参数

  • array 要生成树结构的数组
  • id 自定义属性名
  • parent_id 父级自定义属性名

示例

const comments = [
    { id: 1, parent_id: null },
    { id: 2, parent_id: 1 },
    { id: 3, parent_id: 1 },
    { id: 4, parent_id: 2 },
    { id: 5, parent_id: 4 },
]

treeData(comments)

// => [ { id: 1, parent_id: null, children: [ { id: 2, parent_id: 1, children: [ { id: 4, parent_id: 2, children: [ { id: 5, parent_id: 4, children: [] } ] } ] }, { id: 3, parent_id: 1, children: [] } ] } ]
复制代码

源码

treeData.png

flatArrFunc树结构数据生成数组

该函数传入一个树结构数组,返回一个数组

flatArrFunc(array)
复制代码

参数

  • array 要遍历树结构的数组

示例

const list = [ { id: 1, parent_id: null, children: [ { id: 2, parent_id: 1, children: [ { id: 4, parent_id: 2, children: [ { id: 5, parent_id: 4, children: [] } ] } ] }, { id: 3, parent_id: 1, children: [] } ] } ]

flatArrFunc(list)

// => [
    { id: 1, parent_id: null },
    { id: 2, parent_id: 1 },
    { id: 3, parent_id: 1 },
    { id: 4, parent_id: 2 },
    { id: 5, parent_id: 4 },
]
复制代码

源码

flatArrFunc.png

ascArr数组升序

返回升序后的新数组

sort()方法会改变原数组,默认按 unicode 码顺序排列

ascArr(array)
复制代码

参数

  • array 要检查的排序数组

示例

ascArr([3, 2, 3, 4, 1])
// => [ 1, 2, 3, 3, 4 ]
复制代码

源码

ascArr.png

descArr数组降序

返回降序后的新数组

descArr(array)
复制代码

参数

  • array 要检查的排序数组

示例

descArr([3, 2, 3, 4, 1])
// => [ 1, 2, 3, 3, 4 ]
复制代码

源码

descArr.png

shuffle随机排序

创建一个随机的数组,使用Fisher-Yates算法随机排序数组的元素

shuffle(array)
复制代码

参数

  • array 要随机的数组

示例

shuffle([2, 3, 1])
// => [3, 1, 2]
复制代码

源码

shuffle.png

takeArray截取数组开始指定的元素

从 array 数组的最开始一个元素开始提取 n 个元素

takeArray(array, n)
复制代码

参数

  • array要检索的数组。
  • n=要提取的元素n个数。

示例

takeArray([2, 3, 1], 2)
// => [2, 3]
复制代码

源码

takeArray.png

takeLastArray截取数组最后指定的元素

从 array 数组的最后一个元素开始提取 n 个元素

takeLastArray(array, n)
复制代码

参数

  • array要检索的数组。
  • n=要提取的元素n个数。

示例

takeLastArray([2, 3, 1], 2)
// => [3, 1]
复制代码

源码

takeLastArray.png

cloneArray克隆数组

浅拷贝一份数组副本

cloneArray(array)
复制代码

参数

  • array要复制的数组

示例

cloneArray([1, 24])
// => [1, 24]
复制代码

源码

cloneArray.png

maxArray数组中最大值

过滤原数组中所有的非假值元素,返回数组中的最大值

maxArray(array)
复制代码

参数

  • array待处理的数组

示例

maxArray([0, -1, -2, -3, false])
// => 0
复制代码

源码

maxArray.png

minArray数组中最小值

过滤原数组中所有的非假值元素,返回数组中的最小值

minArray(array)
复制代码

参数

  • array待处理的数组

示例

minArray([0, -1, -2, -3, false])
// => -3
复制代码

源码

minArray.png

validArray去除数组中的无效值

创建一个新数组,包含原数组中所有的非假值元素。例如false, null,0, "", undefined, 和 NaN 都是被认为是“假值”。

validArray(array)
复制代码

参数

  • array待处理的数组

示例

minArray([0, 1, false, 2, '', 3])
// => [1, 2, 3]
复制代码

源码

validArray.png

filterParams去除请求参数中的无效值

创建一个新的请求参数,包含原请求参数中所有的无效值元素。例如, null, "", undefined, 和 NaN 都是被认为是“无效值”。

filterParams(obj)
复制代码

参数

  • obj待处理的请求参数

示例

const params = {
    a:1,
    b: '2',
    c: null,
    d: '',
    e: undefined,
    f: NaN,
}
filterParams(params)
// => {a: 1, b: '2'}
复制代码

源码

filterParams.png

二、对象

cloneObject克隆对象

浅拷贝一份对象副本

cloneObject(object)
复制代码

参数

  • object要复制的对象

示例

const a = { x: 1, y: 1 }
const b = cloneObject(a)
// => a !== b
复制代码

源码

cloneObject.png

三、函数

debounce函数防抖

在事件被触发 n 秒后再执行回调,如果在这 n 秒内又被触发,则重新计时。

debounce(fn, wait)
复制代码

参数

  • fn 要防抖动的函数
  • wait=500需要延迟的毫秒数

示例

debounce(()=> { console.log('debounce') }, 1000)
// => 1秒后打印'debounce'
复制代码

源码

debounce.png

throttle函数节流

规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。

throttle(fn, wait)
复制代码

参数

  • fn 要节流的函数
  • wait=500需要延迟的毫秒数

示例

throttle(() => {
    console.log('throttle')
}, 1000)
// 1秒多次触发打印一次`throttle`
复制代码

源码

throttle.png

typeFn类型判断

判断是否是 Array Object String Number类型

typeFn.type(value)
复制代码

参数

  • type 数据类型
  • value要检验的值

示例

typeFn.String('1')
typeFn.Number(1)
typeFn.Boolean(false)
typeFn.Null(null)
typeFn.Array([1, 2])
typeFn.Object({ a: 1 })
typeFn.Function(() => {})

// => true
复制代码

源码

typeFn.png

calcFn加减乘除运算

因为 JavaScript 遵循 IEEE 754 数学标准,使用 64 位浮点数进行运算。在进行十进制运算时会导致精度丢失。

calcFn.add(value1, value2, value3)
复制代码

参数

  • addsubmuldiv运算符
  • value要计算的值

示例

解决 0.1+0.2 !== 0.3 问题
//加法
calcFn.add(0.1, 0.2) // 0.3

//减法
calcFn.sub(0.1, 0.2) // 0.1

//乘法
calcFn.mul(0.2, 0.3) // 0.06

// 乘法
calcFn.div(0.1, 0.2) // 0.5
复制代码

源码

calcFn.png

四、字符串

isNil值是否是nullundefined

isNil(value)
复制代码

参数

  • value 要检验的值

示例

isNil(null)
isNil(undefined)
// => true
复制代码

源码

isNil.png

padStart遮住字符串

padStart(value, n, maskChar)
复制代码

参数

  • value 要遮住字符串
  • n = 4 填充的长度
  • maskChar 填充字符

示例

padStart('18659808664')
// => 1865*******
复制代码

源码

padStart.png

五、数字

thousands数字每隔三位数加分号

thousands(number)
复制代码

参数

  • number 数字或者浮点数

示例

thousands(12255552323)
// => 12,255,552,323
thousands(592535.2641)
// => 592,535.2641
复制代码

源码

thousands.png

numPercentage将小数转化为百分数

numPercentage(number,digit)
复制代码

参数

  • number 小数
  • digit 保留位数

示例

numPercentage(12.655566, 3)
// => 1265.557%
复制代码

源码

numPercentage.png

randomNumber指定范围的随机整数

randomNumber(min, max)
复制代码

参数

  • min 指定范围最小值
  • max 指定范围最大值

示例

randomNumber(0, 10)
// => 7
// => 2
复制代码

源码

randomNumber.png

average求平均值

average(value1, value2, value3)
复制代码

参数

  • value 数字

示例

average(...[1, 2, 3])
average(1, 2, 3)
// => 2
复制代码

源码

average.png

averageBy求数组对象内某对象的平均值

averageBy(array, fn)
复制代码

参数

  • array 要迭代的数组
  • fn 迭代函数

示例

averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n)
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n')
// => 5
复制代码

源码

averageBy.png

aboutEqual两个值是否约等于

传入两个数字是否大致相等,误差在可接受范围内

aboutEqual(n1, n2, epsilon)
复制代码

参数

  • n1 n2 要比较的数字
  • epsilon 误差可接受范围内

示例

aboutEqual(25, 2, 0.06)
// => false
复制代码

源码

aboutEqual.png

getLineSize计算两点之间的距离

勾股定理计算两点之间的距离

getLineSize = (x1, y1, x2, y2)
复制代码

参数

  • x1 y1 x2 y2坐标点

示例

getLineSize(0, 0, 3, 4)
// => 5
复制代码

源码

getLineSize.png

sum数组中值总和

sum(value1, value2, value3)
复制代码

参数

  • value1 value2 value3要迭代的数字

示例

sum(1, 2, 3, 4)
sum(...[1, 2, 3, 4])
// => 10
复制代码

源码

sum.png

六、浏览器

copyTextH5复制文本

copyText(content, callback)
复制代码

参数

  • content要复制文字
  • callback 回调用户提示

示例

copyText(content, text => {
    this.$toast(text)
})
复制代码

源码

copyText.png

getCurrentURL获取当前的 URL 地址

该函数返回当前页面的 URL 地址。

示例

getCurrentURL()
// => "https://juejin.cn"
复制代码

源码

getCurrentURL.png

scrollToTop返回顶部

平滑地滚动到当前页面的顶部。

示例

scrollToTop()
// => 当前页面的顶部
复制代码

源码

scrollToTop.png

smoothScroll平滑滚动页面

平滑滚动到浏览器窗口的可见区域

示例

smoothScroll('#fooBar');
// => 平滑滚动到ID为fooBar的元素
smoothScroll ('.fooBar' );
// => 使用fooBar类平滑滚动到第一个元素
复制代码

源码

smoothScroll.png

5.isCurrentPage是否是当前页面

浏览器的选项卡是否是用户在浏览

示例

isCurrentPage()
// => true
复制代码

源码

isCurrentPage.png

七.环境

1.isBrowser是否是浏览器

返回当前运行时环境是否为浏览器

示例

isBrowser()
// => true (browser)
// => false (Node)
复制代码

源码

isBrowser.png

2.isWechatBrowser判断微信浏览器还是普通h5

示例

isWechatBrowser()
// => true
复制代码

源码

isWechatBrowser.png

3.isMobile判断是否是移动端

示例

isMobile()
// => true
复制代码

源码

isMobile.png

八、其他

after

此方法创建一个函数,当他被调用n或更多次之后将马上触发func

after(n, func)
复制代码

参数

  • n(number): func 方法应该在调用多少次后才执行。
  • func(Function): 用来限定的函数。

返回

(Function): 返回新的限定函数。

示例

 const saves = ['profile', 'settings']
 const done = after(saves.length, () => console.log('done saving!'))
 
 forEach(saves, type => asyncSave({ 'type': type, 'complete': done }))
 // => 打印 'done saving!' 在两个异步保存完成后。
复制代码

源码

const after = (n, func) =>{
  if (typeof func !== 'function') {
    throw new TypeError('Expected a function');
  };
  n = n || 0;
  return (...args) => {
    if (--n < 1) {
      return func.apply(this, args);
    };
  };
};
复制代码

before

创建一个调用func的函数,通过this绑定和创建函数的参数调用func,调用次数不超过 n 次。 之后再调用这个函数,将返回一次最后调用func的结果。

before(n, func)
复制代码

参数

  • n(number): 超过多少次不再调用func(注:限制调用func的次数)。
  • func(Function): 限制执行的函数。

返回

(Function): 返回新的限定函数。

示例

 jQuery(element).on('click', _.before(5, addContactToList));
// => 最多只允许点击4次
复制代码

源码

const before = (n, func) => {
  let result;
  if (typeof func !== 'function') {
    throw new TypeError('Expected a function');
  };
  return function (...args) {
    if (--n > 0) {
      result = func.apply(this, args);
    };
    if (n <= 1) {
      func = undefined;
    };
    return result;
  };
};
复制代码

castArray

创建一个调用func的函数,通过this绑定和创建函数的参数调用func,调用次数不超过 n 次。 之后再调用这个函数,将返回一次最后调用func的结果。

castArray(value)
复制代码

参数

  • value(*): 要处理的值。

返回

(Array): 返回转换后的数组。

示例

castArray(1);
// => [1]
 
castArray({ 'a': 1 });
// => [{ 'a': 1 }]
 
castArray('abc');
// => ['abc']
 
castArray(null);
// => [null]
 
castArray(undefined);
// => [undefined]
 
castArray();
// => []
 
const array = [1, 2, 3];
console.log(castArray(array) === array);
// => true
复制代码

源码

const castArray = (...args) => {
  if (!args.length) {
    return [];
  };
  const value = args[0];
  return Array.isArray(value) ? value : [value];
};
复制代码

clamp

返回限制在 lowerupper 之间的值。

clamp(number, [lower], upper)
复制代码

参数

  • number (number): 被限制的值。
  • [lower] (number): 下限。
  • upper (number): 上限。

返回

(number): 返回被限制的值。

示例

clamp(-10, -5, 5);
// => -5
 
clamp(10, -5, 5);
// => 5
复制代码

源码

const clamp = (number, lower, upper) => {
  number = +number;
  lower = +lower;
  upper = +upper;
  lower = lower === lower ? lower : 0;
  upper = upper === upper ? upper : 0;
  if (number === number) {
    number = number <= upper ? number : upper;
    number = number >= lower ? number : lower;
  };
  return number;
};
复制代码

compact

创建一个新数组,包含原数组中所有的非假值元素。例如false, null,0, "",undefined, 和 NaN 都是被认为是“假值”。

compact(array)
复制代码

参数

  • array (Array): 待处理的数组

返回

(Array): 返回过滤掉假值的新数组。

示例

compact([0, 1, false, 2, '', 3]);
// => [1, 2, 3]
复制代码

源码

const compact = (array) => {
  let resIndex = 0;
  const result = [];

  if (array == null) {
    return result;
  };

  for (const value of array) {
    if (value) {
      result[resIndex++] = value;
    };
  };
  return result;
};
复制代码

create

创建一个继承 prototype 的对象。 如果提供了 prototype,它的可枚举属性会被分配到创建的对象上。

create(prototype, [properties])
复制代码

参数

  • prototype (Object): 要继承的对象。
  • [properties] (Object): 待分配的属性。

返回

(Object): 返回新对象。

示例

function Shape() {
  this.x = 0;
  this.y = 0;
}
 
function Circle() {
  Shape.call(this);
}
 
Circle.prototype = create(Shape.prototype, {
  'constructor': Circle
});
 
let circle = new Circle;
circle instanceof Circle;
// => true
 
circle instanceof Shape;
// => true
复制代码

源码

const create = (prototype, properties) => {
  prototype = prototype === null ? null : Object(prototype);
  const result = Object.create(prototype);
  return properties == null ? result : Object.assign(result, properties);
};
复制代码

defaultTo

检查value,以确定一个默认值是否应被返回。如果valueNaN, null, 或者 undefined,那么返回defaultValue默认值。

defaultTo(value, defaultValue)
复制代码

参数

  • value (*): 要检查的值。
  • defaultValue (*): 默认值。

返回

(*): 返回 resolved 值。

示例

defaultTo(1, 10);
// => 1
 
defaultTo(undefined, 10);
// => 10
复制代码

源码

const defaultTo = (value, defaultValue) => {
  return (value == null || value !== value) ? defaultValue : value;
};
复制代码

defer

推迟调用func,直到当前堆栈清理完毕。 调用时,任何附加的参数会传给func

defer(func, [args])
复制代码

参数

  • func (Function): 要延迟的函数。
  • [args] (...*): 会在调用时传给 func 的参数。

返回

(number):返回计时器 id。

示例

defer(function(text) {
  console.log(text);
}, 'deferred');
// => 一毫秒或更久一些输出 'deferred'。
复制代码

源码

const defer = (func, ...args) => {
  if (typeof func !== 'function') {
    throw new TypeError('Expected a function');
  };
  return setTimeout(func, 1, ...args);
};
复制代码

delay

延迟 wait 毫秒后调用 func。 调用时,任何附加的参数会传给func

delay(func, wait, [args])
复制代码

参数

  • func (Function): 要延迟的函数。
  • wait (number): 要延迟的毫秒数。
  • [args] (...*): 会在调用时传入到 func 的参数。

返回

(number): 返回计时器 id

示例

delay(function(text) {
  console.log(text);
}, 1000, 'later');
// => 一秒后输出 'later'。
复制代码

源码

const delay = (func, wait, ...args) => {
  if (typeof func !== 'function') {
    throw new TypeError('Expected a function');
  };
  return setTimeout(func, +wait || 0, ...args);
};
复制代码

endsWith

检查字符串string是否以给定的target字符串结尾。

endsWith([string=''], [target], [position=string.length])
复制代码

参数

  • [string=''] (string): 要检索的字符串。
  • [target] (string): 要检索字符。
  • [position=string.length] (number): 检索的位置。

返回

(boolean): 如果字符串stringtarget字符串结尾,那么返回 true,否则返回 false

示例

endsWith('abc', 'c');
// => true
 
endsWith('abc', 'b');
// => false
 
endsWith('abc', 'b', 2);
// => true
复制代码

源码

const endsWith = (string, target, position) => {
  const { length } = string;
  position = position === undefined ? length : +position;
  if (position < 0 || position != position) {
    position = 0;
  } else if (position > length) {
    position = length;
  };
  const end = position;
  position -= target.length;
  return position >= 0 && string.slice(position, end) == target;
};
复制代码

eq

执行SameValueZero 比较两者的值,来确定它们是否相等。

eq(value, other)
复制代码

参数

  • value (*): 要比较的值。
  • other (*): 另一个要比较的值。

返回

(boolean): 如果两个值相等返回 true ,否则返回 false

示例

let object = { 'a': 1 };
let other = { 'a': 1 };
 
eq(object, object);
// => true
 
eq(object, other);
// => false
 
eq('a', 'a');
// => true
 
eq('a', Object('a'));
// => false
 
eq(NaN, NaN);
// => true
复制代码

源码

const eq = (value, other) => {
  return value === other || (value !== value && other !== other);
};
复制代码
文章分类
前端
文章标签