Привет, Хабр! Представляю вашему вниманию перевод статьи «7 трюков с отдыхом и распространением объектов JavaScript» Джоэл Томс.
Всем привет, на днях коллега по работе прислал мне ссылку на статью на английском языке, в которой перечислены разные методы работы с операторами rest и спреда.
Мне оно оказалось полезным и я решил его перевести.
Итак, начнем.
Операторы Rest и Spread можно использовать не только для объединения аргументов в массив и объединения массивов.
В этой статье вы найдете 7 наименее известных приемов использования операторов rest и спреда.
1. Добавление свойств
Клонирование объекта при добавлении нового объекта к клонированному объекту.В примере ниже мы клонируем объект пользователь и в клонированный объект пользовательспасс добавить недвижимость пароль .
const user = { id: 100, name: 'Howard Moon'} const userWithPass = { .user, password: 'Password!' } user //=> { id: 100, name: 'Howard Moon' } userWithPass //=> { id: 100, name: 'Howard Moon', password: 'Password!' }
2. Объединение объектов
Объекты часть1 И часть 2 слиться с объектом пользователь1 const part1 = { id: 100, name: 'Howard Moon' }
const part2 = { id: 100, password: 'Password!' }
const user1 = { .
part1, .
part2 }
//=> { id: 100, name: 'Howard Moon', password: 'Password!' }
Объекты также можно объединять, используя этот синтаксис.
const partial = { id: 100, name: 'Howard Moon' }
const user = { .
partial, id: 100, password: 'Password!' }
user //=> { id: 100, name: 'Howard Moon', password: 'Password!' }
3. Удаление свойства объекта
Свойства объекта можно удалить, используя комбинацию деструктуризации и оператора rest. В примере ниже мы деструктурируем объект отдых и снять с него имущество пароль .
const noPassword = ({ password, .
rest }) => rest
const user = {
id: 100,
name: 'Howard Moon',
password: 'Password!'
}
noPassword(user) //=> { id: 100, name: 'Howard moon' }
4. Динамическое удаление свойств
В примере ниже функция удалитьсвойство принимает опора в качестве аргумента.Используя имя свойства, переданное в качестве аргумента, мы динамически исключаем свойство из клонированного объекта.
const user1 = {
id: 100,
name: 'Howard Moon',
password: 'Password!'
}
const removeProperty = prop => ({ [prop]: _, .
rest }) => rest
// ---- ------
// \ /
// dynamic destructuring
const removePassword = removeProperty('password')
const removeId = removeProperty('id')
removePassword(user1) //=> { id: 100, name: 'Howard Moon' }
removeId(user1) //=> { name: 'Howard Moon', password: 'Password!' }
5. Упорядочивайте или сортируйте свойства по названию.
Иногда свойства в объекте расположены не в том порядке, в котором нам нужно.
Используя несколько приемов, мы можем переместить свойства в начало списка или, например, в середину.
const user3 = {
password: 'Password!',
name: 'Naboo',
id: 300
}
const organize = object => ({ id: undefined, .
object })
// -------------
// /
// move id to the first property
organize(user3)
//=> { id: 300, password: 'Password!', name: 'Naboo' }
Чтобы разместить пароль в конце концов, сначала нужно деструктурировать объект и удалить пароль , а затем добавьте его с помощью оператора распространения.
6. Свойства по умолчанию
Свойства по умолчанию — это свойства, которые будут установлены, если они отсутствуют в клонированном объекте.В примере ниже в объекте пользователь2 отсутствует поле кавычки .
Функция setDefaults в случае отсутствия поля кавычки устанавливает его по умолчанию со значением [] .
После вызова функции setDefaults (пользователь2) он возвращает нам свойство со значением кавычки: []
При звонке setDefaults (пользователь4) функция возвращает неизмененное значение, поскольку объект пользователь4 уже есть недвижимость кавычки const user2 = {
id: 200,
name: 'Vince Noir'
}
const user4 = {
id: 400,
name: 'Bollo',
quotes: ["I've got a bad feeling about this."]
}
const setDefaults = ({ quotes = [], .
object}) => ({ .
object, quotes })
setDefaults(user2)
//=> { id: 200, name: 'Vince Noir', quotes: [] }
setDefaults(user4)
//=> {
//=> id: 400,
//=> name: 'Bollo',
//=> quotes: ["I've got a bad feeling about this."]
//=> }
Вы также можете написать это так, если хотите, чтобы сначала отображались значения по умолчанию: const setDefaults = ({ .
object}) => ({ quotes: [], .
object })
7. Переименование свойств
Используя приемы, описанные выше, мы также можем создать функцию, которая будет переименовывать за нас свойства объекта.Представьте, что у нас есть объект, свойство ID которого записано в верхнем регистре, и нам нужно переименовать его в нижний регистр.
Начнем с удаления свойства ID из объекта.
Затем мы добавим его обратно с идентификатором имени во время клонирования объекта.
const renamed = ({ ID, .
object }) => ({ id: ID, .
object })
const user = {
ID: 500,
name: "Bob Fossil"
}
renamed(user) //=> { id: 500, name: 'Bob Fossil' }
8. Бонус.
Добавление свойства в зависимости от условия Спасибо @vinialbano за демонстрацию этого метода.
В этом примере мы добавляем поле пароль если только пароль == правда ! const user = { id: 100, name: 'Howard Moon' }
const password = 'Password!'
const userWithPassword = {
.
user, id: 100, .
(password && { password })
}
userWithPassword //=> { id: 100, name: 'Howard Moon', password: 'Password!' }
Заключение
Я попытался перечислить несколько менее известных методов использования операторов rest и спреда.Если вам известны какие-либо другие способы, не указанные в этом списке, напишите, пожалуйста, о них в комментариях.
Если статья оказалась для вас полезной, пожалуйста, сделайте репост ее своим друзьям и знакомым.
Теги: #Разработка сайта #JavaScript #отдых #распространение
-
Шпаргалка По Spring Boot Webclient
19 Oct, 24 -
Хорошая Ли Система Оценок?
19 Oct, 24 -
Семь Техник Эффективного Мозгового Штурма
19 Oct, 24 -
Ден Переводов
19 Oct, 24 -
Гиганты Раскрыли Секреты Мобильного Поиска
19 Oct, 24 -
Nintendo Wii Действительно Помогает Похудеть
19 Oct, 24
