JavaScript ES5

Что такое ECMAScript 5?

ECMAScript 5 также известен как ES5 и ECMAScript 2009.

Эта глава знакомит вас с самыми важными свойствами ES5.

Элементы ECMAScript 5

Эти — новые возможности, опубликованные в 2009 году:

  • "use strict" директива
  • String.trim()
  • Array.isArray()
  • Array.forEach()
  • Array.map()
  • Array.filter()
  • Array.reduce()
  • Array.reduceRight()
  • Array.every()
  • Array.some()
  • Array.indexOf()
  • Array.lastIndexOf()
  • JSON.parse()
  • JSON.stringify()
  • Date.now()
  • Свойства getter и setter
  • Новые объектные свойства и методы

Изменения синтаксиса ECMAScript 5

  • Доступ к свойствам строк с помощью квадратных скобок
  • Завершающие запятые в литералах массивов и объектов
  • Многострочные строковые литералы
  • Резервированные слова в качестве имен свойств

"use strict" директива

"use strict"Определение JavaScript кода, который должен выполняться в строгом режиме.

Например, при использовании строгого режима, вы не можете использовать неявно объявленные переменные.

Вы можете использовать строгий режим во всех своих программах. Это поможет вам пишите более четкий код, например,阻止 вас использовать неявно объявленные переменные.

"use strict» Это всего лишь строковое выражение. Старые браузеры, которые не понимают их, не будут выбрасывать ошибки.

Пожалуйста, читайте JS строгий режим Читайте больше в.

String.trim()

String.trim() Удаляет пробельные символы в начале и конце строки.

Пример

var str = "       Hello World!        ";
alert(str.trim());

Попробуйте сами

Пожалуйста, посмотрите Методы строки JavaScript Читайте больше в.

Array.isArray()

isArray() Метод проверяет, является ли объект массивом.

Пример

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}

Попробуйте сами

Пожалуйста, посмотрите JS массив Читайте больше в.

Array.forEach()

forEach() Метод вызывается для каждого элемента массива один раз.

Пример

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

Попробуйте сами

Пожалуйста, посмотрите Методы итерации массива JS Узнайте больше в

Array.map()

Этот пример умножает каждый элемент массива на 2:

Пример

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

Попробуйте сами

Пожалуйста, посмотрите Методы итерации массива JS Узнайте больше в

Array.filter()

Этот пример создает новый массив из элементов, значение которых больше 18:

Пример

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

Попробуйте сами

Пожалуйста, посмотрите Методы итерации массива JS Узнайте больше в

Array.reduce()

Этот пример определяет сумму всех чисел в массиве:

Пример

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

Попробуйте сами

Пожалуйста, посмотрите Методы итерации массива JS Узнайте больше в

Array.reduceRight()

Этот пример также определяет сумму всех чисел в массиве:

Пример

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

Попробуйте сами

Пожалуйста, посмотрите Методы итерации массива JS Узнайте больше в

Array.every()

Этот пример проверяет, превышают ли все значения 18:

Пример

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

Попробуйте сами

Пожалуйста, посмотрите Методы итерации массива JS Узнайте больше в

Array.some()

Этот пример проверяет, превышают ли某些 значения 18:

Пример

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);
function myFunction(value) {
  return value > 18;
}

Попробуйте сами

Пожалуйста, посмотрите Методы итерации массива JS Узнайте больше в

Array.indexOf()

Искать значение элемента массива и возвращать его положение:

Пример

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

Попробуйте сами

Пожалуйста, посмотрите Методы итерации массива JSУзнайте больше в

Array.lastIndexOf()

Array.lastIndexOf() с Array.indexOf() Аналогично, но начинаем搜ать с конца массива.

Пример

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

Попробуйте сами

Пожалуйста, посмотрите Методы итерации массива JS Узнайте больше в

JSON.parse()

Одна из распространённых用途 JSON - получение данных от веб-сервера.

Представьте себе, что вы получили этот текстовый строку от веб-сервера:

'{"name":"Bill", "age":62, "city":"Seatle"}'

Функции JavaScript JSON.parse() Используется для преобразования текста в объект JavaScript:

var obj = JSON.parse('{"name":"Bill", "age":62, "city":"Seatle"}');

Попробуйте сами

Пожалуйста, обратитесь к нашему Урок JSON Узнайте больше в

JSON.stringify()

Одна из распространённых用途 JSON - отправка данных на веб-сервер.

Когда данные отправляются на веб-сервер, они должны быть строкой.

Представьте себе, что у нас есть этот объект в JavaScript:

var obj = {"name":"Bill", "age":62, "city":"Seatle"};

Используйте функцию JavaScript JSON.stringify() для преобразования её в строку.

var myJSON = JSON.stringify(obj);

Результатом будет строка, соответствующая форматированию JSON.

myJSON теперь является строкой, готовой к отправке на сервер:

Пример

var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

Попробуйте сами

Пожалуйста, обратитесь к нашему Урок JSON Узнайте больше в

Date.now()

Date.now() возвращает количество миллисекунд с момента даты 0 (1 января 1970 года 00:00:00:00).

Пример

var timInMSs = Date.now();

Попробуйте сами

