Эффективная функция инструмента разработки Javascript

внешний интерфейс JavaScript

1. Массив

multArrayПреобразование 2D-массива

Разделите массив (массив) на несколько подмассивов и объедините эти подмассивы в новый массив.

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сглаженный массив

Разделить многоуровневый вложенный массив (массив) на массив

flatten(array)

параметр

  • arrayмногоуровневый вложенный массив

Пример

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

// [1, 2, 3, 4, 5]

исходный код

flatten.png

flattenDeepсглаженный массив на указанном уровне

Разделить многоуровневый вложенный массив (массив) на заданный массив уровней

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массив значений

Создает массив с уникальными значениями массива, каждое из которых не содержится в других заданных массивах.

diffArray(arrOne, arrTwo)

параметр

  • arrOneмассив для проверки
  • arrTwoмассив для исключения

Пример

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

исходный код

diffArray.png

haveArrиметь общийarrayмассив значений

Создает массив с общими значениями массива, каждое из которых содержится в другом заданном массиве.

haveArr(arrOne, arrTwo)

параметр

  • arrOneмассив для проверки
  • arrTwoмассив, который будет содержать

Пример

haveArr([1, 2, 6, 7], [1, 2, 9, 5])
// => [ 1, 2 ]

исходный код

haveArr.png

uniqueArrayДедупликация массива

Создать дедуплицированную копию массива массива

uniqueArray(array)

параметр

  • arrayмассив для дедупликации

Пример

uniqueArray([1, 2, 2, 3, 4, 4, 5])
// => [ 1, 2, 3, 4, 5 ]

исходный код

uniqueArray.png

uniqueArrayObjectДедупликация объектов массива

Создайте дедуплицированную копию объекта массива массива

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() изменит исходный массив, который по умолчанию отсортирован по коду юникода.

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Перехватить элемент, указанный в начале массива

Извлечь n элементов из самого первого элемента массива

takeArray(array, n)

параметр

  • arrayМассив для извлечения.
  • n=элемент для извлеченияnномер.

Пример

takeArray([2, 3, 1], 2)
// => [2, 3]

исходный код

takeArray.png

takeLastArrayобрезать последний указанный элемент массива

Извлечь 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

2. Объект

cloneObjectклонировать объект

Неглубокое копирование копии объекта

cloneObject(object)

параметр

  • objectобъект для копирования

Пример

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

исходный код

cloneObject.png

3. Функция

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)

параметр

  • add,sub,mul,divоператор
  • 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

4. Строка

isNilЯвляется ли значениеnullилиundefined

isNil(value)

параметр

  • valueзначение для проверки

Пример

isNil(null)
isNil(undefined)
// => true

исходный код

isNil.png

padStartзамаскировать строку

padStart(value, n, maskChar)

параметр

  • valueчтобы замаскировать строку
  • n = 4длина набивки
  • maskCharсимволы-заполнители

Пример

padStart('18659808664')
// => 1865*******

исходный код

padStart.png

5. Числа

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

6. Браузер

copyTextКопировать текст H5

copyText(content, callback)

параметр

  • contentскопировать текст
  • callbackПодсказка обратного вызова пользователя

Пример

copyText(content, text => {
    this.$toast(text)
})

исходный код

copyText.png

getCurrentURLПолучить текущий URL-адрес

Эта функция возвращает URL-адрес текущей страницы.

Пример

getCurrentURL()
// => "https://juejin.cn"

исходный код

getCurrentURL.png

scrollToTopBack to top

Плавная прокрутка к началу текущей страницы.

Пример

scrollToTop()
// => 当前页面的顶部

исходный код

scrollToTop.png

smoothScrollПлавная прокрутка страниц

Плавная прокрутка в видимую область окна браузера

Пример

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

исходный код

smoothScroll.png

5.isCurrentPageЭто текущая страница

Является ли вкладка браузера просматриваемой пользователем

Пример

isCurrentPage()
// => true

исходный код

isCurrentPage.png

7. Окружающая среда

1.isBrowserЭто браузер

Возвращает, является ли текущая среда выполнения браузером

Пример

isBrowser()
// => true (browser)
// => false (Node)

исходный код

isBrowser.png

2.isWechatBrowserСудя по браузеру WeChat или обычному h5

Пример

isWechatBrowser()
// => true

исходный код

isWechatBrowser.png

3.isMobileОпределить, является ли это мобильным терминалом

Пример

isMobile()
// => true

исходный код

isMobile.png

8. Другие

after

Этот метод создает функцию, когда он вызываетсяnили несколько раз сработает сразу послеfunc

after(n, func)

параметр

  • n(number): funcСколько раз метод должен быть вызван перед выполнением.
  • func(Функция): функция, используемая для уточнения.

возвращение

(Функция): возвращает новую квалифицированную функцию.

Пример

 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(число): сколько раз больше не звонитьfunc(Примечание: ограничьте количество звонковfuncколичество раз).
  • func(Функция): Функция, которая ограничивает выполнение.

возвращение

(Функция): возвращает новую квалифицированную функцию.

Пример

 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(*): значение для обработки.

возвращение

(Массив): возвращает преобразованный массив.

Пример

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

Возврат ограниченlowerиupperЗначение между.

clamp(number, [lower], upper)

параметр

  • number(число): значение, которое нужно ограничить.
  • [lower](число): Нижняя граница.
  • upper(число): верхний предел.

возвращение

(число): возвращает ограниченное значение.

Пример

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(Массив): Массив для обработки

возвращение

(Массив): возвращает новый массив с отфильтрованными ложными значениями.

Пример

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(Объект): объект для наследования.
  • [properties](Объект): свойство для назначения.

возвращение

(Объект): возвращает новый объект.

Пример

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, чтобы определить, следует ли возвращать значение по умолчанию. еслиvalueзаNaN, null, илиundefined, затем вернутьсяdefaultValueПо умолчанию.

defaultTo(value, defaultValue)

параметр

  • value(*): значение для проверки.
  • defaultValue(*): значения по умолчанию.

возвращение

(*): возвращает разрешенное значение.

Пример

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(Функция): функция задержки.
  • [args](...*): аргументы, которые будут переданы функции func при ее вызове.

возвращение

(число): возвращает идентификатор таймера.

Пример

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(Функция): функция задержки.
  • wait(число): количество миллисекунд для задержки.
  • [args](...*): будет передано при вызовеfuncпараметр.

возвращение

(число): возвращает идентификатор таймера

Пример

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=''](строка): строка для извлечения.
  • [target](строка): символ для извлечения.
  • [position=string.length](число): позиция для извлечения.

возвращение

(логическое): если строкаstringотtargetконец строки, затем возврат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(*): Другое значение для сравнения.

возвращение

(логическое): возврат, если два значения равны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);
};