Цикл

Техник технологийн хөгжлийн үрээр бүхий л зүйл өөрчлөгдөн шинэчлэгдэж байдаг. Энэ үзэгдэл мэдээллийн технологийн салбарт бүр ч илүү хурдтай явдагийг бүгд мэднэ. Иймээс энэ салбарт ажиллаж буй мэрэгжилтэнүүд болон ажиллахаар бэлтгэгдэж байгаа залуусын хамгийн эхний зорилт бол хөгжлөөс хоцрохгүй байх юм. Сүүлийн жилүүдэд javascrip хэл маш хурдацтай хөгжин түүнийг програм зохиох ажилд улам өргөнөөр ашиглах болсон тул хэлийг сурч хөгжилтэй нь хөл нийлүүлэхэд туслах зорилгоор ES6 хэлний циклд шинээр нэмэгдсэн зүйлийн талаар энэ хичээлээр үзье.

Циклийн боломжийг дараах

const array = [1, 2, 3, 4, 5];

массиваар авч үзье. Дээрх массивын элементүүдийг консолд гаргахад өмнө хоёр аргыг ашиглаж болдогийн нэг бол for циклийг

for (let i=0; i < array.length; i++) {
    console.log(array[i]);
}

ашиглах юм. Терминалаас webpack -ийг ажлуулаад index.html хуудсаа хөтөч дээр нээн консолын цонхыг харвал

гэж харагдана. Үүнээс илүү эвтэйхэн арга бол foreach аргыг

const array = [1, 2, 3, 4, 5];

array.forEach(function (item) {
    console.log(item);
});

ашиглах. forEach нь array обьектын арга учраас түүнийг цэгээр дамжуулан дуудаж болно. Аргад эргэн дуудалтын функцийг өгөх хэрэгтэй бөгөөд энд бид ES5-ийн дүрмээр функцийг тодорхойлон өгсөн. forEach арга array обьектод итераци хийн алхам бүрдээ массивын элементийг авах бөгөөд түүнийг аргад дамжуулсан функц консолд үзүүлэх юм. Хуудсаа шинэчлээд консолын цонхыг харвал өмнөхтэй яг ижил үр дүнг авна.
ES6 - д дээрх ажиллагааг хийх илүү эвтэйхэн арга бий болсон.   

const array = [1, 2, 3, 4, 5];

for (let item of array) {
    console.log('Item : ', item);
}

Кодод өмнөхийн адилаар for циклийг ашигласан ч циклийн тодорхойлолтод let түлхүүр үгээр item хувьсагчийг үүсгэн өгөөд ES6 - д бий болсон of түлхүүр үгийг бичээд араас нь массивын нэрийг өгсөн. Тодорхойлолтыг тайлбарлая. for циклийн алхам бүрд array массивын элементээр item хувьсагчийг үүсгэнэ гэсэн үг. Циклийн бие хэсэгт item хувьсагчийг консолд үзүүлнэ. ES5 - ийн for цикл массивын элементэд хандахдаа түүний индексээр хандаж байсан бол ES6 - д of түлхүүр үгээр массивын элементэд хандаад түүнийг тусдаа хувьсагчид авч байгаа ялгааг сайн ойлгоорой. Өөрчлөлтөө хадгалаад консолын цонхыг харвал

дээрх үр дүнг харуулна. Webpack дээрх кодыг ES5-руу хэрхэн хөрвүүлсэнг харвал

эхлээд бичсэнтэй ижил кодыг гаргасан байгаа.
of түлхүүр үгийн боломжийг

for (let item of 'ABCDEFG') {
    console.log('Item : ', item);
}

кодоос харцгаая. of түлхүүр үгтэй итераци хийгдэх боломжтой бүх обьектыг ашиглах боломжтой. Дээрх кодод of 'ABCDEFG' гэж өгснөөр циклийн алхам бүрд мөрийн хэсэг бүрийг item хувьсагчид олгох болно. Хуудсаа харвал

мөрийн тэмдэгт бүрийг салган үзүүлнэ.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 4811 Бүртгүүлэх

JavaScript-ийн өгөгдлийн төрлүүд

Хувьсагч гэдэг нь компьютерын санах ойд хадгалагдаж байгаа тодорхой утгыг заах нэр юм. JavaScript –д зарлаж байгаа хувьсагчийн төрлийг урьдчилан заах хэрэггүй хэл хувьсагчийн төрлийг өөрөө тодорхойлдог. Бүхэл болон бутархай тоонуудад илт ялгагдах ялгаа бараг байхгүй. JavaScript доорх төрлүүдийг таньдаг.

