Шинэ аргууд

EcmaScript 6 -гийн зарим обьектуудад шинээр бий болсон аргуудын талаар хичээлд авч үзье.

Обьектыг өргөжүүлэх

Обьектын өргөжүүлэлтийг хийх аргыг

let obj1 = {a: 1};
let obj2 = {b: 2, c: 3};

обьектууд дээр авч үзье. obj1 -ийг obj2 -оор өргөжүүлье гэвэл ES6 -д бий болсон assign аргыг

Object.assign(obj1,obj2);

ашигладаг. Аргад эхний параметрээр өргөжих /target/ обьектыг харин хоёрдахь параметрээр өргөжүүлэх /source/ обьектыг өгнө. Дээрх командын дараа

console.log('Obj1', obj1);
console.log('Obj2', obj2);

obj1 , obj2 обьектууд хэрхэн өөрчлөгдсөнг консолд харвал

гэж харагдана. source буюу obj2 обьект өөрчлөлтгүй харин target буюу obj1 обьект obj2 обьектоор өргөжсөн байгаа. assign аргаар обьектуудыг нэгтгэн шинэ обьектыг

let obj1 = {a: 1};
let obj2 = {b: 2, c: 3};
let obj4 = {d: 2, e: 3};

let obj3 = Object.assign({}, obj1, obj2, obj4);

console.log('Obj1', obj1);
console.log('Obj2', obj2);
console.log('Obj3', obj3);

үүсгэж болдог. Үүний тулд assign аргад эхний параметрээр хоосон обьектыг өгөөд араас нь үр дүнгийн обвектод нэгдэн орох обьектуудыг заан өгнө. Хуудсыг шинэчилбэл

консолд дээрх үр дүнг харуулна. Нэгтгэлд орж буй обьектуудад ямар нэгэн өөрчлөлт орохгүйгээр үр дүнгийн обьектод аргад өгсөн бүх обьектууд нэгдэн орсон байгаа.

Массивын аргууд

Массивт бий болсон find буюу хайлт хийдэг аргыг

let findedItem = [1, 2, 3, 4].find(x => x>2);
console.log(findedItem);

жишээгээр харцгаая. find арга [1, 2, 3, 4] массиваас 2 -оос их утгатай элементийг хайна гэдгийг ES6 -гийн сумаар тодорхойлогдох x => x>2 функцээр өгсөн. Хуудсаа шинэчилбэл консолд

үр дүнг харуулна. find арга нөхцөлд тохирсон эхний утгыг буцааж байгаад анхаарна уу.

Мөрийн аргууд

Мөр төрлийн өгөгдөлд шинээр бий аргуудтай

let str = 'Hello!';

console.log('Repeat:', str.repeat(3));
console.log('StartsWith:', str.startsWith('Hel'));
console.log('StartsWith:', str.startsWith('Hel', 1));
console.log('Includes:', str.includes('Hel'));
console.log('Includes:', str.includes('Hel', 1));

жишээгээр танилцая. Аргуудын ажиллагаа нэрнээсээ л ойлгомжтой тул тайлбарлах шаардлага байхгүй тул хуудсаа шиэчлээд үр дүнг харвал

гэж харуулна. repeat арга параметрээр өгөгдсөн хэмжээгээр мөрийг олшруулна. startsWith арга параметрээр өгөгдсөн утгаа мөр эхлэж байгааг шалгана. startsWith аргад хоёрдахь параметрээр мөрийн индексийг заавал тухайн индексээс мөр өгөгдсөн утгаар эхлэсэнг шалгана. Иймээс үр дүнд эхний startsWith арга true харин хоёрдахь нь false өгнө. Учир нь эхний аргад индексийг өгөөгүй тулд түүнийг 0 гэж үзээд str мөр Hel гэж эхлэж байгааг шалган true харин хоёрдахь удаад 1 -р индекс буюу ello! г Hel гэж эхлэж байгааг шалган false өгнө. includes аргын ажиллагаа startsWith аргатай ижилхэн боловч арга эхлэж буйг биш агуулж буйг шалгадагаараа ялгаатай.
Хичээлд EcmaScript 6 -д шинээр бий болсон үндсэн аргууд тэдгээрийг ашиглахтай танилцлаа. Аргуудыг ашиглах мэдлэгтэй болсон тул бусад аргуудын талаар та интернетээс судлан мэдэн авахад хүндрэл үүсэхгүй.

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

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

Vue -ийн хувийн амьдралын мөчлөгийн талаар авч үзье. Vue -гийн хувь бүрд өөрийн гэсэн амьдралын мөчлөг байдаг бөгөөд тодорхой  үе шатуудыг ажиглах боломжтой. Програмын амьдрах мөчлөгийн үе шатуудыг

    <body>
        <div id="app">
            <h2>{{ title }}</h2>
            <button @click="title = 'Гарчигийг өөрчлөв'">Гарчигийг өөрчлөх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    title: 'Vue програм'
                }
            })
        </script>        
    </body>

кодоор авч үзье. Код хуудаст title талбарыг үзүүлээд Гарчигийг өөрчлөх товчийг дарахад title талбарын утгыг өөрчлөнө. Бид ажиглалт хийж болох эхний үе шат бол Vue програмын инициализац юм. new Vue({ ... }) командаар Vue програмын инициализац хийгдэх боловч хэрэглэгч хуудсыг харах хүртэл хэдэн шатыг дамждаг.

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

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

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

Сүүлийн жилүүдэд 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'));

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

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

Сүүлийн жилүүдэд нэг хуудас буюу SPA програмын боловсруулалтад өргөнөөр ашиглах болсон Angular, React, Vue гэх мэт дэвшилтэд фреймвокүүдийн суулгах ажиллагаанд ямар нэгэн скриптүүд ашиглахгүй бүх ажлыг пакетын менежерээр /npm/ суулгадаг болсон.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

тэнцэтгэл биш хэдэн бүхэл тоон шийдтэй вэ?

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

 

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

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

 

b1=3, bn=96, Sn=189 геометр прогресийн 8-р гишүүнийг ол.

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