TypeScript / Массив ба Tuple

Массив ба Tuple

Бид нэг утга хадгалах хувьсагчийг судалсан. Харин олон утгыг хамтад нь хадгалах шаардлага гарвал яах вэ? Тэгэхэд массив (array) ашигладаг. TypeScript-д массив нь бүх элементийнхээ төрлийг мэддэг.

Массив үүсгэх

TypeScript-д массивын төрлийг хоёр янзаар бичнэ:

typescript
// 1-р арга: төрөл + []
const тоонууд: number[] = [1, 2, 3, 4, 5];
const нэрнүүд: string[] = ["Болд", "Сарнай", "Мөнх"];
const тэмдэглэгч: boolean[] = [true, false, true];

// 2-р арга: Array<төрөл>
const тоонууд: Array<number> = [1, 2, 3, 4, 5];
const нэрнүүд: Array<string> = ["Болд", "Сарнай", "Мөнх"];

Хоёр арга нь ижил үр дүнтэй. Эхний арга (number[]) илүү товч тул ихэвчлэн ашигладаг.

Массивтай ажиллах

typescript
const үнэлгээнүүд: number[] = [85, 92, 78, 95, 88];

console.log(үнэлгээнүүд[0]); // 85 — эхний элемент
console.log(үнэлгээнүүд.length); // 5 — нийт тоо

үнэлгээнүүд.push(100); // эцэст нэмэх
console.log(үнэлгээнүүд); // [85, 92, 78, 95, 88, 100]

const нийлбэр = үнэлгээнүүд.reduce((нийт, утга) => нийт + утга, 0);
console.log(нийлбэр); // 538

TypeScript массивын аль ч аргыг (push, pop, map, filter, reduce гэх мэт) дэмждэг бөгөөд буцаах төрлийг автоматаар мэддэг.

Массивыг давах

for...of болон forEach ашиглан массивын элементүүдийг дэс дараалан уншина:

typescript
const хичээлүүд: string[] = ["TypeScript", "React", "Next.js"];

for (const хичээл of хичээлүүд) {
  console.log(`📚 ${хичээл}`);
}
// 📚 TypeScript
// 📚 React
// 📚 Next.js

хичээлүүд.forEach((хичээл, дугаар) => {
  console.log(`${дугаар + 1}. ${хичээл}`);
});
// 1. TypeScript
// 2. React
// 3. Next.js

Олон хэмжээст массив

Массив доторх массив буюу 2D массив ч үүсгэж болно:

typescript
const самбар: number[][] = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

console.log(самбар[1][2]); // 6 — хоёрдугаар мөр, гуравдугаар багана

number[][] гэдэг нь "number массивын массив" гэсэн утгатай.

Tuple — тогтмол бүтэцтэй массив

Tuple бол тогтмол тоотой, тогтмол дарааллын төрлүүдтэй массив. Жишээ нь, [нэр, нас] хос буюу [x, y] координат хадгалахад тохиромжтой.

typescript
// Хэрэглэгчийн [нэр, нас] хос
const хэрэглэгч: [string, number] = ["Болд", 25];

console.log(хэрэглэгч[0]); // "Болд" — string
console.log(хэрэглэгч[1]); // 25 — number

Tuple дахь дарааллыг өөрчилвөл TypeScript алдаа заана:

typescript
const хэрэглэгч: [string, number] = [25, "Болд"]; // Алдаа! Дараалал буруу

Tuple задлах (Destructuring)

typescript
const байрлал: [number, number] = [47.9, 106.9]; // Улаанбаатарын координат

const [өргөрөг, уртраг] = байрлал;
console.log(`Өргөрөг: ${өргөрөг}`); // Өргөрөг: 47.9
console.log(`Уртраг: ${уртраг}`); // Уртраг: 106.9

Задлах нь кодыг уншихад илүү ойлгомжтой болгодог.

Массив ба Tuple-ийн ялгаа

| Шинж чанар | Массив (Array) | Tuple | | ----------------- | ----------------- | ------------------------ | | Урт | Хязгааргүй | Тогтмол | | Элементийн төрөл | Бүгд адил төрөл | Өөр өөр төрөл байж болно | | Хэрэглэгдэх газар | Жагсаалт хадгалах | Тогтмол бүтэц илэрхийлэх |

typescript
// Массив — нэг төрлийн олон утга
const оноонууд: number[] = [10, 20, 30, 40];

// Tuple — өөр өөр төрлийн тогтмол тоо
const бүртгэл: [string, number, boolean] = ["Сарнай", 92, true];

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

TypeScript-ийн Enum — тогтмол сонголтын бүлгийг хэрхэн зохион байгуулах, кодоо уншихад хялбар болгох аргыг судална.