Изпробвайте тези страхотни нови функции, за да направите кода си още по-добър.
Поддържането на последните новини в общността на интерфейса може да бъде трудно. Нещата се развиват бързо. Нови рамки, нови библиотеки, нови функции и много повече.
Ще се опитам да направя кратко резюме на някои от страхотните нови функции, които JavaScript предлага за разработчиците на интерфейса.
Верижно свързване по избор
Незадължителното свързване е малко, но много полезно допълнение към езика. Това прави кода, който трябва да напишете, малко по-кратък и по-чист. По принцип ви позволява да проверите дали съществуват стойности в даден обект:
const someObject = {
profile: {
firstName: 'Nicky',
lastName: 'Christensen',
country: 'Denmark'
}
}
// with optional chaining:
if (someObject?.profile?.firstName){
console.log('Name is 1: ', someObject.profile.firstName)
}// navigate object graph safely
// old style without optional chaining:
if (someObject && someObject.profile && someObject.profile.firstName){
console.log('Name is 2: ', someObject.profile.firstName)
}
// with optional chaining that fails as name doesnt exist:
if (someObject?.profile?.name){
console.log('Name is 3: ', someObject.profile.firstName)
}// navigate object graph safely
Както можете да видите, единствените два console.logs(), които се отпечатват, са “Името е 1” и “Името е 2”. Третият не се отпечатва, тъй като „име“ не съществува в „профил“
Преди незадължителното свързване трябваше да направим като в пример 2, което може да бъде донякъде тромаво и дълго за писане.
Нулево сливане
В последната версия на ECMAscript се появи нов логически оператор, който връща своя операнд от дясната страна, когато операндът от лявата му страна е нулев или недефиниран. Можете да използвате Nullish coalescing „??“ когато трябва да зададете стойности по подразбиране. Често, когато правим това, използваме „||“ оператор, който, разбира се, все още можете да използвате. „??“ има някои други предимства, които могат да ви бъдат от полза, когато искате да избегнете странични ефекти.
const falsy = false;
const emptyString = '';
const nullish = null;
const uDefined = undefined;
console.log('1', falsy ?? 'Some string');
console.log('2', emptyString ?? 'Default string') //"" (as the empty string is not null or undefined)
console.log('3', nullish ?? 'Default string')
console.log('4', uDefined ?? 'Default string')
console.log('-------');
console.log('1.1', falsy || 'Some string');
console.log('2.2', emptyString || 'Default string')
console.log('3.3', nullish || 'Default string')
console.log('4.4', uDefined || 'Default string')
Можете да опитате да си поиграете с него в тази цигулка, така че разликата между || и ?? оператор: https://jsfiddle.net/96b4zw71/
Динамичен импорт
Последната версия на ECMAScript въвежда динамично импортиране на модули. Това позволява модулите да се зареждат асинхронно. Това също е известно като разделяне на код, нещо, което правим чрез инструменти за изграждане от години.
let someAsyncModule = await import('/modules/my-module.ts');
Promise.allSettled()
От години използваме Promise.all(), за да изчакаме всички обещания да бъдат разрешени. Проблемът с Promise.all() беше, че не знаехме кои обещания действително са разрешени и кои обещания са неуспешни.
Методът promise.allSettled() ви позволява да наблюдавате резултатите от набор от обещания, независимо дали са изпълнени или отхвърлени, което може да бъде наистина полезно.
const promise1 = Promise.resolve("OK, I resolved");
const promise2 = Promise.reject("OH no, I was rejected");
const promise3 = Promise.resolve("After I was rejected");
Promise.allSettled([promise1, promise2, promise3])
.then((results) => console.log(results))
.catch((err) => console.log("error: " + err));
Вижте тази цигулка, за да видите как се използва: https://jsfiddle.net/x2h01z7p/1/
Оператори за разпространение
От известно време имахме достъп до оператори на разпространение. Това е особено полезно, когато например искате да обедините масиви или обекти. Преди операторите за разпространение можем да използваме array.concat за обединяване на масиви, сега можем да направим това още по-просто:
const arr1 = [1,2,3]; const arr2 = [4,5,6]; const arr3 = [...arr1, ...arr2] //arr3 ==> [1,2,3,4,5,6]
За обекти можем да направим:
const basePerson = {
name: 'Nicky C',
country: 'DK'
}
const footballerPerson = {
...basePerson,
team: 'Man UTD',
shirtNumber: '11'
}
console.log(footballerPerson) //Will output a merge of the two objects
Опитайте тук: https://jsfiddle.net/s86knh72/
Деструктуриране на обект
Като използвате преструктуриране на обект, можете да разархивирате стойности от обект доста лесно
const basePerson = {
name: 'Nicky C',
country: 'DK'
}
const footballerPerson = {
...basePerson,
team: 'Man UTD',
shirtNumber: '11'
}
const {team, shirtNumber} = footballerPerson;
console.log(team, shirtNumber); //ManUtd, 11
Опитайте тук: https://jsfiddle.net/2z3rp18v/
Благодаря, че прочетохте и се надявам, че сте харесали статията, ако е така, моля, помогнете ми да ме подкрепите, като натиснете бутона за пляскане или се абонирате.
Ако все още не сте член на Medium, помислете дали да не станете! Получавате достъп до страхотно съдържание като това от хиляди автори! Помага за подпомагане на писатели и вие също имате шанс да печелите пари с писането си.Регистрирайте се тук само за $5 на месец.
Ако искате да се абонирате за цялото ми съдържание, можете да го направите тук
Ако искате да ме настигнете някой път, последвайте ме в Twitter| LinkedIn или просто посетете моя уебсайт.
Повече съдържание в plainenglish.io. Регистрирайте се за нашиябезплатен седмичен бюлетин. Получете изключителен достъп до възможности за писане и съвети в нашата общност Discord.