Date.now() возвращает результат, аналогичный результату выполнения getTime() на объекте Date.

Пожалуйста, посмотрите JS дата узнайте больше.

Свойства getter и setter

ES5 позволяет вам использовать синтаксис, аналогичный получению или установке свойств, для определения методов объектов.

Этот пример создает getter для свойства fullName: getter:

Пример

// Создание объекта:
var person = {
  firstName: "Bill",
  lastName : "Gates"
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// Используем getter для показа данных из объекта:
document.getElementById("demo").innerHTML = person.fullName;

Попробуйте сами

Этот пример создает для свойства языка getter и setter: setter и getter:

Пример

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
});
// Используем setter для установки свойства объекта:
person.lang = "en";
// Используем getter для показа данных из объекта:
document.getElementById("demo").innerHTML = person.lang;

Попробуйте сами

Этот пример использует setter для обеспечения обновления языка до верхнего регистра:

Пример

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// Используем setter для установки свойства объекта:
person.lang = "en";
// Показываем данные из объекта:
document.getElementById("demo").innerHTML = person.language;

Попробуйте сами

Пожалуйста, посмотрите JS объектные доступчики Узнайте больше о getter и setter в этой статье.

Новые объектные свойства и методы

Object.defineProperty() Это новый метод объекта в ES5.

Это позволяет вам определять свойства объектов и/или изменять значения свойств и/или метаданные.

Пример

// Создание объекта:
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO", 
});
// Изменять属性:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable: true;
  configurable : true
});
// Перечисление свойств
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Попробуйте сами

Следующий пример аналогичен, но скрывает свойство языка в энумерации:

Пример

// Создание объекта:
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO", 
});
// Изменять属性:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// Перечисление свойств
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Попробуйте сами

Этот пример создает setter и getter, чтобы обеспечить обновление языка до верхнего регистра:

Пример

// Создание объекта:
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO"
});
// Изменять属性:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// Изменять язык
person.language = "en";
// Показывать язык
document.getElementById("demo").innerHTML = person.language;

Попробуйте сами

Новые методы объектов ES5

ECMAScript 5 добавил в JavaScript множество новых методов объектов:

// Добавляет или изменяет свойство объекта
Object.defineProperty(object, property, descriptor)
// Добавляет или изменяет несколько свойств объекта
Object.defineProperties(object, descriptors)
// Доступ к свойству
Object.getOwnPropertyDescriptor(object, property)
// Возвращает массив всех свойств
Object.getOwnPropertyNames(object)
// Возвращает массив всех энумеративных свойств
Object.keys(object)
// Доступ к прототипу
Object.getPrototypeOf(object)
// Предотвращает добавление свойств к объекту
Object.preventExtensions(object)
// Возвращает true, если можно добавить свойства к объекту
Object.isExtensible(object)
// Предотвращает изменение свойств объекта (а не значений)
Object.seal(object)
// Возвращает true, если объект запечатан
Object.isSealed(object)
// Предотвращает любое изменение объекта
Object.freeze(object)
// Возвращает true, если объект заморожен
Object.isFrozen(object)

Пожалуйста, посмотрите Объект ECMAScript5 Узнайте больше в

Доступ к свойствам строки

charAt() Метод возвращает символ по заданному индексу (положению) в строке:

Пример

var str = "HELLO WORLD";
str.charAt(0);            // Возвращает H

Попробуйте сами

ECMAScript 5 позволяет выполнять доступ к свойствам строк:

Пример

var str = "HELLO WORLD";
str[0];                   // Возвращает H

Попробуйте сами

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

Пожалуйста, посмотрите Методы строки JavaScript Узнайте больше в

Запятая в конце (Trailing Commas)

ECMAScript 5 позволяет использовать запятую в конце при определении объектов и массивов:

Пример объекта

person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 62,
}

Пример массива

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

Внимание!!!

Internet Explorer 8 будет crashing.

JSON не допускает использование запятой в конце.

JSON объект:

// Разрешается:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62}
JSON.parse(person)
// Не разрешается:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}
JSON.parse(person)

JSON массив:

// Разрешается:
points = [40, 100, 1, 5, 25, 10]
// Не разрешается:
points = [40, 100, 1, 5, 25, 10,]

Многострочные строки

Пример

"Hello ",
Kitty!";

Попробуйте сами

Метод \ может не получить всеобщей поддержки.

Старые браузеры могут по-разному обрабатывать пробелы вокруг обратной косой черты.

Некоторые старые браузеры не позволяют пробелы после символа \.

Одним из более безопасных способов разбить строку literals является использование строкового добавления:

Пример

"Hello " + 
"Kitty!";

Попробуйте сами

Резервируемые слова в качестве имен свойств

ECMAScript 5 позволяет использовать резервируемые слова в качестве имен свойств:

Пример объекта

var obj = {name: "Bill", new: "yes"}

Попробуйте сами

Поддержка браузеров для ES5 (ECMAScript 5)

Chrome 23, IE 10 и Safari 6 являются первыми браузерами, которые полностью поддерживают ECMAScript 5:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
Сентябрь 2012 года Сентябрь 2012 года Апрель 2013 года Июль 2012 года Июль 2013 года