Массиваас стрим үүсгэх

Сүүлийн жилүүдэд Javascript хэл хөгжихийн хирээр түүнийг хэрэглэгч талын хуудасны хөгжүүлэлтэд улам ихээр ашиглан нэг хуудаст аппликашныг /SPA/ хийхэд өргөнөөр ашиглах боллоо. Цаашид Javascript програмистуудын эрэлт огцом өсөх хандлага бий болж байгаа тул та програмын чиглэлээр ажилладаг эсхүл суралцдаг бол сайтын хичээлүүдтэй танилцахыг санал болгоё. Хичээлд масиваас стрим үүсгэх боломжийг авч үзэх болно. Үүний тулд төслийн index.js файлд

function createSubscribe(name) {
    return {
        next(x) {
            console.log(name, ': ', x);
        },
        error(err) {
            console.log('Error: ', err);
        },
        complete() {
            console.log(name, ': Completed!');
        }
    }
}

Rx.Observable.from([1, 2, 3, 4])
    .subscribe(createSubscribe('from'));

кодыг оруулан өгье.

Масиваас стрим үүсгэхийн тулд Observable классын from аргыг ашигладаг. Аргад бид ямар нэгэн массивыг дамжуулах ёстой. Манай жишээнд 4 элемент бүхий [1, 2, 3, 4] массивыг дамжуулсан. Стримийг ажлуулахын тулд түүнд subscribe аргаар бүртгүүлэх ёстой гэдгийг бид мэднэ. Аргад манай боловсруулалтын createSubscribe функцыг from -ийг параметртэйгээр дамжуулна. Одоо хөтөч дээр index.html файлыг нээвэл консолын цонхонд

from арга түүнд дамжуулсан массиваас 4 стрим үүсгээд түүнийг дуусгасан үр дүнг харна. from арга дамжуулсан массивын элемент бүрээр циклдэн түүний утгыг тусдаа утга байдлаар тараадаг. Ер нь of аргатай их төстэй ч from арга массивтай ажиллана. Массивын элементээр дурын обьектыг дамжуулж болно. Жишээ нь кодод

const arr=[
    {
        id: 1,
        name: 'Улаанбаатар'
    },
    {
        id: 2,
        name: 'Москва'
    }
];

обьектуудын массив үүсгэн өгөөд түүнийг

Rx.Observable.from(arr)
    .subscribe(createSubscribe('from'));

from аргад дамжуулаад хөтөч дээр нээгдсэн хуудсаа шинэчилбэл

консолд массивын элементүүдийг обьект байдлаар хүлээн авна. Ингээд цааш тухайн обьекттой ажиллах боломжтой болно. Энэ бол массивын элементүүдээр хийсэн ердийн цикл.

ES6 бичлэгийн дүрмийн бүтцийг ашиглах.

JavaScript -ын ES6 хувилбарт бий болсон массив үүсгэх бүтцүүдийг ашиглан from аргатай ажиллах талаар авч үзье.
Жич: Бүх хөтөчүүд JavaScript -ын ES6 хувилбарыг бүрэн дэмждэг болоогүй байгаа гэдгийг сануулъя. Chrome, Firefox -ийн сүүлийн хувилбарууд ES6 -г дэмждэг учраас та өөрийн хөтөчөө сүүлийн хувилбар хүртэл шинэчилбэл асуудал үүсэхгүй.

Set бүтэц

ES6 -гийн Set бүтцийн байгуулагчид массивыг

const set = new Set([1, 2, 3 , '4', '5', {id: 6}]);

гэж дамжуулан сет үүсгээд түүнийг from аргад

Rx.Observable.from(set)
    .subscribe(createSubscribe('from'));

дамжуулаад хөтөч дээрх хуудсаа шинэчилбэл

сетийн элемент бүрээр циклдэн утгуудыг үзүүлсэн үр дүнг авна.

Map бүтэц      

ES6 -д бий болсон бас нэгэн бүтэц бол Map бөгөөд түүний байгуулагчид массивыг

const map = new Map([[1, 2], [3, 4], [5,6]]);

дамжуулаан map үүсгээд түүнээс from аргаар стрим үүсгэхийн тулд

Rx.Observable.from(map)
    .subscribe(createSubscribe('from'));

дамжуулбал

map -ын элемент бүрээр утгыг хүлээн авна.
Массив болон түүнтэй төстэй бүтцүүд from аргатай их сайн ажилладаг бөгөөд арга стримийг өөрөө бидний өмнөөс дуусгаж байгаад анхаарна уу.

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

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

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

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

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

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 файлыг хөтөч дээр нээгээд консолын цонхыг харвал

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

Зарим төрлийн бодлогыг бодоход нэг ижил үйлдлүүдийг олон дахин давтах тохиолдол гардаг. Практикт ийм төрлийн ажиллагааг циклээр шийдвэрлэнэ. Цикл гэдэг нь дараалсан үйлдлүүдийг тодорхой тоогоор давтан гүйцэтгэхийг хэлнэ. JavaScript -д хоёр төрлийн циклийн оператор байдаг.

  • Урьдчилсан нөхцөлтэй цикл
  • Параметртэй цикл

while оператор

while нь урьдчилсан нөхцөлт циклийн оператор болно. Тухайн оператор циклийн нөхцлийг биелэгдэхгүй болох хүртэл үйлдлүүдийг давтан хийдэг.

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

Өмнөх хичээлүүдэд бид create-react-app хэрэгслээр үүсгэсэн төслийн суурь код дээр жишээнүүдийг судласан. Одоо react төсөлд өөр компонентууд үүсгэн тэдгээрийг өөр хооронд нь холбон ашиглахыг сурцгаая. react -ийн компонентийг голдуу тусд нь хавтас үүсгэн байршуулдаг тул бид төслийн src хавтаст Car нэртэй хавтасыг үүсгээд түүн дотор Car.js файлыг үүсгээрэй.

react -д компонентийг үүсгэх хоёр үндсэн арга байдаг талаар JSX хичээлд дурдсан.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

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

 

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

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

 

Зурагт өгөгдсөн дотоод байдлаараа шүргэлцсэн хоёр тойргийн TA нь ерөнхий шүргэгч, TC нь том тойргийн огтлогч, жижиг тойргийн шүргэгч болно. DC=3, CB=2 бол TA -г ол.

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