Close

13 июля, 2021

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

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

let

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

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

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);

123456 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);

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

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);

123456 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);

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

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);

123456 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);

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

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);

1234567 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);

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

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

123 const 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);

1234567 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);

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

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

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

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

Пример 04:

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

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

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

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

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

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

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

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

1234 const 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
200
200
200
100
Hello John

12345 200200200100Hello 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();

1234567891011 const 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 {}

12 this 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)

1234567891011 let 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)

12345678910111213 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)

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

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);

12345 let 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);

123456 let 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);

123456789101112131415161718 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);

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

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

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика
Открыть чат
Если есть вопросы пишите нам
Здравствуйте.
Чем вам помочь?