JavaScript - ES5: Полное руководство для начинающих

Здравствуйте,野心勃勃的JavaScript开发者们！我很高兴能成为你们在这激动人心的JavaScript ES5世界中的向导。作为一名拥有多年教学经验的计算机科学教师，我见证了无数学生从完全的初学者变成了自信的程序开发者。所以，如果你是从零开始，不用担心——我们会一步一步来，很快你就能像专业人士一样编写JavaScript！

Нововведения в JavaScript ES5

JavaScript ES5, выпущенный в 2009 году, добавил в язык множество классных новых функций. Это как когда твой любимый видеоигровой автомат получает потрясающее обновление — suddenly, у тебя появляются новые инструменты и способности, которые делают все более fun и эффективным! Давайте погрузимся в эти функции и посмотрим, как они могут упростить нашу жизнь программирования.

Методы работы с массивами в JavaScript

Массивы — это как швейцарский армейский нож в JavaScript — они невероятно универсальны и могут работать с различными данными. ES5引入了几种新的 методы, которые делают работу с массивами breeze. Давайте рассмотрим их по одному:

Метод JavaScript Array every()

Метод every() похож на строгого учителя, проверяющего, сделали ли все студенты в классе домашнее задание. Он проверяет, проходят ли все элементы массива определенное условие.

let numbers = [2, 4, 6, 8, 10];
let allEven = numbers.every(function(num) {
return num % 2 === 0;
});
console.log(allEven); // Output: true

В этом примере every() проверяет, все ли числа в массиве чётные. Поскольку они такие, он возвращает true.

Метод JavaScript Array filter()

filter() похож наouncer в клубе, который пропускает только те элементы, которые соответствуют определенным критериям. Он создает новый массив со всеми элементами, прошедшими тест, реализованный предоставленной функцией.

let fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
let longFruits = fruits.filter(function(fruit) {
return fruit.length > 5;
});
console.log(longFruits); // Output: ['banana', 'cherry', 'elderberry']

Здесь filter() создает новый массив, содержащий только фрукты с названиями длиной более 5 символов.

Метод JavaScript Array forEach()

forEach() похож на гида, который带领你逐个穿过数组. Он выполняет предоставленную функцию один раз для каждого элемента массива.

let colors = ['red', 'green', 'blue'];
colors.forEach(function(color, index) {
console.log(`Цвет на позиции ${index} это ${color}`);
});
// Output:
// Цвет на позиции 0 это red
// Цвет на позиции 1 это green
// Цвет на позиции 2 это blue

Этот метод很好， если нужно выполнить действие на каждом элементе массива, не создавая новый массив.

Метод JavaScript Array isArray()

isArray() похож на детектива, определяющего, является ли объект массивом или нет. Он возвращает true, если объект является массивом, и false, если это не так.

console.log(Array.isArray([1, 2, 3])); // Output: true
console.log(Array.isArray('Hello')); // Output: false

Этот метод особенно полезен, когда нужно проверить, является ли переменная массивом, перед выполнением специфических для массива операций.

Метод JavaScript Array indexOf()

indexOf() похож на поисковую группу, ищущую определенный элемент в массиве и сообщающую вам, где он находится. Он возвращает первый индекс, в котором можно найти данный элемент в массиве, или -1, если его нет.

let fruits = ['apple', 'banana', 'cherry', 'date'];
console.log(fruits.indexOf('cherry')); // Output: 2
console.log(fruits.indexOf('grape')); // Output: -1

Этот метод полезен, когда нужно найти положение элемента в массиве.

Метод JavaScript Array lastIndexOf()

lastIndexOf() похож на indexOf(), но начинается с поиска с конца массива. Он возвращает последний индекс, в котором можно найти данный элемент в массиве, или -1, если его нет.

let numbers = [1, 2, 3, 2, 1];
console.log(numbers.lastIndexOf(2)); // Output: 3
console.log(numbers.lastIndexOf(4)); // Output: -1

Этот метод полезен, когда вы хотите найти последнее occurrence элемента в массиве.

Метод JavaScript Array map()

map() похож на magic wand, который преобразует каждый элемент массива. Он создает новый массив с результатами вызова предоставленной функции на каждом элементе в массиве.

