Первоначальная цель этой статьи — перечислить некоторые «лишние» API и соответствующие нативные методы написания JS; позже я обнаружил, что существует слишком много API и ограниченная энергия, и постепенно стал записывать те API, которые помогают повысить эффективность разработки. , Я надеюсь, что это поможет вам. Для тех API, фактическое использование которых можно узнать из их названий или описаний, автор не делал демонстрации. Вы можете просмотреть соответствующие официальные документы, чтобы быстро применить к фактической разработке,Китайский API LodashПодробности есть выше.
1. Урожай
- мощный API lodash
- «Избыточные» API lodash и соответствующее написание нативного JS
2. Лодаш
Lodashпредставляет собой последовательную модульную высокопроизводительную служебную библиотеку JavaScript. Используя API функций, большинство API не изменяют входящие параметры;
Lodash мощен и охватывает большинство логических функциональных точек, с которыми можно столкнуться при разработке интерфейса.Использование Lodash может значительно повысить эффективность нашей разработки. Но у этого есть и обратная сторона: удобство делает нас «ленивыми». Благожелательный видит благожелательный, а мудрый видит мудрость.Lodash приносит удобство.В то же время мы всегда должны помнить: JavaScript — наша основа;
«Резервный» API в Lodash не является избыточным, API обрабатывает множество исключений, которые часто игнорируются разработчиками, что делает код более безопасным;
Для большинства API-интерфейсов Lodash сравнение точек логической функции, соответствующих написанному от руки JS, не улучшит производительность;
Лодаш,gitHubКоличество звезд 45К. В то же время это учебный материал. Чтение исходного кода может помочь нам закрепить основы JavaScript. Функциональный API делает каждую логическую функцию меньше кода и проще для понимания. Студенты с плохой базой могут закрепить JavaScript, прочитав исходный код и написав исходный код от руки, например, почерк: каррирование, защита от встряхивания, регулирование, связывание, строковый шаблон и т. д.
3. Массив
Индекс «Избыток»: ☆☆
- компактный (фильтровать ложные значения)
lodash.compact([0, 1, false, 2, '', 3])
[0, 1, false, 2, '', 3].filter(_ => _)
// [1, 2, 3]
- concat (объединение массивов)
lodash.concat([1], [2, 3, 4], [5, 6])
[1, ...[2, 3, 4], ...[5, 6]]
// [1, 2, 3, 4, 5, 6]
- наполнять
lodash.fill([1,2,3],'a')
[1,2,3].fill('a'))
// ['a', 'a', 'a']
lodash.fill(Array(3),'b')
Array(3).fill('b')
// ['b', 'b', 'b']
- голова (получить первый элемент)
const first1 = lodash.head([1, 2, 3])
const [first2] = [1, 2, 3]
// 1
- сгладить (удалить 1 измерение)
lodash.flatten([1, [2, [3, [4]], 5]]))
[1, [2, [3, [4]], 5]].flat(1))
// [1, 2, [3, [4]], 5]
- flattendeep | flattendepth (уменьшить до 1D массива)
lodash.flattenDeep([1, [2, [3, [4]], 5]])
lodash.flattenDepth([1, [2, [3, [4]], 5]], 3)
[1, [2, [3, [4]], 5]].flat(Infinity)
// [1, 2, 3, 4, 5]
- fromPairs (массив типов записей преобразован в объект)
lodash.fromPairs([['fred', 30], ['barney', 40]])
Object.fromEntries([['fred', 30], ['barney', 40]])
// {fred: 30, barney: 40}
- pull (удалить указанный элемент)
lodash.pull([1, 2, 3, 1, 2, 3], 2, 3)
[1, 2, 3, 1, 2, 3].filter(item => ![2, 3].includes(item))
// [1, 1]
- Массив поставляется с реверсом (переворот массива), срезом (вырезанием), соединением (склейка строк), indexOf | lastIndexOf (сопоставление индекса) и т. д.
Индекс «Избыток»: ☆
- difference
lodash.difference([3, 2, 1], [4, 2])
[3, 2, 1].filter(item => ![4, 2].includes(item))
- хвост (возвращает массив без первого элемента)
var other = lodash.tail([1, 2, 3])
var [, ...other] = [1, 2, 3] // 可扩展不包含前第n个元素
- взять (элементы 0 - n), если это немного "избыточно" для удаления элементов массива
let arr1 = [1, 2, 3, 4, 5]
arr1 = lodash.take(arr1, 2) // 做赋值，删除元素
const arr2 = [1, 2, 3, 4, 5]
arr2.length = 2 // 修改长度，直接删除后面元素，可用于清空数组
// [1, 2]
Яркий API
-
pullAt (выбрать элементы на основе индексов и разделить их на два массива)
-
takeRight (возвращает срез массива из n элементов из конечного элемента)
// 倒数解构
const [beforeLast, last] = lodash.takeRight([1, 2, 3, 4], 2)
console.log(beforeLast, last) // 3 4
- zipObject
lodash.zipObject(['a', 'b'], [1, 2]);
// => { 'a': 1, 'b': 2 }
- zipObjectDeep
lodash.zipObjectDeep(['a.b[0].c', 'a.b[1].d'], [1, 2]);
// => { 'a': { 'b': [{ 'c': 1 }, { 'd': 2 }] } }
- xor (создает массив уникальных значений из заданного массива)
Второй по яркости API
-
удалить (фильтрация элементов, разделенная на два массива)
-
sortedUniq (удалить, отсортировать)
-
takeRightWhile (из
arrayИзвлечение элементов, начиная с последнего элемента массива, доpredicateвернуть ложь) -
uniqBy (удалить, отсортировать)
4. Коллекция Коллекция
Многие API-интерфейсы коллекции могут быть привлекательными и могут применяться в реальной разработке.
- forEach (обход массива или объекта) | forEachRight (обход массива или объекта в обратном порядке)
// 遍历数组有点多余
lodash([1, 2]).forEach((val) => {
console.log(val)
})
// 遍历对象就
lodash({ a: 1, b: 2 }).forEach((val, key) => {
console.log(val, key)
})
// 原生js写法 **** 注意数组解构顺序
Object.entries({ a: 1, b: 2 }).forEach(([key, val]) => {
console.log(val, key)
})
- Каждый элемент соответствует условиям) | Некоторые (элемент устраняет состояние) | Фильтр | Найти | FindLast (найдите последний) | включает в себя (Hugheet элемент). Highlight: вы можете пройти объект для соответствия
console.log(lodash([true, 1, null, 'yes']).every(Boolean)) // false
// 等效于
console.log([true, 1, null, 'yes'].every(Boolean)) // false
const users = [
{ user: 'barney', age: 40, active: false },
{ user: 'fred', age: 40, active: false },
]
// *******眼前一亮的用法********
console.log(lodash(users).every({ active: false, age: 40 })) // true
// 等效于
console.log(users.every((item) => item.active === false && item.age === 40)) // true
console.log(lodash.find(users, { user: 'fred' }) === users[1]) // true
console.log(lodash.filter(users, { user: 'fred' })) // object for ['fred']
console.log(lodash.some(users, { user: 'fred' })) // true
- groupBy (группировка)
const users = [
{ id: 'a', age: 40, height: 1 },
{ id: 'b', age: 39, height: 2 },
{ id: 'c', age: 38, height: 2 },
{ id: 'd', age: 40, height: 2 },
]
console.log(lodash.groupBy(users, 'age'))
// 按age分组:{38:obj for ['a'], 39:obj for ['b'], 40:obj for ['c', 'd']}
console.log(lodash.groupBy(users, ({ age, height }) => age + height))
// 按age+height结果分组:{40:obj for ['c'], 41:obj for ['a', 'b'], 42:obj for ['d']}
-
invokeMap (элемент декомпозиции: метод вызывается циклически, а возвращаемое значение метода заменяет элемент коллекции)
-
keyBy (Создать объект: объект, составляющий совокупность; значение ключа исходит из обратного вызова, а параметр обратного вызова — соответствующий элемент коллекции; значение — элемент)
-
orderBy | sortBy (сортировка: можно указать несколько полей сортировки с приоритетом; можно управлять возрастающим и обратным порядком)
-
раздел (Постоянный: в соответствии с возвращаемым значением обратного вызова, вернуть [массив элементов, возвращаемое значение которого равно true, и массив элементов, возвращаемое значение которого равно false])
-
отклонить (найти отличия: узнать множество элементов, не удовлетворяющих условиям, аналогично ! фильтру)
-
образец (лотерея: случайным образом выбрать один из коллекции)
-
sampleSize (лотерея: случайным образом выбрать n из набора)
-
перемешивать
5. Функция Функция
Ниже перечислены API со многими сценариями приложений, которые находятся в стадии разработки. Конкретное использование не будет демонстрироваться. Для получения подробной информации см. API на официальном веб-сайте.
- after(n, func): функция может быть выполнена только после того, как вызов будет выполнен n раз.
- before(n, func): после вызова n раз функция func не будет выполняться, а возвращаемое значение после n раз будет n-м возвращаемым значением.
- карри | curryRight : карри
- отклонить : отклонить
- отложить: отложить вызов
func, пока текущий стек не будет очищен - дроссель: дроссель
- unary: создает функцию, которая принимает не более одного аргумента, игнорируя избыточные аргументы.
6. Ланг
Lang в основном предназначен для оценки типов API, а обычные API-интерфейсы isXxx для оценки типов не будут представлены слишком часто. Вот несколько полезных API.
- Клон серии: клон, клона, клоневит, клонен
- eq : Судить одинаково, можно судить о NaN
- isEqual : определяет, что перечисляемые значения двух объектов равны, обратите внимание, что их нельзя использовать для сравнения объектов DOM.
- isEqualWith: пользовательское сравнение isEqual
- isMatch: определяет, что перечисляемые значения двух частей объекта равны
- isMatchWith : пользовательское сравнение isMatch
Семь, математика математика
maxBy (максимальное значение) | minBy (минимальное значение) | meanBy (среднее значение) | sumBy (суммирование)
const users = [
{ id: 'b', age: 39, height: 2 },
{ id: 'a', age: 40, height: 1 },
{ id: 'c', age: 38, height: 2 },
{ id: 'd', age: 40, height: 2 },
]
console.log(lodash.maxBy(users, 'age'))
// obj for 'a'
console.log(lodash.maxBy(users, ({ age, height }) => age + height))
// obj for 'd'
8. Номер Номер
- inRange: оценка больше или равно и меньше или равно. Улучшенная реализация isInRange
/**
* 判断数字是否在某个区间
* @param string 范围
* demo：
* const ten = 10
* ten.isInRange('[1,10]') // true
* ten.isInRange('[1,10)') // false
*/
Number.prototype.isInRange = function (range = '[1,10]') {
// 1. 应该对range进行正则校验
const val = this.valueOf()
const isStartEqual = range.startsWith('[')
const isEndEqual = range.endsWith(']')
let [start, end] = range
.slice(1, range.length - 1) // 去头尾符号 '1,10'
.split(',') // 切割字符串 ['1', '10']
.map(Number) // 转换数字 [1, 10]
start > end && ([start, end] = [end, start]) // 保证start < end
const isGt = isStartEqual ? val >= start : val > start // >start
const isLt = isEndEqual ? val <= end : val < end // <end
return isGt && isLt
}
const ten = 10
console.log(ten.isInRange('[1,10]')) // true
console.log(ten.isInRange('[1,10)')) // false
9. Объект
Ниже перечислены только те API, которые заставляют людей сиять.
- at | get : Значение ссылки на строковый ключ
const object = { a: [{ b: { c: 3 } }, 4] }
console.log(lodash.at(object, ['a[0].b.c', 'a[1]']))
// [3, 4]
console.log(lodash.at(object, 'a[0].b.c'))
// [3]
console.log(lodash.get(object, 'a[0].b.c'))
// 3
- defaultsDeep : установить глубину по умолчанию
const defaultData = { a: { b: 1, c: 3 } } // 默认值
const settingData = { a: { b: 2 } } // 设置的值
// 当对象只有一层的时候对象结构还挺好用，类似于lodash.defaults
// 当对象层级不止一层的时候，层级深的默认值就被冲刷掉了
const mergeData = {
...defaultData, // 默认值放在前面
...settingData,
}
console.log(mergeData)
// {a:{b:2}}
// 会改变settingData,所以取副本
const mergeDataGood = JSON.parse(JSON.stringify(settingData))
lodash.defaultsDeep(mergeDataGood, defaultData) // 默认值在最后
console.log(mergeDataGood)
// {a:{b: 2, c: 3}}
- has | hasIn : определяет, существует ли цепочка атрибутов. Иногда, чтобы избежать ошибок в коде, нужно конкатенировать значения:
const dValue = a&&a.b&&a.b.c&&a.b.c.d.ES2020В окончательный вариант добавлены операторы:?.для решения вышеуказанных проблем. Эквивалент вышеизложенного:const dValue = a?.b?.c?.d
const obj = { a: { b: { c: { d: 'dValue' } } } }
const obj2 = {}
console.log(lodash.has(obj,'a.b.c.d')) // true
console.log(lodash.has(obj2,'a.b.c.d')) // false
-
invert : инверсия ключ-значение, возвращающая новый объект, новый объект является значением-ключом старого объекта;
-
invertBy: Подобно инвертированию, он может обрабатывать ключ нового объекта;
-
mapKeys : обработать ключ объекта и сгенерировать новый объект;
-
mapValues: обработать значение объекта и сгенерировать новый объект;
-
слияние | слияние с : слияние объектов
var object = {
a: [{ b: 2 }, { d: 4 }],
obj: { key1: 'value1', key2: 'value2' },
}
var other = {
a: [{ c: 3 }, { e: 5 }],
obj: { key1: 'valueOther1', key3: 'valueOther2' },
}
console.log(lodash.merge(object, other))
/**
{
a: [
{ b: 2, c: 3 },
{ d: 4, e: 5 },
],
obj: { key1: 'valueOther1', key2: 'value2', key3: 'valueOther2' },
}
*/
- опустить | опуститьBy : удалить атрибуты объекта. Он используется для извлечения и сохранения данных на сервер, проверка на сервере строгая, и не может быть лишних полей.
const model = {
key1: 'value1', // 需要发送到后端的数据
key2: 'value2',
key3: 'value3',
pageKey1: 'pageValue1', // 页面用到的字段
pageKey2: 'pageValue2',
pageKey3: 'pageValue3',
}
// 1. 原始写法
const postData1 = {
key1: model.key1,
key2: model.key2,
key3: model.key3,
}
// omit
const postData2 = lodash.omit(model, ['pageKey1', 'pageKey2', 'pageKey3'])
// omitBy // 剔除key包含page字段
const postData3 = lodash.omitBy(model, (value, key) => key.includes('page'))
console.log(lodash.isEqual(postData1, postData2)) // true
console.log(lodash.isEqual(postData1, postData3)) // true
-
pick | pickBy: Выбрать свойства объекта, функция противоположна omit | omitBy. Выбор используется, когда нужно отбросить больше атрибутов, чем сохранить.
-
set: значение настройки ссылки ключа строки, соответствующее получению
10. След.
Слишком много API-интерфейсов, ниже перечислены только API-интерфейсы, которые Seq заставляет людей сиять.
- chain : Решите, что lodash не может быть сцеплен
var users = [
{ user: 'barney', age: 36 },
{ user: 'fred', age: 40 },
{ user: 'pebbles', age: 1 },
]
const first = lodash
.chain(users)
.sortBy('age')
.map(function (o) {
return o.user + ' is ' + o.age
})
.head()
.value() // 注意这里要运行.value()才运行，得到结果
console.log(first) // pebbles is 1
11. Струна Струна
Строковые API-интерфейсы lodash — это в основном API-интерфейсы, которые преобразуют различные значения, такие как: заглавная буква, регистр верблюда, тип атрибута html, тип соединения с подчеркиванием, все строчные буквы, первая буква нижнего регистра, кодировка, заполнение и удаление пробелов.
Единственный яркий API: шаблон (строковый шаблон). может применяться кДинамическая интернационализация и интернационализация сплайсинга реализованы лучше
const compiled = lodash.template('hello <%= user.name %>!')
console.log(compiled({ user: { name: 'fred' } }))
// hello fred!