JavaScript объекты и массивы: от основ к продвинутым техникам

// Создание объекта
const person = {
firstName: "Иван",
lastName: "Петров",
age: 30,
isEmployee: true
};

// Создание массива
const numbers = [1, 2, 3, 4, 5];
const mixedArray = [1, "строка", true, { key: "value" }, [1, 2]];

// Доступ к свойствам объекта
console.log(person.firstName); // "Иван"
console.log(person["lastName"]); // "Петров"

// Доступ к элементам массива
console.log(numbers[0]); // 1
console.log(mixedArray[3].key); // "value"

// Пример с примитивами
let x = 10;
let y = x;
y = 20;
console.log(x); // 10 (не изменился)

// Пример с объектами
let obj1 = { value: 10 };
let obj2 = obj1;
obj2.value = 20;
console.log(obj1.value); // 20 (изменился!)

// Литеральная нотация
const user = {
name: "Алексей",
role: "администратор"
};

// Конструктор Object()
const emptyUser = new Object();
emptyUser.name = "Мария";
emptyUser.role = "редактор";

// Функция-конструктор
function User(name, role) {
this.name = name;
this.role = role;
this.created = new Date();
}
const newUser = new User("Сергей", "модератор");

// Метод Object.create()
const userPrototype = { 
getInfo() { return `${this.name} (${this.role})`; }
};
const admin = Object.create(userPrototype);
admin.name = "Дмитрий";
admin.role = "суперадмин";

// Класс ES6+
class UserAccount {
constructor(name, role) {
this.name = name;
this.role = role;
}

getInfo() { return `${this.name} (${this.role})`; }
}
const manager = new UserAccount("Елена", "менеджер");

const product = {
name: "Ноутбук",
price: 65000,
inStock: true
};

// Добавление новых свойств
product.category = "Электроника";
product["discount"] = 10;

// Изменение существующих свойств
product.price = 59000;
product["inStock"] = false;

// Удаление свойств
delete product.discount;

const store = {
name: "ТехноМаркет",
address: {
city: "Москва",
street: "Ленина",
building: 15
},
products: [
{ id: 1, name: "Смартфон", price: 30000 },
{ id: 2, name: "Планшет", price: 45000 }
],
calculateTotalValue() {
return this.products.reduce((sum, product) => sum + product.price, 0);
},
findProduct(id) {
return this.products.find(product => product.id === id);
}
};

console.log(store.address.city); // "Москва"
console.log(store.products[0].name); // "Смартфон"
console.log(store.calculateTotalValue()); // 75000
console.log(store.findProduct(2).name); // "Планшет"

const person = {
firstName: "Антон",
lastName: "Сидоров",
age: 35,
contacts: {
email: "anton@example.com",
phone: "+7 999 123 45 67"
}
};

// Базовая деструктуризация
const { firstName, lastName } = person;
console.log(`${firstName} ${lastName}`); // "Антон Сидоров"

// Вложенная деструктуризация
const { contacts: { email, phone } } = person;
console.log(email); // "anton@example.com"

// Деструктуризация с установкой значений по умолчанию
const { company = "Не указана" } = person;
console.log(company); // "Не указана"

// Переименование переменных при деструктуризации
const { firstName: name, age: years } = person;
console.log(`${name}, ${years} лет`); // "Антон, 35 лет"

const fruits = ["Яблоко", "Банан"];

// Добавление элементов
fruits.push("Апельсин"); // Добавление в конец: ["Яблоко", "Банан", "Апельсин"]
fruits.unshift("Груша"); // Добавление в начало: ["Груша", "Яблоко", "Банан", "Апельсин"]

// Удаление элементов
const lastFruit = fruits.pop(); // Удаление с конца: ["Груша", "Яблоко", "Банан"], lastFruit = "Апельсин"
const firstFruit = fruits.shift(); // Удаление с начала: ["Яблоко", "Банан"], firstFruit = "Груша"