let numbers = [1, 2, 3, 4, 5];
let squared = numbers.map(function(num) {
return num * num;
});
console.log(squared); // Output: [1, 4, 9, 16, 25]

В этом примере map() создает новый массив, где каждое число умножено на себя.

Метод JavaScript Array reduce()

reduce() похож на snowball,катящийся down a hill, накапливая значения по мере движения. Он выполняет функцию редукции на каждом элементе массива, resulting в единственное значение вывода.

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 15

Здесь reduce() используется для суммирования всех чисел в массиве.

Метод JavaScript Array reduceRight()

reduceRight() похож на reduce(), но обрабатывает массив справа налево.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.reduceRight(function(accumulator, currentValue) {
return accumulator - currentValue;
});
console.log(result); // Output: -5 (5 - 4 - 3 - 2 - 1)

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

Метод JavaScript Array some()

some() похож на lenient учителя, который рад, если хотя бы один студент сделал домашнее задание. Он проверяет, проходят ли хотя бы один элемент массива тест, реализованный предоставленной функцией.

let numbers = [1, 3, 5, 7, 8, 9];
let hasEven = numbers.some(function(num) {
return num % 2 === 0;
});
console.log(hasEven); // Output: true

В этом примере some() проверяет, есть ли хотя бы одно чётное число в массиве.

Методы работы с датами в JavaScript

ES5 также引入了一些 полезные методы для работы с датами:

Метод JavaScript Date now()

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

console.log(Date.now()); // Output: текущий timestamp в миллисекундах

Этот метод полезен для измерения временных интервалов или генерации уникальных идентификаторов.

Метод JavaScript Date toJSON()

toJSON() возвращает строковое представление объекта Date в формате JSON.

let date = new Date();
console.log(date.toJSON()); // Output: "2023-06-08T12:34:56.789Z"

Этот метод полезен при сериализации объектов Date в JSON.

Метод JavaScript Date toISOString()

toISOString() преобразует объект Date в строку, используя формат ISO 8601.

let date = new Date();
console.log(date.toISOString()); // Output: "2023-06-08T12:34:56.789Z"

Этот метод полезен для стандартизированного форматирования дат, особенно в международных контекстах.

Метод JavaScript Function bind()

bind() создает новую функцию, которая, когда вызывается, имеет свое this keyword установлено на предоставленное значение. Это как дать функции определенный контекст для работы.

let person = {
name: 'John',
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};

let greetFunction = person.greet.bind(person);
greetFunction(); // Output: "Hello, my name is John"

Этот метод особенно полезен в обработке событий и при работе с объектно-ориентированным JavaScript.

Методы JavaScript JSON

ES5引入了对 JSON内置支持：

Метод JavaScript JSON parse()

JSON.parse()解析一个JSON字符串，构建由字符串描述的JavaScript值或对象。

let jsonString = '{"name":"John", "age":30, "city":"New York"}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // Output: "John"

Этот метод crucial при работе с данными от API или сохранении сложных структур данных в виде строк.

Метод JavaScript JSON stringify()

JSON.stringify() преобразует JavaScript объект или значение в строку JSON.

let obj = {name: "John", age: 30, city: "New York"};
let jsonString = JSON.stringify(obj);
console.log(jsonString); // Output: '{"name":"John","age":30,"city":"New York"}'

Этот метод полезен при отправке данных на сервер или сохранении сложных объектов в виде строк.

JavaScript Multiline Strings

ES5引入了一种使用反斜杠字符创建多行字符串的方式：

let multiline = "This is a \
multiline string \
in JavaScript.";
console.log(multiline);
// Output:
// This is a multiline string in JavaScript.

Эта функция упрощает writing long strings文字 в вашем коде.

JavaScript Object Methods

ES5引入了几种新的方法来处理对象：

Метод JavaScript Object defineProperty()

Object.defineProperty() позволяет вам определять новые или изменять существующие свойства напрямую на объекте, с точным контролем над этими свойствами.

let obj = {};
Object.defineProperty(obj, 'name', {
value: 'John',
writable: false,
enumerable: true,
configurable: true
});
console.log(obj.name); // Output: "John"
obj.name = 'Jane'; // Это не изменит значение, так как writable установлено в false
console.log(obj.name); // Output: "John"

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

JavaScript Property getters и setters

ES5引入了 методы получателей и установщиков, позволяющие вам определять, как Property будет accessed или изменен:

