JavaScript үндэс / Задлан авах (Destructuring)

Задлан авах (Destructuring)

Destructuring бол объект эсвэл массиваас утгыг товч, цэвэрхэн байдлаар задлан авах арга юм. Уртаар бичих хэрэггүй болж, код уншигдахад хялбар болно.

Объект destructuring

Уламжлалт аргаар объектоос утга авах нь тийм ч богино биш:

javascript

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

// Уламжлалт арга
const нэр = хүн.нэр;
const нас = хүн.нас;

Destructuring ашиглавал нэг мөрд бичиж болно:

javascript

const { нэр, нас, хот } = хүн;

console.log(нэр); // Болд
console.log(нас); // 25
console.log(хот); // Улаанбаатар

Хаалтын дотор бичсэн нэрс нь объектын key-тэй таарч байх ёстой.

Өөр нэр өгөх

Задлан авахдаа шинэ нэр (alias) өгч болно. : тэмдгийн дараа шинэ нэрийг бичнэ.

javascript

const хүн = { нэр: "Нарантуяа", нас: 22 };

const { нэр: овог, нас: жил } = хүн;

console.log(овог); // Нарантуяа
console.log(жил); // 22

Анхны утга (default value)

Задлан авахдаа шинж чанар байхгүй тохиолдолд ашиглах анхны утгыг тохируулж болно.

javascript

const тохиргоо = { хэлний: "mn" };

const { хэлний, харанхуй = false } = тохиргоо;

console.log(хэлний); // mn
console.log(харанхуй); // false  ← объектод байхгүй тул анхны утга ашиглагдав

Массив destructuring

Объект шиг массиваас ч задлан авч болно. Гэхдээ {} биш [] ашиглана, мөн нэрсийг дурын болгож болно.

javascript

const өнгөнүүд = ["улаан", "ногоон", "цэнхэр"];

const [эхний, хоёр дах, гурав дах] = өнгөнүүд;

console.log(эхний);     // улаан
console.log(хоёр дах);  // ногоон
console.log(гурав дах); // цэнхэр

Зарим элементийг алгасахдаа тухайн байрыг хоосон үлдээнэ:

javascript

const тоонууд = [10, 20, 30, 40];

const [эхний, , гурав дах] = тоонууд;

console.log(эхний);     // 10
console.log(гурав дах); // 30

Функцийн параметр дээр destructuring

Функц объект хүлээн авахдаа шууд параметр дотроо задалж болно. Энэ арга нь React компонентод маш өргөн хэрэглэгддэг.

javascript

function мэндлэх({ нэр, нас }) {
  console.log(`Сайн уу, ${нэр}! Та ${нас} настай байна.`);
}

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

Nested destructuring

Объект дотор объект байвал дотоод шинж чанарыг ч задалж болно.

javascript

const сурагч = {
  нэр: "Оюунбаатар",
  хаяг: {
    хот: "Улаанбаатар",
    дүүрэг: "Баянзүрх",
  },
};

const {
  нэр,
  хаяг: { хот, дүүрэг },
} = сурагч;

console.log(нэр); // Оюунбаатар
console.log(хот); // Улаанбаатар
console.log(дүүрэг); // Баянзүрх

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

Spread (...) ба Rest (...) операторуудыг үзнэ — массив, объектыг нэгтгэх, хуулах, функцид олон аргумент дамжуулах зэрэгт хэрэглэгддэг нэн чухал арга юм.

← Өмнөх хичээлОбъектын методууд Дараах хичээл →Spread ба Rest оператор