Учебник по JS

ГЛАВНАЯ JS Введение JS Куда Вывод JS Заявления JS JS-синтаксис JS-комментарии JS-переменные JS Пусть Константа JS JS-операторы JS-арифметика Назначение JS JS-типы данных JS-функции JS-объекты JS-события JS-строки Строковые методы JS Поиск строки JS Шаблоны строк JS JS-номера Методы номеров JS JS-массивы Методы массива JS Сортировка массива JS Итерация массива JS Константа массива JS JS-даты Форматы даты JS Методы получения даты JS Методы установки даты JS JS-математика JS Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки JS JS-классы JS JSON JS-отладка Руководство по стилю JS Лучшие практики JS JS-ошибки JS-производительность Зарезервированные слова JS

JS-версии

JS-версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

Определения функций Параметры функции Вызов функции Вызов функции Функция Применить Закрытие функций

JS-классы

Введение в класс Наследование классов Статический класс

JS асинхронный

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

Селекторы jQuery JQuery HTML jQuery CSS JQuery DOM

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS JS-браузер JS-редактор JS-упражнения JS-викторина JS-сертификат

JS-ссылки

Объекты JavaScript HTML DOM-объекты


Javascript ES6

ECMAScript 2015 был второй крупной версией JavaScript.

ECMAScript 2015 также известен как ES6 и ECMAScript 6.

В этой главе описываются наиболее важные функции ES6.

Новые функции в ES6


Поддержка браузера для 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