// Работа с подмассивами
const citrus = fruits.slice(1, 2); // Создание подмассива: ["Банан"]
fruits.splice(1, 0, "Манго", "Киви"); // Вставка элементов: ["Яблоко", "Манго", "Киви", "Банан"]
fruits.splice(2, 1); // Удаление элемента: ["Яблоко", "Манго", "Банан"]

// Поиск элементов
const index = fruits.indexOf("Манго"); // 1
const includes = fruits.includes("Груша"); // false

const numbers = [1, 2, 3, 4, 5];

// forEach для выполнения действия с каждым элементом
numbers.forEach(num => console.log(num * 2)); // Выводит: 2, 4, 6, 8, 10

// map для создания нового массива с преобразованными значениями
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]

// filter для создания массива с элементами, удовлетворяющими условию
const evens = numbers.filter(num => num % 2 === 0); // [2, 4]

// find для поиска первого элемента, удовлетворяющего условию
const firstEven = numbers.find(num => num % 2 === 0); // 2

// some для проверки, удовлетворяет ли хотя бы один элемент условию
const hasLarge = numbers.some(num => num > 4); // true

// every для проверки, удовлетворяют ли все элементы условию
const allPositive = numbers.every(num => num > 0); // true

// reduce для сведения массива к единому значению
const sum = numbers.reduce((acc, curr) => acc + curr, 0); // 15
const product = numbers.reduce((acc, curr) => acc * curr, 1); // 120

const users = [
{ id: 1, name: "Анна", age: 28, active: true },
{ id: 2, name: "Борис", age: 35, active: false },
{ id: 3, name: "Виктор", age: 22, active: true },
{ id: 4, name: "Галина", age: 41, active: true }
];

// Найти имена активных пользователей старше 25 лет
const activeAdultNames = users
.filter(user => user.active && user.age > 25)
.map(user => user.name);
// ["Анна", "Галина"]

// Вычислить средний возраст активных пользователей
const averageActiveAge = users
.filter(user => user.active)
.reduce((sum, user, _, array) => sum + user.age / array.length, 0);
// ≈ 30.33

const colors = ["красный", "зеленый", "синий", "желтый"];

// 1. Цикл for (классический)
for (let i = 0; i < colors.length; i++) {
console.log(`Цвет ${i + 1}: ${colors[i]}`);
}

// 2. Цикл for...of (ES6+)
for (const color of colors) {
console.log(`Цвет: ${color}`);
}

// 3. Метод forEach
colors.forEach((color, index) => {
console.log(`Цвет ${index + 1}: ${color}`);
});

// 4. Метод map (когда нужно создать новый массив)
const colorMessages = colors.map((color, index) => 
`Цвет ${index + 1}: ${color}`
);

const person = {
name: "Максим",
age: 33,
occupation: "программист",
city: "Санкт-Петербург"
};

// 1. Цикл for...in (для перебора свойств объекта)
for (const key in person) {
if (person.hasOwnProperty(key)) {
console.log(`${key}: ${person[key]}`);
}
}

// 2. Object.keys() с forEach
Object.keys(person).forEach(key => {
console.log(`${key}: ${person[key]}`);
});

// 3. Object.entries() с деструктуризацией
Object.entries(person).forEach(([key, value]) => {
console.log(`${key}: ${value}`);
});

const products = [
{ id: 1, name: "Ноутбук", price: 85000, inStock: true },
{ id: 2, name: "Смартфон", price: 35000, inStock: true },
{ id: 3, name: "Наушники", price: 5000, inStock: false },
{ id: 4, name: "Монитор", price: 25000, inStock: true },
{ id: 5, name: "Клавиатура", price: 3000, inStock: true }
];

// 1. Метод filter
const affordableProducts = products.filter(product => 
product.price < 30000 && product.inStock
);

