Современный JavaScript

0 0

Javascript является самым популярным языком скриптов, который используется как в стороне сервера, так и на стороне клиента. Его основателем является ECMA (Европейская ассоциация производителей компьютеров), которая отвечает за определение стандартов для языков скриптов. В основном он используется при разработке веб-приложений. В первые годы javascript не играл очень важной роли в разработке, поскольку имел некоторые недостатки. Но после 2015 года ECMA смогла внести некоторые изменения и выпустила новую версию javascript, и она оказалась очень хорошей. После этого каждый год они обновляют javascript и эти обновленные версии javascript, известные как современный javascript. Давайте углубимся в суть этих изменений.

let

Если вы используете ключевое слово let в своем коде для определения переменной, это означает, что эта переменная видна только в ее области видимости. Область видимости означает, что если вы определяете ее внутри метода, она принадлежит только этому конкретному методу, если вы используете ее внутри цикла for, эта переменная принадлежит только этому циклу, и если вы определяете переменную внутри класса, эта переменная принадлежит только этому классу, вне его области, вы не можете получить доступ к этой переменной. См. следующий пример кода.

Пример 01: — переменная без ключевого слова let

Современный JavaScript

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

JavaScript for(var i=0; i<10; i++){ var k=i; console.log(“->->->” +i); } console.log(“last value for i =”+i); console.log(“inner value for k =”+k);

123456for(var i=0; i<10; i++){    var k=i;    console.log(“->->->” +i);}console.log(“last value for i =”+i);console.log(“inner value for k =”+k);

Выходные значения:

JavaScript ->->->0 ->->->1 ->->->2 ->->->3 ->->->4 ->->->5 ->->->6 ->->->7 ->->->8 ->->->9 last value for i =10 inner value for k =9

123456789101112->->->0->->->1->->->2->->->3->->->4->->->5->->->6->->->7->->->8->->->9last value for i =10inner value for k =9

Пример 02: — переменная с ключевым словом let

JavaScript for(var j=0; j<10; j++){ let p=j; console.log(“->->->” +j); } console.log(“last value for j = “+j); console.log(“inner value for p = “+p);

123456for(var j=0; j<10; j++){    let p=j;    console.log(“->->->” +j);}console.log(“last value for j = “+j);console.log(“inner value for p = “+p);

Выходные значения:

JavaScript ->->->0 ->->->1 ->->->2 ->->->3 ->->->4 ->->->5 ->->->6 ->->->7 ->->->8 ->->->9 last value for j = 10 E:LP_TrainingModernJS1-scope.js:13 console.log(“inner value for p = “+p); ^ ReferenceError: p is not defined

123456789101112131415->->->0->->->1->->->2->->->3->->->4->->->5->->->6->->->7->->->8->->->9last value for j = 10E:LP_TrainingModernJS1-scope.js:13console.log(“inner value for p = “+p);^ReferenceError: p is not defined

Мы используем переменную p как let, а затем она выдает ошибку ReferenceError, говоря, что “p не определено”. Это очень важно, когда вы пишете длинный код. Поскольку код длинный, может быть возможность использовать то же имя для другой переменной. В таком сценарии вы можете получить неожиданные результаты из-за изменения переменной и код может стать очень запутаным. Поэтому в подобной ситуации очень важно определить переменную с помощью let. Это гарантирует, что переменная не видна за пределами ее области видимости.

const

const похожа на let, она также не разрешает доступ за пределами своей области видимости. Но дополнительная функция, которую имеет const, заключается в том, что она может защитить переменную от изменения ее начального значения и работает как константа. Вы поймете это, посмотрев на следующий пример.

Пример 01:

JavaScript for(var i=0; i<10; i++){ const k=i; console.log(“->->->” +i); } console.log(“last value for i =”+i); console.log(“inner value for k =”+k);

123456for(var i=0; i<10; i++){    const k=i;    console.log(“->->->” +i);}console.log(“last value for i =”+i);console.log(“inner value for k =”+k);

Выходные значения:

