14 убийственных методов JS, о которых вы, вероятно, никогда не слышали
Мы все можем согласиться с тем, что поиск исправления ошибки Javascript или ответа на него в Google или StackOverflow не доставляет удовольствия.
Вот несколько коротких и мощных методов JavaScript, которые позволят повысить производительность и свести к минимуму болезненные ощущения.
Давайте углубимся в код.
Уникальный массив
Фильтрация повторяющихся значений из массива.
const arr = ["a", "b", "c", "d", "d", "c", "e"]
const uniqueArray = Array.from(new Set(arr));
console.log(uniqueArray); // ['a', 'b', 'c', 'd', 'e']Подробная информация:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
Уникальный массив объектов
Объект Set не позволит вам отфильтровать повторяющиеся объекты, поскольку все они разные. JSON.stringify поможет нам в этом.
const arr = [{ key: 'value' }, { key2: 'value2' }, { key: 'value' }, { key3: 'value3' }];
const uniqueObjects = Array.from(
new Set(
arr.map(JSON.stringify)
)
).map(JSON.parse)
console.log(uniqueObjects);Подробная информация:
Разделение строки на # символы
Мы можем использовать функцию регулярного выражения .match для разделения строки на n символов.
const str = "asdfghjklmnopq";
const splitPairs = str.match(/.{1,2}/g);
console.log(splitPairs); // ['as', 'df', 'gh', 'jk', 'lm', 'no', 'pq']Подробная информация:
В регулярном выражении /.{1,2}/g, которое мы использовали, число 2 означает, на сколько символов мы хотим разделить. Если есть остаток, это все равно будет работать.
В качестве альтернативы, если вы хотите разделить строку на n символов, где n может быть изменено, вы можете сделать это с помощью new RegExp.
const splitPairsBy = (n) => str.match(new RegExp(`.{1,${n}}`, "g"))Разделение строки на разные символы
Другой хак с регулярными выражениями с .match позволяет вам разделить строку типа «aabbc» на массив [«aa», «bb», «c»].
const str = "abbcccdeefghhiijklll";
const splitChars = str.match(/(.)\1*/g);
console.log(splitChars); // ['a', 'bb', 'ccc', 'd', 'ee', 'f', 'g', 'hh', 'ii', 'j', 'k', 'lll']Подробная информация:
Итерация по объекту
Object.entries позволяет нам превратить объект JSON в массив пар ключ-значение, что позволяет нам перебирать его с помощью цикла или итератора массива.
const obj = {
"key1": "value1",
"key2": "value2",
"key3": "value3"
};
const iteratedObject = Object.entries(obj)
.map(([key, value]) => `${key} = ${value}`);
console.log(iteratedObject); // ['key1 = value1', 'key2 = value2', 'key3 = value3']Подробная информация:
Если obj передается через Object.entries, это будет выглядеть примерно так:
[
["key1", "value1"],
["key2", "value2"],
["key3", "value3"]
]Использование функции .map наряду с деструктурированием объектов позволяет нам получить доступ к ключам-значениям.
Массив ключ-значение для объекта
Вы можете преобразовать массив значений ключа "Object.entryified" обратно в объект с помощью Object.fromEntries.
const entryified = [
["key1", "value1"],
["key2", "value2"],
["key3", "value3"]
];
const originalObject = Object.fromEntries(entryified);
console.log(originalObject); // { key1: 'value1', ... }Подробная информация:
Подсчет событий
Возможно, вы захотите подсчитать, сколько раз элемент появляется в массиве. Для этого мы можем использовать функцию .filter с итератором.
const occurrences = ["a", "b", "c", "c", "d", "a", "a", "e", "f", "e", "f", "g", "f", "f", "f"];
// creating a unique array to avoid counting the same char more than once
const unique = Array.from(new Set(occurrences));
const occurrenceCount = Object.fromEntries(
unique.map(char => {
const occurrenceCount = occurrences.filter(c => c === char).length;
return [char, occurrenceCount]
})
)
console.log(occurrenceCount); // { a: 3, b: 1, c: 2, ... }Подробная информация:
Замена обратного вызова
Функция .replace не ограничивает вас простой заменой на фиксированную строку. Вы можете передать ему обратный вызов и использовать совпадающую подстроку.
const string = "a dog went to dig and dug a doggone large hole";
const replacedString = string.replace(/d.g/g, str => str + "gy")
console.log(replacedString); // a doggy went to diggy and duggy a doggygone large holeПодробная информация:
String.prototype.replace (MDN)
Условная цепочка
Многие из вас знакомы с неопределенными ошибками в JS, условная цепочка может предотвратить многие из них.
Необязательный оператор цепочки(?.)обращается к свойству объекта или вызывает функцию. Если объект, к которому осуществляется доступ, или функция, вызываемая с помощью этого оператора, не определена или имеет значениеnull, выражение замыкается и оценивается как неопределенное, а не выдает ошибку.
const obj = {
"a": "aaaaaaa",
"b": null
};
console.log(obj.b.d); // throws an error
console.log(obj.b?.d); // returns undefinedПодробная информация:
Ограничение числа
Часто вам может потребоваться указать число, которое находится в определенном диапазоне. Делать это с помощью тернарным оператора каждый раз, когда вам это нужно, - сплошная боль. Функция намного чище.
const constrain = (num, min, max) => {
if(num < min) return min;
else if(num > max) return max;
else return num;
}
constrain(5, 1, 3) // 3
constrain(2, 1, 5) // 2
constrain(0, -100, 100) // 0Подробная информация:
Индексирование передней и задней частей массива
Функция .at позволяет вам индексировать массив с начала и до конца положительными и отрицательными числами.
const arr = [1, 2, 3, 4, 5];
arr.at(0) // 1
arr.at(1) // 2
arr.at(-1) // 5
arr.at(-2) // 4Подробная информация:
Сортировка по алфавиту
Отсортировать массив строк по алфавиту
const words = ["javascript", "typescript", "python", "ruby", "swift", "go", "clojure"];
const sorted = words.sort((a, b) => a.localeCompare(b));
console.log(sorted); // ['clojure', 'go', 'javascript', 'python', 'ruby', 'swift', 'typescript']Совет. Вы можете изменить порядок между восходящим и нисходящим, переключивa.localeCompare(b)наb.localeCompare(a).
Подробная информация:
Сортировка по истинности/ложности
Вы можете отсортировать массив по истинному/ложному значению, поместив сначала те, у которых истинное значение, а затем ложные значения.
const users = [
{ "name": "john", "subscribed": false },
{ "name": "jane", "subscribed": true },
{ "name": "jean", "subscribed": false },
{ "name": "george", "subscribed": true },
{ "name": "jelly", "subscribed": true },
{ "name": "john", "subscribed": false }
];
const subscribedUsersFirst = users.sort((a, b) => Number(b.subscribed) - Number(a.subscribed))Number(false) равно нулю, а Number(true) равно единице. Вот как мы можем передать его через функцию сортировки.
Подробная информация:
Округление десятичной дроби до n цифр
Вы можете округлить десятичную дробь до n цифр с помощью .toFixed. Обратите внимание, что .toFixed превращает число в строку, поэтому нам нужно повторно разобрать его как число.
console.log(Math.PI); // 3.141592653589793
console.log(Number(Math.PI.toFixed(2)))Подробная информация:
