«Сценарий Европейской ассоциации производителей компьютеров» - вам знакомо это название? Короче говоря, он известен как ESMAScript, и наш любимый JavaScript основан на нем. ES6 не самый последний, после 2016 года он начал именоваться по годам (например, ESMAScript 2017/2018 и т. Д.).
ES6 был выпущен в 2015 году. С этим выпуском также начала появляться множество новых функций. В этом блоге мы попробуем изучить некоторые из них.
1. Новые виды деклараций!
Обычно мы использовали ключевое слово var для объявления переменной. Но у него были некоторые проблемы, такие как
- var может быть объявлен несколько раз с одним и тем же именем.
- var по умолчанию является глобальным.
- В циклах var in используются те же ссылки.
- Переменная, объявленная с помощью var, может использоваться даже до объявления.
Для их решения в ES6 есть const и let. Оба они имеют свою уникальность.
const нельзя использовать дважды с одним и тем же именем переменной, если вы не используете ее в другой недоступной области. Например, вы можете использовать его в стрелочных функциях. Позвольте мне показать вам пример -
const add = (x, y) => {
const result = x+y;
console.log(result); // 10
}
const sub = (x, y) => {
const result = x+y;
console.log(result); // 2
}
add(6, 4);
sub(6, 4);
Как видите, переменная result, объявленная с помощью const, может использоваться в разных областях. Но если вы попытаетесь повторно инициализировать его внутри той же функции, в которой она была объявлена первой, вы получите сообщение об ошибке, и вы можете попробовать ее. const можно использовать повторно, но нельзя повторно инициализировать!
Если вы хотите повторно инициализировать или, объявляя, вы не уверены, нужно ли инициализировать его снова или нет, let - это решение для вас. let дает вам возможность объявить переменную, которую можно повторно инициализировать, а также использовать повторно.
let num = 6;
const example = () => {
num = 10;
const result = num*5;
console.log(result); // 50
example();
2. Функции стрелок!
Хотя в последнем примере мы показали пример стрелочных функций, давайте поговорим об этом сейчас. Обычно при объявлении функции вам нужно было сначала дать ей имя, а чтобы получить тип возвращаемого значения, вы также должны были указать это. Но функции стрелок помогают упростить работу с меньшим количеством кодов. Давайте посмотрим на пример кода, обычные функции и стрелочные функции -
//regular function example
const add = function (x, y) {
return x+y;
}
Теперь тот же код со стрелочной функцией -
const add = (x, y) => x+y;
3. Новые петли, веселее!
В ES6 появились новые типы циклов: for / of и for / in. Это поможет вам перебирать итерируемые объекты. Теперь есть существенная разница между тем, какой из них и где использовать. Цикл for / of предназначен для итерации значения итерации (массив, строка), а цикл for / in предназначен для итерации по ключ объекта.
Давайте посмотрим на пример для каждого из них -
// example of for/of loopconst students = ['John', 'Sara', 'Jack']; for ( let element of students ) { console.log(element); }// output // John // Sara // Jack// example of for/inconst employee = { name: 'Richard', department: 'web', age: 23 } for ( let key in student ) { console.log(`${key} : ${employee[key]}`); }// output // name : Richard // department : web // age => 23
4. Разрушение!
ES6 вводит деструктуризацию данных, которая помогает распаковывать значения из массива и объектов.
// object destructuringconstchampion={Male:'Bran',Female:'Emma'};const{Male:x,Female:y}=obj;// x = 'Bran'; y = 'Emma'const{Male,Female}=obj;// Male:'Bran',Female:'Emma'// array destructuringconstalphabet=['a', 'b'];const[x,y]=alphabet;// x = 'a'; y = 'b'
5. Значение параметра по умолчанию
ES6 позволяет указать значение параметра по умолчанию, если оно не задано. Он довольно простой, давайте посмотрим на образец -
const aFunc = (x, y=0) => x+y; console.log(aFunc(5)); //5 console.log(aFunc(5, 10)); //15
6. Распространение элементов
Допустим, у вас есть массив из 100 элементов, и вы хотите скопировать его в новый массив, как вы это сделаете? Обычно мы использовали цикл. Но теперь есть новый оператор распространения (…), который может нам в этом помочь. Пример -
const arr1 = [0, 1, 2, 3]; //using spread to operator to copy it in new array const arr2 = [...arr1]; console.log(arr2); //[0, 1, 2, 3]
Допустим, вы хотите добавить еще один элемент в конец нового массива -
const arr2 = [...arr1, 9]; console.log(arr2); //[0, 1, 2, 3, 9]
7. Обещание
Обещание - это объект, который помогает вам обрабатывать ответы, исходящие от запросов, которые имеют успех или отклонение. Обычно синтаксис кода выглядит так -
examplePromise.then (
function(params) {code for successful request}
function(params) {code for failed request}
)
8. Метод поиска
Метод find () очень важен, если вы новичок в JavaScript. Он помогает найти элемент в массиве и возвращает первое полученное значение / элемент.
const arr = ['java', 'python', 'c', 'c++']; const element = arr.find(language => language === 'java'); console.log(element); //java
Есть еще одна особенность метода find: вы также можете искать индекс нужного элемента с помощью метода findindex ().
const arr = [5, 9, 11, 17, 21]; const larger = (element) => element > 9; console.log(arr.findIndex(larger)); // expected output: 2
9. Класс!
До ES6 людям нужно было создавать функции, чтобы они работали как класс. Однако с ES6 можно создать класс. ООП - это огромный сектор, с которым стоит поговорить. Позвольте мне сделать это вкратце.
Класс - это шаблон, который мы можем использовать для создания объектов позже. В классе мы можем использовать конструктор, который является методом по умолчанию, который также будет вызываться всякий раз, когда вызывается класс. Давайте посмотрим на пример -
class Member {
constructor(name, phone, email) {
this.name = name;
this.phone = phone;
this.email = email;
}
}
const monty = new Member('Monty', 7881592856, '[email protected]')
console.log(monty.name); // "Monty"
Вы можете добавлять методы (функции в классе называются методами) и легко вызывать их. пример -
class Member {
constructor(name, phone, email, age) {
this.name = name;
this.phone = phone;
this.email = email;
this.age = age;
}
addAge() {
this.age +=1;
}
}
const monty = new Member('Monty', 7881592856, '[email protected]', 31)
console.log(monty.age); // 31
monty.addAge();
console.log(monty.age); // 32
10. Новые глобальные методы
Может быть, это не кажется особо важным, но время от времени оказывается кстати.
10.1 isFinite ()
Он возвращает истину или ложь в зависимости от того, является ли ответ бесконечным / NaN или наоборот.
let a = 'a'; console.log(isFinite(a/1)); //false console.log(isFinite(10/0)); //false console.log(isFinite(10/1)); //true
10.2 isNaN ()
Он почти такой же, как и предыдущий, он говорит, является ли данное значение числом или нет.
console.log(isNaN("Hello")); // returns true
console.log(isNaN("10")); // returns false
console.log(isNaN(10)); // returns false
Это все для этого блога. Сообщите мне в поле для комментариев, если я допустил ошибку.
