- PVSM.RU - https://www.pvsm.ru -
Как всем известно, JavaScript — это язык, который очень быстро развивается. В стандарте ES2020 имеется немало новых возможностей, с которыми вам, вероятно, захочется познакомиться поближе. Честно говоря, писать JS-код можно по-разному. Различные варианты кода, направленные на решение одной и той же задачи, способны дать один и тот же результат, но некоторые из этих вариантов кода могут оказаться значительно короче и чище других. Для того чтобы сделать код качественнее и понятнее, можно пользоваться всяческими полезными приёмами. О некоторых из таких приёмов речь пойдёт в материале, перевод которого мы сегодня публикуем. Надеемся, то, о чём вы сегодня узнаете, когда-нибудь вам пригодится.
JavaScript позволяет задавать для параметров функций значения, используемые по умолчанию. Зная об этом, мы можем реализовать интересный способ проверки наличия обязательных параметров при вызове функций и методов:
const isRequired = () => { throw new Error('param is required'); };
const print = (num = isRequired()) => { console.log(`printing ${num}`) };
print(2);//printing 2
print()// error
print(null)//printing null
Хорошо сделано, правда?
Вы, вполне вероятно, хорошо знакомы с методом JSON.stringify()
. А знаете о том, что с помощью этого метода можно форматировать JSON-код? Это, на самом деле, очень просто.
Метод stringify()
принимает три параметра. Это — параметры value
, replace
и space
. Два последних параметра в этом списке являются необязательными. Именно поэтому их вы, возможно, раньше не использовали. Для настройки выравнивания JSON-кода необходимо использовать параметр space
.
console.log(JSON.stringify({name:"John",Age:23},null,'t'));
>>>
{
"name": "John",
"Age": 23
}
Вот [2], кстати, созданный мной React-компонент, в котором использован вышеописанный подход к форматированию JSON-кода. Можете с ним поэкспериментировать.
Для того чтобы извлечь из массива уникальные значения, раньше надо было применять метод filter()
, с помощью которого отфильтровывались повторяющиеся значения. Теперь же для решения этой задачи мы можем воспользоваться новым стандартным JavaScript-объектом типа Set
. Это значительно проще и удобнее, чем фильтрация массива.
let uniqueArray = [...new Set([1, 2, 3, 3,3,"school","school",'ball',false,false,true,true])];
>>> [1, 2, 3, "school", "ball", false, true]
Бывает так, что из массива нужно удалить ложные значения. Это — такие значения, которые в JavaScript приводятся к значению false
. В языке существует лишь 6 таких значений (включая само значение false
):
Подобные значения легче всего отфильтровать из массива, воспользовавшись следующей конструкцией:
myArray
.filter(Boolean);
Если нужно как-то модифицировать исходный массив, а после этого подвергнуть фильтрации новый массив, можно попробовать нечто, напоминающее следующий код:
myArray
.map(item => {
// Выполнить изменения и вернуть новый элемент
})
.filter(Boolean);
Пользуясь подобной конструкцией, учитывайте то, что исходный массив, myArray
, остаётся неизменным.
У меня было несколько случаев, когда требовалось объединить два или большее количество объектов. В подобных случаях я обычно пользуюсь следующей методикой:
const user = {
name: 'John Ludwig',
gender: 'Male'
};
const college = {
primary: 'Mani Primary School',
secondary: 'Lass Secondary School'
};
const skills = {
programming: 'Extreme',
swimming: 'Average',
sleeping: 'Pro'
};
const summary = {...user, ...college, ...skills};
Три точки, использованные в последней строке этого примера, это оператор spread. Подробнее о нём можно почитать здесь [3].
У JavaScript-массивов имеется стандартный метод sort()
. Он, по умолчанию, преобразует элементы массива в строки и выполняет лексикографическую сортировку. Это может приводить к проблемам при попытке сортировки числовых массивов. Подобные проблемы, правда, очень просто предотвратить:
[0,10,4,9,123,54,1].sort((a,b) => a-b);
>>> [0, 1, 4, 9, 10, 54, 123]
Методу sort()
передаётся функция, выполняющая сравнение двух элементов числового массива. Благодаря этой функции числовой массив можно отсортировать так, как нужно.
Возможно, вам понадобится запретить пользователям вашего сайта вызывать контекстные меню элементов щелчком правой кнопки мыши. Хотя это нужно и нечасто, иногда это может оказаться очень кстати.
<body oncontextmenu="return false">
<div></div>
</body>
Этот простой приём позволяет отключить на странице функционал правой кнопки мыши.
Синтаксис деструктурирующего присваивания применяется в JavaScript-выражениях, нацеленных на распаковку элементов массивов или свойств объектов в отдельные переменные. При этом, вместо того, чтобы пользоваться существующими именами свойств объектов, соответствующие переменные можно переименовать:
const object = { number: 10 };
// Извлечение значения свойства number в константу с таким же именем
const { number } = object;
// Извлечение значения свойства number и назначение переменной имени otherNumber
const { number: otherNumber } = object;
console.log(otherNumber); //10
Если вам нужно получить элементы, находящиеся в конце массива, можно воспользоваться методом массива slice()
, которому передано отрицательное число:
let array = [0, 1, 2, 3, 4, 5, 6, 7]
console.log(array.slice(-1));
>>>[7]
console.log(array.slice(-2));
>>>[6, 7]
console.log(array.slice(-3));
>>>[5, 6, 7]
Может случиться так, что возникнет нужда в ожидании завершения нескольких промисов. Для того чтобы дождаться выполнения нескольких промисов, можно воспользоваться методом Promise.all()
. Главная задача этого метода заключается в ожидании разрешения всех промисов, которые ему передали.
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error('Something went wrong'))];
Promise.all(PromiseArray)
.then(data => console.log('all resolved! here are the resolve values:', data))
.catch(err => console.log('got rejected! reason:', err))
При работе с Promise.all()
важно знать о том, что этот метод, если хотя бы один из переданных ему промисов будет отклонён, выбросит ошибку. В результате окажется, что Promise.all()
не дождётся завершения работы всех промисов.
Если же вам нужно дождаться завершения работы всех промисов, независимо от того, будут ли они успешно разрешены или отклонены, это значит, что вам стоит прибегнуть к методу Promise.allSettled()
. Этот метод имеется в окончательно согласованной версии стандарта ES2020.
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error('Something went wrong'))];
Promise.allSettled(PromiseArray).then(res =>{
console.log(res);
}).catch(err => console.log(err));
//[
//{status: "fulfilled", value: 100},
//{status: "rejected", reason: null},
//{status: "fulfilled", value: "Data release"},
//{status: "rejected", reason: Error: Something went wrong ...}
//]
Теперь, несмотря на то, что некоторые промисы отклонены, Promise.allSettled()
возвращает результаты работы всех промисов.
Знаете какие-нибудь полезные JavaScript-приёмы, которые вы могли бы посоветовать другим программистам?
Автор: ru_vds
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/353977
Ссылки в тексте:
[1] Image: https://habr.com/ru/company/ruvds/blog/505754/
[2] Вот: https://bit.dev/eden/stringify-components/display-results
[3] здесь: https://medium.com/better-programming/5-uses-of-the-es6-spread-operator-ef90bdff4d56
[4] Источник: https://habr.com/ru/post/505754/?utm_source=habrahabr&utm_medium=rss&utm_campaign=505754
Нажмите здесь для печати.