// 2. Фильтрация с использованием reduce
const expensiveInStock = products.reduce((result, product) => {
if (product.price > 30000 && product.inStock) {
result.push(product);
}
return result;
}, []);

// 3. Императивный подход с циклом for
const cheapProducts = [];
for (let i = 0; i < products.length; i++) {
if (products[i].price < 10000) {
cheapProducts.push(products[i]);
}
}

const departments = [
{
name: "Разработка",
employees: [
{ id: 101, name: "Алексей", salary: 120000 },
{ id: 102, name: "Екатерина", salary: 150000 },
{ id: 103, name: "Дмитрий", salary: 100000 }
]
},
{
name: "Маркетинг",
employees: [
{ id: 201, name: "Мария", salary: 90000 },
{ id: 202, name: "Антон", salary: 110000 }
]
},
{
name: "Поддержка",
employees: [
{ id: 301, name: "Ольга", salary: 80000 },
{ id: 302, name: "Сергей", salary: 85000 },
{ id: 303, name: "Наталья", salary: 75000 }
]
}
];

// Найти всех сотрудников с зарплатой выше 100000
const highPaidEmployees = departments
.flatMap(dept => dept.employees)
.filter(emp => emp.salary > 100000);

// Найти отделы, где средняя зарплата превышает 100000
const highPaidDepartments = departments
.filter(dept => {
const totalSalary = dept.employees.reduce((sum, emp) => sum + emp.salary, 0);
const averageSalary = totalSalary / dept.employees.length;
return averageSalary > 100000;
})
.map(dept => dept.name);

// Сгруппировать сотрудников по уровню зарплаты
const employeesBySalaryLevel = departments
.flatMap(dept => dept.employees)
.reduce((result, emp) => {
const level = emp.salary > 100000 ? "high" : 
emp.salary > 80000 ? "medium" : "low";

if (!result[level]) {
result[level] = [];
}

result[level].push(emp);
return result;
}, {});

// Проблема с поверхностным копированием
const original = { 
name: "Объект", 
settings: { theme: "dark", notifications: true } 
};
const shallowCopy = { ...original };
shallowCopy.settings.theme = "light";
console.log(original.settings.theme); // "light" – оригинал изменился!

// Решение 1: JSON (с ограничениями)
const deepCopyJSON = JSON.parse(JSON.stringify(original));
deepCopyJSON.settings.theme = "blue";
console.log(original.settings.theme); // "light" – оригинал не изменился

// Решение 2: рекурсивная функция
function deepCopy(obj) {
if (obj === null || typeof obj !== "object") return obj;

const copy = Array.isArray(obj) ? [] : {};

for (const key in obj) {
if (Object.hasOwnProperty.call(obj, key)) {
copy[key] = deepCopy(obj[key]);
}
}

return copy;
}

const deepCopyCustom = deepCopy(original);
deepCopyCustom.settings.theme = "green";
console.log(original.settings.theme); // "light" – оригинал не изменился

// Слияние объектов
const defaultSettings = { theme: "light", fontSize: "medium", notifications: true };
const userSettings = { theme: "dark", autoSave: true };

// С помощью Object.assign (изменяет первый объект)
const mergedSettings1 = Object.assign({}, defaultSettings, userSettings);

// С помощью оператора spread (не изменяет исходные объекты)
const mergedSettings2 = { ...defaultSettings, ...userSettings };

// Глубокое слияние объектов (рекурсивно)
function deepMerge(target, source) {
const output = { ...target };

if (isObject(target) && isObject(source)) {
Object.keys(source).forEach(key => {
if (isObject(source[key])) {
if (!(key in target)) {
output[key] = source[key];
} else {
output[key] = deepMerge(target[key], source[key]);
}
} else {
output[key] = source[key];
}
});
}

return output;

function isObject(item) {
return item && typeof item === 'object' && !Array.isArray(item);
}
}

const deepMerged = deepMerge(defaultSettings, { 
advanced: { compression: true, encryption: { enabled: true } } 
});

