5 необходимых функций объектов JavaScript 🧑💻✍️

Давайте перейдем непосредственно к делу. Ниже вы найдете 5 полезных функций, которые можно использовать для объектов в JavaScript. 😎

Видео на YouTube

Если вам не нравится читать, не стесняйтесь смотреть мое видео на YouTube 👇

1. assign()

Начнем с Object.assign(). Эта функция отлично подходит для инициализации/слияния объектов, и вы можете использовать ее для установки значений по умолчанию.

Давайте посмотрим на нее в действии.

Ниже приведена функция, принимающая параметр options. Когда используется Object.assign(), любые свойства целевого объекта перезаписываются эквивалентными свойствами исходного объекта.

function foo(options) {
    const defaults = {
        maxPoints: 5000,
        startingCash: 100,
        rounds: 3,
    };

    // { maxPoints: 20000, startingCash: 100, rounds: 5 }
    options = Object.assign(defaults, options);
}

foo({
    maxPoints: 20000,
    rounds: 5
});
Вход в полноэкранный режим Выход из полноэкранного режима

Подсказка: синтаксис spread (...) служит аналогичной цели.

2. defineProperty()

Знаете ли вы, что существует причудливый способ определения новых свойств объекта в JavaScript? Так вот, есть.

Если вы используете эту функцию для добавления нового свойства к существующему объекту, вы можете «настроить» его определение. Например, вы можете сделать свойство неизменяемым.

Рассмотрим пример:

const person = {
    name: "Dom",
    age: 28,
    favoriteColor: "Blue"
};

// Add an immutable "country" property
Object.defineProperty(person, "country", {
    value: "Australia",
    writable: false
});

// Doesn't work!
person.country = "New Zealand";
Войти в полноэкранный режим Выйти из полноэкранного режима

Есть много других вещей, которые можно сделать с помощью функции defineProperty, и я рекомендую вам прочитать документацию MDN для получения дополнительной информации!

3. entries()

По сравнению с двумя предыдущими функциями, эта немного проще. Эта функция берет пары ключ-значение в объекте и преобразует их в двумерный массив.

Вот несколько вариантов использования этой функции:

  • построение строк запросов URL
  • перебор объектов (в сочетании с деструктуризацией массива).

Пример:

const color = {
    red: 0,
    green: 149,
    blue: 120
}

for (const [key, value] of Object.entries(color)) {
    console.log(`${key} => ${value}`);
}

/*
    Output:
    red => 0
    green => 149
    blue => 120
*/
Вход в полноэкранный режим Выход из полноэкранного режима

Запомните этот пример, потому что вы будете удивлены, когда он вам понадобится 😉

4. fromEntries()

Если вы не поняли из предыдущей функции, JavaScript называет двумерные массивы пар ключ-значение «записями».

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

Давайте посмотрим:

const colorArray = [
    ["red", 0],
    ["green", 149],
    ["blue", 120],
];

// { red: 0, green: 149, blue: 120 }
const color = Object.fromEntries(colorArray);
Вход в полноэкранный режим Выход из полноэкранного режима

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

5. Object.freeze()

Последняя, но не менее важная функция — Object.freeze(). Эта функция делает то, что написано на коробке: она замораживает переданный ей объект.

Замороженный объект означает:

  • новые свойства не могут быть добавлены
  • существующие свойства не могут быть изменены
  • существующие свойства не могут быть удалены

Пример:

const person = {
    name: "Dom",
    age: 28,
    favoriteColor: "Blue"
};

// none of these work ❌
person.country = "Australia";
person.name = "Rodney";
delete person.age
Вход в полноэкранный режим Выход из полноэкранного режима

Совет: вы можете использовать Object.unfreeze(), чтобы отменить этот эффект.

Запишитесь сейчас 👉 JavaScript DOM Crash Course

Если вы изучаете веб-разработку, вы можете найти полный курс по JavaScript DOM по ссылке ниже 👇.
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

Наслаждайтесь!

Оцените статью
devanswers.ru
Добавить комментарий