11 стенограми на JavaScript и TypeScript, които трябва да знаете за ефективно кодиране

JavaScript и TypeScript са много популярни езици за програмиране в областта на уеб разработката. И двете имат обширни набори от функции и много преки пътища към синтаксиса, които значително допринасят за подобряване на ефективността на кодирането.

Научете как да стегнете своя код и да се възползвате максимално от тези езици с някои полезни преки пътища.

1. Тернарен оператор

Тернарният оператор предлага кратък и ефективен синтаксис за изразяване на условни изрази. Той има три части: условие, израз, който да се изпълни, ако условието се изчисли като вярно, и израз, който да се изпълни, ако е невярно.

Този оператор се оказва особено полезен при вземане на решения въз основа на условия и съответно присвояване на различни стойности.

Разгледайте следния пример:

конст възраст = 20;
конст ageType = възраст >= 18? "възрастен": "дете";
конзола.log (ageType); // Изход: "Възрастен"

Този пример използва троичния оператор, за да провери дали променливата възраст е по-голямо или равно на 18. Ако е така, кодът присвоява стойността Възрастен към променливата ageType, в противен случай присвоява стойността "Дете".

2. Шаблонни литерали

Литералите на шаблона предлагат мощен и ефективен начин за форматиране на JavaScript низове и включване на променливи или изрази в тях. За разлика от традиционното конкатениране на низове с помощта на единични или двойни кавички, шаблонните литерали използват обратни отметки (`).

Този уникален синтаксис предоставя няколко предимства при работа с низове. Разгледайте следния пример, който демонстрира използването на шаблонни литерали:

конст име = "Алиса";
конст поздрав = `Здравей, ${име}!`;
конзола.log (поздрав); // Изход: "Здравей, Алис!"

Примерът включва име променлива в литерала на шаблона с помощта ${}. Това ви позволява лесно да конструирате динамични низове.

3. Nullish Coalescing Operator

Нулевият коалесцентен оператор (??) осигурява удобен начин за присвояване на стойности по подразбиране, когато една променлива е едно от двете нула или недефиниран. Той връща десния операнд, ако левият операнд е нула или недефиниран.

Разгледайте следния пример:

конст потребителско име = нула;
конст displayName = потребителско име?? "Гост";
конзола.log (показвано име); // Изход: "Гост"

В този пример, тъй като променливата потребителско име е нула, операторът за нулево обединяване присвоява стойността по подразбиране Гост към променливата показвано име.

4. Оценка на късо съединение

Оценката на късо съединение ви позволява да пишете кратки условни изрази, като използвате логически оператори като && и ||. Той се възползва от факта, че логическият оператор ще спре да оценява изрази веднага щом може да определи резултата.

Разгледайте следния пример:

конст име = "Джон";
конст поздрав = име && `Здравей, ${име}`;
конзола.log (поздрав); // Изход: "Здравей, Джон"

Този пример ще оцени само израза „Здравей, ${name}“. ако променливата име има истинска стойност. В противен случай той прави късо съединение и присвоява стойността на име себе си към променливата поздрав.

5. Съкращение за присвояване на свойства на обект

Когато създавате обекти, имате възможност да използвате съкратена нотация, която присвоява променливи като свойства със същото име.

Тази съкратена нотация елиминира необходимостта от излишно посочване както на името на свойството, така и на името на променливата, което води до по-чист и по-сбит код.

Разгледайте следния пример:

конст първо име = "Джон";
конст фамилно име = "Сърна";
конст person = { firstName, lastName };
конзола.log (човек); // Изход: { firstName: "John", lastName: "Doe" }

Този пример присвоява свойствата първо име и фамилия използвайки стенографско обозначение.

6. Верижно свързване по избор

Вериги по избор (?.) ви позволява да получите достъп до вложени свойства на обект, без да се притеснявате за междинни нулеви или недефинирани стойности. Ако свойство във веригата е null или недефинирано, изразът прекъсва и връща недефиниран.

Разгледайте следния пример:

конст потребител = { име: "Алиса", адрес: { град: "Ню Йорк", държава: "САЩ" }};
конст страна = потребителски.адрес?.държава;
конзола.log (държава); // Изход: "САЩ"

В примера по-горе незадължителният оператор за верижно свързване гарантира, че кодът няма да изведе грешка, ако адрес собственост или държава имот липсва.

7. Деструктуриране на обект

Деструктуриране на обект е мощна функция в JavaScript и TypeScript, която ви позволява да извличате свойства от обекти и да ги присвоявате на променливи с помощта на кратък синтаксис.

Този подход опростява процеса на достъп и манипулиране на свойствата на обекта. Нека да разгледаме по-отблизо как работи деструктурирането на обекти с пример:

конст потребител = { име: "Джон", възраст: 30 };
конст { име, възраст } = потребител;
конзола.log (име, възраст); // Изход: "Джон" 30

Този пример извлича променливите име и възраст от потребител обект чрез деструктуриране на обект.

8. Оператор на разпространението

Операторът за разпространение (...) ви позволява да разширявате елементи на итерируем, като масив или обект, в отделни елементи. Полезно е за комбиниране на масиви или създаване на плитки техни копия.

Разгледайте следния пример:

конст числа = [1, 2, 3];
конст newNumbers = [...числа, 4, 5];
конзола.log (нови числа); // Изход: [1, 2, 3, 4, 5]

В горния пример операторът за разпространение разширява числа масив на отделни елементи, които след това се комбинират с 4 и 5 за създаване на нов масив, нови Числа.

9. Обектен цикъл Стенография

Когато итерирате върху обекти, можете да използвате за...в цикъл в комбинация с деструктуриране на обект за удобно итериране на свойствата на обекта.

Помислете за този пример:

конст потребител = { име: "Джон", възраст: 30 };
за (конст [ключ, стойност] наОбект.entries (потребител)) { 
конзола.log(`${ключ}: ${value}`);
}
// Изход:
// име: Джон
// възраст: 30

В примера по-горе, Object.entries (потребител) връща масив от двойки ключ-стойност, които след това всяка итерация деструктурира в променливите ключ и стойност.

10. Array.indexOf Стенограма с помощта на побитовия оператор

Можете да замените повиквания към Array.indexOf метод със стенограма, използваща побитовия оператор ~ за да провери дали даден елемент съществува в масив. Стенограмата връща индекса на елемента, ако бъде намерен или -1 ако не се намери.

Разгледайте следния пример:

конст числа = [1, 2, 3];
конст индекс = ~числа.indexOf(2);
конзола.log (индекс); // Изход: -2

В примера по-горе, ~числа.indexOf (2) се завръща -2 защото 2 е на индекс 1, а побитовият оператор отрича индекса.

11. Прехвърляне на стойности към Boolean With!!

Да се изрично преобразуване на стойност към булево, можете да използвате оператора за двойно отрицание (!!). Той ефективно преобразува истинска стойност в вярно и фалшива стойност на невярно.

Разгледайте следния пример:

конст стойност1 = "Здравейте";
конст стойност2 = "";
конзола.log(!!стойност1); // Изход: вярно
конзола.log(!!стойност2); // Изход: невярно

В примера по-горе, !!стойност1 се завръща вярно тъй като низът Здравейте е вярно, докато !!стойност2 се завръща невярно защото празният низ е фалшив.

Ефективност и четливост на кода за отключване

Като използвате тези съкращения в JavaScript и TypeScript, можете да подобрите ефективността на кодирането си и да създадете по-сбит и четим код. Независимо дали се използва троичен оператор, оценка на късо съединение или се използва силата на шаблонните литерали, тези стенограми предоставят ценни инструменти за ефективно кодиране.

Освен това, стенограмата на присвояването на свойства на обекта, незадължително верижно свързване и деструктуриране на обект опростяват работата с обекти, докато операторът за разпръскване и стенограмите на масива позволяват ефективен масив манипулация. Овладяването на тези стенограми ще ви направи по-продуктивен и ефективен разработчик на JavaScript и TypeScript.