Что такое JavaScript?
JavaScript, часто сокращенно JS, — это язык программирования, который является одной из основных технологий Всемирной паутины, наряду с HTML и CSS. Это позволяет нам добавлять интерактивность на страницы, например. вы могли видеть ползунки, оповещения, клики, всплывающие окна и т. д. на разных веб-сайтах — все это построено с использованием JavaScript. Помимо использования в браузере, он также используется в других небраузерных средах, таких как Node.js для написания кода на стороне сервера в JavaScript, Electron для написания настольных приложений, React Native для мобильных приложений и так далее.
Основная концепция:
- Переменные. Переменные используются для хранения значений в JavaScript. Они объявляются с использованием ключевых слов
var,letилиconst.varиletиспользуются для объявления изменяемых переменных, аconstиспользуются для объявления неизменяемых переменных. Вот пример:
var age = 25; // mutable variable let name = "John"; // mutable variable const PI = 3.14; // immutable variable
2. Типы данных. JavaScript поддерживает несколько типов данных, включая строки, числа, логические значения, массивы, объекты и многое другое. Вот некоторые примеры:
let name = "John"; // string
let age = 25; // number
let isMarried = false; // boolean
let fruits = ["apple", "banana", "orange"]; // array
let person = {name: "John", age: 25}; // object
3. Операторы. Операторы используются для выполнения операций со значениями в JavaScript. К ним относятся арифметические операторы, операторы сравнения, логические операторы и операторы присваивания. Вот некоторые примеры:
let x = 10; let y = 5; let sum = x + y; // arithmetic operator let isEqual = x == y; // comparison operator let isTrue = x > y && y < 20; // logical operator x += y; // assignment operator
4. Условные операторы. Условные операторы используются для выполнения различных кодов в зависимости от того, является ли условие истинным или ложным. К ним относятся if, else if и else. Вот пример:
let age = 25;
if (age < 18) {
console.log("You are too young to vote.");
} else if (age >= 18 && age < 65) {
console.log("You can vote.");
} else {
console.log("You are too old to vote.");
}
5. Циклы. Циклы используются для многократного выполнения блока кода. JavaScript поддерживает циклы for, while и do-while. Вот пример цикла for:
let fruits = ["apple", "banana", "orange"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
6. Функции. Функции — это повторно используемые блоки кода, которые выполняют определенную задачу. Они объявляются с использованием ключевого слова function. Вот пример:
function add(x, y) {
return x + y;
}
let sum = add(5, 10); // 15
7. Объекты. Объекты — это наборы пар ключ-значение, где каждый ключ представляет собой строку, а каждое значение может быть любым типом данных JavaScript. Они объявляются с помощью фигурных скобок {}. Вот пример:
let person = {
name: "John",
age: 25,
isMarried: false,
sayHello: function() {
console.log("Hello, my name is " + this.name);
}
};
person.sayHello(); // Hello, my name is John
Расширенные понятия:
- Объектно-ориентированное программирование (ООП). Объектно-ориентированное программирование — это парадигма программирования, основанная на объектах. В JavaScript объекты можно создавать с помощью литералов объектов, конструкторов или классов. Вот пример:
// Object literal
let person = {
name: "John",
age: 25,
sayHello: function() {
console.log("Hello, my name is " + this.name);
}
};
// Constructor
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log("Hello, my name is " + this.name);
}
}
let person1 = new Person("John", 25);
// Class
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log("Hello, my name is " + this.name);
}
}
let person2 = new Person("John", 25);
2. Асинхронное программирование. Асинхронное программирование позволяет выполнять длительные задачи, не блокируя основной поток. JavaScript поддерживает асинхронное программирование с использованием обратных вызовов, промисов и async/await. Вот пример использования промисов:
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data fetched successfully!");
}, 2000);
});
}
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));
3. Замыкания. Замыкания — это функции, которые имеют доступ к переменным в своей внешней области видимости даже после возврата внешней функции. Вот пример:
function outerFunction() {
let count = 0;
function innerFunction() {
count++;
console.log(count);
}
return innerFunction;
}
let increment = outerFunction();
increment(); // 1
increment(); // 2
4. Функции высшего порядка. Функции высшего порядка — это функции, которые принимают одну или несколько функций в качестве аргументов или возвращают функцию в качестве результата. Вот пример:
function multiplyBy(factor) {
return function(number) {
return number * factor;
}
}
let double = multiplyBy(2);
let triple = multiplyBy(3);
console.log(double(5)); // 10
console.log(triple(5)); // 15
5. Прототипное наследование. Прототипное наследование — это способ создания объектов на основе существующих объектов. В JavaScript объекты наследуют свойства и методы от своего прототипа. Вот пример:
let person = {
name: "John",
age: 25,
sayHello: function() {
console.log("Hello, my name is " + this.name);
}
};
let student = Object.create(person);
student.grade = "A";
console.log(student.name); // John
student.sayHello(); // Hello, my name is John
6. Модули. Модули позволяют организовать код в многократно используемые блоки. В JavaScript вы можете использовать ключевые слова import и export для создания и использования модулей. Вот пример:
// Module 1
export function add(x, y) {
return x + y;
}
export const PI = 3.14;
// Module 2
import { add, PI } from './module1.js';
let sum = add(5, 10);
console.log(sum); // 15
console.log(PI
Некоторые методы массива по умолчанию:
Методы массива:
1. concat() — объединяет два или более массива и возвращает новый массив.
let fruits = ['apple', 'banana']; let moreFruits = ['orange', 'kiwi']; let allFruits = fruits.concat(moreFruits); console.log(allFruits); // ["apple", "banana", "orange", "kiwi"]
2. every() — Проверяет, проходят ли все элементы массива тест, реализованный предоставленной функцией.
let numbers = [1, 2, 3, 4, 5]; let isGreaterThanZero = (number) => number > 0; let allNumbersGreaterThanZero = numbers.every(isGreaterThanZero); console.log(allNumbersGreaterThanZero); // true
3. filter() — создает новый массив со всеми элементами, прошедшими проверку, реализованную предоставленной функцией.
let numbers = [1, 2, 3, 4, 5]; let isEven = (number) => number % 2 === 0; let evenNumbers = numbers.filter(isEven); console.log(evenNumbers); // [2, 4]
4. find() — возвращает значение первого элемента массива, удовлетворяющего заданной функции тестирования.
let numbers = [1, 2, 3, 4, 5]; let isGreaterThanThree = (number) => number > 3; let firstNumberGreaterThanThree = numbers.find(isGreaterThanThree); console.log(firstNumberGreaterThanThree); // 4
5. forEach() — вызывает функцию для каждого элемента массива.
let numbers = [1, 2, 3, 4, 5]; numbers.forEach((number) => console.log(number));
6. includes() — определяет, содержит ли массив определенный элемент.
let fruits = ['apple', 'banana', 'orange'];
let hasBanana = fruits.includes('banana');
console.log(hasBanana); // true
7. indexOf() — возвращает первый индекс, по которому данный элемент может быть найден в массиве.
let fruits = ['apple', 'banana', 'orange'];
let bananaIndex = fruits.indexOf('banana');
console.log(bananaIndex); // 1
8. join() — объединяет все элементы массива в строку.
let fruits = ['apple', 'banana', 'orange'];
let fruitString = fruits.join(', ');
console.log(fruitString); // "apple, banana, orange"
9. lastIndexOf() — возвращает последний индекс, по которому данный элемент можно найти в массиве.
let fruits = ['apple', 'banana', 'orange', 'banana'];
let lastBananaIndex = fruits.lastIndexOf('banana');
console.log(lastBananaIndex); // 3
10. map() — создает новый массив с результатами вызова предоставленной функции для каждого элемента массива.
let numbers = [1, 2, 3, 4, 5]; let double = (number) => number * 2; let doubledNumbers = numbers.map(double); console.log(doubledNumbers); // [2, 4, 6, 8, 10]
11. pop() — удаляет последний элемент из массива и возвращает его.
let fruits = ['apple', 'banana', 'orange']; let lastFruit = fruits.pop(); console.log(lastFruit); // "orange" console.log
12. push() — добавляет один или несколько элементов в конец массива и возвращает новую длину массива.
let fruits = ['apple', 'banana'];
let newLength = fruits.push('orange', 'kiwi');
console.log(newLength); // 4
console.log(fruits); // ["apple", "banana", "orange", "kiwi"]
13. reduce() — выполняет функцию редуктора для каждого элемента массива, в результате чего получается одно выходное значение.
let numbers = [1, 2, 3, 4, 5]; let sum = (accumulator, currentValue) => accumulator + currentValue; let total = numbers.reduce(sum); console.log(total); // 15reverse() - Reverses the order of the elements in the array.
14. reverse() — меняет порядок элементов в массиве на обратный.
let fruits = ['apple', 'banana', 'orange']; let reversedFruits = fruits.reverse(); console.log(reversedFruits); // ["orange", "banana", "apple"]
15. shift() - Удаляет первый элемент из массива и возвращает его.
let fruits = ['apple', 'banana', 'orange']; let firstFruit = fruits.shift(); console.log(firstFruit); // "apple" console.log(fruits); // ["banana", "orange"]
16. slice() — извлекает часть массива и возвращает новый массив.
let fruits = ['apple', 'banana', 'orange', 'kiwi']; let citrusFruits = fruits.slice(2); console.log(citrusFruits); // ["orange", "kiwi"]
17. some() — Проверяет, проходит ли хотя бы один элемент в массиве тест, реализованный предоставленной функцией.
let numbers = [1, 2, 3, 4, 5]; let isGreaterThanFour = (number) => number > 4; let someNumbersGreaterThanFour = numbers.some(isGreaterThanFour); console.log(someNumbersGreaterThanFour); // true
18. sort() — сортирует элементы массива на месте и возвращает отсортированный массив.
let fruits = ['banana', 'orange', 'apple']; let sortedFruits = fruits.sort(); console.log(sortedFruits); // ["apple", "banana", "orange"]
19. splice() — Добавляет или удаляет элементы из массива по указанному индексу.
let fruits = ['apple', 'banana', 'orange', 'kiwi']; fruits.splice(2, 1, 'grape', 'pineapple'); console.log(fruits); // ["apple", "banana", "grape", "pineapple", "kiwi"]
20. toString() — Преобразует массив в строку и возвращает результат.
let fruits = ['apple', 'banana', 'orange']; let fruitString = fruits.toString(); console.log(fruitString); // "apple,banana,orange"
21. unshift() — добавляет один или несколько элементов в начало массива и возвращает новую длину массива.
let fruits = ['banana', 'orange'];
let newLength = fruits.unshift('apple', 'kiwi');
console.log(newLength); // 4
console.log(fruits); // ["apple", "kiwi", "banana", "orange"]
Завершая наш блог о JavaScript некоторыми основными понятиями и методами по умолчанию, которые будут более подробно рассмотрены в будущем, мы надеемся, что эти беззаботные моменты вызвали у вас улыбку. Программирование может быть сложной задачей, но важно получать удовольствие от процесса. Помните, что даже в мире программирования смех — лучший синтаксис. Удачного кодирования и продолжайте исследовать увлекательный мир JavaScript с игривым духом!
Спасибо!!!
