Цикл

Техник технологийн хөгжлийн үрээр бүхий л зүйл өөрчлөгдөн шинэчлэгдэж байдаг. Энэ үзэгдэл мэдээллийн технологийн салбарт бүр ч илүү хурдтай явдагийг бүгд мэднэ. Иймээс энэ салбарт ажиллаж буй мэрэгжилтэнүүд болон ажиллахаар бэлтгэгдэж байгаа залуусын хамгийн эхний зорилт бол хөгжлөөс хоцрохгүй байх юм. Сүүлийн жилүүдэд 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 хувьсагчид олгох болно. Хуудсаа харвал

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

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

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

RxJs санг ашиглан стримээс тараах өгөгдлүүдээс сонголтыг маш эвтэйхэн зохион байгуулах аргын талаар энэ хичээлээр үзнэ. Үүний тулд of аргаар энгийн Observable /ажиглагч/ -ийг

Rx.Observable.of(1, 5, 'Hello', 'World')
    .first()
    .subscribe(createSubscribe('first'));

index.js файлд үүсгэн өгье. Код RxJs сангийн Observable классын of аргаар Observable /ажиглагч/ -ийг үүсгээд түүнд subscribe аргаар бүртгүүлсэн. Аргад өөрсдийн зохиосон туслах createSubscribe функцийг дамжуулна.

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

Үйл явдал (events) – гэдэг нь хэрэглэгчийн үйлдлийн үр дүнд хуудас болон цонхны байдалд гарсан өөрчлөлтийг мэдэгдэхийг хэлнэ. Хэрэглэгч хуудастай ажиилах явцад эсвэл  хуудасны төлөвт өөрчлөлт гарах үед үйл явдал буюу event үүснэ. Энэ нь хулганыг хөдөлгөх, хулганы товч дээр дарах, гараас текст оруулах зэрэг байж болно. Хуудасны төлөвт өөрчлөлт гарах гэдэгт хуудас, обьект эсвэл зураг ачааллах, хуудас дээр алдаа гарах, нэг элементээс нөгөө элементэд фокус шилжих гэх мэт байж болно.

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

Ердийн өгөгдлүүдээс стримийг үүсгэх, төрөл бүрийн стримийг амархан үүсгэх боломжуудыг олгодог зарим туслах функцуудын талаар энэ хичээлд авч үзье.

of арга.

Функцийн боломжийг судлахын тулд index.js файлд доорх кодыг оруулан өгье.

Rx.Observable.of(5)
    .subscribe(
        (x) => console.log('Next :', x),
        (err) => console.log('Error :', err),
        () => console.log('Completed')
    );

Дээрх код бидний өмнөх хичээлд үзсэнтэй төстэй боловч энэ удаа Observable классын of аргаар 5 гэсэн тооноос стрим үүсгэж байгаа. Кодын ажиллагааг шалгахын тулд index.html файлыг хөтөч дээр нээгээд консолын цонхыг харвал

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

Хукууд ердийн функцууд тул бид ч өөрсдөө хукийг зохион ашиглах боломжтой. Үүнийг input элемент, түүнд оруулсан текстийг үзүүлэх h1 гарчиг бүхий дараах энгийн

import React, {useState} from 'react'

function App() {
  const [name, setName] = useState('')
 
  const changeHandler = event => {
    setName(event.target.value)  
  }
 
  return (
    <div className="container pt-3">
      <input type="text" value={name} onChange={changeHandler}/>
      <h1>{name}</h1>
    </div>      
  );
}

export default App;

жишээгээр харцгаая.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

тэгшитгэлийн нэг язгуур нь эерэг, нөгөө язгуур нь сөрөг байх параметрийн бүх утгыг ол.
Тэнцэтгэл бишийн нэг шийд нь M -ээс бага нөгөө шийд нь M -ээс их байх гарцаагүй ба хүрэлцээтэй нөхцөлийг ашиглавал болох бөгөөд энэ тэнцэтгэл бишийг бодвол үед манай тэнцэтгэл бишийн шийдийн нэг нь эерэг нөгөө нь сөрөг байна.

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

 

функц [1;9] завсарын аль хэсэгт буурах вэ?

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

 

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

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