Использование Array.Reduce для упрощения проверки объектов в JavaScript
Проверка объектов в JavaScript может быть утомительной, если у вас нет хорошей платформы. В этом посте мы будем использовать метод Array.reduce, чтобы валидация объекта выглядела как удовольствие!
Ручные проверки
Допустим, у нас есть объект user и несколько критериев, которые необходимо пройти, чтобы сделать его действительным. Вот свойства и критерии, которым он должен соответствовать:
- name - Длиннее 2 символов
- password - Длиннее 8 символов
- confirmPassword - Совпадает с паролем
- age - 18 или больше
Если бы мы применили ручной подход к валидации, мы могли бы написать что-то вроде этого:
const user = {
name: "Bob",
password: "kaBob123",
confirmPassword: "kaBob123",
age: 19,
};
const errors = [];
if (user.name.length < 2) {
errors.push("User's name is too short");
}
if (user.password.length < 8) {
errors.push("User's password is too short");
}
if (user.password !== user.confirmPassword) {
errors.push("Password and confirmation do not match");
}
if (user.age < 18) {
errors.push("User must be at least 18 years old");
}
const isValid = errors.length === 0;
Наш массив errors будет заполнен любыми ошибками проверки и, если длина массива будет больше 0, наша переменная isValid будет false.
Создание структуры проверки
Хотя для небольшого числа проверок это хорошо работает, я предпочитаю организовывать в массиве большие наборы правил и использовать метод reduce для определения наличия ошибок:
// Validation rules
const rules = [
{
test: (user) => user.name.length > 2,
message: "User's name is too short",
},
{
test: (user) => user.password.length >= 8,
message: "User's password is too short",
},
{
test: (user) => user.password === user.confirmPassword,
message: "Password and confirmation do not match",
},
{
test: (user) => user.age >= 18,
message: "User must be at least 18 years old",
},
];
// Test object against rules
const errors = rules.reduce((errs, rule) => {
const result = rule.test(user);
if (result === false) {
errs.push(rule.message);
}
return errs;
}, []);
const isValid = errors.length === 0;
Теперь у нас есть согласованный интерфейс, и мы можем добавлять правила, просто добавляя дополнительные объекты в наш массив!
Создание повторно используемой функции проверки
Чтобы расширить возможности нашего валидатора, мы можем создать функцию, которая принимает объект, набор правил и возвращает ошибки и статус валидации. Давайте создадим эту функцию.
const validate = (obj, rules) => {
const errors = rules.reduce((errs, rule) => {
const result = rule.test(obj);
if (result === false) {
errs.push(rule.message);
}
return errs;
}, []);
return {
errors,
isValid: errors.length === 0
}
}
Теперь мы можем использовать эту функцию везде, где нам нужно проверить объект! Давайте попробуем с нашим предыдущим примером и используем объект пользователя, который не совсем корректен:
// Invalid user object
const user = {
name: "Bob",
password: "kaBob123",
confirmPassword: "kaBob12",
age: 17,
};
// Validation rules
const rules = [
{
test: (user) => user.name.length > 2,
message: "User's name is too short",
},
{
test: (user) => user.password.length >= 8,
message: "User's password is too short",
},
{
test: (user) => user.password === user.confirmPassword,
message: "Password and confirmation do not match",
},
{
test: (user) => user.age >= 18,
message: "User must be at least 18 years old",
},
];
// Validation function
const validate = (obj, rules) => {
const errors = rules.reduce((errs, rule) => {
const result = rule.test(obj);
if (result === false) {
errs.push(rule.message);
}
return errs;
}, []);
return {
errors,
isValid: errors.length === 0,
};
};
// Testing our object
const result = validate(user, rules);
// {
// errors:
// [ 'Password and confirmation do not match',
// 'User must be at least 18 years old' ],
// isValid: false
// }
Надеюсь, вам понравилось это использование Array.reduce, чтобы сделать наши проверки объектов более последовательными и приятными.
