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

Өмнөх хичээлд объект үүсгэж, шинж чанаруудад хандаж сурсан. Энэ хичээлд объектод функц хэрхэн нэмэх, мөн JavaScript-ийн бэлэн Object методуудыг хэрхэн ашиглах талаар үзнэ.

Объект дотор функц

Объектын утга нь функц байж болно. Объектод хамаарах функцийг метод гэж нэрлэнэ.

const хүн = {
  нэр: "Болд",
  нас: 25,
  мэндлэх: function () {
    console.log("Сайн уу, би Болд!");
  },
};

хүн.мэндлэх(); // Сайн уу, би Болд!

ES6-с хойш функцийг товчлон бичиж болно:

const хүн = {
  нэр: "Болд",
  мэндлэх() {
    console.log("Сайн уу!");
  },
};

хүн.мэндлэх(); // Сайн уу!

this түлхүүр үг

Метод дотроос тухайн объектынхоо шинж чанарт хандахдаа this гэж бичнэ. this нь "энэ объект" гэсэн утгатай.

const хүн = {
  нэр: "Нарантуяа",
  нас: 22,
  танилцуулах() {
    console.log("Миний нэр " + this.нэр + ", нас " + this.нас);
  },
};

хүн.танилцуулах(); // Миний нэр Нарантуяа, нас 22

this.нэр нь хүн.нэр-тэй ижил утгатай — гэхдээ this ашиглах нь илүү найдвартай, учир нь объектын нэр өөрчлөгдвөл дотоод код хэвийн ажиллана.

Object.keys()

Object.keys() нь объектын бүх key-г массив болгон буцаана.

const машин = {
  марк: "Toyota",
  он: 2020,
  өнгө: "цагаан",
};

const түлхүүрүүд = Object.keys(машин);
console.log(түлхүүрүүд); // ["марк", "он", "өнгө"]

Object.values()

Object.values() нь объектын бүх утгыг массив болгон буцаана.

const утгууд = Object.values(машин);
console.log(утгууд); // ["Toyota", 2020, "цагаан"]

Object.entries()

Object.entries() нь key-value хосуудыг массив болгон буцаана. for...of-тэй хамт ашиглахад маш тохиромжтой.

const машин = {
  марк: "Toyota",
  он: 2020,
  өнгө: "цагаан",
};

for (const [түлхүүр, утга] of Object.entries(машин)) {
  console.log(түлхүүр + " → " + утга);
}
// марк → Toyota
// он → 2020
// өнгө → цагаан

Object.assign()

Object.assign() нь нэг буюу хэд хэдэн объектын шинж чанарыг өөр объект руу хуулна.

const үндсэн = { нэр: "Болд", нас: 25 };
const нэмэлт = { хот: "Улаанбаатар", мэргэжил: "Программист" };

const бүрэн = Object.assign({}, үндсэн, нэмэлт);
console.log(бүрэн);
// { нэр: "Болд", нас: 25, хот: "Улаанбаатар", мэргэжил: "Программист" }

Эхний аргумент {} нь шинэ хоосон объект — энд хуулалт очно. Ийм байдлаар эх объектуудаа өөрчлөхгүйгээр нэгтгэж болно.

Дараагийн хичээлд:

Destructuring — объект болон массиваас утгыг товч байдлаар задлан авах аргыг үзнэ. Энэ нь React болон орчин үеийн JavaScript-д өдөр тутам хэрэглэгддэг маш чухал арга юм.