JavaScript ES6 предлагает новый синтаксис и новые мощные функции, чтобы сделать ваш код более современным и читабельным. Это позволяет писать меньше кода и делать больше. ES6 знакомит нас со многими мощными функциями, такими как стрелочные функции, шаблонные строки, структуры объектов, модули и т. д. Давайте посмотрим.
const and let
Const - это новое ключевое слово для объявления переменных в ES6. Const более мощный, чем var. После использования переменная не может быть переназначена. Другими словами, это неменная переменная, если она не используется с объектом.
Это полезно для селекторов позиционирования. Например, когда у нас есть кнопка, которая запускает событие, или когда вы хотите выбрать элемент HTML в JavaScript, используйте const вместо var. Это связано с тем, что var поднимается, а const лучше всего использовать, когда вы не хотите переназначать переменную.
// ES5
var MyBtn = document.getElementId('mybtn');
// ES6
const MyBtn = document.getElementById('mybtn');
В приведенном выше коде const не изменяется и не может быть переназначен. Если вы попытаетесь присвоить ему новое значение, будет возвращена ошибка.
let name = "Said";
name = "Rick";
console.log(name); // Rick
let может переназначить и получить новое значение. Он создает изменяемую переменную.
let — это то же самое, что и const, потому что обе они имеют блочную область видимости, что означает, что переменная доступна только в пределах своей блочной области.
стрелочная функция
Стрелочные функции великолепны и делают ваш код более читабельным, более структурированным и похожим на современный код, вместо использования этого:
// ES5
function myFunc(name) {
return 'Hello ' + name;
}
console.log(myFunc('said')); // Hello said
И используйте запись ES6:
// ES6 Arrow function
const myFunc = name => {
return `Hi ${name}`;
}
console.log(myFunc('Said')); // Hi Said
// 或者不要 return 关键字
const myFunc = name => `Hi ${name}`;
console.log(myFunc('Said'));// Hi Said
Как видите, стрелочные функции кажутся более читабельными и понятными! Вам больше не нужно будет использовать старый синтаксис.
Кроме того, вы можете использовать стрелочные функции с картой, фильтровать и уменьшать встроенные функции.
const myArray = ['tony', 'Sara', 'Said', 5];
// ES5
let Arr1 = myArray.map(function(item) {
return item;
});
console.log(Arr1);// ["tony", "Sara", "Said", 5]
// ES6
let Arr2 = myArray.map(item => item);
console.log(Arr2);// ["tony", "Sara", "Said", 5]
Функция карты со стрелками выглядит более читаемой, чем карта ES5. С ES6 вы можете писать более короткий код, и вы можете использовать сокращение и фильтрацию таким же образом.
строка шаблона
Строки-шаблоны настолько круты, что нам не нужно использовать оператор плюс (+) для объединения строк, когда мы хотим использовать переменные в строках.
Старый синтаксис:
// ES5
function myFunc1(name, age) {
return 'Hi ' + name + ' Your age is ' + age + ' year old';
}
console.log(myFunc('Said', 22)); // Hi Said, Your age is 22 year old
С новым синтаксисом ES6:
// ES6
const myFunc = (name, age) => {
return `Hi ${name}, Your age is ${age} year old`;
}
// or
const myFunc = (name, age) => `Hi ${name}, Your age is ${age} year old`;
console.log(myFunc1('Said', 22)); // Hi Said, Your age is 22 year old
Это просто! Это огромная разница между старым синтаксисом и ES6. При работе со строками литеральные строки в ES6 выглядят более организованными и лучше структурированными, чем в ES5.
параметры по умолчанию
Он не возвращает неопределенную ошибку, когда вы забываете написать параметр, потому что параметр уже определен в значении по умолчанию. Поэтому, когда вы запускаете функцию с отсутствующим параметром, она примет значение параметра по умолчанию и не вернет ошибку!
Посмотрите этот пример:
const myFunc = (name, age) => `Hi ${name}, Your age is ${age} year old`;
console.log(myFunc('Said')); // Hi Said, Your age is undefined year old
Приведенная выше функция возвращает значение undefined, потому что мы забыли передать ей второй параметр age.
Но если мы используем параметр по умолчанию, когда мы забываем назначить параметр, он будет использовать свое значение по умолчанию и не будет возвращать неопределенное значение!
const myFunc = (name, age = 22) => `Hi ${name}, Your age is ${age} year old`;
console.log(myFunc('Said')); // Hi Said, Your age is 22 year old
Как видите, функция возвращает значение, несмотря на то, что мы пропустили второй параметр. Теперь с параметрами по умолчанию мы можем обрабатывать ошибки заранее.
Деструктуризация массивов и объектов
Деструктуризация упрощает присвоение значения массива или объекта новой переменной.
Старый синтаксис:
const contacts = {
name: 'said',
famillyName: 'Hayani',
age: 22
};
let name = contacts.name;
let famillyName = contacts.famillyName;
let myAge = contacts.age;
console.log(name); // said
console.log(famillyName); // Hayani
console.log(myAge); // 22
Новый синтаксис ES6:
const contacts = {
name: 'said',
famillyName: 'Hayani',
age: 22
};
let {name, famillyName, age} = contacts;
console.log(name); // said
console.log(famillyName); // Hayani
console.log(age); // 22
В ES5 мы должны присвоить каждое значение каждой переменной. В ES6 мы можем просто поместить наше значение в фигурные скобки, чтобы получить любое свойство объекта.
Примечание. Возвращает неопределенное значение, если указанная переменная не совпадает с именем свойства. Например, если имя свойства — имя, и мы назначаем его переменной имени пользователя, оно вернет неопределенное значение.
Мы всегда должны называть переменную так же, как имя свойства. Но если мы хотим переименовать переменную, мы можем использовать двоеточие : вместо этого.
const contacts = {
name: 'said',
famillyName: 'Hayani',
age: 22
};
let {name:otherName, famillyName, myAge} = contacts;
console.log(otherName);// said
Для массивов мы используем тот же синтаксис, что и для объектов. Мы просто заменяем фигурные скобки квадратными скобками.
const Arr = ['Lionel', 'John', 'Layla', 20];
let [value1, value2, value3] = Arr;
console.log(value1); // Lionel
console.log(value2); // John
console.log(value3); // Layla
Import and export
Используйте импорт и экспорт в приложениях JavaScript, чтобы сделать их более мощными. Они позволяют создавать отдельные повторно используемые компоненты.
Если вы знакомы с какой-либо инфраструктурой JavaScript MVC, вы увидите, что они используют импорт и экспорт для обработки компонентов большую часть времени. Так как же они на самом деле работают?
Это просто! export позволяет экспортировать модуль для использования в другом компоненте JavaScript. Мы импортируем этот модуль, используя import, чтобы использовать его в наших компонентах.
Например, у нас есть два файла. Первый называется detailComponent.js, а второй — homeComponent.js.
В detailComponent.js мы будем экспортировать функцию деталей.
// ES6
export default function detail(name, age) {
return `Hello ${name}, your age is ${age} year old!`;
}
Если бы мы хотели использовать эту функцию в HomeComponent.js, мы бы просто использовали импорт
import { detail } from './detailComponent';
console.log(detail('Said', 20)); // Hello Said, your age is 20 year old!
Если мы хотим импортировать несколько модулей, нам нужно только поместить их в фигурные скобки.
import {detail, userProfile, getPosts} from './detailComponent';
console.log(detail('Said', 20));
console.log(userProfile);
console.log(getPosts));
Promise
Промисы появились в ES6 впервые. Вот как писать асинхронный код. Например, его можно использовать, когда мы хотим получить данные из API или когда у нас есть функция, для выполнения которой требуется время. Промисы облегчают решение проблем, поэтому давайте создадим наш первый промис!
const myPromise = () => {
return new Promise((resolve, reject) => {
resolve('Hi the Promise execute successfully');
})
}
console.log(myPromise()); // Promise {<resolved>: "Hi the Promise execute successfully"}
Если вы войдете в консоль, она вернет Promise. Поэтому, если мы хотим выполнить функцию после выборки данных, мы будем использовать Promise. Promise принимает два параметра: resolve и reject для обработки ожидаемых ошибок.
Примечание. Функция fetch возвращает обещание!
const url='https://jsonplaceholder.typicode.com/posts';
const getData=(url)=>{
return fetch(url);
}
getData(url).
then(data=> data.json()).
then(result=> console.log(result));
Теперь, если вы войдете в консоль, она вернет массив данных.
Остальные параметры и операторы спреда
Остальные параметры используются для получения параметров массива и возврата нового массива.
const arr = ['said', 20, 'Javascript enthusiast', 'Hi', 'Said', 'How are you?'];
// 通过解构获取值
const [val1, val2, val3, ...rest] = arr;
const Func = (restOfArr) => {
return restOfArr.filter(item => {return item}).join(" ");
}
console.log(Func(rest)); // Hi Said How are you?
const arr = ['said', 20, 'Javascript enthusiast', 'Hi', 'Said', 'How are you?'];
const Func = (...anArray) => anArray;
console.log(Func(arr)); // ['said', 20, 'Javascript enthusiast', 'Hi', 'Said', 'How are you?']
А параметры оператора Spread Spread имеют одинаковый синтаксис, но оператор распространения требует сама массива, а не параметры. Параметр SPLECT Мы можем использовать для получения значения массива, а не использовать A для цикла или любого другого метода.
const arr=['said',20,'JavaScript enthusiast','Hi','Said','How are you?'];
const Func=(...anArray)=>{
return anArray;
}
console.log(Func(arr)); //["said", 20, "JavaScript enthusiast", "Hi", "Said", "How are you?"
Class
Класс — это ядро объектно-ориентированного программирования (ООП). Они делают ваш код более безопасным и упаковывают. Класс можно использовать для обеспечения хорошей структуры объектно-ориентированного кода и сохранения ее.
class myClass {
constructor() {
}
}
Чтобы создать класс, используйте ключевое слово class, за которым следует имя класса в двух фигурных скобках.
class myClass {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const user = new myClass('Said', 22);
console.log(user.name); // Said
console.log(user.age); // 22
Теперь мы можем получить доступ к методам и свойствам класса, используя ключевое слово new.
class MyClass{
constructor(name,age){
this.name=name;
this.age=age;
}
}
const Home= new myClass("said",20);
console.log(Home.name)// said
Чтобы наследовать от другого класса, используйте ключевое слово extends, за которым следует имя класса, от которого нужно наследоваться.
class MyClass {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hi ${this.name} your age is ${this.age} `);
}
}
// 继承 myClass 方法和属性
class UserProfile extends MyClass {
username() {
console.log(this.name);
}
}
const profile = new UserProfile('Said', 22);
profile.sayHello();// Hi Said your age is 22;
profile.username();// Said