7 удобных трюков с rest и spread, которые значительно упростят ваш процесс написания кода.
\n\n\n\n\n\n\n\nЕсли у вас есть время, то советую сначала прочитать Оператор spread и rest параметры в JavaScript
\n\n\n\nRest параметры и оператор spread можно использовать не только для простой работы с остаточными аргументами и для создании массивов.
\n\n\n\nНиже вы узнаете 7 малоизвестных трюков с использованием вышеупомянутых операторов в JavaScript.
\n\n\n\nВы можете клонировать объект, параллельно добавляя дополнительные свойства клонированному объекту.
\n\n\n\nВ этом примере user клонирован и к нему добавлен password в userWithPass.
const user = { id: 100, name: 'Howard Moon'}\nconst userWithPass = { ...user, password: 'Password!' }\n\nuser //=> { id: 100, name: 'Howard Moon' }\nuserWithPass //=> { id: 100, name: 'Howard Moon', password: 'Password!' }Ещё вы можете слить два объекта в один новый.
\n\n\n\npart1 и part2 сливаются в user1.
const part1 = { id: 100, name: 'Howard Moon' }\nconst part2 = { id: 100, password: 'Password!' }\n\nconst user1 = { ...part1, ...part2 }\n//=> { id: 100, name: 'Howard Moon', password: 'Password!' }Объекты также можно слить и с таким синтаксисом:
\n\n\n\nconst partial = { id: 100, name: 'Howard Moon' }\nconst user = { ...partial, id: 100, password: 'Password!' }\n\nuser //=> { id: 100, name: 'Howard Moon', password: 'Password!' }Свойства можно удалить используя деструктуризацию в комбинации с rest оператором. Тут мы деструктуризируем password и остальные свойства объекта отдаются как rest.
const noPassword = ({ password, ...rest }) => rest\nconst user = {\n id: 100,\n name: 'Howard Moon',\n password: 'Password!'\n}\n\nnoPassword(user) //=> { id: 100, name: 'Howard moon' }Функция removeProperty берёт props как аргумент. Используя вычисление имен свойств prop может быть исключен динамически из объекта клона.
const user1 = {\n id: 100,\n name: 'Howard Moon',\n password: 'Password!'\n}\nconst removeProperty = prop => ({ [prop]: _, ...rest }) => rest\n// ---- ------\n// \\ /\n// dynamic destructuring\n\nconst removePassword = removeProperty('password')\nconst removeId = removeProperty('id')\n\nremovePassword(user1) //=> { id: 100, name: 'Howard Moon' }\nremoveId(user1) //=> { name: 'Howard Moon', password: 'Password!' }Иногда свойства находятся не в нужном нам порядке. Используя несколько трюков мы можем поставить нужные свойства в самый верх списка или же наоборот, в самый низ.
\n\n\n\nЧтобы отправить id на первое место, добавьте id: undefined новому объекту перед оператором расширения.
const user3 = {\n password: 'Password!',\n name: 'Naboo',\n id: 300\n}\n\nconst organize = object => ({ id: undefined, ...object })\n// -------------\n// /\n// move id to the first property\n\norganize(user3)\n//=> { id: 300, password: 'Password!', name: 'Naboo' }Чтобы отправить password на последнее место, то сначала деструктуризируйте password из object. Далее, выставьте password за оператором расширения.
const user3 = {\n password: 'Password!',\n name: 'Naboo',\n id: 300\n}\n\nconst organize = ({ password, ...object }) =>\n ({ ...object, password })\n// --------\n// /\n// move password to last property\n\norganize(user3)\n//=> { name: 'Naboo', id: 300, password: 'Password!' }Дефолтные свойства это значения, которые будут выставлены только когда они не включены в оригинальный объект.
\n\n\n\nВ нашем примере user2 не включает в себя quotes. Функция setDefaults проверяет есть ли в объектах quotes, если нет, то он будет выставлен на [].
Вызывая setDefaults(user2), отдающееся значение будет включать в себя quotes: [].
Вызывая setDefaults(user4) ничего не поменяется, потому что user4 уже содержит quotes.
const user2 = {\n id: 200,\n name: 'Vince Noir'\n}\n\nconst user4 = {\n id: 400,\n name: 'Bollo',\n quotes: [\"I've got a bad feeling about this...\"]\n}\n\nconst setDefaults = ({ quotes = [], ...object}) =>\n ({ ...object, quotes })\n\nsetDefaults(user2)\n//=> { id: 200, name: 'Vince Noir', quotes: [] }\n\nsetDefaults(user4)\n//=> {\n//=> id: 400,\n//=> name: 'Bollo',\n//=> quotes: [\"I've got a bad feeling about this...\"]\n//=> }Это также может быть написано таким образом:
\n\n\n\nconst setDefaults = ({ ...object}) => ({ quotes: [], ...object })Совмещая методики описанные выше, мы можем создать функцию которая переименовывает свойства.
\n\n\n\nПредставьте, что у вас есть несколько объектов с ID в верхнем регистре, которые должны быть в нижнем. Начните с деструктуризации ID из объекта. Далее, верните его в объект как id.
const renamed = ({ ID, ...object }) => ({ id: ID, ...object })\n\nconst user = {\n ID: 500,\n name: \"Bob Fossil\"\n}\n\nrenamed(user) //=> { id: 500, name: 'Bob Fossil' }Спасибо @vinialbano за то, что указал на то, что вы можете ещё и добавлять свойства в зависимости от условий. В этом примере, password будет добавлен только если password определен.
const user = { id: 100, name: 'Howard Moon' }\nconst password = 'Password!'\nconst userWithPassword = {\n ...user,\n id: 100,\n ...(password && { password })\n}\n\nuserWithPassword //=> { id: 100, name: 'Howard Moon', password: 'Password!' }7 удобных трюков с rest и spread, которые значительно упростят ваш процесс написания кода.
\n","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/01/restspreadkjnkjn.jpg"},"interesting":[{"title":"7 полезных уловок с rest параметрами и spread операторами на JavaScript объектах","slug":"7-poleznyh-ulovok-s-rest-parametrami-i-spread-operatorom-na-javascript-objectah","type":"js"},{"title":"Оператор spread и rest параметры в JavaScript","slug":"operator-spread-i-rest-parametry-v-javascript","type":"js"}]}},"staticQueryHashes":["3576131997","63159454"]}