const state = {
user: {
name: "Александр",
preferences: {
theme: "dark",
fontSize: "medium"
}
},
cart: [
{ id: 1, name: "Товар 1", quantity: 2 },
{ id: 2, name: "Товар 2", quantity: 1 }
]
};

// Изменение вложенного свойства
const newState1 = {
...state,
user: {
...state.user,
preferences: {
...state.user.preferences,
theme: "light"
}
}
};

// Добавление элемента в массив
const newState2 = {
...state,
cart: [
...state.cart,
{ id: 3, name: "Товар 3", quantity: 3 }
]
};

// Удаление элемента из массива
const newState3 = {
...state,
cart: state.cart.filter(item => item.id !== 2)
};

// Обновление элемента в массиве
const newState4 = {
...state,
cart: state.cart.map(item => 
item.id === 1 ? { ...item, quantity: 3 } : item
)
};

// Создание индексов для быстрого поиска
const users = [
{ id: 1, name: "Анна", department: "HR" },
{ id: 2, name: "Борис", department: "IT" },
{ id: 3, name: "Виктор", department: "Finance" },
{ id: 4, name: "Галина", department: "IT" }
];

// Создаем карту для быстрого поиска по ID
const userMap = users.reduce((map, user) => {
map[user.id] = user;
return map;
}, {});

// Быстрый поиск пользователя
console.log(userMap[2]); // { id: 2, name: "Борис", department: "IT" }

// Группировка пользователей по отделу
const departmentGroups = users.reduce((groups, user) => {
const { department } = user;
if (!groups[department]) {
groups[department] = [];
}
groups[department].push(user);
return groups;
}, {});

// Получаем всех пользователей IT-отдела
console.log(departmentGroups["IT"]); // [Борис, Галина]

// Композиция функций для обработки данных
const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x);

const filterActive = users => users.filter(user => user.active);
const sortByAge = users => [...users].sort((a, b) => a.age – b.age);
const mapToNames = users => users.map(user => user.name);
const takeFirst3 = users => users.slice(0, 3);

const getTop3ActiveUsersByAge = pipe(
filterActive,
sortByAge,
takeFirst3,
mapToNames
);

// Применение нашего конвейера к данным
const userList = [
{ name: "Анна", age: 28, active: true },
{ name: "Борис", age: 35, active: false },
{ name: "Виктор", age: 22, active: true },
{ name: "Галина", age: 41, active: true },
{ name: "Дмитрий", age: 19, active: true }
];

const top3 = getTop3ActiveUsersByAge(userList);
console.log(top3); // ["Дмитрий", "Виктор", "Анна"]

// Создание реактивного объекта с помощью Proxy
function reactive(obj) {
return new Proxy(obj, {
get(target, prop) {
console.log(`Доступ к свойству "${prop}"`);
return target[prop];
},
set(target, prop, value) {
console.log(`Изменение "${prop}" с ${target[prop]} на ${value}`);
target[prop] = value;
return true;
}
});
}

const user = reactive({
name: "Максим",
age: 30
});

user.name = "Артем"; // Логирование: Изменение "name" с Максим на Артем
console.log(user.age); // Логирование: Доступ к свойству "age", затем вывод: 30

// Валидация объекта с помощью Proxy
function validated(obj, validationRules) {
return new Proxy(obj, {
set(target, prop, value) {
if (validationRules[prop]) {
const isValid = validationRules[prop](value);
if (!isValid) {
throw new Error(`Недопустимое значение для "${prop}": ${value}`);
}
}
target[prop] = value;
return true;
}
});
}

const product = validated(
{ name: "Телефон", price: 30000 },
{
price: value => typeof value === 'number' && value > 0
}
);

product.price = 25000; // ОК
// product.price = -100; // Ошибка: Недопустимое значение для "price": -100
// product.price = "дешево"; // Ошибка: Недопустимое значение для "price": дешево