JavaScript ->->->0 ->->->1 ->->->2 ->->->3 ->->->4 ->->->5 ->->->6 ->->->7 ->->->8 ->->->9 last value for i =10 E:LP_TrainingModernJS2-const.js:6 console.log(“inner value for k =”+k); ^ ReferenceError: k is not defined

123456789101112131415->->->0->->->1->->->2->->->3->->->4->->->5->->->6->->->7->->->8->->->9last value for i =10E:LP_TrainingModernJS2-const.js:6console.log(“inner value for k =”+k);                                  ^ReferenceError: k is not defined

Доступ извне запрещён.

Пример 02: — Когда вы используете переменную const без ее инициализации

JavaScript const k; for(var i=0; i<10; i++){ k=i; console.log(“->->->” +i); } console.log(“last value for i =”+i); console.log(“inner value for k =”+k);

1234567const k;for(var i=0; i<10; i++){    k=i;    console.log(“->->->” +i);}console.log(“last value for i =”+i);console.log(“inner value for k =”+k);

Выходные значения:

JavaScript const k; ^ SyntaxError: Missing initializer in const declaration

123const k;      ^SyntaxError: Missing initializer in const declaration

Бросается исключение SyntaxError, говоря, что “Missing initializer in const declaration”. Это означает, что если мы определяем переменную с помощью ключевого слова const, она должна быть инициализирована в тот же момент.

Пример 03: Присвоение значения переменной const после ее объявления

JavaScript const k=0; for(var i=0; i<10; i++){ k=i; console.log(“->->->” +i); } console.log(“last value for i =”+i); console.log(“inner value for k =”+k);

1234567const k=0;for(var i=0; i<10; i++){    k=i;    console.log(“->->->” +i);}console.log(“last value for i =”+i);console.log(“inner value for k =”+k);

Выходные значения:

JavaScript k=i; ^ TypeError: Assignment to constant variable.

123k=i;      ^TypeError: Assignment to constant variable.

Если мы пытаемся присвоить значение переменной const после ее объявления, получим ошибку TypeError с упоминанием “Assignment to constant variable”. У const есть возможность защитить переменную. Но это не защищает массив или объект. См. cледующий пример.

Пример 04:

JavaScript const city = ‘Kalutara’; city=’Colombo’; console.log(city);

123const city = ‘Kalutara’;city=’Colombo’;console.log(city);

Выходные значения:

JavaScript city=’Colombo’; ^ TypeError: Assignment to constant variable.

123city=’Colombo’;    ^TypeError: Assignment to constant variable.

Если использовать город как массив – так работать не будет.

Пример 05: Присвоение значений массиву const

JavaScript const town=[‘Gampaha’, ‘Galle’]; console.log(town); town.push(‘Matara’); console.log(town);

1234const town=[‘Gampaha’, ‘Galle’];console.log(town);town.push(‘Matara’);console.log(town);

Выходные значения:

JavaScript [ ‘Gampaha’, ‘Galle’ ] [ ‘Gampaha’, ‘Galle’, ‘Matara’ ]

12[ ‘Gampaha’, ‘Galle’ ][ ‘Gampaha’, ‘Galle’, ‘Matara’ ]

Сonst не защищает массив.

Стрелочная функция =>

Правило 01: В современном JS обозначение => ведет себя как ключевое слово функции. То, что делает =>, связывает функцию и тело функции без ключевого слова. У нее есть несколько способов определения функции, и следующий пример представляет каждый тип.

Пример 01:

JavaScript // normal function function area1 (x,y){ return x*y; } // arrow function const area2=(x,y)=>{ return x*y; } //arrow fuction which have only one argumant. No need {} const area3=(x,y)=>x*y; //arrow function containing only one parameter value. No need () const area4 =x=>x*x; const area5=x=>console.log(“Hello ” +x); console.log(area1(10,20)); console.log(area2(10,20)); console.log(area3(10,20)); console.log(area4(10)); area5(“John”);

