Javascript ES6
ECMAScript 2015 был второй крупной версией JavaScript.
ECMAScript 2015 также известен как ES6 и ECMAScript 6.
В этой главе описываются наиболее важные функции ES6.
Новые функции в ES6
- ключевое слово пусть
- ключевое слово const
- Стрелочные функции
- Для/из
- Объекты карты
- Установить объекты
- Классы
- Обещания
- Символ
- Параметры по умолчанию
- Параметр покоя функции
- Строка.includes()
- Строка.startsWith()
- String.endsWith()
- Массив.от()
- Ключи массива()
- Поиск массива ()
- Массив найтиИндекс()
- Новые математические методы
- Новые свойства номера
- Новые числовые методы
- Новые глобальные методы
- Итерации Object.entries
- Модули JavaScript
Поддержка браузера для ES6 (2015 г.)
Safari 10 и Edge 14 были первыми браузерами, полностью поддерживающими ES6:
Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
Jan 2017 | Aug 2016 | Mar 2017 | Jul 2016 | Aug 2018 |
JavaScript пусть
Ключевое let
слово позволяет объявить переменную с блочной областью действия.
Пример
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
Подробнее об этом читайте let
в главе: JavaScript Let .
Константа JavaScript
Ключевое const
слово позволяет объявить константу (переменную JavaScript с постоянным значением).
Константы аналогичны переменным let, за исключением того, что их значение нельзя изменить.
Пример
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
Подробнее об этом читайте const
в главе: JavaScript Const .
Стрелочные функции
Стрелочные функции позволяют использовать короткий синтаксис для написания функциональных выражений.
Вам не нужны function
ключевое слово, return
ключевое слово и
фигурные скобки .
Пример
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Стрелочные функции не имеют собственных this
. Они плохо подходят для определения методов объекта .
Стрелочные функции не поднимаются. Они должны быть определены до их использования.
Использование const
безопаснее, чем использование var
, потому что выражение функции всегда является постоянным значением.
Вы можете опустить return
ключевое слово и фигурные скобки только в том случае, если функция представляет собой один оператор. Из-за этого может быть хорошей привычкой всегда хранить их:
Пример
const x = (x, y) => { return x * y };
Узнайте больше о стрелочных функциях в главе: Стрелочные функции JavaScript .
Цикл For/Of
Оператор JavaScript for/of
перебирает значения итерируемых объектов.
for/of
позволяет зацикливаться на повторяющихся структурах данных, таких как массивы, строки, карты, списки узлов и т. д.
Цикл for/of
имеет следующий синтаксис:
for (variable of iterable) {
// code block to be executed
}
переменная - для каждой итерации переменной присваивается значение следующего свойства. Переменная может быть объявлена с помощью
const
, let
или var
.
iterable — объект с повторяемыми свойствами.
Цикл по массиву
Пример
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
}
Цикл по строке
Пример
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + " ";
}
Узнайте больше в главе: JavaScript Loop For/In/Of .
Объекты карты JavaScript
Возможность использовать объект в качестве ключа — важная функция карты.
Пример
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a new Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
Узнайте больше об объектах Map в главе: JavaScript Map() .
Набор объектов JavaScript
Пример
// Create a Set
const letters = new Set();
// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
Узнайте больше об объектах Set в главе: JavaScript Set() .
Классы JavaScript
Классы JavaScript — это шаблоны для объектов JavaScript.
Используйте ключевое слово class
для создания класса.
Всегда добавляйте метод с именем constructor()
:
Синтаксис
class ClassName {
constructor() { ... }
}
Пример
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
В приведенном выше примере создается класс с именем «Автомобиль».
Класс имеет два исходных свойства: «имя» и «год».
Класс JavaScript не является объектом.
Это шаблон для объектов JavaScript.
Использование класса
Когда у вас есть класс, вы можете использовать его для создания объектов:
Пример
const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
Узнайте больше о классах в главе: Классы JavaScript .
Обещания JavaScript
Обещание — это объект JavaScript, который связывает «Производящий код» и «Потребляющий код».
«Создание кода» может занять некоторое время, а «Потребление кода» должно дождаться результата.
Синтаксис обещания
const myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Пример использования обещания
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Узнайте больше о Promises в главе: Промисы JavaScript .
Тип символа
Символ JavaScript — это примитивный тип данных, такой же, как число, строка или логическое значение.
Он представляет собой уникальный «скрытый» идентификатор, к которому никакой другой код не может случайно получить доступ.
Например, если разные кодировщики хотят добавить свойство person.id к объекту person, принадлежащему стороннему коду, они могут смешивать значения друг друга.
Использование Symbol() для создания уникальных идентификаторов решает эту проблему:
Пример
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
let id = Symbol('id');
person[id] = 140353;
// Now person[id] = 140353
// but person.id is still undefined
Символы всегда уникальны.
Если вы создадите два символа с одинаковым описанием, они будут иметь разные значения.
Symbol("id") == Symbol("id") // false
Значения параметров по умолчанию
ES6 позволяет параметрам функции иметь значения по умолчанию.
Пример
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(5); // will return 15
Параметр покоя функции
Параметр rest (...) позволяет функции обрабатывать неопределенное количество аргументов как массив:
Пример
function sum(...args) {
let sum = 0;
for (let arg of args) sum += arg;
return sum;
}
let x = sum(4, 9, 16, 25, 29, 100, 66, 77);
Строка.includes()
Метод includes()
возвращает true
значение, если строка содержит указанное значение, в противном случае false
:
Пример
let text = "Hello world, welcome to the universe.";
text.includes("world") // Returns true
Строка.startsWith()
Метод startsWith()
возвращает true
значение, если строка начинается с указанного значения, в противном случае false
:
Пример
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // Returns true
String.endsWith()
Метод endsWith()
возвращает true
значение, если строка заканчивается указанным значением, в противном случае false
:
Пример
var text = "John Doe";
text.endsWith("Doe") // Returns true
Массив.от()
The Array.from()
method returns an Array object from any object with a length
property or any iterable object.
Example
Create an Array from a String:
Array.from("ABCDEFG") // Returns [A,B,C,D,E,F,G]
Array keys()
The keys()
method returns an Array Iterator object with the keys of an array.
Example
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
Array find()
The find()
method returns the value of the first array element that passes a
test function.
This example finds (returns the value of ) the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
Array findIndex()
The findIndex()
method returns the index of the first array element that
passes a test function.
This example finds the index of the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
New Math Methods
ES6 added the following methods to the Math object:
Math.trunc()
Math.sign()
Math.cbrt()
Math.log2()
Math.log10()
The Math.trunc() Method
Math.trunc(x)
returns the integer part of x:
Example
Math.trunc(4.9); // returns 4
Math.trunc(4.7); // returns 4
Math.trunc(4.4); // returns 4
Math.trunc(4.2); // returns 4
Math.trunc(-4.2); // returns -4
The Math.sign() Method
Math.sign(x)
returns if x is negative, null or positive:
Example
Math.sign(-4); // returns -1
Math.sign(0); // returns 0
Math.sign(4); // returns 1
The Math.cbrt() Method
Math.cbrt(x)
returns the cube root of x:
Example
Math.cbrt(8); // returns 2
Math.cbrt(64); // returns 4
Math.cbrt(125); // returns 5
The Math.log2() Method
Math.log2(x)
returns the base 2 logarithm of x:
Example
Math.log2(2); // returns 1
The Math.log10() Method
Math.log10(x)
returns the base 10 logarithm of x:
Example
Math.log10(10); // returns 1
New Number Properties
ES6 added the following properties to the Number object:
EPSILON
MIN_SAFE_INTEGER
MAX_SAFE_INTEGER
Example
let x = Number.EPSILON;
Example
let x = Number.MIN_SAFE_INTEGER;
Example
let x = Number.MAX_SAFE_INTEGER;
New Number Methods
ES6 added 2 new methods to the Number object:
Number.isInteger()
Number.isSafeInteger()
The Number.isInteger() Method
The Number.isInteger()
method returns true
if the argument is an integer.
Example
Number.isInteger(10); // returns true
Number.isInteger(10.5); // returns false
The Number.isSafeInteger() Method
A safe integer is an integer that can be exactly represented as a double precision number.
The Number.isSafeInteger()
method returns true
if the argument is a safe integer.
Example
Number.isSafeInteger(10); // returns true
Number.isSafeInteger(12345678901234567890); // returns false
Safe integers are all integers from -(253 - 1) to +(253 - 1).
This is safe: 9007199254740991. This is not safe: 9007199254740992.
New Global Methods
ES6 added 2 new global number methods:
isFinite()
isNaN()
The isFinite() Method
The global isFinite()
method returns false
if the argument is Infinity
or NaN
.
Otherwise it returns true
:
Example
isFinite(10/0); // returns false
isFinite(10/1); // returns true
The isNaN() Method
The global isNaN()
method returns true
if the argument is NaN
. Otherwise it returns false
:
Example
isNaN("Hello"); // returns true