JavaScript, който трябва да знаете за React — Част 1
Снимка от Ferenc Almasi на Unsplash
Първо, трябва да сте запознати с най-новата версия на JavaScript.
Дневен ред
Деклариране на променливи в ES6
Шаблонни низове
Параметри по подразбиране
Функции на стрелките
Транспилиране на ES6 — край на част 1
Част 2 ще включва:
ES6 Обекти и масиви
Деструктуриране
Обектни литерали
Операторът на разпространението
Обещания
ES6 модули
CommonJS
Функционален JavaScript — Част 3
Деклариране на променливи в ES6
const— константата е променлива, която не може да се променя.
Нека —JavaScript вече има обхват на лексикална променлива.
В JavaScript създаваме кодови блокове с фигурни скоби ({}).
С функции тези фигурни скоби блокират обхвата на променливите.
Ако идвате от други езици, може да приемете, че тези блокове също ще блокират обхвата на променливите. Това не е така. Ако променлива е създадена вътре в блок if/else, тази променлива няма обхват към блока:
var topic = “JavaScript”if (topic) {var topic = “React”console.log(‘block’, topic) // block React}console.log(‘global’, topic) // global React
Променливата topic вътре в блока if нулира стойността на topic.
С ключовата дума let можем да обхватим променлива във всеки кодов блок. Използването на let защитава
стойността на глобалната променлива:
var topic = “JavaScript”if (topic) {let topic = “React”console.log(‘block’, topic) // React}console.log(‘global’, topic) // JavaScript
Стойността на темата не се нулира извън блока.
Цикъл
Друга област, в която фигурните скоби не блокират обхвата на променливата, са цикли:
var div, container = document.getElementById(‘container’)for (var i = 0; i < 5; i++) {div = document.createElement(‘div’)div.onclick = function() {alert(‘This is box #’ + i)}container.appendChild(div)}
В този цикъл създавамепет div, които да се показват в контейнер.
На всеки div е присвоен манипулатор onclick, който създава поле за предупреждение за показване на индекса. Декларирането на i в for цикъла създава глобална променлива с име i и след това я повтаря, докато стойността й достигне 5.
Когато щракнете върху някое от тези полета, предупреждението казва, че i е равно на 5 за всички divs, тъй като текущата стойност за глобалното i е 5.
Декларирането на брояча на цикъл i с letвместо var блокира обхвата на i. Сега щракването върху което и да е поле ще покаже стойността за i, която е обхваната от итерацията на цикъла.
var div, container = document.getElementById(‘container’)for (let i = 0; i < 5; i++) {div = document.createElement(‘div’)div.onclick = function() {alert(‘This is box #: ‘ + i)}container.appendChild(div)}
Шаблонни низове
Шаблонните низове ни предоставят алтернатива наконкатенацията на низове. Те също ни позволяват да вмъкваме променливи в низ.
Традиционно конкатениране на низове с помощта на знаци плюс за съставяне на низ с помощта на променливи стойности и низове:
console.log(lastName + “, “ + firstName + “ “ + middleName)
С шаблон можем да създадем един низ и да вмъкнем стойностите на променливите, като ги оградим с ${ }:
Hello ${firstName},Thanks for ordering ${qty} tickets to ${event}.Order Details${firstName} ${middleName} ${lastName}${qty} x $${price} = $${qty*price} to ${event}You can pick your tickets up at will call 30 minutes before the show.Thanks,${ticketAgent}`
Сега, когато интервалът се разпознава като текст, можете да вмъкнете форматиран HTML, който е лесен за разбиране:
document.body.innerHTML = `<section><header><h1>The HTML5 Blog</h1></header><article><h2>${article.title}</h2>${article.body}</article><footer><p>copyright ${new Date().getYear()} | The HTML5 Blog</p></footer></section>`
Забележете, че можем да включим променливи за заглавието на страницата и текста на статията.
Параметри по подразбиране
Параметрите по подразбиране са включени в спецификацията на ES6, така че в случай, че не е предоставена стойност за аргумента, ще се използва стойността по подразбиране.
function logActivity(name = “Shane McConkey”, activity = “skiing”) {console.log(`${name} loves ${activity}`)}
Ако не са предоставени аргументи на функцията logActivity, тя ще работи правилно, като използва стойностите по подразбиране. Аргументите по подразбиране могат да бъдат всякакъв тип, не само низове:
var defaultPerson = {name: {first: “Shane”,last: “McConkey”},favActivity: “skiing”}function logActivity(p = defaultPerson) {console.log(`${p.name.first} loves ${p.favActivity}`)}
Функции със стрелки
Функциите със стрелки са полезна нова функция на ES6. С функциите със стрелки можете да създавате функции, без да използвате ключовата дума function.
Също така често не се налага да използвате ключовата дума return.
var lordify = function(firstname) {return `${firstname} of Canterbury`}console.log(lordify(“Dale”)) // Dale of Canterburyconsole.log(lordify(“Daryle”)) // Daryle of Canterbury
С функция със стрелка можем да опростим синтаксиса, както е показано в
var lordify = firstname => `${firstname} of Canterbury`
Със стрелката вече имаме цяла декларация на функция на един ред.
Ключовата дума за функция се премахва. Ние също премахваме return, защото стрелката сочи към това, което трябва да бъде върнато.
Друго предимство е, че ако функцията приема само един аргумент, можем да премахнем скобите около аргументите.
Повече от един аргумент трябва да бъде ограден със скоби:
// Oldvar lordify = function(firstName, land) {return `${firstName} of ${land}`}// Newvar lordify = (firstName, land) => `${firstName} of ${land}`console.log(lordify(“Dale”, “Maryland”)) // Dale of Marylandconsole.log(lordify(“Daryle”, “Culpeper”)) // Daryle of Culpeper
Можем да запазим това като едноредова функция, защото има само един оператор, който трябва да бъде върнат.
Повече от един ред трябва да бъде ограден със скоби:
// Oldvar lordify = function(firstName, land) {if (!firstName) {throw new Error(‘A firstName is required to lordify’)}if (!land) {throw new Error(‘A lord must have a land’)}return `${firstName} of ${land}`}// Newvar lordify = (firstName, land) => {if (!firstName) {throw new Error(‘A firstName is required to lordify’)}if (!land) {throw new Error(‘A lord must have a land’)}return `${firstName} of ${land}`}console.log(lordify(“Kelly”, “Sonoma”)) // Kelly of Sonomaconsole.log(lordify(“Dave”)) // ! JAVASCRIPT ERROR
Тези инструкции if/else са оградени със скоби, но все пак се възползват от по-краткия синтаксис на функцията стрелка. Редовните функции не блокират това.
Например, това става нещо друго в обратното извикване setTimeout, а не обектът tahoe:
var tahoe = {resorts: [“Kirkwood”, “Squaw”, “Alpine”, “Heavenly”, “Northstar”],print: function(delay = 1000) {setTimeout(function() {console.log(this.resorts.join(“, “))}, delay)}}tahoe.print() // Cannot read property ‘join’ of undefined
Тази грешка се генерира, защотосе опитва да използва метода .join за това, което е това. В този случай това е обектът прозорец. Алтернативно можем да използваме синтаксиса стрелка, за да защитим обхвата на това:
var tahoe = {resorts: [“Kirkwood”, “Squaw”, “Alpine”, “Heavenly”, “Northstar”],print: function(delay = 1000) {setTimeout(() => {console.log(this.resorts.join(“, “))}, delay)}}tahoe.print() // Kirkwood, Squaw, Alpine, Heavenly, Northstar
Това работи правилно и можем да съединим курортите със запетая. Внимавайте обаче винаги да имате предвид обхвата.
Функциите със стрелки не блокират обхвата на това:
var tahoe = {resorts: [“Kirkwood”, “Squaw”, “Alpine”, “Heavenly”, “Northstar”],print: (delay = 1000) => {setTimeout(() => {console.log(this.resorts.join(“,”))}, delay)}}tahoe.print() // Cannot read property resorts of undefined
Промяната на функцията за печат на функция със стрелка означава, че това всъщност е прозорецът.
За да проверим, нека променим съобщението на конзолата, за да преценим дали това е прозорецът:
var tahoe = {resorts: [“Kirkwood”, “Squaw”, “Alpine”, “Heavenly”, “Northstar”],print: (delay = 1000) => {setTimeout(() => {console.log(this === window)}, delay)}}tahoe.print()
Оценява се като вярно. За да коригираме това, можем да използваме обикновена функция:
var tahoe = {resorts: [“Kirkwood”, “Squaw”, “Alpine”, “Heavenly”, “Northstar”],print: function(delay = 1000) {setTimeout(() => {console.log(this === window)}, delay)}}tahoe.print() // false
Транспилиране на ES6
Не всички уеб браузъри поддържат ES6 и дори тези, които поддържат, не поддържат всичко.
Единственият начин да сте сигурни, че вашият ES6 код ще работи е да го конвертирате в ES5 кодпреди да го стартирате в браузъра. Този процес се нарича транспилиране. Един от най-популярните инструменти за транспилиране е Babel.
Транспилирането не се компилира: нашият код не е компилиран в двоичен код. Вместо това, той се транспилира в синтаксис, който може да се интерпретира от по-широк набор от браузъри. Пример:
const add = (x=5, y=10) => console.log(x+y);
След като стартираме транспилера на този код, ето как ще изглежда изходът:
“use strict”;var add = function add() {var x = arguments.length <= 0 || arguments[0] === undefined ?5 : arguments[0];var y = arguments.length <= 1 || arguments[1] === undefined ?10 : arguments[1];return console.log(x + y);};
Транспилерът добави декларация „use strict“ за работа в строг режим.
Променливите x и y са зададени по подразбиране с помощта на масива от аргументи.
Можете да транспилирате JavaScript директно в браузъра, като използвате вградения транспилатор Babel.
Просто включвате файла browser.js и всички скриптове с type=”text/babel” ще бъдат конвертирани (въпреки че Babel 6 е текущата версия на Babel, само CDN за Babel 5 ще работи):
<scriptsrc=”https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script><script src=”script.js” type=”text/babel”></script>
Транспилиране в браузъра
Този подход означава, че браузърът извършва транспилирането по време на изпълнение. Това не е добра идея за производство, защото ще забави много приложението ви.
Следете за още по темата!
Аз съм софтуерен инженер, специализиран най-вече във фронтенд хибридни мобилни/уеб приложения и PWA