1234567891011121314151617181920212223// normal functionfunction area1 (x,y){    return x*y;} // arrow functionconst area2=(x,y)=>{    return x*y;} //arrow fuction which have only one argumant. No need {}const area3=(x,y)=>x*y; //arrow function containing only one parameter value. No need ()const area4 =x=>x*x; const area5=x=>console.log(“Hello ” +x); console.log(area1(10,20));console.log(area2(10,20));console.log(area3(10,20));console.log(area4(10));area5(“John”);

Современный JavaScript

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Выходные значения:

JavaScript 200 200 200 100 Hello John

12345200200200100Hello John

Вы можете видеть, что без ключевого слова function стрелка => работает как функция.

Правило 02: — функция и стрелочная функция не работают одинаково. У них разные схемы работы. В следующем примере показано, как ключевое слово this ведет себя в этих двух ситуациях.

JavaScript const print={ function1:function(){ console.log(‘this is function1’, this); }, function2:()=>{ console.log(‘this is function2’, this); } } print.function1(); print.function2();

1234567891011const print={    function1:function(){        console.log(‘this is function1’, this);    },    function2:()=>{        console.log(‘this is function2’, this);        }} print.function1();print.function2();

Выходные значения:

JavaScript this is function1 { function1: [Function: function1], function2: [Function: function2] } this is function2 {}

12this is function1 { function1: [Function: function1], function2: [Function: function2] }this is function2 {}

Что происходит, когда функция является обычной функцией, это ключевое слово представляет двоеточие и распечатывает всю функцию внутри него. Но если функция является стрелочной функцией, она не представляет двоеточие. Это немного сбивает с толку большинство разработчиков. Они просто пишут стрелочную функцию и используют это ключевое слово внутри нее, ожидая вывода как обычной функции.

Object

Правило 01: — object в Javascript позволяет разработчикам определять только ключ или значение внутри объекта. Пара ключ-значение не требуется. Вместо этого вы можете вызвать другой модуль, чтобы присвоить ему значение. Посмотрите следующий пример, и тогда вы сможете получить четкое представление об этом.

Пример 01:

JavaScript let SQRT2 = Math.SQRT2; // Calling external module and assign value to the SQRT2 const vehicle ={ make: “Mitsubishi”, p1:120, p2:240, drive(){}, stop: ()=>{}, SQRT2 // only containing key. It is same as SQRT2: SQRT2 } console.log(vehicle)

1234567891011let SQRT2 = Math.SQRT2; // Calling external module and assign value to the SQRT2const vehicle ={    make: “Mitsubishi”,    p1:120,    p2:240,    drive(){},    stop: ()=>{},    SQRT2 // only containing key. It is same as SQRT2: SQRT2} console.log(vehicle)

Выходные значения:

JavaScript { make: ‘Mitsubishi’, p1: 120, p2: 240, drive: [Function: drive], stop: [Function: stop], SQRT2: 1.4142135623730951 }

12345678{  make: ‘Mitsubishi’,  p1: 120,  p2: 240,  drive: [Function: drive],  stop: [Function: stop],  SQRT2: 1.4142135623730951}

Теперь вы также можете увидеть выходное значение для SQRT2. Оно получает значение от внешнего модуля под названием «Math».

Правило 02: — вы можете создать динамическое свойство внутри объекта в современном JS. Динамическое свойство означает, что вы можете оставить placeholder в качестве ключа, если вы точно не знаете, как ключ ведет себя во время выполнения.

Во время разработки разработчики не знают, как ведет себя ключ во время выполнения, поскольку он динамичен. В это время разработчик может использовать placeholder для ключа. См. следующий пример.

Пример 02:

