По факту эти техники сохранят вам кучу времени.
\n\n\n\nВозможно большинство из них вам уже знакомо, возможно некоторые нет. Но в любом случае, они будут вам крайне полезны.
\n\n\n\nЭто переводы трех статей, которые действительно помогут вам писать лучше, быстрее и продуктивнее.
\n\n\n\n\n\n\n\nВот простой способ очистки или сокращения массива его переназначения. Вы можете просто поменять его length свойство:
const arr = [11, 22, 33, 44, 55, 66];\n // Сокращение\narr.length = 3;\nconsole.log(arr); //=> [11, 22, 33]\n // Очистка\narr.length = 0;\nconsole.log(arr); //=> []\nconsole.log(arr[2]); //=> undefinedВелик шанс того, что вы уже используете конфигурацию объектов, когда вам надо передать переменный набор аргументов для функции, например как тут:
\n\n\n\ndoSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });\nfunction doSomething(config) { \n const foo = config.foo !== undefined ? config.foo : 'Hi'; \n const bar = config.bar !== undefined ? config.bar : 'Yo!'; \n const baz = config.baz !== undefined ? config.baz : 13; // ...}Это старый, но эффективный паттерн, который пытается имитировать именованные параметры в JavaScript. Вызов функции выглядит хорошо. С другой стороны, объект конфигурация содержит логику, которая занимает ну уж слишком много писанины. А вот помощью ES2015 деструктуризации, вы можете обойти этот недостаток:
\n\n\n\nfunction doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) { // ...}\nИ если вам нужно сделать конфиг объекта опциональным, но это тоже очень просто:\nfunction doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) { // ...}Назначайте элементы массива индивидуальным переменным с помощью деструктуризации объектов:
\n\n\n\nconst csvFileLine = '1997,John Doe,US,john@doe.com,New York';\nconst { 2: country, 4: state } = csvFileLine.split(',');Да, есть возможно обождать множественную асинхронную функцию, используя Promise.all:
await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])\nВы можете создать 100% пустой объект, который не будет наследовать какие-либо свойства или методы из изначального объекта (например, constructor, toString() и так далее).
const pureObject = Object.create(null);\nconsole.log(pureObject); //=> {}\nconsole.log(pureObject.constructor); //=> undefined\nconsole.log(pureObject.toString); //=> undefined\nconsole.log(pureObject.hasOwnProperty); //=> undefined\nJSON.stringify может не просто конвертировать объект в строку. А так же может сделать красивую выдачу JSON:
const obj = {\nfoo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: ‘Hello’ } }\n};\n// Третий параметр это чисто пробелов, используемое для украшения JSON вывода\nJSON.stringify(obj, null, 4);\n// =>”{\n// => “foo”: {\n// => “bar”: [\n// => 11,\n// => 22,\n// => 33,\n// => 44\n// => ],\n// => “baz”: {\n// => “bing”: true,\n// => “boom”: “Hello”\n// => }\n// => }\n// =>}”Используя сеты ES2015 вместе с оператором расширения, вы легко можете удалить дублирующиеся элементы из массива:
\n\n\n\nconst removeDuplicateItems = arr => […new Set(arr)];\nremoveDuplicateItems([42, 'foo', 42, 'foo', true, true]);\n//=> [42, \"foo\", true]Вообще слияние многоуровневых массивов довольно тривиально с помощью оператора расширения:
\n\n\n\nconst arr = [11, [22, 33], [44, 55], 66];\nconst flatArr = [].concat(…arr); //=> [11, 22, 33, 44, 55, 66]К сожалению, трюк выше сработает только на двухуровневых массивах. Но с рекурсивными запросами, мы можем применить это для массивов с более чем двумя уровнями:
\n\n\n\nfunction flattenArray(arr) {\n const flattened = [].concat(...arr);\n return flattened.some(item => Array.isArray(item)) ? flattenArray(flattened) : flattened\n;}\nconst arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];\nconst flatArr = flattenArray(arr);\n//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]Используйте деструктуризацию массивов для перетасовки переменных. Тут все будет понятно из кода:
\n\n\n\nlet a = 'world', b = 'hello'\n[a, b] = [b, a]\nconsole.log(a) // -> hello\nconsole.log(b) // -> world\n// Да, это магия, детка!И снова, деструктуризация массивов просто шедевральна. Вместе с async/await она делает невообразимые вещи.
const [user, account] = await Promise.all([\n fetch('/user'),\n fetch('/account')\n])Для всех кто любит дебаггинг с помощью console.log, вот вам крутой пример и да, я слышал про console.table:
const a = 5, b = 6, c = 7\nconsole.log({ a, b, c })\n// выдаёт объект:\n// {\n// a: 5,\n// b: 6,\n// c: 7\n// }Синтаксис может быть гораздо компактнее для операций с массивами.
\n\n\n\n// Найти максимальное значение\nconst max = (arr) => Math.max(…arr);\nmax([123, 321, 32]) // вывод: 321\n// Сумма массива\nconst sum = (arr) => arr.reduce((a, b) => (a + b), 0)\nsum([1, 2, 3, 4]) // вывод: 10Вообще оператор расширения может использоваться вместо concat:
const one = ['a', 'b', 'c']\nconst two = ['d', 'e', 'f']\nconst three = ['g', 'h', 'i']\n// старый способ #1\nconst result = one.concat(two, three)\n// старый способ #2\nconst result = [].concat(one, two, three)\n// новый\nconst result = [...one, ...two, ...three]Клонирование массивов и объектов с легкостью:
\n\n\n\nconst obj = { …oldObj }\nconst arr = [ …oldArr ]Создание функции и ее вызов можно сделать более читабельным с помощью деструктуризации:
\n\n\n\nconst getStuffNotBad = (id, force, verbose) => {\n ...do stuff\n}\nconst getStuffAwesome = ({ id, name, force, verbose }) => {\n ...do stuff\n}\n// Где то там в коде, что такое вообще true, true и к чему оно?\ngetStuffNotBad(150, true, true)\n// А вот уже по другому... I ❤ JS!!!\ngetStuffAwesome({ id: 150, force: true, verbose: true })И третья, бонусная статья аж 2013-го года. Все эти практики уже давно знакомы, но все же самые интересные из них не помешает закрепить.
\n\n\n\n\n\n\n\nЯ реально не люблю блоки if/else и это довольно полезный трюк для вызова нужной функции, основываясь на булиных значениях.
// Скукота\nif (success) {\n obj.start();\n} else {\n obj.stop();\n}\n\n// По-хипстерски\nvar method = (success ? 'start' : 'stop');\nobj[method]();Известный факт, что строки подобны другим строкам. И рано или поздно вы бы захотели связать две или более из них. Мне действительно не нравится работа с плюсом, по-этому join() приходит на помощь.
['first', 'name'].join(' '); // = 'first name';\n\n['milk', 'coffee', 'sugar'].join(', '); // = 'milk, coffee, sugar'JavaScript сам по себе не знает, что содержит объект. Иногда вы получаете его как аргумент функции, в другой раз вы можете прочесть его из сети или из файла конфигурации. В любом случае, вы можете использовать || оператор, чтобы использовать второй аргумент, если первый выдает false.
// Ставим по дефолту 'No name' когда myName пуст (или null, или undefined)\nvar name = myName || 'No name';\n\n\n// Убеждаемся, есть ли у нас объект options\nvar doStuff = function(options) {\n options = options || {};\n // ...\n};Схожий с дефолтным оператором, этот оператор супер полезен. Он исключает буквально все if запросы и делает код куда лучше.
// Скучно\nif (isThisAwesome) {\n alert('yes'); // нет\n}\n\n// Отлично\nisThisAwesome && alert('yes');\n\n// Ещё один крутой подход\nvar aCoolFunction = undefined;\naCoolFunction && aCoolFunction(); // не запустится и не закрэшитсяПо факту эти техники сохранят вам кучуко времени. Возможно большинство из них вам уже знакомо, возможно некоторые нет. Но в любом случае, они будут вам крайне полезны.
\n","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2020/10/DglYtvO7Bn0-5.jpg"},"interesting":[{"title":"Промисы в JavaScript для чайников","slug":"promisy-v-javascript-dlya-chainikov","type":"js"},{"title":"Самые необходимые строковые и числовые методы в JavaScript","slug":"samie-neobhodimie-strokovie-i-chislovie-metody-v-javascript","type":"js"},{"title":"Погружаемся в работу с children на React","slug":"pogruzhaemsya-v-raboty-s-children-na-react","type":"js"}]}},"staticQueryHashes":["3576131997","63159454"]}