let person = {
firstName: 'John',
lastName: 'Doe',
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(name) {
let parts = name.split(' ');
this.firstName = parts[0];
this.lastName = parts[1];
}
};

console.log(person.fullName); // Output: "John Doe"
person.fullName = 'Jane Smith';
console.log(person.firstName); // Output: "Jane"
console.log(person.lastName); // Output: "Smith"

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

JavaScript Reserved words как property names

ES5 позволяет использовать зарезервированные слова в качестве имен свойств в объектных литералах:

let obj = {
class: 'JavaScript',
for: 'beginners',
if: true
};
console.log(obj.class); // Output: "JavaScript"

Эта функция предоставляет большую гибкость при命名 свойств объектов.

JavaScript "use strict"

ES5引入了"use strict" директиву, которая включает strict mode в JavaScript. Strict mode ловит распространенные ошибки программирования, выбрасывая исключения и предотвращая или выбрасывая ошибки, когда выполняются потенциально опасные действия.

"use strict";
x = 3.14; // Это вызовет ошибку, так как x не объявлен

Использование strict mode помогает ловить ошибки рано и поощряет mejores практики программирования.

JavaScript String[номер] доступ

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

let str = "Hello";
console.log(str[0]); // Output: "H"
console.log(str[1]); // Output: "e"

Эта функция упрощает работу с отдельными символами в строках.

JavaScript String trim()

Метод trim() удаляет пробелы с обоих концов строки:

let str = "   Hello, World!   ";
console.log(str.trim()); // Output: "Hello, World!"

Этот метод полезен для очистки ввода пользователя или форматирования строк.

JavaScript Trailing commas

ES5 позволяет использовать尾声овые запятые в объектных и массивных литералах:

let obj = {
name: "John",
age: 30,
}; // Нет ошибки

let arr = [1, 2, 3,]; // Нет ошибки

Эта функция упрощает добавление или удаление элементов из объектов и массивов без担心 о размещении запятых.

Заключение

Уф! Мы covered много ground в этом руководстве. ES5 brought множество мощных функций в JavaScript, которые все еще widelyused сегодня. Помните, что обучение программированию — это как учение новому языку — это требует практики и терпения. Не отчаивайтесь, если вы не понимаете все сразу. Продолжайте программировать, продолжайте экспериментировать и,最重要的是, получайте удовольствие!

Вот таблица, резюмирующая все методы, о которых мы говорили:

Метод	Описание
Array.every()	Проверяет, проходят ли все элементы в массиве тест, реализованный предоставленной функцией
Array.filter()	Создает новый массив с allen элементами, прошедшими тест, реализованный предоставленной функцией
Array.forEach()	Выполняет предоставленную функцию один раз для каждого элемента массива
Array.isArray()	Определяет, является ли переданный аргумент массивом
Array.indexOf()	Возвращает первый индекс, в котором можно найти данный элемент в массиве, или -1, если его нет
Array.lastIndexOf()	Возвращает последний индекс, в котором можно найти данный элемент в массиве, или -1, если его нет
Array.map()	Создает новый массив с результатами вызова предоставленной функции на каждом элементе в массиве
Array.reduce()	Выполняет функцию редукции на каждом элементе массива, resulting в единственное значение вывода
Array.reduceRight()	Выполняет функцию редукции на каждом элементе массива справа налево
Array.some()	Проверяет, проходят ли хотя бы один элемент в массиве тест, реализованный предоставленной функцией
Date.now()	Возвращает количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 UTC
Date.toJSON()	Возвращает строковое представление объекта Date в формате JSON
Date.toISOString()	Преобразует объект Date в строку, используя формат ISO 8601
Function.bind()	Создает новую функцию, которая, когда вызывается, имеет свое this keyword установлено на предоставленное значение
JSON.parse()	Парсит JSON-строку, создавая JavaScript-значение или объект, описанный строкой
JSON.stringify()	Преобразует JavaScript-объект или значение в строку JSON
Object.defineProperty()	Определяет новое свойство напрямую на объекте или изменяет существующее свойство
String.trim()	Удаляет пробелы с обоих концов строки

Держите эту таблицу под рукой в качестве quick reference, когда вы программируете. Счастливого JavaScripting!

Credits: Image by storyset