JavaScript let SQRT2 = Math.SQRT2; let status =”order” const vehicle ={ make: “Mitsubishi”, p1:120, p2:240, drive(){}, stop: ()=>{}, [status]:”ready”, //dynamic property SQRT2 } console.log(vehicle)

12345678910111213let SQRT2 = Math.SQRT2;let status =”order”const vehicle ={    make: “Mitsubishi”,    p1:120,    p2:240,    drive(){},    stop: ()=>{},    [status]:”ready”, //dynamic property    SQRT2} console.log(vehicle)

Выходные значения:

JavaScript { make: ‘Mitsubishi’, p1: 120, p2: 240, drive: [Function: drive], stop: [Function: stop], order: ‘ready’, SQRT2: 1.4142135623730951 }

123456789{  make: ‘Mitsubishi’,  p1: 120,  p2: 240,  drive: [Function: drive],  stop: [Function: stop],  order: ‘ready’,  SQRT2: 1.4142135623730951}

Теперь вы можете увидеть порядок вывода: ‘ready’ для placeholder -а, который мы устанавливаем во время разработки. Вы можете изменять значение ключа, присваивая различные значения placeholder -у. (Попробуйте let status = «service», и вы увидите разницу).

freeze

Правило 01: — Как видно из названия, он может заморозить объект. Это означает, что freeze избегает изменения значения объекта. Посмотрите следующий пример, и вы увидите разницу.

Пример 01: — Давайте посмотрим на простой пример кода без ключевого слова freeze.

JavaScript let obj ={‘country’:””}; obj.country=”Sri Lanka”; console.log(obj); obj.country=”England”; console.log(obj);

12345let obj ={‘country’:””};obj.country=”Sri Lanka”;console.log(obj);obj.country=”England”;console.log(obj);

Выходные значения:

JavaScript { country: ‘Sri Lanka’ } { country: ‘England’ }

12{ country: ‘Sri Lanka’ }{ country: ‘England’ }

Меняется значение объекта.

Пример 02: — Давайте посмотрим на тот же пример кода с методом object.freeze().

JavaScript let obj ={‘country’:””}; obj.country=”Sri Lanka”; Object.freeze(obj); console.log(obj); obj.country=”England”; console.log(obj);

123456let obj ={‘country’:””};obj.country=”Sri Lanka”;Object.freeze(obj);console.log(obj);obj.country=”England”;console.log(obj);

Выходные значения:

JavaScript { country: ‘Sri Lanka’ } { country: ‘Sri Lanka’ }

12{ country: ‘Sri Lanka’ }{ country: ‘Sri Lanka’ }

Значение объекта не изменилось. Применение ключевого слова freeze предполагает, что у вас есть один объект, который проходит через множество сервисов, и вы не хотите изменять значение этого объекта, поэтому вы можете использовать Object.freeze().

Правило 02: — Убедитесь, что если вы используете freeze в многоуровневом объекте, оно замораживает только значения первого уровня. Объясним это на примере.

JavaScript let flower ={ name:””, price:{ t1:10, t2:20 } } flower.name=”Rose”; flower.price.t1=15; console.log(flower); Object.freeze(flower); flower.name=”Sun flower”; flower.price.t1=20; console.log(flower);

123456789101112131415161718let flower ={    name:””,    price:{        t1:10,        t2:20    }} flower.name=”Rose”;flower.price.t1=15; console.log(flower); Object.freeze(flower);flower.name=”Sun flower”;flower.price.t1=20; console.log(flower);

Представьте, какой будет результат. Давайте проверим, совпадает ли ваш результат с реальным.

JavaScript { name: ‘Rose’, price: { t1: 15, t2: 20 } } { name: ‘Rose’, price: { t1: 20, t2: 20 } }

12{ name: ‘Rose’, price: { t1: 15, t2: 20 } }{ name: ‘Rose’, price: { t1: 20, t2: 20 } }

Мы замораживаем только имя, но изменилось значение t1. Причина в том, что t1 — это переменная внутреннего или второго уровня.

Итак, здесь я обсудил несколько фундаментальных концепций современного javascript. Я думаю, вы имеете четкое представление об этом. Увидимся в следующей статье. Я опишу больше концепций…

Оставайтесь в безопасности и узнавайте новое!!!

Автор: Thilini Weerasinghe

Источник: webformyself.com

Оставьте ответ