Объектные методы JavaScript

Каждый день мы работаем над проблемами реального мира, поэтому если язык реализации — JavaScript, то мы должны работать с объектами. А чтобы работать эффективно, мы должны знать наиболее используемые методы объекта. И я хочу сослаться на эту информацию, которая в этой статье основана на Mozila

Оглавление

1. создать()
2. присвоить()
3. ключи()
4. значения()
5. записи()
6. fromEntries()
7. freez() & seal()

Object.create()

Метод object.create() используется для создания нового объекта и связывания меня с прототипом существующего объекта. Он возвращает новый объект с указанным прототипом объекта и свойствами.

let student = {
    name: "Abid",
    age: 23,
    display() {
        console.log("Name: ", this.name);
        }
};

let std = Object.create(Student);  // Object Creation

std.name = "Ahmed" 
std.display();  // with same properties

Object.assign ()

Метод Object.assign() присваивает/копирует перечислимые и собственные свойства из исходного объекта в целевой объект. Он возвращает измененный или новый целевой объект.

const target = { a: 1, b: 2 };
const source = { c: 4, d: 5 };

// it merge the objects and return new objects
const newTarget = Object.assign(target, source); 

console.log(target);
// expected output: Object { a: 1, b: 2, c: 4, d:5 }

console.log(newTarget);
// expected output: Object { a: 1, b: 2, c: 4, d:5 }

Как вы заметили в приведенном выше примере, после слияния двух объектов он вернул результат в виде нового объекта, но при этом изменил и сам целевой объект. Если мы не хотим отражать изменения на существующих объектах, то мы должны использовать пустой объект {} в качестве первого параметра метода assign.

const target = { a: 1, b: 2 };
const source = { c: 4, d: 5 };

// it merge the objects and return new objects
const newObj = Object.assign({},target, source); 

console.log(target);
// expected output: Object { a: 1, b: 2 }

console.log(newObj);
// expected output: Object { a: 1, b: 2, , c: 4, d:5  }

Если свойства source и target одинаковы, то происходит перезапись свойства target новым значением source.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const newObj = Object.assign({}, target, source);

console.log(target);
// expected output: Object { a: 1, b: 2}

console.log(newObj);
// expected output: Object { a: 1, b: 4, c: 5 } // the target property is overwrite by source

Клонирование объекта

const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

Здесь клонирование имеет два различных поведения, если объект не имеет внутренних объектов, то клонирование работает как глубокое клонирование, а если объект клонирования имеет любой вложенный объект, то клонирование работает как поверхностное копирование только для вложенного объекта, это будет более понятно на примере:

let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}}

obj1.b.c = 3; // it reflect the changes in every shallow copy
console.log(JSON.stringify(obj1)); // { "a": 0, "b": { "c": 3}}
console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 3}}

В приведенном выше примере obj1 имеет внутренний объект следующего вида b: { c: 0}, поэтому ссылка на этот объект будет общей для всех новых клонов, и изменение в одном месте вызовет изменения во всех местах.

3. Object.keys():

Object.keys() создает и возвращает массив, содержащий ключи/имена объекта.

let student = {
    name: "Abid",
    age: 23,
    status: "Student"
};
console.log(Object.keys(Student)) // ['name', 'age', 'status']
console.log(Object.keys(Student))

4. Object.values()

Object.values() создает массив, содержащий значения объекта.

let student = {
    name: "Abid",
    age: 23,
    status: "Student"
};
console.log(Object.values(Student)) //  ['Abid', 23, 'Student']

5. Object.entries()

Object.entries() возвращает массив пар ключ/значения объекта.

let student = {
    name: "Abid",
    age: 23,
    status: "Student"
};
console.log(Object.entries(student)) // [ ["name", "Abid"], ["age", 23], ["status", "Student"]]

6. Object.fromEntries()

Object.fromEntries() делает прямо противоположное Object.entries(). Она берет массив пар ключ-значение и преобразует их в один объект.

let student = {
    name: "Abid",
    age: 23,
    status: "Student"
};
let studentArray = [["name", "Abid"], ["age", 23], ["status", "Student"]];
console.log(Object.fromEntries(studentArray)) // {name: 'Abid', age: 23, status: 'Student'}

7. Object.freez() и Object.seal()

Общие моменты:

• Оба предотвращают изменение объекта JavaScript.
• Вы не можете добавлять новые свойства
• Вы не можете удалить существующие свойства.

Разница:

Примечание: Компилятор не выдает ошибку, если мы нарушаем любое из вышеупомянутых правил.

Пример на уровне кода (заморозка и печать)

let frozen = Object.freeze({ username: "Abid"})
let sealed = Object.seal({ username: "Abid"})

// Adding new Property 
frozen.name = "Ahmed"
sealed.name = "Ahmed"

// removing existing property
delete frozen.username;
delete sealed.username;

// updating the existing property
frozen.username = "Ahmed"
sealed.username = "Ahmed"

console.log(frozen) // { username: 'Abid' }
console.log(sealed) // { username: 'Ahmed' }

Важные моменты: (freez и seal)

• Помните, что оба метода выполняют неглубокое замораживание/запечатывание объекта.
• Это означает, что вложенные объекты и массивы не замораживаются и не запечатываются и могут быть изменены.
• Чтобы предотвратить это, вам понадобится концепция глубокой заморозки объектов, о которой я расскажу в следующем посте

Изучение новых концепций в #JavaScript и обмен опытом с другими — это моя страсть, и мне доставляет удовольствие помогать и вдохновлять людей. Если у вас есть какие-либо предложения или вы хотите что-то добавить, пожалуйста, комментируйте.

Если вам понравился этот пост, следуйте за мной на: Twitter, Linkedinand GitHub!