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']]
исходный код
flatten
сглаженный массив
Разделить многоуровневый вложенный массив (массив) на массив
flatten(array)
параметр
-
array
многоуровневый вложенный массив
Пример
flatten([1, [2], [3], [4, 5]])
// [1, 2, 3, 4, 5]
исходный код
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']
исходный код
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
исходный код
allEqual
Проверить, что элементы массива равны
allEqual(array)
параметр
-
array
массив для проверки
Пример
allEqual([1, 2, 3, 4, 5, 6])
// => false
allEqual([1, 1, 1, 1])
// => true
исходный код
diffArray
имеет уникальныйarray
массив значений
Создает массив с уникальными значениями массива, каждое из которых не содержится в других заданных массивах.
diffArray(arrOne, arrTwo)
параметр
-
arrOne
массив для проверки -
arrTwo
массив для исключения
Пример
diffArray(['a', 2, 6, 7], ['a', 2, 9, 'b'])
// => [ 6, 7 ]
исходный код
haveArr
иметь общийarray
массив значений
Создает массив с общими значениями массива, каждое из которых содержится в другом заданном массиве.
haveArr(arrOne, arrTwo)
параметр
-
arrOne
массив для проверки -
arrTwo
массив, который будет содержать
Пример
haveArr([1, 2, 6, 7], [1, 2, 9, 5])
// => [ 1, 2 ]
исходный код
uniqueArray
Дедупликация массива
Создать дедуплицированную копию массива массива
uniqueArray(array)
параметр
-
array
массив для дедупликации
Пример
uniqueArray([1, 2, 2, 3, 4, 4, 5])
// => [ 1, 2, 3, 4, 5 ]
исходный код
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 } ]
исходный код
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: [] } ] } ]
исходный код
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 },
]
исходный код
ascArr
Массив по возрастанию
Возвращает новый массив в порядке возрастания
Метод sort() изменит исходный массив, который по умолчанию отсортирован по коду юникода.
ascArr(array)
параметр
-
array
отсортированный массив для проверки
Пример
ascArr([3, 2, 3, 4, 1])
// => [ 1, 2, 3, 3, 4 ]
исходный код
descArr
Массив по убыванию
Возвращает новый массив в порядке убывания
descArr(array)
параметр
-
array
отсортированный массив для проверки
Пример
descArr([3, 2, 3, 4, 1])
// => [ 1, 2, 3, 3, 4 ]
исходный код
shuffle
случайный порядок
Чтобы создать случайный массив, используйтеFisher-Yates
Алгоритм случайной сортировки элементов массива
shuffle(array)
параметр
-
array
массив должен быть случайным
Пример
shuffle([2, 3, 1])
// => [3, 1, 2]
исходный код
takeArray
Перехватить элемент, указанный в начале массива
Извлечь n элементов из самого первого элемента массива
takeArray(array, n)
параметр
-
array
Массив для извлечения. -
n=
элемент для извлеченияn
номер.
Пример
takeArray([2, 3, 1], 2)
// => [2, 3]
исходный код
takeLastArray
обрезать последний указанный элемент массива
Извлечь n элементов, начиная с последнего элемента массива
takeLastArray(array, n)
параметр
-
array
Массив для извлечения. -
n=
элемент для извлеченияn
номер.
Пример
takeLastArray([2, 3, 1], 2)
// => [3, 1]
исходный код
cloneArray
массив клонов
Неглубокое копирование копии массива
cloneArray(array)
параметр
-
array
массив для копирования
Пример
cloneArray([1, 24])
// => [1, 24]
исходный код
maxArray
самое большое значение в массиве
Отфильтруйте все неложные элементы в исходном массиве и верните максимальное значение в массиве.
maxArray(array)
параметр
-
array
массив для обработки
Пример
maxArray([0, -1, -2, -3, false])
// => 0
исходный код
minArray
наименьшее значение в массиве
Отфильтруйте все неложные элементы в исходном массиве и верните минимальное значение в массиве.
minArray(array)
параметр
-
array
массив для обработки
Пример
minArray([0, -1, -2, -3, false])
// => -3
исходный код
validArray
Удалить недопустимые значения из массива
Создает новый массив, содержащий все неложные элементы исходного массива. Напримерfalse
, null
,0
, ""
, undefined
, иNaN
считаются «ложными значениями».
validArray(array)
параметр
-
array
массив для обработки
Пример
minArray([0, 1, false, 2, '', 3])
// => [1, 2, 3]
исходный код
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'}
исходный код
2. Объект
cloneObject
клонировать объект
Неглубокое копирование копии объекта
cloneObject(object)
параметр
-
object
объект для копирования
Пример
const a = { x: 1, y: 1 }
const b = cloneObject(a)
// => a !== b
исходный код
3. Функция
debounce
Функция защиты от тряски
Обратный вызов выполняется через n секунд после запуска события, и если он снова запускается в течение этих n секунд, таймер переустанавливается.
debounce(fn, wait)
параметр
-
fn
функция устранения дребезга -
wait=500
миллисекунды для задержки
Пример
debounce(()=> { console.log('debounce') }, 1000)
// => 1秒后打印'debounce'
исходный код
throttle
регулирование функции
Укажите единицу времени. В этой единице времени функция обратного вызова, запускающая событие, может быть выполнена только один раз. Если событие инициируется несколько раз в одну и ту же единицу времени, только одно из них может вступить в силу.
throttle(fn, wait)
параметр
-
fn
функция дросселирования -
wait=500
миллисекунды для задержки
Пример
throttle(() => {
console.log('throttle')
}, 1000)
// 1秒多次触发打印一次`throttle`
исходный код
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
исходный код
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
исходный код
4. Строка
isNil
Является ли значениеnull
илиundefined
isNil(value)
параметр
-
value
значение для проверки
Пример
isNil(null)
isNil(undefined)
// => true
исходный код
padStart
замаскировать строку
padStart(value, n, maskChar)
параметр
-
value
чтобы замаскировать строку -
n = 4
длина набивки -
maskChar
символы-заполнители
Пример
padStart('18659808664')
// => 1865*******
исходный код
5. Числа
thousands
Числа с точкой с запятой через каждые три цифры
thousands(number)
параметр
-
number
число или число с плавающей запятой
Пример
thousands(12255552323)
// => 12,255,552,323
thousands(592535.2641)
// => 592,535.2641
исходный код
numPercentage
Преобразовать десятичную дробь в проценты
numPercentage(number,digit)
параметр
-
number
десятичный -
digit
зарезервированные биты
Пример
numPercentage(12.655566, 3)
// => 1265.557%
исходный код
randomNumber
случайные целые числа в указанном диапазоне
randomNumber(min, max)
параметр
-
min
Укажите минимальное значение диапазона -
max
Укажите максимальное значение диапазона
Пример
randomNumber(0, 10)
// => 7
// => 2
исходный код
average
средний
average(value1, value2, value3)
параметр
-
value
номер
Пример
average(...[1, 2, 3])
average(1, 2, 3)
// => 2
исходный код
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
исходный код
aboutEqual
Являются ли два значения приблизительно равными
Если входящие два числа примерно равны, ошибка находится в допустимом диапазоне
aboutEqual(n1, n2, epsilon)
параметр
-
n1 n2
цифры для сравнения -
epsilon
Ошибка находится в допустимом диапазоне
Пример
aboutEqual(25, 2, 0.06)
// => false
исходный код
getLineSize
Вычислить расстояние между двумя точками
Теорема Пифагора для вычисления расстояния между двумя точками
getLineSize = (x1, y1, x2, y2)
параметр
-
x1 y1 x2 y2
Координатные точки
Пример
getLineSize(0, 0, 3, 4)
// => 5
исходный код
sum
сумма значений в массиве
sum(value1, value2, value3)
параметр
-
value1 value2 value3
числа для повторения
Пример
sum(1, 2, 3, 4)
sum(...[1, 2, 3, 4])
// => 10
исходный код
6. Браузер
copyText
Копировать текст H5
copyText(content, callback)
параметр
-
content
скопировать текст -
callback
Подсказка обратного вызова пользователя
Пример
copyText(content, text => {
this.$toast(text)
})
исходный код
getCurrentURL
Получить текущий URL-адрес
Эта функция возвращает URL-адрес текущей страницы.
Пример
getCurrentURL()
// => "https://juejin.cn"
исходный код
scrollToTop
Back to top
Плавная прокрутка к началу текущей страницы.
Пример
scrollToTop()
// => 当前页面的顶部
исходный код
smoothScroll
Плавная прокрутка страниц
Плавная прокрутка в видимую область окна браузера
Пример
smoothScroll('#fooBar');
// => 平滑滚动到ID为fooBar的元素
smoothScroll ('.fooBar' );
// => 使用fooBar类平滑滚动到第一个元素
исходный код
5.isCurrentPage
Это текущая страница
Является ли вкладка браузера просматриваемой пользователем
Пример
isCurrentPage()
// => true
исходный код
7. Окружающая среда
1.isBrowser
Это браузер
Возвращает, является ли текущая среда выполнения браузером
Пример
isBrowser()
// => true (browser)
// => false (Node)
исходный код
2.isWechatBrowser
Судя по браузеру WeChat или обычному h5
Пример
isWechatBrowser()
// => true
исходный код
3.isMobile
Определить, является ли это мобильным терминалом
Пример
isMobile()
// => true
исходный код
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);
};