Төрөл Нэр Тодорхойлолт
Number Тоо 16, 10, 8 тооллын системийн бүхэл, бутархай тоонууд
String Мөр Хашилтанд байх тэмдэгтүүд
Boolean Логик True ба False байх логик утгууд
Function Функц Функцын холбоос
Object Обьект Обьект , массив болон Null утгатай хувьсагчид

  Нээгдсэн тоо: 370 Төлбөртэй

Цэсийг нээх хаах ажиллагааг хариуцах компонентийг боловсруулсан тул энэ хичээлээр програмийн удирдах цэсийг хийе. Үүний тулд төслийн components хавтасны Navigation хавтаст цэсний компонентийн Drawer хавтасыг үүсгээд түүнд Drawer.js, Links.js, Drawer.module.css файлуудыг үүсгэн өгье. Drawer.js файлд

import classes from "./Drawer.module.css";
import {links} from "./Links"

const Drawer = (props) => {
  const renderLinks = () => {
    return links.map((link, index) => {
      return (
        <li key={index}>
          <a href="/#">Link {link}</a>
        </li>
      );
    });
  }
    
  return (
    <nav className={classes.Drawer}>
      <ul>{renderLinks()}</ul>
    </nav>
  )
}

export default Drawer;

код бүхий компонентийг үүсгэе.

  Нээгдсэн тоо: 2197 Нийтийн

Хичээлээр ES6 -гийн кодыг ES5 кодоор компиляц хийх талаар авч үзье. Юуны түрүүнд үүнийг ямар учраас хийх хэрэгтэй вэ? гэдгийг тайлбарлая. ES бол EcmaScript -ийн хураангуйлсан бичлэг бөгөөд 6 нь Javascript -ийн хувилбарын дугаар. ES6 гараад удаагүй байгаа ч түүнийг олон хөтөчүүд дэмжин ажилладаг болоод байгаа. Жишээ нь Chrome хөтөч ES6 дээр бичигдсэн кодыг шууд ажиллуулна. Гэвч олон хэрэглэгчид ES6 -г шууд дэмждэггүй хуучин хөтөчүүдийг жишээ нь Internet Explorer, Firefox -ийн хуучин хувилбарыг хэрэглэсээр байгаа. Харин эдгээр хуучин хөтөчүүд ES5 -ийг бүрэн дэмжин ажилладаг тул програмыг бүх хэрэглэгчид ямар нэгэн асуудалгүйгээр ашиглах боломжийг бүрдүүлэх зорилгоор ES6 -гийн кодыг ES5 кодоор компиляц хийх хэрэгцээ бий.

  Нээгдсэн тоо: 822 Төлбөртэй

Javascript дээр бичигдсэн RxJs сан нь програмчлалыг рейктив /reactive/ аргачлалаар боловсруулахад зориулагдсан. RxJs санг ашиглан массив, мөрүүд, тоонууд, промис /promise/, үйл явцууд /event/ гэх мэтийн өгөгдлийн төрлүүдээс гадна дурын синхрон зүйлүүдтэй амархан харьцан ажиллах боломжтой. Стримүүдийг нэгтгэх I хичээлд RxJs санг ашиглан өөр стримүүдийг нэг стримд нэгтгэх аргуудтай танилцаж ба энэ хичээлээр аргуудыг үргэлжлүүлэн авч үзнэ.

concatMap арга

Арга mergeMap аргатай тун адилхан. Аргыг ажиллагааг

Rx.Observable.range(1, 5)
    .concatMap((x, i) => {
        return Rx.Observable.interval(100)
            .take(x)
            .map(c => i)
    })
    .subscribe(createSubscribe('concatMap'));

кодоос харцгаая.

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

Нээгдсэн тоо : 309

 

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

Нээгдсэн тоо : 406

 

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

Нээгдсэн тоо : 354

 

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 450

 

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 524

 

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Нээгдсэн тоо : 520

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 624

 

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 716

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 754

 
Энэ долоо хоногт

задаргааны хамгийн их нэмэгдхүүн бол a, b, c -г ол.

Нээгдсэн тоо : 1551

 

тэгшитгэлийг бод.

Нээгдсэн тоо : 1207

 

функцийн уламжлалын утгыг ол.

Нээгдсэн тоо : 451